/* ═══════════════════════════════════════════════════════════
   VISION SOLDIER — thème « Bitume » (Rixe de Paname)
   Noir asphalte, rouge sang, os sale, lampadaire sodium.
   Pas de vert : un dépôt se lit en sodium, un retrait en sang.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* surfaces */
  --ink-900:#08080A; --ink-800:#0C0C0F; --ink-700:#121217;
  --ink-600:#17171D; --ink-500:#1F1F27; --ink-400:#2A2A34;
  --line:#26262F; --line-2:#33333F;

  /* encres */
  --blood:#D5111F; --blood-hi:#FF2B3A; --blood-deep:#5E060D;
  --sodium:#FFA51F; --sodium-hi:#FFC768; --sodium-deep:#7A4A00;
  --bone:#EFE9E1; --ash:#96918A; --smoke:#605C58;

  /* type */
  --f-display:'Anton', Impact, sans-serif;
  --f-ui:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'Barlow', system-ui, sans-serif;
  --f-num:'JetBrains Mono', ui-monospace, monospace;

  /* rythme */
  --cut:13px;                       /* profondeur du chanfrein */
  --snap:cubic-bezier(.2,.9,.25,1);
  --t-fast:110ms; --t-mid:200ms; --t-slow:420ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--ink-900); color:var(--bone);
  font-size:15px; min-height:100dvh; overflow-x:hidden;
}
body::before{ /* halo de lampadaire, très loin derrière */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(255,165,31,.075), transparent 62%),
    radial-gradient(900px 700px at 8% 108%, rgba(213,17,31,.085), transparent 60%);
}
/* grain de pellicule — la seule texture, et elle est discrète */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
#app{position:relative;z-index:2}
::selection{background:var(--blood);color:#fff}
:focus-visible{outline:2px solid var(--sodium);outline-offset:2px}

a{color:var(--sodium);text-decoration:none}
a:hover{color:var(--sodium-hi)}

.mono{font-family:var(--f-num);font-size:.86em;letter-spacing:-.01em}
.muted{color:var(--ash)}
.faint{color:var(--smoke)}
[hidden]{display:none!important}

/* ─── plaque chanfreinée : la forme signature ─── */
.panel,.tile,.profile,.table-wrap{
  background:linear-gradient(160deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}

/* ═══════════ BOUTONS ═══════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;font-family:var(--f-ui);text-transform:uppercase;
  letter-spacing:.16em;font-weight:700;padding:14px 22px;font-size:15px;
  color:#fff;overflow:hidden;text-decoration:none;
  transition:transform var(--t-fast) var(--snap),box-shadow var(--t-fast),filter var(--t-fast);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn::after{ /* éclat qui balaie */
  content:'';position:absolute;inset:0 auto 0 -70%;width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-22deg);transition:left var(--t-slow) ease;
}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(2px)}
.btn--fight,.btn:not(.ghost){background:linear-gradient(135deg,var(--blood),var(--blood-deep));box-shadow:0 0 0 1px rgba(255,43,58,.35),0 6px 22px rgba(213,17,31,.22)}
.btn:not(.ghost):hover{box-shadow:0 0 0 1px var(--blood-hi),0 10px 30px rgba(213,17,31,.4);color:#fff}
.btn.ghost{
  background:var(--ink-700);border:1px solid var(--line-2);color:var(--ash);
  box-shadow:none;
}
.btn.ghost:hover{border-color:var(--blood);color:var(--bone);background:rgba(213,17,31,.1)}

/* ═══════════ AFFICHE (login / refus / hors ligne) ═══════════ */
.poster{
  position:relative;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;text-align:center;
}
.poster-tape{
  position:absolute;left:-6%;width:112%;height:26px;
  background:repeating-linear-gradient(45deg,var(--blood) 0 16px,var(--ink-900) 16px 32px);
  opacity:.8;
}
.poster-tape--top{top:34px;transform:rotate(-1.6deg)}
.poster-tape--bottom{bottom:34px;transform:rotate(1.2deg)}
.poster-inner{max-width:640px;width:100%}
.poster-kicker{
  font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.34em;
  font-size:11px;color:var(--ash);margin-bottom:26px;
}
.poster-title{
  font-family:var(--f-display);line-height:.82;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;
  font-size:clamp(52px,13vw,116px);letter-spacing:.005em;
  text-shadow:0 0 60px rgba(213,17,31,.28);
}
.poster-title span:first-child{color:var(--blood)}
.poster-sub{
  font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.52em;
  font-size:clamp(12px,2.4vw,17px);color:var(--sodium);margin-top:16px;
}
.poster-rule{height:2px;background:linear-gradient(90deg,transparent,var(--blood),transparent);margin:30px 0 22px}
.poster-billing{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--ash);
}
.poster-billing li::before{content:'✦ ';color:var(--blood)}
.poster-error{
  margin-top:22px;padding:12px 16px;font-size:14px;color:var(--blood-hi);
  border:1px solid rgba(213,17,31,.4);background:rgba(213,17,31,.08);
}
.poster-cta{margin-top:32px;min-width:290px;justify-content:center}
.poster-legal{margin-top:20px;font-size:11px;color:var(--smoke);letter-spacing:.06em}

