/* ============================================================
   HITMYCLAWS
   Feuille de style : titre, manuel, pause, résultat, cadre 16:9
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

:root{
  --ink:#07080c;
  --night:#0b0d14;
  --steel:#151a25;
  --paper:#efe6d4;
  --ash:#9aa0ae;
  --rust:#ff5a1f;
  --rust-deep:#c2340c;
  --neon:#41e0d0;
  --acid:#c8f24a;
  --blood:#e22b3d;
  --pink:#ff3d8b;
  --stripe:#d8721c;
  --line:rgba(239,230,212,.14);
  --disp: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#000; }
body{
  display:grid; place-items:center;
  font-family:var(--cond);
  color:var(--paper);
  background:
    radial-gradient(120% 90% at 50% 0%, #171b26 0%, #07080c 60%, #000 100%);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

#stage{
  position:relative;
  width:1280px; height:720px;
  /* resize() positions the already-scaled 16:9 stage inside the viewport. */
  transform-origin:top left;
  background:#05060a;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 120px rgba(0,0,0,.9);
  container-type:size;
  flex:none;
}
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; -webkit-touch-callout:none; }

/* Texture pellicule + vignette au-dessus du canvas */
#grain{
  position:absolute; inset:-50%;
  pointer-events:none; z-index:3; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>");
  animation:grainShift .6s steps(2) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(-3%,2%); }
  100%{ transform:translate(2%,-2%); }
}
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.72), inset 0 0 60px rgba(0,0,0,.5);
  background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 18%, transparent 82%, rgba(0,0,0,.4));
}

/* ================= Écrans superposés ================= */
.screen{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:4.5cqh 5cqw;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(10,12,18,.55) 0%, rgba(5,6,9,.9) 65%, rgba(3,3,5,.98) 100%);
  backdrop-filter:blur(2.5px) saturate(.85);
  transition:opacity .28s ease, visibility .28s;
}
.screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#title-screen{background:radial-gradient(70% 64% at 52% 42%,rgba(10,12,18,.64),rgba(5,6,9,.84) 76%,rgba(3,3,5,.92));backdrop-filter:blur(1px) saturate(.95);}
#title-screen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 0 57%,rgba(65,224,208,.035) 57.1%,transparent 57.5%),radial-gradient(36% 40% at 79% 56%,rgba(255,90,31,.11),transparent 76%);}
#select-screen{padding:1.3cqh 1.5cqw;background:radial-gradient(70% 90% at 50% 30%,rgba(7,9,15,.72),rgba(4,5,9,.9));backdrop-filter:blur(1px) saturate(.92);}
.overlay::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  opacity:.6;
}

/* ---------- Titre ---------- */
.title-wrap{
  width:min(1120px, 100%);
  display:flex; flex-direction:column; align-items:center; gap:2.2cqh;
  text-align:center;
}
.kicker{
  display:flex; align-items:center; gap:1.2em;
  font-family:var(--cond); font-weight:700; letter-spacing:.42em;
  font-size:clamp(9px, 1.35cqw, 15px);
  color:var(--rust); text-transform:uppercase;
}
.kicker span{ width:clamp(24px, 5cqw, 70px); height:1px; background:linear-gradient(90deg, transparent, var(--rust)); }
.kicker span:last-child{ transform:scaleX(-1); }

.logo{
  font-family:var(--disp); line-height:.82; letter-spacing:.005em;
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 10px 0 rgba(0,0,0,.45)) drop-shadow(0 22px 40px rgba(0,0,0,.7));
  transform:rotate(-1.2deg);
}
.logo-top{
  font-size:clamp(38px, 8.7cqw, 110px);
  color:var(--paper);
  text-shadow:0 3px 0 #7d1e05, 0 6px 0 #511203, 0 10px 24px rgba(0,0,0,.6);
  display:flex; align-items:baseline; gap:.14em;
}
.logo-of{
  font-size:.44em; color:var(--rust); transform:translateY(-.18em) rotate(-6deg);
  letter-spacing:.04em;
  text-shadow:0 2px 0 #6d1a04;
}
.logo-bot{
  font-size:clamp(24px, 5.4cqw, 68px);
  color:var(--rust);
  display:flex; align-items:baseline; gap:.18em;
  text-shadow:0 3px 0 #4b1202, 0 7px 0 rgba(0,0,0,.35);
  transform:translateX(2.5cqw);
}
.logo-arena{
  color:var(--paper);
  font-size:.52em;
  letter-spacing:.16em;
  transform:translateY(-.12em);
  padding:.05em .1em .02em .16em;
  border:2px solid var(--neon);
  box-shadow:0 0 18px rgba(65,224,208,.35), inset 0 0 18px rgba(65,224,208,.14);
  color:var(--neon);
}
.tagline{
  font-size:clamp(12px, 1.7cqw, 19px); font-weight:600; font-style:italic;
  color:var(--ash); letter-spacing:.02em;
}

