/* ============================================================
   STOCK FIGHT — direction artistique calquée sur streetfighter.com/6
   Oswald condensé, fond noir graffiti, noir + blanc + lime #C8FF1F et rose #FF2E88 (spray SF6), plaques blanches.
   Parti pris assumé : un seul thème, le monde est nocturne.
   ============================================================ */
:root{
  --black:#0a0a0c;
  --wall:#121214;
  --wall2:#1a1a1f;
  --line:#2c2c34;
  --white:#ffffff;
  --dim:#a9a6b3;
  --violet:#c8ff1f;      /* lime SF6 : accent principal */
  --violet-lo:#3d5200;
  --magenta:#ff2e88;     /* rose SF6 : accent secondaire */
  --cyan:#19d9ff;
  --hp:#ffd400;
  --hp2:#b6ff3a;
  --hp-low:#ff2d2d;
  --p1:#ff4133;
  --p2:#19d9ff;
  --spray:radial-gradient(ellipse 34% 26% at 8% 12%,rgba(200,255,31,.16),transparent 70%),radial-gradient(ellipse 30% 30% at 92% 88%,rgba(255,46,136,.17),transparent 70%),radial-gradient(ellipse 22% 18% at 80% 10%,rgba(25,217,255,.10),transparent 70%);
  --dots:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);
  --disp:'Oswald',Impact,'Arial Narrow',sans-serif;
  --body:'Noto Sans',system-ui,-apple-system,sans-serif;
  --grain: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='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--black); color:var(--white);
  font-family:var(--body); font-size:16px; line-height:1.55; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--magenta);text-decoration:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- barre du haut ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  display:flex; align-items:center; gap:22px;
  padding:12px 18px; background:rgba(8,7,10,.94);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;letter-spacing:.04em}