/* ═══════════ COQUILLE ═══════════ */
header.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:11px 22px;background:rgba(8,8,10,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:9px;cursor:pointer;user-select:none;white-space:nowrap;line-height:1}
.brand .mark-1{font-family:var(--f-display);font-size:23px;text-transform:uppercase;color:var(--blood);letter-spacing:.01em}
.brand .mark-2{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--ash)}
.brand .tag{
  align-self:center;font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--smoke);border:1px solid var(--line-2);padding:3px 8px;
}

/* Recherche */
.search-wrap{position:relative;flex:1;max-width:520px;margin:0 auto}
.search-wrap input{
  width:100%;background:var(--ink-800);border:1px solid var(--line-2);
  color:var(--bone);font-family:var(--f-body);font-size:14px;
  padding:10px 14px 10px 38px;outline:none;transition:border-color var(--t-fast);
}
.search-wrap input::placeholder{color:var(--smoke)}
.search-wrap input:focus{border-color:var(--sodium)}
.search-wrap .icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--smoke);pointer-events:none;filter:grayscale(.6);
}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--ink-700);border:1px solid var(--line-2);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  max-height:380px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.search-results::-webkit-scrollbar{width:6px}
.search-results::-webkit-scrollbar-thumb{background:var(--line-2)}
.search-results .empty{padding:14px;color:var(--ash);font-size:13.5px}
.search-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);border-left:2px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.search-item:last-child{border-bottom:0}
.search-item:hover{background:rgba(213,17,31,.1);border-left-color:var(--blood)}
.search-item .counts{margin-left:auto;display:flex;gap:6px}

.userchip{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap}
.userchip img{width:32px;height:32px;border-radius:50%;border:2px solid var(--blood);object-fit:cover;background:var(--ink-600)}
.userchip .name{font-family:var(--f-ui);font-size:15px;font-weight:600;letter-spacing:.03em}
.userchip a.logout{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke);transition:color var(--t-fast);
}
.userchip a.logout:hover{color:var(--blood-hi)}

main{max-width:1180px;margin:0 auto;padding:26px 22px 60px;position:relative;z-index:2}

/* ═══════════ COMPOSANTS ═══════════ */
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--ink-500);border:1px solid var(--line-2);
  object-fit:cover;flex-shrink:0;
}

.badge{
  display:inline-block;font-family:var(--f-ui);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--ash);
}
.badge.deposit {border-color:rgba(255,165,31,.35);background:rgba(255,165,31,.08);color:var(--sodium)}
.badge.withdraw{border-color:rgba(213,17,31,.4);background:rgba(213,17,31,.1);color:var(--blood-hi)}
.badge.other   {border-color:var(--line-2);background:var(--ink-600);color:var(--ash)}
.badge.strike  {border-color:rgba(213,17,31,.4);background:rgba(213,17,31,.1);color:var(--blood-hi)}
.badge.severity{border-color:rgba(255,165,31,.35);background:rgba(255,165,31,.08);color:var(--sodium)}
.badge.neutral {border-color:var(--line-2);background:var(--ink-600);color:var(--smoke)}
.badge.cmd     {border-color:rgba(239,233,225,.28);background:rgba(239,233,225,.06);color:var(--bone)}