.title-panel{
  display:grid; grid-template-columns:1.15fr .95fr; gap:2.4cqw;
  width:100%; margin-top:1cqh;
  padding:2.2cqh 2.2cqw;
  background:
    linear-gradient(112deg, rgba(22,27,39,.82), rgba(10,13,20,.94) 72%);
  border:1px solid rgba(239,230,212,.2);
  box-shadow:0 30px 80px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08),0 0 48px rgba(65,224,208,.045);
  position:relative;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.title-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.014) 14px 15px);
}
.title-panel::before{content:"FIGHT CLUB · EST. AFTER DARK";position:absolute;right:1.7cqw;top:1.3cqh;font-size:9px;letter-spacing:.26em;color:rgba(239,230,212,.35);}
.profile{ display:flex; align-items:center; gap:1.6cqw; text-align:left; }
#portrait-title{
  width:clamp(150px, 16cqw, 208px); height:auto; aspect-ratio:1;
  border-radius:2px;
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(255,90,31,.22), transparent 70%),
    linear-gradient(160deg, #1c1f2a, #0c0e14);
  border:1px solid rgba(239,230,212,.28);
  box-shadow:inset 0 0 40px rgba(0,0,0,.8), 0 0 0 4px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.4),0 0 34px rgba(65,224,208,.12);
  flex:none;
}
.profile-tag{ font-size:clamp(8px,1.1cqw,12px); letter-spacing:.34em; color:var(--neon); font-weight:700; }
.profile h2{
  font-family:var(--disp); font-size:clamp(22px, 3.4cqw, 44px); line-height:.95;
  letter-spacing:.02em; color:var(--paper);
  text-shadow:0 3px 0 #3c0f02;
}
.profile-alias{ font-size:clamp(11px,1.4cqw,16px); color:var(--rust); font-style:italic; font-weight:600; margin-top:.2em; }
.traits{ list-style:none; margin-top:1.2cqh; display:flex; flex-direction:column; gap:.35cqh; }
.traits li{
  font-size:clamp(10px,1.3cqw,15px); color:#c9ccd6;
  padding-left:1.1em; position:relative;
}
.traits li::before{ content:"›"; position:absolute; left:0; color:var(--rust); font-weight:800; }
.traits b{ color:var(--paper); }