.brand .a{font-size:19px}
.brand .mark{
  display:grid;place-items:center;width:26px;height:26px;background:var(--violet);
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); font-size:14px;color:#0b0410;font-weight:700;
}
.topnav{display:none;gap:20px;margin-left:8px}
.topnav a{
  font-family:var(--disp); font-weight:500; font-size:14px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--white); opacity:.82;
}
.topnav a:hover{opacity:1;color:var(--magenta)}
@media(min-width:900px){.topnav{display:flex}}
.cta{
  margin-left:auto; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; padding:11px 20px;
  background:linear-gradient(95deg,var(--violet-lo),var(--violet) 60%,var(--magenta));
  border:1px solid rgba(255,255,255,.65); clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.cta:hover{filter:brightness(1.15)}

/* ---------- la borne ---------- */
.cabinet{position:relative;background:#000;border-bottom:1px solid var(--line)}
#game{display:block;width:100%;height:auto;touch-action:none;background:#08070a}

.gamehud{
  position:absolute; inset:10px 12px auto 12px; display:grid;
  grid-template-columns:1fr auto 1fr; gap:12px; align-items:start; pointer-events:none;
}
.sideL,.sideR{min-width:0}
.plate{display:flex;gap:7px;align-items:baseline;margin-bottom:4px}
.plate.right{justify-content:flex-end}
.plate .tk{
  font-family:var(--disp);font-weight:700;font-size:clamp(14px,2.6vw,20px);letter-spacing:.04em;
  text-transform:uppercase;text-shadow:0 2px 0 #000,0 0 12px #000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plate .mv{font-weight:700;font-size:12px}
.mv.up{color:#8bff4a}.mv.down{color:var(--hp-low)}
.hpbar{height:clamp(14px,2.4vw,20px);background:rgba(0,0,0,.85);border:2px solid var(--white);transform:skewX(-16deg);overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(180deg,#d9ff4a,var(--hp) 52%,#ff9d00);transition:width .16s linear}
.hpbar.right i{margin-left:auto}
.hpbar i.low{background:linear-gradient(180deg,#ff8a7a,var(--hp-low))}
.under{display:flex;align-items:center;gap:8px;margin-top:5px}
.under.right{justify-content:flex-end}
.meter{flex:1;height:7px;background:rgba(0,0,0,.8);border:1px solid var(--line);transform:skewX(-16deg);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet-lo),var(--violet),var(--magenta));transition:width .2s linear}
.meter.right i{margin-left:auto}
.wins{font-size:13px;letter-spacing:3px;color:var(--violet);font-family:var(--disp)}
.mid{text-align:center}
.clock{
  font-family:var(--disp);font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1;
  color:#fff;text-shadow:0 3px 0 #000,0 0 26px rgba(200,255,31,.8);font-variant-numeric:tabular-nums;
}

.shout{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;
  font-family:var(--disp);font-weight:700;font-size:clamp(30px,8vw,84px);letter-spacing:.01em;
  color:#fff;text-transform:uppercase;transform:skewX(-10deg);
  text-shadow:0 0 34px rgba(255,46,136,.9),0 7px 0 #000;transition:opacity .12s linear;
}

/* manette tactile */
.pad{position:absolute;inset:auto 0 0 0;display:none;justify-content:space-between;padding:0 12px 14px;pointer-events:none}
.pad button{
  pointer-events:auto;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  background:rgba(12,9,18,.6);color:#fff;font-family:var(--disp);font-size:15px;font-weight:700;
}
.pad button.on{background:var(--violet);border-color:#fff}
.dpad{display:grid;grid-template-columns:repeat(2,52px);gap:8px}
.buttons{display:grid;grid-template-columns:repeat(2,52px);gap:8px}
.buttons .b4{background:rgba(255,46,136,.4);border-color:var(--magenta)}
@media(hover:none){body.in-fight .pad{display:flex}}
.legend{
  margin:0;padding:9px 14px;background:#050408;border-top:1px solid var(--line);
  font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-align:center;
}
.legend kbd{background:rgba(255,255,255,.1);border:1px solid var(--line);padding:2px 7px;margin:0 2px;color:#fff;font-family:var(--disp)}
@media(hover:none){.legend{display:none}}

/* trois règles compactes */
.threeup{display:grid;grid-template-columns:1fr;gap:16px;margin-inline:-18px;padding-inline:18px}
@media(min-width:800px){.threeup{grid-template-columns:repeat(3,1fr)}}
.threeup div{border-left:3px solid var(--violet);padding-left:14px}
.threeup .num{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--violet);display:block}
.threeup b{font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.03em;display:block;margin:2px 0 3px}
.threeup span{color:var(--dim);font-size:15px}

/* ---------- sections ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
section{padding-block:clamp(40px,7vw,78px);scroll-margin-top:72px}
.eyebrow{
  font-family:var(--disp);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--violet);
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
h2{
  font-family:var(--disp);font-weight:700;font-size:clamp(30px,6.4vw,62px);line-height:.98;
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px;text-wrap:balance;
}
h2 em{font-style:normal;color:var(--violet)}
.lede{color:var(--dim);max-width:62ch;margin:0 0 26px;font-size:17px}

.wallsec{
  background:
    linear-gradient(180deg,rgba(8,7,10,.92),rgba(8,7,10,.72)),
    var(--grain), linear-gradient(140deg,#17121f,#0d0b12);
  border-block:1px solid var(--line);
}

/* étapes */
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-left:3px solid var(--violet);padding:4px 0 4px 16px}
.step h3{font-family:var(--disp);font-size:20px;text-transform:uppercase;margin:0 0 4px;letter-spacing:.03em}
.step p{margin:0;color:var(--dim);font-size:15px}
.step .num{font-family:var(--disp);font-size:13px;color:var(--violet);letter-spacing:.2em}

/* règles chiffrées */
.rules{width:100%;border-collapse:collapse}
.rules th,.rules td{padding:11px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.rules th{color:var(--dim);font-weight:400;width:58%}
.rules td{font-family:var(--disp);font-size:17px;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* grille de sélection */
.select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.pick{
  position:relative;display:block;aspect-ratio:3/4;background:#000;overflow:hidden;
  border:1px solid var(--line); clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:transform .15s ease,border-color .15s ease;
}
.pick{cursor:pointer}
.pick:hover{transform:translateY(-3px);border-color:var(--violet)}
.pick.chosen{border-color:var(--magenta);box-shadow:0 0 0 2px var(--magenta) inset}
.pick img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.1)}
.pick .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:20px;color:var(--violet);background:linear-gradient(160deg,#241a33,#0f0b16)}
.pick .nm{
  position:absolute;left:0;right:0;bottom:0;padding:6px 7px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92) 45%);
  font-family:var(--disp);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick .lifeline{position:absolute;left:0;right:0;top:0;height:4px;background:rgba(0,0,0,.7)}
.pick .lifeline i{display:block;height:100%;background:var(--hp)}
.pick.hurt .lifeline i{background:var(--hp-low)}
.pick.hurt img{filter:grayscale(.75) brightness(.6)}

/* boss */
.boss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:9px}
.boss{
  display:flex;flex-direction:column;gap:3px;padding:12px;background:linear-gradient(150deg,var(--wall2),var(--wall));
  border:1px solid var(--line);border-left:3px solid var(--violet-lo);min-height:96px;color:inherit;
}
.boss:hover{border-left-color:var(--violet)}
.boss .tick{font-family:var(--disp);font-size:20px;letter-spacing:.04em}
.boss .co{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boss .lifeline{height:7px;margin-top:auto;background:#000;border:1px solid var(--line);overflow:hidden}
.boss .lifeline i{display:block;height:100%;background:var(--hp);transition:width .7s ease}
.boss.hurt .lifeline i{background:var(--hp-low)}
.boss.shut{opacity:.4}

/* nouveaux */
.chal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.chal{display:flex;gap:11px;align-items:center;padding:10px;background:var(--wall);border:1px solid var(--line)}
.chal .av{width:40px;height:40px;flex:0 0 40px;background:#000;border:1px solid var(--line);overflow:hidden}
.chal .av img{width:100%;height:100%;object-fit:cover}
.chal b{display:block;font-family:var(--disp);font-size:16px;letter-spacing:.04em}
.chal small{color:var(--dim);font-size:13px}
.chal .txt{min-width:0;overflow:hidden}

/* ceinture */
.belt-strip{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:800px){.belt-strip{grid-template-columns:1.5fr 1fr}}
.belt{
  display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(50,15,120,.55),rgba(18,16,22,.9));
}
.belt .face{width:74px;height:74px;flex:0 0 74px;border:2px solid var(--violet);background:#000;overflow:hidden}
.belt .face img{width:100%;height:100%;object-fit:cover}
.belt strong{display:block;font-family:var(--disp);font-size:30px;line-height:1;letter-spacing:.02em}
.nextup{padding:16px;border:1px solid var(--line);background:var(--wall);display:flex;flex-direction:column;justify-content:center}
.nextup strong{font-family:var(--disp);font-size:22px;letter-spacing:.03em;display:block;margin:5px 0}
.tag{font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--violet)}
.muted{color:var(--dim);font-size:14px}

/* preuve */
.proof-list{border:1px solid var(--line)}
.proof-list div{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 14px;border-bottom:1px solid var(--line)}
@media(min-width:700px){.proof-list div{grid-template-columns:200px 1fr;gap:14px;align-items:baseline}}
.proof-list div:last-child{border-bottom:0}
.proof-list dt{font-family:var(--disp);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.proof-list dd{margin:0;word-break:break-word}
.waiting{color:var(--dim);font-style:italic}

footer{border-top:1px solid var(--line);background:#050408}
.foot-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.foot-links a{
  font-family:var(--disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  border:1px solid var(--line);padding:10px 15px;
}
.foot-links a:hover{border-color:var(--violet);color:var(--magenta)}
.legal{color:#6f6780;font-size:13px;max-width:78ch;margin:0 0 12px}

/* portraits dans le HUD */
.plate .face{width:clamp(34px,5vw,54px);height:clamp(34px,5vw,54px);object-fit:cover;border:2px solid #fff;background:#000;align-self:center}
.plate.right .face{order:3}
.plate{align-items:center}

/* choix du personnage */
.chars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:760px}
.charbtn{
  position:relative;aspect-ratio:3/4;background:#000;border:2px solid var(--line);padding:0;cursor:pointer;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .15s,border-color .15s;
}
.charbtn img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.charbtn:hover{transform:translateY(-4px);border-color:var(--violet)}
.charbtn:hover img{transform:scale(1.06)}
.charbtn.chosen{border-color:var(--magenta);box-shadow:inset 0 0 0 3px var(--magenta)}
.charbtn .nm{position:absolute;left:0;right:0;bottom:0;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-family:var(--disp);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-align:left}

/* écran d'attente, façon borne */
.press-start[hidden]{display:none}
.press-start{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at center,rgba(8,7,10,.25),rgba(8,7,10,.78));border:0;cursor:pointer;color:#fff;
}
.press-start .ps-top{font-family:var(--disp);font-size:14px;letter-spacing:.4em;text-transform:uppercase;color:var(--violet)}
.press-start .ps-main{
  font-family:var(--disp);font-weight:700;font-size:clamp(40px,9vw,96px);line-height:1;text-transform:uppercase;letter-spacing:.02em;
  transform:skewX(-10deg);text-shadow:0 0 40px rgba(200,255,31,.9),0 8px 0 #000;animation:blink 1.1s steps(2) infinite;
}
.press-start .ps-sub{font-family:var(--disp);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@keyframes blink{50%{opacity:.35}}
.sound{
  position:absolute;right:12px;bottom:12px;z-index:5;font-family:var(--disp);font-size:11px;letter-spacing:.18em;
  background:rgba(8,7,10,.7);color:#fff;border:1px solid var(--line);padding:7px 10px;cursor:pointer;
}
.sound.off{color:var(--dim)}
@media(hover:none){.sound{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 150px);right:12px;font-size:10px;padding:5px 8px;opacity:.8}}

/* ===================== écrans du jeu ===================== */
.screen{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:18px;background:linear-gradient(180deg,rgba(8,7,10,.86),rgba(12,12,14,.92));
  background-image:var(--spray),linear-gradient(180deg,rgba(8,7,10,.86),rgba(12,12,14,.92)),var(--grain);
}
.screen::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--dots);background-size:7px 7px;opacity:.5;mix-blend-mode:screen}
.screen[hidden]{display:none}
.sc-title{
  font-family:var(--disp);font-weight:700;font-size:clamp(28px,6vw,64px);line-height:1;text-transform:uppercase;margin:0;
  letter-spacing:.02em;transform:skewX(-8deg);text-shadow:0 6px 0 #000,0 0 30px rgba(200,255,31,.35);
}
.sc-title em{font-style:normal;color:var(--violet);-webkit-text-stroke:1px rgba(0,0,0,.4)}
.sc-lead{max-width:60ch;text-align:center;margin:0;color:var(--dim);font-size:15px}
.sc-lead .up{color:#8bff4a}.sc-lead .down{color:var(--hp-low)}
.sc-hint{font-family:var(--disp);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0}

.charcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:min(1120px,100%)}
.charcard{
  position:relative;aspect-ratio:3/4;background:#000;border:2px solid var(--line);padding:0;cursor:pointer;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);transition:transform .15s,border-color .15s;
}
.charcard img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.charcard:hover,.charcard.focus{transform:translateY(-6px);border-color:var(--magenta)}
.charcard:hover img,.charcard.focus img{transform:scale(1.07)}
.charcard .nm{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(transparent,rgba(0,0,0,.92));text-align:left}
.charcard .nm b{display:block;font-family:var(--disp);font-size:clamp(14px,2.4vw,22px);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.charcard .nm span{font-size:12px;color:var(--dim)}

.tokencards{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;width:min(980px,100%);max-height:52vh;overflow:auto;padding:2px}
.tokencard{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:10px;background:rgba(0,0,0,.55);border:2px solid var(--line);
  cursor:pointer;color:#fff;text-align:left;transition:border-color .15s,transform .15s;
}
.tokencard:hover,.tokencard.focus{border-color:var(--magenta);transform:translateY(-3px)}
.tokencard .tl{width:44px;height:44px;border:2px solid #fff;background:#000;object-fit:cover}
.tokencard b{font-family:var(--disp);font-size:17px;letter-spacing:.04em}
.tokencard small{font-size:12px;color:var(--dim)}
.tokencard .pc{font-weight:700;font-size:13px}
.pc.up{color:#8bff4a}.pc.down{color:var(--hp-low)}

.screen.vs{flex-direction:row;gap:0;background:linear-gradient(100deg,rgba(255,65,51,.55),rgba(8,7,10,.92) 45%,rgba(8,7,10,.92) 55%,rgba(58,160,255,.55))}
.vs-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.vs-side img{height:78%;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7));animation:vsin .5s cubic-bezier(.2,.9,.2,1)}
.vs-side.r img{transform:scaleX(-1);animation-name:vsinr}
@keyframes vsin{from{transform:translateX(-60px);opacity:0}to{transform:none;opacity:1}}
@keyframes vsinr{from{transform:scaleX(-1) translateX(-60px);opacity:0}to{transform:scaleX(-1);opacity:1}}
.vs-info{position:absolute;bottom:14%;display:flex;flex-direction:column;align-items:center}
.vs-name{font-family:var(--disp);font-weight:700;font-size:clamp(20px,4vw,44px);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 4px 0 #000}
.vs-token{font-family:var(--disp);font-size:clamp(13px,2.2vw,20px);letter-spacing:.1em;color:var(--hp);text-shadow:0 2px 0 #000}
.vs-mid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(-12deg);font-family:var(--disp);font-weight:700;
  font-size:clamp(60px,14vw,150px);color:#fff;text-shadow:0 0 40px rgba(200,255,31,1),0 10px 0 #000;animation:slam .6s ease-out;
}
@keyframes slam{from{transform:translate(-50%,-50%) scale(3) skewX(-12deg);opacity:0}to{transform:translate(-50%,-50%) scale(1) skewX(-12deg);opacity:1}}

/* HUD : logos de token, graphiques, badge marché */
.plate .tlogo{width:22px;height:22px;object-fit:cover;border:1px solid var(--violet);background:#000}
.chart{display:flex;align-items:center;gap:8px;margin-top:5px}
.chart.right{justify-content:flex-end}
.chart canvas{width:min(300px,42vw);height:34px;background:rgba(0,0,0,.55);border:1px solid var(--line)}
.chart-lab{font-family:var(--disp);font-size:10px;letter-spacing:.16em;color:var(--dim);white-space:nowrap}
.chart-lab b{color:#fff}
.mid{position:relative;z-index:2}
.mkt{
  margin-top:6px;font-family:var(--disp);font-size:11px;letter-spacing:.3em;color:var(--violet);
  border:1px solid var(--violet);padding:3px 8px;opacity:.35;transition:opacity .2s,transform .2s;
}
.mkt.hit{opacity:1;color:#fff;background:var(--hp-low);border-color:#fff;transform:scale(1.15)}
.mkt.gain{opacity:1;color:#000;background:#8bff4a;border-color:#fff;transform:scale(1.15)}
@media(max-width:700px){.chart{display:none}}

/* bandeau marché */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(0,0,0,.72);border-top:1px solid var(--line);overflow:hidden;pointer-events:none}
.ticker-in{display:inline-block;white-space:nowrap;padding:6px 0 6px 100%;font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;animation:crawl 40s linear infinite}
.ticker-in .up{color:#8bff4a}.ticker-in .down{color:var(--hp-low)}.ticker-in i{color:var(--violet);font-style:normal;margin:0 14px}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.legend{padding-bottom:9px}
@media(hover:none){.ticker{bottom:auto;top:0;display:none}}

.howgrid{display:grid;grid-template-columns:1fr;gap:12px;width:min(900px,100%)}
@media(min-width:760px){.howgrid{grid-template-columns:repeat(3,1fr)}}
.howbox{background:rgba(0,0,0,.55);border:2px solid var(--line);padding:14px 16px;text-align:left}
.howbox.stock{border-color:var(--violet)}
.howbox .tag{display:block;margin-bottom:8px}
.howbox p{margin:0;font-size:15px;line-height:1.7;color:#e9e3f5}
.howbox kbd{font-family:var(--disp);background:rgba(255,255,255,.12);border:1px solid var(--line);padding:2px 8px;margin:0 2px;color:#fff}
.howbox .up{color:#8bff4a}.howbox .down{color:var(--hp-low)}
.gobtn{
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  padding:14px 46px;border:2px solid #fff;cursor:pointer;color:#000;
  background:linear-gradient(95deg,#fff 0 78%,var(--violet) 78%);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);animation:blink 1.4s steps(2) infinite;
}

.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floater{position:absolute;top:34%;font-family:var(--disp);font-weight:700;font-size:clamp(18px,3.4vw,40px);letter-spacing:.04em;text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.8);animation:floatup 1.1s ease-out forwards;white-space:nowrap}
.floater.l{left:22%}.floater.r{right:22%}
@keyframes floatup{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-70px)}}

/* ===================== plein écran ===================== */
html,body{height:100%;overflow:hidden}
.topbar{position:fixed;left:0;right:0;top:0;z-index:50;background:linear-gradient(180deg,rgba(8,7,10,.92),rgba(8,7,10,.55) 70%,transparent);border-bottom:0;backdrop-filter:none;padding:10px 16px}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs button{
  font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:transparent;border:1px solid transparent;padding:8px 12px;cursor:pointer;opacity:.75;
}
.tabs button:hover{opacity:1}
.tabs button.on{opacity:1;border-color:var(--violet);background:rgba(200,255,31,.12);color:var(--violet)}
.fs{margin-left:auto;background:transparent;border:1px solid var(--line);color:#fff;font-size:16px;padding:6px 10px;cursor:pointer}
.cabinet{position:fixed;inset:0;border:0;background:#000}
#game{height:100%!important;width:100%}
.gamehud{top:64px}
.ticker{bottom:0}
@media(max-width:700px){.tabs{display:none}.topbar{padding:8px 12px}}

/* case des commandes */
.keys{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:6;width:150px;background:rgba(8,7,10,.72);border:1px solid var(--line);backdrop-filter:blur(6px)}
.keys-toggle{width:100%;font-family:var(--disp);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--violet);background:transparent;border:0;border-bottom:1px solid var(--line);padding:7px;cursor:pointer}
.keys dl{margin:0;padding:6px 10px;display:grid;gap:5px}
.keys dl div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.keys dt{font-family:var(--disp);font-size:11px;color:#fff}
.keys dt kbd{font-family:var(--disp);background:rgba(255,255,255,.12);border:1px solid var(--line);padding:1px 5px;margin-right:2px}
.keys dd{margin:0;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.keys.folded dl{display:none}
@media(hover:none),(max-width:820px){.keys{display:none}}

/* rubriques par-dessus le jeu */
.panel{
  position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:70px 18px 24px;
  background:linear-gradient(180deg,rgba(8,7,10,.9),rgba(12,12,14,.95));background-image:linear-gradient(180deg,rgba(8,7,10,.9),rgba(12,12,14,.95)),var(--grain);
  overflow:auto;
}
.panel[hidden]{display:none}
.panel-close{position:absolute;right:16px;top:70px;width:40px;height:40px;background:transparent;border:1px solid var(--line);color:#fff;font-size:18px;cursor:pointer}
.panel .proof-list{width:min(760px,100%)}
.panel .legal{max-width:70ch;text-align:center}

.board{width:min(560px,100%);margin:0;padding:0;list-style:none;display:grid;gap:6px}
.board li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:9px 12px;background:rgba(0,0,0,.5);border:1px solid var(--line);font-family:var(--disp);letter-spacing:.06em}
.board li .pts{color:var(--hp)}
.board li.me{border-color:var(--magenta)}
.claim{display:grid;gap:8px;margin-top:10px}
.claim input{font:16px var(--body);padding:10px 12px;background:#000;border:1px solid var(--line);color:#fff}
.claim input:focus{outline:none;border-color:var(--violet)}
.gobtn.small{font-size:15px;padding:10px 24px;animation:none}
.row{display:flex;gap:10px}
.panel .howgrid .howbox p{font-size:15px}

.tokencards{display:block}
.tk-head{font-family:var(--disp);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--violet);margin:10px 0 8px}
.tk-head .up{color:#8bff4a}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;margin-bottom:14px}
.tokencard.stockcard{border-color:rgba(255,212,0,.45);background:rgba(20,16,0,.55)}
.tl.badge{display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px;color:#000;background:var(--hp);letter-spacing:.04em}

.quit{margin-left:auto;font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(255,45,45,.18);border:1px solid rgba(255,45,45,.7);padding:8px 12px;cursor:pointer}
.quit:hover{background:rgba(255,45,45,.4)}
.fs{margin-left:8px}
.tokencard .tl{object-fit:contain;background:#fff;padding:4px}
.plate .tlogo{object-fit:contain;background:#fff}

.ps-logo{width:min(520px,70vw);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.press-start .ps-main{font-size:clamp(26px,5vw,52px);margin-top:-6px}

.brand-logo{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
@media(max-width:700px){.brand-logo{height:34px}}

/* ===================== rubriques façon écran de jeu ===================== */
.panel{padding:70px 0 0;justify-content:flex-start;align-items:stretch;background:linear-gradient(180deg,rgba(8,7,10,.975),rgba(12,12,14,.985));background-image:var(--spray),linear-gradient(180deg,rgba(8,7,10,.975),rgba(12,12,14,.985)),var(--grain)}
.poster{display:grid;grid-template-columns:1fr;gap:22px;width:100%;max-width:1180px;margin:0 auto;padding:10px 20px 40px}
@media(min-width:900px){.poster{grid-template-columns:340px 1fr;gap:40px}}
.poster-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.poster-side .sc-title{text-align:left;font-size:clamp(34px,5vw,64px)}
.poster-sub{color:var(--dim);font-size:15px;line-height:1.6;margin:0;max-width:36ch}
.poster-pot{font-family:var(--disp);font-size:clamp(18px,2.4vw,26px);color:var(--hp);letter-spacing:.04em;margin:0;text-shadow:0 2px 0 #000}
.poster-emblem{width:150px;height:150px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))}
.poster-emblem.wide{width:220px;height:auto}
.poster-main{min-width:0}
.list-head{font-family:var(--disp);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--violet);margin:18px 0 8px;display:flex;gap:10px;align-items:center}
.list-head::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
.list-head:first-child{margin-top:0}

/* liste façon "command list" de jeu de combat */
.cmdlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cmdlist li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:9px 12px;background:rgba(0,0,0,.42);border-left:3px solid var(--line);transform:skewX(-6deg)}
.cmdlist li>*{transform:skewX(6deg)}
.cmdlist li.on{border-left-color:var(--hp)}
.cmdlist li.done{border-left-color:#8bff4a;opacity:.75}
.cmdlist .n{font-family:var(--disp);font-size:16px;color:var(--violet)}
.cmdlist .k{font-family:var(--disp);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.cmdlist .v{font-family:var(--disp);font-size:16px;color:var(--hp);white-space:nowrap}
.cmdlist .d{grid-column:1/-1;color:var(--dim);font-size:14px;margin-top:-4px}
.cmdlist.win li{grid-template-columns:1fr auto}
.cmdlist.win .d{grid-column:1/-1}
.cmdlist .bar{grid-column:1/-1;height:5px;background:#000;border:1px solid var(--line);overflow:hidden}
.cmdlist .bar i{display:block;height:100%;background:var(--hp)}
.cmdlist.board li{grid-template-columns:34px 1fr auto}
.cmdlist.board .who{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:15px}
.cmdlist.board .who img{width:26px;height:26px;object-fit:cover;object-position:top;border:1px solid var(--line)}
.cmdlist.board .who small{color:var(--dim);font-family:var(--body);font-size:12px}
.cmdlist.board li.me{border-left-color:var(--magenta);background:rgba(200,255,31,.12)}
.cmdlist.feed li{grid-template-columns:1fr auto;font-size:14px}
.cmdlist.feed .w{color:#8bff4a}.cmdlist.feed .l{color:var(--dim)}
.cmdlist.stocks li{grid-template-columns:44px 1fr auto auto}
.cmdlist.stocks img{width:36px;height:36px;object-fit:contain;background:#fff;padding:3px}
.cmdlist.stocks .co{color:var(--dim);font-size:13px;display:block}
.cmdlist.stocks .hp{width:110px;height:8px;background:#000;border:1px solid var(--line)}
.cmdlist.stocks .hp i{display:block;height:100%;background:var(--hp)}
.cmdlist.gains{width:min(520px,100%)}
.cmdlist.gains li{grid-template-columns:1fr auto}

/* pick du jour */
.pickrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.pickrow button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:rgba(0,0,0,.45);border:1px solid var(--line);cursor:pointer;color:#fff;font-family:var(--disp);font-size:12px}
.pickrow button img{width:34px;height:34px;object-fit:contain;background:#fff;padding:3px}
.pickrow button.on{border-color:var(--hp);box-shadow:inset 0 0 0 1px var(--hp)}
.pickrow button:disabled{opacity:.45;cursor:default}
.pickrow .pc{font-size:11px}

/* profil, compte */
.profile{display:grid;gap:12px;max-width:520px}
.profile label{display:grid;gap:4px;font-family:var(--disp);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet)}
.profile input,.profile select{font:16px var(--body);padding:10px 12px;background:#000;border:1px solid var(--line);color:#fff}
.profile input:disabled{color:var(--dim)}
.acct{width:min(420px,100%)}
.gobtn.alt{background:transparent;border-color:var(--violet);color:#fff}
.linkbtn{background:transparent;border:0;color:var(--dim);font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-size:12px;cursor:pointer;text-decoration:underline}
.hud-tag{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--hp);text-transform:uppercase}
.charcard.locked img{filter:grayscale(1) brightness(.45)}
.charcard.locked .nm span{color:var(--hp)}

/* ===================== téléphone ===================== */
@media(max-width:700px){
  .press-start{padding:0 18px}
  .press-start .ps-sub{white-space:normal;text-align:center;font-size:11px;line-height:1.6;max-width:100%}
  .press-start .ps-main{font-size:30px}
  .quit{font-size:10px;padding:7px 8px;letter-spacing:.08em}
  .fs{display:none}
  .brand-logo{height:30px}
  .menu-btn{display:inline-block;margin-left:auto;font-family:var(--disp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(200,255,31,.18);border:1px solid var(--violet);padding:7px 10px;cursor:pointer}
  .tabs.open{display:flex;position:fixed;left:0;right:0;top:52px;flex-direction:column;background:rgba(8,7,10,.96);padding:8px;z-index:60;border-bottom:1px solid var(--line)}
  .tabs.open button{text-align:left;padding:12px;font-size:14px}
  .gamehud{top:54px;inset-inline:8px;gap:6px}
  .plate .tk{font-size:12px}.plate .face{width:28px;height:28px}.plate .tlogo{width:16px;height:16px}.plate .mv{font-size:10px}
  .clock{font-size:26px}.mid{position:relative;z-index:2}
.mkt{font-size:9px;padding:2px 5px}
  .poster{padding:6px 12px 30px}.poster-side .sc-title{font-size:30px}
  .cmdlist li{padding:8px 8px;gap:8px}.cmdlist .k{font-size:14px}.cmdlist .v{font-size:14px}
  .charcards{grid-template-columns:repeat(2,1fr)}
  .tokencards{max-height:56vh}
  .screen{padding:60px 12px 12px;gap:12px}.sc-title{font-size:26px}.sc-lead{font-size:13px}
  .vs-side img{height:60%}.vs-name{font-size:22px}
}
.menu-btn{display:none}

/* écran titre vivant */
.live-strip{display:grid;gap:4px;margin-top:14px;justify-items:center;font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--dim)}
.ls-pot{color:var(--hp);font-size:15px}
.ls-clock{color:#fff}
.ls-feed{display:grid;gap:2px;margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:none;color:#cfc6e0}
.ls-feed b{color:#8bff4a}
/* boss du jour */
.bossbox{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:linear-gradient(100deg,rgba(255,65,51,.25),rgba(0,0,0,.5));border:1px solid rgba(255,212,0,.45);margin-bottom:14px}
.bossbox img{width:56px;height:56px;object-fit:contain;background:#fff;padding:5px;border:2px solid var(--hp)}
.bossbox .boss-txt{display:grid;gap:2px}.bossbox b{font-family:var(--disp);font-size:20px;letter-spacing:.04em}
.bossbox .gobtn.small{animation:none;white-space:nowrap}
.bossbox.closed{opacity:.6}.bossbox.closed .gobtn{display:none}
@media(max-width:700px){.bossbox{grid-template-columns:44px 1fr}.bossbox .gobtn{grid-column:1/-1}}

/* ---------- versus en ligne ---------- */
.tabs button.hot{color:var(--magenta);border-color:rgba(255,46,136,.55)}
.modes{display:flex;gap:10px;width:min(720px,100%)}
.modes button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;background:var(--wall);border:2px solid var(--line);color:var(--dim);cursor:pointer;text-align:left;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.modes button b{font-family:var(--disp);font-size:16px;letter-spacing:.12em;color:#fff}
.modes button span{font-size:12px}
.modes button.on{border-color:var(--violet);background:linear-gradient(95deg,rgba(200,255,31,.18),rgba(255,46,136,.14))}
.modes button.on b{color:var(--violet)}
.online-box{display:flex;flex-direction:column;gap:14px;width:min(640px,100%);background:rgba(8,7,10,.7);border:2px solid var(--line);padding:18px}
.online-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--dim)}
.online-row.invite input{flex:1;min-width:200px;background:#000;border:1px solid var(--line);color:#fff;padding:8px 10px;font:13px/1.2 ui-monospace,monospace}
.spin{width:16px;height:16px;border:3px solid var(--violet);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex:none}
.spin[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hud-tag.r{text-align:right}
@media(max-width:700px){.modes{flex-direction:column}}

.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.gobtn.small.alt{animation:none;text-decoration:none;display:inline-block}

/* ---------- stock power, market call, stock war ---------- */
.pow{font-family:var(--disp);font-size:10px;letter-spacing:.14em;color:#000;background:var(--violet);padding:1px 6px;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.pow[hidden]{display:none}
.callbtns{display:flex;gap:16px;width:min(640px,100%)}
.callbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 10px;border:3px solid var(--line);background:rgba(8,7,10,.7);color:#fff;cursor:pointer;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:transform .12s}
.callbtn b{font-family:var(--disp);font-size:36px;letter-spacing:.06em}
.callbtn span{font-size:13px;color:var(--dim)}
.callbtn.up{border-color:#8bff4a}.callbtn.up b{color:#8bff4a}
.callbtn.down{border-color:var(--hp-low)}.callbtn.down b{color:var(--hp-low)}
.callbtn:hover,.callbtn.focus{transform:translateY(-4px);background:rgba(255,255,255,.06)}
.linkbtn{background:none;border:0;color:var(--magenta);text-decoration:underline;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.cmdlist.war li{grid-template-columns:28px 40px 1fr auto}
.cmdlist.war img{width:28px;height:28px;object-fit:contain;background:#fff;padding:2px}
.cmdlist.war .bar{grid-column:1/-1;height:4px;background:var(--line)}.cmdlist.war .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--magenta))}
.cmdlist.war li.lead .k{color:var(--violet)}
.tokencard .pw{position:absolute;right:6px;top:6px;font-family:var(--disp);font-size:10px;letter-spacing:.12em;color:#000;background:var(--violet);padding:1px 5px}
.tokencard{position:relative}
@media(max-width:700px){.callbtns{flex-direction:column}.callbtn{padding:16px}}
.cmdlist.gains li.miss .k{color:var(--dim)}
.cmdlist.war li.empty{grid-template-columns:1fr}