/* Tuiles stats */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.tile{padding:16px 18px}
.tile .label{
  font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--smoke);margin-bottom:7px;
}
.tile .value{font-family:var(--f-num);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .value.green{color:var(--sodium)}   /* pas de vert : un gain se lit en sodium */
.tile .value.red{color:var(--blood-hi)}

/* Panneaux */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.columns .panel.wide{grid-column:1/-1}
@media (max-width:900px){.columns{grid-template-columns:1fr}}
.cmd-text{
  display:inline-block;max-width:420px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:var(--ash);
}
@media (max-width:900px){.cmd-text{max-width:180px}}

.panel{overflow:hidden}
.panel-head{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-ui);font-weight:600;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;
}
.panel-head .count{
  margin-left:auto;color:var(--smoke);font-size:11px;letter-spacing:.14em;font-weight:500;
}

.feed{list-style:none}
.feed li{
  display:flex;align-items:center;gap:12px;padding:11px 18px;
  border-bottom:1px solid var(--line);border-left:2px solid transparent;
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.feed li:last-child{border-bottom:0}
.feed li:hover{background:var(--ink-600);border-left-color:var(--blood)}
.feed .who{min-width:0}
.feed .who .n{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.02em}
.feed .who .d{
  color:var(--smoke);font-size:12px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;
}
.feed .right{margin-left:auto;text-align:right;flex-shrink:0}
.feed .amount{font-family:var(--f-num);font-weight:600;font-size:13.5px}
.feed .amount.green{color:var(--sodium)}
.feed .amount.red{color:var(--blood-hi)}
.feed .when{color:var(--smoke);font-size:11.5px;margin-top:2px}
.feed .empty{padding:22px 18px;color:var(--ash);cursor:default}
.feed .empty:hover{background:none;border-left-color:transparent}

/* ═══════════ PAGE JOUEUR ═══════════ */
.back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:16px;cursor:pointer;transition:color var(--t-fast);
}
.back:hover{color:var(--blood-hi)}

.profile{
  display:flex;align-items:center;gap:20px;
  padding:22px 24px;margin-bottom:18px;flex-wrap:wrap;
}
.profile img.big{
  width:84px;height:84px;border:2px solid var(--blood);
  background:var(--ink-500);object-fit:cover;
}
.profile .idblock{min-width:0}
.profile h2{font-family:var(--f-display);font-size:26px;text-transform:uppercase;letter-spacing:.015em;line-height:1}
.profile .display{color:var(--ash);font-size:14px;margin-top:5px}
.profile .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  background:var(--ink-900);border:1px solid var(--line-2);color:var(--ash);
  font-family:var(--f-ui);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;
}
.chip b{color:var(--bone);font-weight:600}
.profile .actions{margin-left:auto}

/* Onglets */
.tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tab{
  background:none;border:0;color:var(--ash);cursor:pointer;
  font-family:var(--f-ui);font-size:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.tab:hover{color:var(--bone)}
.tab.active{color:var(--bone);border-bottom-color:var(--blood)}
.tab .pill{
  background:var(--ink-600);border:1px solid var(--line-2);
  font-family:var(--f-num);font-size:11px;padding:1px 7px;margin-left:6px;color:var(--sodium);
}

/* Tableaux */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-family:var(--f-ui);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--smoke);
  background:var(--ink-800);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px 14px;border-bottom:1px solid var(--ink-600);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover{background:var(--ink-600)}
td.num{font-family:var(--f-num);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
td .sub{color:var(--smoke);font-size:12px;margin-top:2px}
.cell-empty{text-align:center;color:var(--ash);padding:26px!important}

.pager{
  display:flex;align-items:center;gap:12px;justify-content:flex-end;
  padding:12px 2px;color:var(--ash);font-size:13px;
}
.pager button{
  padding:7px 14px;background:var(--ink-700);border:1px solid var(--line);color:var(--ash);
  font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.pager button:disabled{opacity:.32;cursor:default}
.pager button:not(:disabled):hover{border-color:var(--blood);color:var(--bone)}

/* Divers */
.loading{
  padding:60px 0;text-align:center;color:var(--smoke);
  font-family:var(--f-ui);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
}
.section-title{
  font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--smoke);margin:4px 0 12px;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:860px){
  header.topbar{padding:9px 12px;gap:10px}
  .brand .tag{display:none}
  .userchip .name{display:none}
  main{padding:16px 12px 60px}
  .profile{padding:18px 14px}
}
@media (max-width:560px){
  .brand .mark-2{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn::after{display:none}
}