.start-col{ display:flex; flex-direction:column; justify-content:center; gap:1.1cqh; }
.btn{
  --b:var(--rust);
  appearance:none; cursor:pointer;
  font-family:var(--cond); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(12px,1.5cqw,17px);
  color:#140702;
  background:linear-gradient(180deg, #ff8b45, var(--rust) 55%, var(--rust-deep));
  border:0; padding:.95em 1.2em;
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  box-shadow:0 6px 0 #6d1c05, 0 14px 26px rgba(255,90,31,.18), inset 0 1px 0 rgba(255,255,255,.4);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:transform .08s, filter .15s, box-shadow .08s;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #6d1c05; }
.btn.big{ font-size:clamp(14px,1.85cqw,21px); padding:1.05em 1.2em; }
.btn.ghost{
  color:var(--paper);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:none; clip-path:none;
}
.btn.ghost:hover{ border-color:rgba(255,90,31,.5); color:#fff; }
.btn kbd, .btn kbd{
  font-family:var(--cond); font-size:.72em; font-weight:700; letter-spacing:.06em;
  padding:.22em .5em; border-radius:3px; background:rgba(0,0,0,.32);
  border:1px solid rgba(0,0,0,.35); color:inherit; opacity:.85;
}
.btn.ghost kbd{ background:rgba(255,255,255,.06); border-color:var(--line); }
.sound-row{ display:flex; align-items:center; gap:1em; margin-top:.6cqh; flex-wrap:wrap; }
.chip{
  appearance:none; cursor:pointer;
  font-family:var(--cond); font-weight:700; letter-spacing:.16em; font-size:clamp(9px,1.1cqw,12px);
  color:var(--neon); background:rgba(65,224,208,.07);
  border:1px solid rgba(65,224,208,.4); padding:.5em .9em; border-radius:999px;
}
.chip[aria-pressed="false"]{ color:var(--ash); border-color:var(--line); background:transparent; }
.hint{ font-size:clamp(9px,1.05cqw,12px); color:#6f7484; letter-spacing:.08em; }
.best{
  margin-top:.6cqh; font-size:clamp(9px,1.15cqw,13px); letter-spacing:.24em;
  color:var(--rust); font-weight:700;
}
.legal{ font-size:clamp(8px,.95cqw,11px); color:#565b69; letter-spacing:.1em; }
.legal::before{ content:"— "; }

/* ---------- Panneaux (manuel / pause / résultat) ---------- */
.panel{
  position:relative; width:min(900px,100%);
  background:linear-gradient(180deg, #171c27 0%, #0d1017 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(16px,2.4cqh,28px) clamp(18px,2.6cqw,34px);
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.panel::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--rust), transparent 55%, var(--neon));
  opacity:.85;
}
.panel.wide{ width:min(1060px, 100%); }
.panel.narrow{ width:min(470px,100%); text-align:center; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-bottom:1.8cqh; }
.panel-head h2{
  font-family:var(--disp); font-size:clamp(18px,2.7cqw,34px); letter-spacing:.03em;
  color:var(--paper); text-shadow:0 2px 0 #000;
}
.x{
  appearance:none; cursor:pointer; width:2.2em; height:2.2em; flex:none;
  background:transparent; color:var(--ash); border:1px solid var(--line);
  font-size:clamp(12px,1.4cqw,16px); line-height:1; border-radius:2px;
}
.x:hover{ color:#fff; border-color:var(--rust); }

.touch-help{ display:none; }
body.touch .touch-help{ display:block; }
body.touch .kb-only, body.touch .btn kbd{ display:none; }
.help-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:3cqw; text-align:left; }
.help-col h3{
  font-family:var(--cond); font-weight:800; letter-spacing:.28em; font-size:clamp(9px,1.2cqw,13px);
  color:var(--rust); text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.5em; margin:.4cqh 0 1.2cqh;
}
.help-col h3:not(:first-child){ margin-top:2.2cqh; }
.keys{ list-style:none; display:flex; flex-direction:column; gap:.7cqh; }
.keys li{ font-size:clamp(10px,1.35cqw,15px); color:#b9bec9; display:flex; align-items:center; gap:.35em; flex-wrap:wrap; }
.keys em{ font-style:normal; color:#666c7a; font-size:.85em; }
.keys b{ color:var(--paper); }
.kb{
  display:inline-grid; place-items:center; min-width:1.9em; height:1.9em; padding:0 .4em;
  font-family:var(--cond); font-weight:700; font-size:.85em; color:var(--paper);
  background:linear-gradient(180deg,#2a3040,#141821);
  border:1px solid rgba(255,255,255,.16); border-bottom-width:3px; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.move{
  border-left:2px solid rgba(255,90,31,.5); padding:.2em 0 .2em .9em; margin-bottom:1.1cqh;
}
.mname{ display:block; font-family:var(--cond); font-weight:800; font-size:clamp(11px,1.5cqw,17px); color:var(--paper); letter-spacing:.05em; }
.mcmd{
  display:inline-block; font-family:var(--cond); font-weight:700; font-size:clamp(9px,1.2cqw,13px);
  color:var(--neon); letter-spacing:.06em; margin:.1em 0 .3em;
}
.mcmd b{ color:var(--paper); background:rgba(255,255,255,.08); padding:0 .35em; border-radius:2px; }
.mcmd small{ color:#777d8c; letter-spacing:.04em; }
.move p{ font-size:clamp(9px,1.2cqw,14px); color:#8f95a2; line-height:1.35; }
.move.fatal{ border-left-color:var(--blood); }
.move.fatal .mcmd{ color:#ff7d8c; }
.panel-foot{
  margin-top:2.2cqh; padding-top:1.4cqh; border-top:1px solid var(--line);
  font-size:clamp(9px,1.15cqw,13px); color:#6f7484; text-align:left; letter-spacing:.04em;
}

.pause-list{ display:flex; flex-direction:column; gap:1.1cqh; margin:1.6cqh 0; }
.fine{ font-size:clamp(9px,1.1cqw,12px); color:#5c616f; font-style:italic; }

.result .kicker{ justify-content:center; }
.result h2{
  font-family:var(--disp); font-size:clamp(34px,6.4cqw,78px); line-height:.9;
  color:var(--paper); letter-spacing:.01em;
  text-shadow:0 4px 0 #4b1202, 0 10px 30px rgba(255,90,31,.25);
  margin:.6cqh 0;
}
.result .tagline{ margin-bottom:1.6cqh; }
.result-rivalry{display:flex;align-items:center;justify-content:center;gap:1em;margin:1.1cqh auto .8cqh;padding:.75em .9em;border:1px solid rgba(239,230,212,.16);background:rgba(255,255,255,.035);font:800 clamp(11px,1.25cqw,15px)/1 var(--cond);letter-spacing:.12em;}
.result-rivalry span{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--paper);}
.result-rivalry b{font:900 clamp(15px,1.9cqw,23px)/1 var(--disp);color:var(--rust);}
.result .share{background:linear-gradient(110deg,#d8f447,#9bc52d);color:#11150a;border-color:rgba(235,255,150,.85);box-shadow:0 7px 22px rgba(200,242,74,.16);}
.result .share:hover{filter:brightness(1.08);}

/* Mode Arcade & Badges */
.btn.highlight{
  background:linear-gradient(110deg,#ff9d26,#ff5a1f 65%,#c4210a);
  color:#fff;
  border-color:rgba(255,230,160,.6);
  box-shadow:0 8px 24px rgba(255,90,31,.35);
  font-weight:800;
}
.btn.highlight:hover{filter:brightness(1.12);transform:translateY(-1px);}

.launch-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9cqh;
}

.launch-arcade {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1cqh 1.4cqw;
}
.launch-arcade span {
  font-family:var(--disp);
  font-size:clamp(14px,1.8cqw,22px);
  letter-spacing:.04em;
}
.launch-arcade small {
  font-family:var(--cond);
  font-size:clamp(9px,1cqw,12px);
  letter-spacing:.14em;
  color:#ffe0b2;
  margin-left:.6em;
  text-transform:uppercase;
}
.launch-arcade b {
  font-size:1.3em;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.6));
}

/* Coups spéciaux dans la vitrine du personnage */
.showcase-moves {
  display:flex;
  flex-direction:column;
  gap:.35em;
  margin-top:.7em;
  padding-top:.6em;
  border-top:1px solid rgba(255,255,255,.14);
}
.showcase-move-badge {
  display:flex;
  align-items:baseline;
  gap:.5em;
  font-size:clamp(8px,.85cqw,11px);
  color:#ccd0db;
}
.showcase-move-badge .sm-label {
  font-family:var(--cond);
  font-weight:800;
  font-size:.85em;
  letter-spacing:.12em;
  color:var(--card-accent,var(--rust));
  background:rgba(0,0,0,.45);
  padding:.15em .45em;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.1);
}
.showcase-move-badge b {
  font-weight:600;
  color:var(--paper);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.showcase-move-badge.super .sm-label {
  color:#ffeb3b;
  border-color:rgba(255,235,59,.4);
  background:rgba(40,30,0,.6);
}

/* Boîte de punchline / roast & statistiques sur l'écran résultat */
.result-roast-box {
  margin: .8cqh auto;
  padding: .65em 1.1em;
  background: rgba(255,90,31,.1);
  border-left: 3px solid var(--rust);
  border-radius: 3px;
  max-width: 90%;
}
.result-roast-box blockquote {
  margin: 0;
  font-family: var(--sans);
  font-style: italic;
  font-size: clamp(10px, 1.25cqw, 14px);
  line-height: 1.35;
  color: #ffc9a8;
}
.result-stats-strip {
  display: flex;
  justify-content: space-around;
  margin: .8cqh 0;
  padding: .55em .8em;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(9px, 1.15cqw, 13px);
  letter-spacing: .08em;
  color: #9299a8;
}
.result-stats-strip b {
  color: var(--gold);
  margin-left: .25em;
}

/* ---------- Sélection des combattants et des arènes ---------- */
.select-panel{
  position:relative; width:min(1190px,100%); max-height:100%; overflow:auto;
  display:flex; flex-direction:column; gap:1.15cqh;
  padding:1.8cqh 2cqw;
  background:linear-gradient(112deg,rgba(13,16,24,.98),rgba(18,21,31,.98) 56%,rgba(8,10,16,.99));
  border:1px solid rgba(239,230,212,.2);
  box-shadow:0 34px 100px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.07);
}
.select-panel::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--rust),#d8a66a 48%,var(--neon));}
.select-panel::after{content:"";position:absolute;right:2cqw;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.09) 20%,rgba(255,255,255,.03) 80%,transparent);pointer-events:none;}
.select-head{display:flex;align-items:center;justify-content:space-between;gap:1em;}
.select-head h2{font-family:var(--disp);font-size:clamp(20px,2.5cqw,32px);line-height:1;color:var(--paper);margin-top:.12em;}
.select-back{font-size:clamp(10px,1.15cqw,13px);padding:.72em .9em;}
.selection-main{display:grid;grid-template-columns:minmax(245px,.76fr) minmax(0,1.6fr);gap:1.45cqw;min-height:0;}
.character-showcase{position:relative;isolation:isolate;min-height:270px;overflow:hidden;background:linear-gradient(135deg,#273145,#10141e);border:1px solid rgba(239,230,212,.2);box-shadow:inset 0 0 50px rgba(0,0,0,.5);}
.character-showcase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:-2;transition:opacity .18s,transform .45s;}
.character-showcase::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,10,16,.12),transparent 55%),linear-gradient(0deg,rgba(5,7,11,.98),rgba(5,7,11,.68) 28%,rgba(5,7,11,.08) 76%);}
.showcase-shade{position:absolute;inset:0;border:1px solid rgba(255,255,255,.09);pointer-events:none;}
.showcase-index{position:absolute;left:1em;top:1em;display:flex;align-items:center;gap:.65em;font-size:9px;letter-spacing:.25em;color:rgba(255,255,255,.62);}
.showcase-index b{font-weight:700;color:var(--paper);letter-spacing:.12em;}
.showcase-copy{position:absolute;left:1.15em;right:1.15em;bottom:1em;}
.showcase-style{font-size:clamp(8px,.86cqw,11px);font-weight:800;letter-spacing:.19em;color:#efb76b;}
.showcase-copy h3{font-family:var(--disp);font-size:clamp(27px,3.5cqw,44px);line-height:.9;letter-spacing:.015em;color:var(--paper);text-shadow:0 3px 16px #000;margin:.18em 0 .12em;}
.showcase-copy>p:not(.showcase-style){font-size:clamp(10px,1.1cqw,14px);font-style:italic;color:#c6c8d0;}
.showcase-mark{position:absolute;right:.1em;top:.35em;color:rgba(255,255,255,.06);font-family:var(--disp);font-size:clamp(74px,11cqw,150px);line-height:1;transform:rotate(-8deg);pointer-events:none;}
.stat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.65em;margin-top:.9em;}
.stat-item{font-family:var(--cond);font-size:8px;letter-spacing:.12em;color:#9ea4b2;}
.stat-track{display:block;height:3px;background:rgba(255,255,255,.16);margin-top:.35em;}
.stat-fill{display:block;height:100%;background:var(--card-accent,var(--rust));box-shadow:0 0 8px color-mix(in srgb,var(--card-accent,var(--rust)) 65%,transparent);}
.select-choices{display:flex;flex-direction:column;justify-content:space-between;gap:1.1cqh;min-width:0;}
.pick-block,.stage-pick{min-width:0;}
.pick-block h3,.stage-pick h3{display:flex;align-items:baseline;font-family:var(--cond);font-size:clamp(10px,1.15cqw,14px);letter-spacing:.2em;color:#ccd0db;margin:0 0 .55em;}
.pick-block h3 span,.stage-pick h3 span{color:var(--rust);margin-right:.55em;}
.pick-block h3 small{margin-left:auto;font-size:.72em;font-weight:600;letter-spacing:.12em;color:#767d8d;}
.roster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65cqw;}
.roster-card,.stage-card{
  appearance:none;position:relative;min-width:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.13);color:var(--paper);text-align:left;
  background:linear-gradient(145deg,#222837,#11141d);transition:border-color .15s,transform .15s,box-shadow .15s,filter .15s;
}
.roster-card{height:clamp(104px,16cqh,128px);padding:.5cqh .5cqw;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.35em;background:linear-gradient(145deg,#252b39,#10131b);}
.roster-card:hover,.stage-card:hover{transform:translateY(-2px);filter:brightness(1.12);border-color:rgba(255,255,255,.42);}
.roster-card.selected,.stage-card.selected{border-color:var(--card-accent,var(--rust));box-shadow:0 0 0 2px color-mix(in srgb,var(--card-accent,var(--rust)) 42%,transparent),0 0 22px color-mix(in srgb,var(--card-accent,var(--rust)) 24%,transparent);}
.roster-card img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 28%;background:#0b0e15;filter:saturate(.82);transition:filter .15s,transform .3s;}
.roster-card.selected img{filter:saturate(1.12);}
.roster-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.14em;white-space:nowrap;overflow:hidden;}
.roster-card strong{font-family:var(--disp);font-size:clamp(11px,1.25cqw,16px);line-height:1;overflow:hidden;text-overflow:ellipsis;}
.roster-card small{font-size:clamp(8px,.8cqw,10px);color:var(--card-accent,var(--ash));letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;}
.stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8cqw;}
.stage-card{height:clamp(82px,12cqh,104px);background-size:cover;background-position:center 58%;}
.stage-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.96),rgba(5,7,11,.1) 82%);transition:background .15s;}
.stage-card.selected::before{background:linear-gradient(0deg,rgba(5,7,11,.92),rgba(8,10,16,.02) 75%);}
.stage-card-copy{position:absolute;left:.72em;right:.5em;bottom:.5em;display:flex;flex-direction:column;gap:.12em;}
.stage-card strong{font-family:var(--disp);font-size:clamp(12px,1.35cqw,17px);line-height:1.05;text-shadow:0 2px 8px #000;}
.stage-card small{font-size:clamp(8px,.9cqw,11px);color:#d3d3d8;letter-spacing:.1em;text-transform:uppercase;}
.select-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-top:.9cqh;border-top:1px solid var(--line);}
#selection-summary{font-size:clamp(10px,1.15cqw,14px);letter-spacing:.05em;color:#aeb4c1;}
#btn-fight{min-width:205px;}

#rotate-hint{ display:none; }

@media (max-width:760px){
  .title-panel{ grid-template-columns:1fr; }
  .profile{ justify-content:center; }
  .help-grid{ grid-template-columns:1fr; gap:1.4cqh; overflow:auto; max-height:62cqh; }
  .traits{ display:none; }
  .selection-main{grid-template-columns:minmax(205px,.7fr) minmax(0,1.5fr);}
  .select-panel{gap:1cqh;padding:1.5cqh 2cqw;}
  .character-showcase{min-height:230px;}
}
/* Portrait sur téléphone : resize() (game.js) tourne le cadre 16:9 de 90°
   au lieu d'étirer le ring en carré. */

/* ---------- Vitrine marketing : entrée du jeu ---------- */
#title-screen.launch-screen{
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(58% 90% at 78% 48%,rgba(255,87,38,.12),transparent 74%),
    linear-gradient(110deg,#0c0d14 0%,#11131c 52%,#0a0c12 100%);
  backdrop-filter:none;
}
#title-screen.launch-screen::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,10,.25),transparent 58%),radial-gradient(55% 90% at 86% 49%,rgba(65,224,208,.08),transparent 70%);
}
#title-screen.launch-screen::before{opacity:.28;}
.launch-shell{
  position:relative;z-index:1;width:100%;height:100%;min-height:0;
  display:flex;flex-direction:column;padding:3.6cqh 5.1cqw 2.8cqh;
}
.launch-topbar{height:8.5cqh;flex:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(239,230,212,.13);}
.brand-lockup{display:flex;align-items:center;gap:.7cqw;color:var(--paper);text-decoration:none;font:clamp(14px,1.8cqw,22px)/.84 var(--disp);letter-spacing:.035em;}
.brand-lockup img{width:clamp(34px,4.3cqw,54px);height:clamp(34px,4.3cqw,54px);border-radius:13px;box-shadow:0 0 22px rgba(255,90,31,.15);}
.brand-lockup b{color:var(--rust);font-size:1em;}
.brand-lockup small{display:block;margin-top:.42em;color:#89909d;font:700 .47em/1 var(--cond);letter-spacing:.28em;}
.launch-edition{display:flex;align-items:center;gap:.65em;font:700 clamp(9px,.96cqw,12px)/1 var(--cond);letter-spacing:.2em;color:#858b98;}
.launch-edition i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px rgba(200,242,74,.8);}
.launch-edition b{color:#d9dce2;font-weight:700;}
.launch-edition span{color:var(--rust);}
.launch-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:3.1cqw;padding:2.3cqh 0 1.4cqh;}
.launch-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;}
.launch-eyebrow{display:flex;align-items:center;gap:.9em;margin-bottom:1.6cqh;color:#aeb4c1;font:800 clamp(10px,1.18cqw,14px)/1 var(--cond);letter-spacing:.25em;}
.launch-eyebrow span{color:var(--neon);}
.launch-eyebrow i{width:32px;height:1px;background:var(--rust);}
.launch-copy h1{font:normal clamp(61px,8.5cqw,112px)/.83 var(--disp);letter-spacing:-.025em;color:#f4eddd;text-shadow:0 5px 0 rgba(71,20,8,.78),0 20px 42px rgba(0,0,0,.5);}
.launch-copy h1 em{font-style:normal;color:var(--rust);text-shadow:0 4px 0 #651b08,0 0 38px rgba(255,90,31,.2);}
.launch-pitch{max-width:37ch;margin-top:2.1cqh;color:#b7bdc8;font:600 clamp(15px,1.75cqw,21px)/1.28 var(--cond);letter-spacing:.025em;}
.launch-actions{display:flex;flex-direction:column;gap:.95cqh;margin-top:2.8cqh;width:min(435px,100%);}
.btn.launch-cta{width:100%;min-height:8.8cqh;padding:0 1.35em;position:relative;color:#160802;font-size:clamp(16px,2.1cqw,26px);letter-spacing:.12em;clip-path:polygon(0 0,calc(100% - 19px) 0,100% 19px,100% 100%,19px 100%,0 calc(100% - 19px));box-shadow:0 7px 0 #6d1c05,0 18px 38px rgba(255,90,31,.26),inset 0 1px 0 rgba(255,255,255,.52);}
.btn.launch-cta b{display:grid;place-items:center;width:1.7em;height:1.7em;border:1px solid rgba(34,12,4,.35);font-size:1em;line-height:1;}
.btn.launch-cta:hover{filter:brightness(1.12);transform:translateY(-2px);}
.launch-secondary{display:flex;gap:.65cqw;}
.launch-secondary .btn{flex:1;justify-content:center;min-height:5.8cqh;font-size:clamp(10px,1.15cqw,14px);letter-spacing:.13em;}
.launch-proof{display:flex;align-items:center;gap:1.15em;margin-top:2.8cqh;color:#838a98;font:700 clamp(9px,1cqw,12px)/1 var(--cond);letter-spacing:.15em;}
.launch-proof span{white-space:nowrap;}
.launch-proof b{margin-right:.3em;color:var(--paper);font:normal clamp(18px,2cqw,24px)/1 var(--disp);letter-spacing:0;}
.launch-proof i{width:1px;height:22px;background:rgba(239,230,212,.2);}
.launch-showdown{height:min(62cqh,100%);min-height:0;max-width:670px;width:100%;justify-self:center;position:relative;isolation:isolate;filter:drop-shadow(0 30px 42px rgba(0,0,0,.56));}
.showdown-scene{position:absolute;inset:5% 0 3%;z-index:-2;background-image:linear-gradient(180deg,rgba(8,10,17,.08),rgba(8,10,17,.42) 70%,#0c0e15 100%),linear-gradient(90deg,rgba(7,9,15,.2),rgba(7,9,15,.12)),url('../assets/web/stages/toits-carte.webp');background-size:cover;background-position:center 43%;clip-path:polygon(12% 0,100% 3%,88% 100%,0 92%);opacity:.95;}
.showdown-scene::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,90,31,.13),transparent 46%,rgba(65,224,208,.15));mix-blend-mode:screen;}
.launch-showdown::before{content:"";position:absolute;inset:13% 4% 6%;z-index:-1;border:1px solid rgba(239,230,212,.15);transform:rotate(-4deg);background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(5,7,12,.05));}
.duel-cat{position:absolute;top:8%;width:56%;height:80%;margin:0;overflow:hidden;border:1px solid rgba(239,230,212,.38);background:#11151f;box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 0 7px rgba(8,10,16,.32);}
.duel-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(5,6,10,.2) 67%,rgba(5,6,10,.94) 100%);}
.duel-cat img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;filter:saturate(.9) contrast(1.05);}
.duel-cat-left{left:1%;transform:rotate(-6deg) translateY(3%);border-color:rgba(255,110,55,.7);}
.duel-cat-right{right:0;top:13%;height:77%;transform:rotate(5deg);border-color:rgba(65,224,208,.65);}
.duel-cat figcaption{position:absolute;z-index:1;left:8%;right:5%;bottom:6%;display:flex;flex-direction:column;gap:.2em;text-shadow:0 2px 10px #000;}
.duel-cat figcaption small{color:var(--neon);font:800 clamp(9px,.95cqw,12px)/1 var(--cond);letter-spacing:.23em;}
.duel-cat-left figcaption small{color:#ff8952;}
.duel-cat figcaption b{font:normal clamp(19px,2.7cqw,34px)/.95 var(--disp);color:#f3ecdd;letter-spacing:.015em;}
.duel-vs{position:absolute;z-index:4;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-8deg);display:grid;place-items:center;width:clamp(57px,7.8cqw,94px);height:clamp(57px,7.8cqw,94px);border:2px solid #f6ead9;border-radius:50%;background:linear-gradient(145deg,#ff7840,#c52c0c);color:#fff5e7;font:normal clamp(29px,4.5cqw,54px)/1 var(--disp);text-shadow:0 3px 0 #681d0a;box-shadow:0 9px 28px rgba(0,0,0,.6),0 0 32px rgba(255,90,31,.34);}
.showdown-stamp{position:absolute;z-index:5;top:1%;right:1%;display:flex;flex-direction:column;align-items:center;padding:.7em .9em;border:1px solid rgba(239,230,212,.38);background:rgba(11,13,20,.86);transform:rotate(7deg);box-shadow:0 8px 20px #05060a;}
.showdown-stamp span,.showdown-stamp small{font:800 clamp(8px,.8cqw,10px)/1 var(--cond);letter-spacing:.2em;color:#b3bac7;}
.showdown-stamp b{font:normal clamp(22px,3cqw,37px)/.95 var(--disp);color:var(--acid);}
.showdown-caption{position:absolute;z-index:5;bottom:0;left:9%;right:5%;display:flex;flex-direction:column;gap:.35em;padding:1em 1.2em;border-left:3px solid var(--rust);background:linear-gradient(90deg,rgba(7,9,14,.95),rgba(7,9,14,.64),transparent);}
.showdown-caption span{font:800 clamp(9px,.95cqw,12px)/1 var(--cond);color:var(--neon);letter-spacing:.25em;}
.showdown-caption b{font:normal clamp(13px,1.75cqw,21px)/1 var(--disp);color:#f0e7d8;letter-spacing:.03em;}
.duel-spark{position:absolute;z-index:4;right:10%;top:31%;color:var(--acid);font-size:clamp(20px,3cqw,36px);text-shadow:0 0 22px rgba(200,242,74,.75);transform:rotate(14deg);}
.launch-footer{height:6.3cqh;flex:none;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(239,230,212,.13);color:#7a8190;font:800 clamp(8px,.92cqw,11px)/1 var(--cond);letter-spacing:.2em;}
.launch-footer>p{color:#bdc2ca;}
.launch-footer-right{display:flex;align-items:center;gap:1.2em;}
.launch-footer .chip{font-size:9px;padding:.35em .75em;}
.launch-footer .hint{font:700 9px/1 var(--cond);letter-spacing:.16em;color:#7a8190;}
.launch-footer .best{margin:0;font-size:9px;letter-spacing:.17em;color:#ff8051;}

@media (max-width:760px){
  .launch-shell{padding:3cqh 4cqw 2cqh;}
  .launch-main{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:2cqw;}
  .launch-copy h1{font-size:clamp(56px,8.5cqw,84px);}
  .launch-proof{gap:.65em;letter-spacing:.08em;}
  .launch-footer-right{gap:.6em;}
}
@media (max-height:520px){
  .launch-shell{padding-top:2cqh;padding-bottom:1.5cqh;}
  .launch-topbar{height:7cqh;}
  .launch-main{padding:1cqh 0;}
  .launch-copy h1{font-size:clamp(54px,7.6cqw,88px);}
  .launch-pitch{margin-top:1cqh;}
  .launch-actions{margin-top:1.5cqh;}
  .launch-proof{margin-top:1.4cqh;}
  .launch-showdown{height:61cqh;}
  .launch-footer{height:5cqh;}
}
@media (prefers-reduced-motion:reduce){.duel-cat img{transition:none;}}

/* Écran de chargement d'un combat */
#loading-screen{display:flex;align-items:center;justify-content:center;background:rgba(6,6,12,.92);z-index:40;}
#loading-screen .loading-box{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--paper,#efe6d4);font:700 15px/1.2 var(--cond,system-ui);letter-spacing:.16em;}
#loading-screen b{font:normal clamp(28px,4cqw,48px)/1 var(--disp,Impact);letter-spacing:.04em;color:#ff5a1f;}
#loading-screen i{width:180px;height:4px;border-radius:4px;background:linear-gradient(90deg,#ff5a1f 0 40%,rgba(255,255,255,.12) 40%);background-size:200% 100%;animation:loadbar 1s linear infinite;}
@keyframes loadbar{from{background-position:100% 0}to{background-position:-100% 0}}

/* Clip K.O. en aperçu sur l'écran de résultat */
.result-clip{display:block;height:min(24vh,170px);aspect-ratio:9/16;margin:0 auto 10px;border-radius:10px;border:2px solid rgba(255,90,31,.6);background:#000;object-fit:cover;}
/* Écran de défi reçu */
#challenge-screen .challenge{text-align:center;}
.challenge-duel{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 6px;}
.challenge-duel img{width:120px;height:120px;object-fit:cover;border-radius:12px;border:2px solid rgba(239,230,212,.35);}
.challenge-duel b{font:normal 34px/1 var(--disp,Impact);color:#ff5a1f;}

.panel.result.has-clip .result-roast-box,.panel.result.has-clip .result-rivalry{display:none;}

/* les panneaux longs défilent en eux-mêmes, jamais le jeu */
#result-screen .panel.result{max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;}

/* Chaque écran de menu défile en lui-même (molette, doigt), le conteneur du jeu reste fixe. */
.screen{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-items:safe center;}
.screen > *{flex-shrink:0;}

/* Cinquième combattant : grille à 5, Caty verrouillée en silhouette */
.roster-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.roster-card.locked img{filter:brightness(0) drop-shadow(0 0 6px rgba(61,220,132,.55));}
.roster-card.locked{cursor:not-allowed;opacity:.9;}
.roster-card.locked strong{letter-spacing:.2em;}

/* Écran des crédits */
.credits-list{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;color:#d9d2c3;font:500 15px/1.4 var(--cond,system-ui);}
.credits-list b{color:#f3ecdd;}