/* ═══════════════════════════════════════════════════════════════
   CHAMPIONS FACTORY · Design System
   Noir anthracite · Rouge sang · Or champion · Octogone
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0a0d;
  --bg2:#0e0e13;
  --panel:#14141a;
  --panel2:#1a1a22;
  --panel3:#21212b;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --text:#f4f4f7;
  --muted:#9b9ba8;
  --faint:#63636f;
  --red:#e6342e;
  --red2:#ff4b45;
  --red-deep:#8f1613;
  --gold:#e8b84b;
  --gold2:#f6d488;
  --gold3:#b3822a;
  --green:#35c97a;
  --cyan:#3ecfd8;
  --purple:#a877f2;
  --radius:20px;
  --radius-s:13px;
  --shadow:0 24px 70px -18px rgba(0,0,0,.75);
  --font-display:"Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.55;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}
input{font-family:inherit}
::selection{background:rgba(230,52,46,.4)}

/* ─────────── Fond ambiance ─────────── */
#bg-fx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(230,52,46,.16), transparent 60%),
    radial-gradient(900px 550px at -10% 110%, rgba(232,184,75,.09), transparent 55%),
    radial-gradient(700px 500px at 50% 45%, rgba(255,255,255,.025), transparent 70%),
    var(--bg);
}
#bg-fx::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpolygon points='70,8 114,26 132,70 114,114 70,132 26,114 8,70 26,26' fill='none' stroke='rgba(255,255,255,0.022)' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
#bg-fx::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

.sound-toggle{
  position:fixed; top:14px; right:14px; z-index:50;
  width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,26,.7); border:1px solid var(--line);
  color:var(--text); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:.15s;
}
.sound-toggle:hover{ border-color:var(--line2); transform:scale(1.06); }
.sound-toggle.on{ border-color:var(--gold); color:var(--gold); }

/* ─────────── Écrans / transitions ─────────── */
#app{max-width:1180px;margin:0 auto;padding:clamp(10px,2.4vw,28px)}
.screen{animation:screenIn .45s cubic-bezier(.22,.9,.3,1) both}
.screen.hidden{display:none}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ─────────── Typo ─────────── */
.display{font-family:var(--font-display);letter-spacing:.04em;font-weight:400}
.gold-text{
  background:linear-gradient(178deg,var(--gold2) 15%,var(--gold) 55%,var(--gold3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ─────────── Boutons ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 22px;border-radius:14px;
  font-weight:700;font-size:15px;letter-spacing:.015em;
  border:1px solid var(--line2);
  background:var(--panel2);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, filter .2s;
  user-select:none;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn-xl{padding:18px 30px;font-size:16px;letter-spacing:.05em}
.btn-primary{
  background:linear-gradient(160deg,#ff5149,var(--red) 55%,#b3201b);
  border-color:rgba(255,120,110,.5);
  box-shadow:0 10px 34px -10px rgba(230,52,46,.65), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.btn-primary:hover{box-shadow:0 16px 44px -10px rgba(230,52,46,.85);border-color:rgba(255,150,140,.7)}
.btn-gold{
  background:linear-gradient(165deg,var(--gold2),var(--gold) 50%,var(--gold3));
  color:#241703;border-color:rgba(255,224,150,.6);
  box-shadow:0 10px 30px -12px rgba(232,184,75,.55), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:none;
}
.btn-ghost{background:rgba(255,255,255,.03)}
.btn-back{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  border:1px solid var(--line2);background:var(--panel2);
  font-size:19px;display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.btn-back:hover{border-color:var(--red2);color:var(--red2)}

/* ═══════════════════════ ACCUEIL ═══════════════════════ */
.home-wrap{
  min-height:calc(100dvh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;padding:30px 8px;
}
.octa-ring{
  position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:min(560px,92vw);aspect-ratio:1;pointer-events:none;
  background:
    conic-gradient(from 210deg, transparent 0 60%, rgba(232,184,75,.25) 72%, transparent 85%),
    radial-gradient(closest-side, transparent 76%, rgba(255,255,255,.045) 77% 78.6%, transparent 79.6%);
  clip-path:polygon(50% 0,85.3% 14.7%,100% 50%,85.3% 85.3%,50% 100%,14.7% 85.3%,0 50%,14.7% 14.7%);
  animation:slowspin 40s linear infinite;
  opacity:.9;
}
@keyframes slowspin{to{transform:rotate(360deg)}}
.home-kicker{
  font-size:12px;font-weight:800;letter-spacing:.42em;color:var(--red2);
  text-transform:uppercase;margin-bottom:14px;
  animation:fadeUp .7s .1s both;
}
.logo{
  font-family:var(--font-display);
  font-size:clamp(64px,13vw,124px);
  line-height:.88;letter-spacing:.035em;
  display:flex;flex-direction:column;align-items:center;
  animation:fadeUp .7s .2s both;
}
.logo span{
  background:linear-gradient(178deg,var(--gold2) 10%,var(--gold) 55%,var(--gold3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(232,184,75,.25));
}
.tagline{color:var(--muted);margin:18px 0 34px;font-size:16px;animation:fadeUp .7s .32s both}
.home-actions{display:flex;flex-direction:column;gap:12px;width:min(400px,100%);animation:fadeUp .7s .44s both}
.home-row{display:flex;gap:12px}
.home-row .btn{flex:1}
.home-foot{margin-top:34px;color:var(--faint);font-size:12.5px;letter-spacing:.06em;animation:fadeUp .7s .55s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ═══════════════════════ CRÉATION ═══════════════════════ */
.create-head{
  display:flex;align-items:center;gap:16px;
  padding:6px 2px 16px;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--bg) 78%,transparent);
}
.create-progress{flex:1;height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
#create-bar{height:100%;width:20%;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width .5s cubic-bezier(.22,.9,.3,1);
}
.create-step-label{font-family:var(--font-display);font-size:19px;letter-spacing:.08em;color:var(--muted);min-width:44px;text-align:right}
.create-body{padding-bottom:170px}
.create-title{font-family:var(--font-display);font-size:clamp(34px,6vw,52px);letter-spacing:.03em;line-height:1;margin-bottom:6px}
.create-sub{color:var(--muted);margin-bottom:22px;max-width:640px}
.create-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:12px clamp(12px,3vw,30px) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(8,8,10,.88) 30%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;gap:14px;align-items:center;justify-content:center;
}
.create-foot .btn{min-width:min(360px,88vw)}
.create-detail{
  position:absolute;top:-8px;translate:0 -100%;left:50%;transform:translateX(-50%);
  width:min(680px,94vw);text-align:center;color:var(--muted);font-size:13.5px;
  background:rgba(16,16,21,.92);border:1px solid var(--line);border-radius:14px;
  padding:10px 16px;backdrop-filter:blur(8px);
  opacity:0;transition:.25s;pointer-events:none;
}
.create-detail.show{opacity:1}
.create-detail b{color:var(--gold)}

/* Grille nationalités */
.natio-search{
  width:100%;max-width:420px;display:block;margin:0 0 18px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:13px;
  padding:13px 17px;color:var(--text);font-size:15px;outline:none;transition:.2s;
}
.natio-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.14)}
.natio-search::placeholder{color:var(--faint)}
.natio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.natio-chip{
  display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;transition:.18s;position:relative;overflow:hidden;
}
.natio-chip .nflag{font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.natio-chip .nname{font-weight:700;font-size:13.5px;line-height:1.2}
.natio-chip .nbonus{display:block;font-size:10.5px;color:var(--gold);font-weight:600;letter-spacing:.04em;margin-top:2px}
.natio-chip:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-1px)}
.natio-chip.sel{
  border-color:var(--gold);background:linear-gradient(180deg,rgba(232,184,75,.13),rgba(232,184,75,.05));
  box-shadow:0 0 0 1px var(--gold), 0 8px 26px -12px rgba(232,184,75,.5);
}

/* Cartes de choix (style / origine / hygiène) */
.pick-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.pick-card{
  text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 16px;
  transition:.18s;position:relative;overflow:hidden;
}
.pick-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 35%);
}
.pick-card:hover{transform:translateY(-2px);border-color:var(--line2);background:var(--panel2)}
.pick-card.sel{
  border-color:var(--red2);
  box-shadow:0 0 0 1px var(--red2), 0 14px 40px -14px rgba(230,52,46,.55);
  background:linear-gradient(180deg,rgba(230,52,46,.10),rgba(230,52,46,.03));
}
.pick-card.locked{ opacity:.5; cursor:not-allowed; }
.pick-card.locked:hover{ transform:none; border-color:var(--line); background:var(--panel); }
.pick-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pick-icon{
  font-size:24px;width:48px;height:48px;flex:0 0 auto;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel3);border:1px solid var(--line2);
}
.pick-name{font-family:var(--font-display);font-size:25px;letter-spacing:.05em;line-height:1}
.pick-desc{color:var(--muted);font-size:13.5px;margin:4px 0 10px}
.pick-meta{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pick-warn{font-size:11.5px;color:var(--red2);font-weight:700;letter-spacing:.03em;margin-top:6px;display:block}
.mini-stats{display:flex;gap:7px;margin-top:10px}
.mini-stat{flex:1;text-align:center;display:block;min-width:0}
.mini-stat i{font-style:normal;font-size:13px;display:block;margin-bottom:4px}
.mini-track{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mini-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold))}

/* Étape identité */
.identity-wrap{display:grid;gap:22px;grid-template-columns:1fr;max-width:760px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field-row{display:flex;gap:10px}
.text-input{
  flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:13px;
  padding:14px 17px;color:var(--text);font-size:16px;font-weight:600;outline:none;transition:.2s;width:100%;
}
.text-input:focus{border-color:var(--red2);box-shadow:0 0 0 3px rgba(230,52,46,.15)}
.dice-btn{width:52px;border-radius:13px;background:var(--panel2);border:1px solid var(--line2);font-size:21px;transition:.18s}
.dice-btn:hover{border-color:var(--gold);transform:rotate(-12deg) scale(1.06)}
.recap-card{
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.recap-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.recap-flag{font-size:36px}
.recap-name{font-family:var(--font-display);font-size:30px;letter-spacing:.04em;line-height:1}
.recap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tagchip{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  background:var(--panel3);border:1px solid var(--line2);
  padding:5px 11px;border-radius:99px;color:var(--muted);
}
.tagchip.hot{color:var(--gold);border-color:rgba(232,184,75,.4)}
.tagchip.gold{color:var(--gold);border-color:rgba(232,184,75,.4)}

/* ═══════════════════════ JEU ═══════════════════════ */
.game-grid{display:grid;grid-template-columns:390px 1fr;gap:22px;align-items:start}
.phase-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
}
.phase-pill{
  background:linear-gradient(160deg,rgba(230,52,46,.2),rgba(230,52,46,.06));
  border:1px solid rgba(230,52,46,.45);color:#ffb1ad;
  padding:6px 13px;border-radius:99px;text-transform:uppercase;
}
.phase-year{color:var(--faint)}
.phase-dots{display:flex;gap:5px;margin-left:auto}
.phase-dot{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.14)}
.phase-dot.on{background:var(--gold)}
.phase-dot.now{background:var(--red2);box-shadow:0 0 8px rgba(230,52,46,.9)}

/* ── Carte profil ── */
.profile-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;position:sticky;top:16px;
}
.pc-top{display:flex;gap:14px;padding:18px 18px 12px;align-items:flex-start}
.pc-avatar{
  width:74px;height:74px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#33333f,#191920 70%);
  border:2px solid rgba(232,184,75,.55);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7), inset 0 0 0 3px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pc-avatar svg{width:88%;height:88%}
.pc-id{flex:1;min-width:0}
.pc-name{font-family:var(--font-display);font-size:27px;letter-spacing:.03em;line-height:.95;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-nick{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.06em;margin-bottom:6px;font-style:italic}
.pc-subrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.flag-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--panel3);border:1px solid var(--line2);
  padding:3px 9px;border-radius:99px;font-weight:700;font-size:11.5px;
}
.pc-ovr{
  flex:0 0 auto;width:58px;height:58px;border-radius:15px;text-align:center;
  background:linear-gradient(165deg,var(--gold2),var(--gold) 45%,var(--gold3));
  color:#231603;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -8px rgba(232,184,75,.6), inset 0 1px 0 rgba(255,255,255,.55);
}
.pc-ovr b{font-family:var(--font-display);font-size:30px;line-height:.9;font-weight:400}
.pc-ovr small{font-size:8.5px;font-weight:800;letter-spacing:.18em}
.pc-stars{
  display:flex;justify-content:space-between;gap:10px;
  padding:4px 18px 10px;font-size:11.5px;color:var(--muted);
}
.pc-stars .stars{color:var(--gold);letter-spacing:1.5px;font-size:11px}
.pc-league{
  margin:0 18px;padding:9px 13px;border-radius:11px;font-size:12.5px;font-weight:600;
  background:var(--panel3);border:1px solid var(--line);
  display:flex;justify-content:space-between;gap:8px;color:var(--muted);
}
.pc-league b{color:var(--text)}
.pc-section{padding:13px 18px 3px}
.pc-section h4{
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin-bottom:9px;
}
.stat-row{display:grid;grid-template-columns:24px 70px 1fr 28px;gap:8px;align-items:center;padding:3.5px 0;border-radius:8px}
.stat-row .sic{font-size:14px;text-align:center}
.stat-row .slb{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.stat-row .sval{font-weight:800;font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .7s cubic-bezier(.22,.9,.3,1)}
.bar .b-stat{background:linear-gradient(90deg,#c2453f,var(--gold))}
.bar .b-forme{background:linear-gradient(90deg,#1d9e5d,#4be08f)}
.bar .b-moral{background:linear-gradient(90deg,#1e93b8,#52dbe4)}
.bar .b-rep{background:linear-gradient(90deg,var(--gold3),var(--gold2))}
.gauge-row{display:grid;grid-template-columns:102px 1fr 28px;gap:8px;align-items:center;padding:3.5px 0;font-size:12px;color:var(--muted);font-weight:600}
.gauge-row .sval{text-align:right;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.pc-record{
  display:flex;justify-content:center;gap:14px;padding:10px 18px 4px;
  font-size:12.5px;color:var(--muted);font-weight:600;
}
.pc-record b{color:var(--text);font-size:14px}
.pc-belts{padding:2px 18px 8px;text-align:center;font-size:12px;color:var(--gold);font-weight:700;min-height:16px}
.pc-foot{
  margin-top:10px;padding:11px 18px;
  background:linear-gradient(90deg,var(--gold3),var(--gold) 50%,var(--gold2));
  color:#241703;font-weight:800;font-size:13.5px;letter-spacing:.03em;
  display:flex;justify-content:space-between;
}
.stat-flash{animation:statFlash 1s ease}
@keyframes statFlash{
  0%{background:rgba(232,184,75,.0)}
  25%{background:rgba(232,184,75,.28)}
  100%{background:rgba(232,184,75,0)}
}
.pc-mobile-toggle{display:none}

/* ── Carte événement ── */
.event-panel{position:relative}
.event-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(18px,3vw,30px);
  animation:cardIn .5s cubic-bezier(.22,.9,.3,1) both;
  position:relative;overflow:hidden;
}
.event-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--ev-accent,var(--red)) 30% 70%,transparent);
  opacity:.9;
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.ev-cat{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ev-accent,var(--red2));margin-bottom:16px;
}
.ev-title{
  font-family:var(--font-display);font-size:clamp(28px,4.6vw,40px);
  letter-spacing:.04em;line-height:1;text-align:center;margin-bottom:14px;
}
.ev-text{
  text-align:center;color:#d6d6de;font-size:15.5px;max-width:600px;margin:0 auto 24px;
}
.ev-text em{color:var(--gold);font-style:normal;font-weight:600}
.choices{display:flex;flex-direction:column;gap:11px;max-width:600px;margin:0 auto}
.choice-btn{
  position:relative;display:block;width:100%;text-align:center;
  background:var(--panel3);border:1px solid var(--line2);border-radius:15px;
  padding:15px 18px;font-size:14.5px;font-weight:600;line-height:1.35;
  transition:transform .15s ease, border-color .2s, box-shadow .25s, background .2s;
}
.choice-btn:hover{
  transform:translateY(-2px);border-color:var(--red2);
  box-shadow:0 12px 34px -12px rgba(230,52,46,.5);
  background:#262631;
}
.choice-btn:active{transform:scale(.985)}
.choice-tag{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.18em;
  padding:3px 10px;border-radius:99px;margin-bottom:7px;text-transform:uppercase;
  background:rgba(168,119,242,.15);color:var(--purple);border:1px solid rgba(168,119,242,.4);
}
.choice-tag.t-risk{background:rgba(230,52,46,.14);color:var(--red2);border-color:rgba(230,52,46,.45)}
.choice-tag.t-mafia{background:rgba(0,0,0,.5);color:#c9c9d4;border-color:rgba(255,255,255,.25)}
.choice-tag.t-gold{background:rgba(232,184,75,.13);color:var(--gold);border-color:rgba(232,184,75,.45)}
.choice-hint{display:block;font-size:11.5px;color:var(--faint);font-weight:500;margin-top:5px}

/* Résultat de choix */
.outcome-tag{
  display:inline-block;font-family:var(--font-display);font-size:21px;letter-spacing:.14em;
  padding:4px 18px;border-radius:99px;margin-bottom:14px;
}
.outcome-tag.ok{background:rgba(53,201,122,.13);color:var(--green);border:1px solid rgba(53,201,122,.4)}
.outcome-tag.ko{background:rgba(230,52,46,.13);color:var(--red2);border:1px solid rgba(230,52,46,.4)}
.deltas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px auto 22px;max-width:520px}
.delta{
  font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:99px;
  border:1px solid;font-variant-numeric:tabular-nums;
  animation:deltaPop .45s cubic-bezier(.3,1.4,.5,1) both;
}
.delta:nth-child(2){animation-delay:.08s}.delta:nth-child(3){animation-delay:.16s}
.delta:nth-child(4){animation-delay:.24s}.delta:nth-child(5){animation-delay:.32s}
.delta:nth-child(6){animation-delay:.4s}.delta:nth-child(7){animation-delay:.48s}
@keyframes deltaPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.delta.up{background:rgba(53,201,122,.12);color:#6fe3a5;border-color:rgba(53,201,122,.38)}
.delta.down{background:rgba(230,52,46,.12);color:#ff8781;border-color:rgba(230,52,46,.38)}
.delta.cash{background:rgba(232,184,75,.12);color:var(--gold);border-color:rgba(232,184,75,.4)}

/* Gains d'intro */
.gain-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 24px}

/* ── Combat ── */
.vs-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,34px);margin:8px 0 20px}
.vs-side{text-align:center;width:150px}
.vs-avatar{
  width:82px;height:82px;margin:0 auto 9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#33333f,#191920 70%);
  border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vs-avatar.me{border-color:rgba(232,184,75,.6);box-shadow:0 0 24px -6px rgba(232,184,75,.4)}
.vs-avatar.opp{border-color:rgba(230,52,46,.55);box-shadow:0 0 24px -6px rgba(230,52,46,.4)}
.vs-avatar svg{width:88%;height:88%}
.vs-name{font-family:var(--font-display);font-size:19px;letter-spacing:.05em;line-height:1.05}
.vs-meta{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.vs-ovr{font-size:12px;font-weight:800;color:var(--gold);margin-top:2px}
.vs-x{
  font-family:var(--font-display);font-size:clamp(38px,7vw,58px);
  background:linear-gradient(178deg,#ff6a63,var(--red) 60%,#8f1613);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(230,52,46,.5));
}
.fight-purse{text-align:center;font-size:12.5px;color:var(--muted);margin-bottom:20px}
.fight-purse b{color:var(--gold)}

/* Live rounds */
.rounds{max-width:540px;margin:0 auto 8px;display:flex;flex-direction:column;gap:10px}
.round-line{
  display:flex;gap:12px;align-items:baseline;text-align:left;
  background:var(--panel3);border:1px solid var(--line);border-radius:12px;padding:11px 15px;
  opacity:0;animation:roundIn .5s ease forwards;
}
.round-line b{font-family:var(--font-display);letter-spacing:.1em;color:var(--muted);font-size:14px;flex:0 0 auto}
.round-line span{font-size:13.5px;color:#d6d6de}
@keyframes roundIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.verdict{
  text-align:center;margin:22px 0 6px;opacity:0;
  animation:stampIn .55s cubic-bezier(.25,1.3,.4,1) forwards;
}
.verdict .v-main{
  font-family:var(--font-display);font-size:clamp(52px,10vw,84px);line-height:.9;
  letter-spacing:.05em;display:inline-block;transform:rotate(-3deg);
}
.verdict.win .v-main{
  background:linear-gradient(178deg,var(--gold2),var(--gold) 55%,var(--gold3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 34px rgba(232,184,75,.4));
}
.verdict.loss .v-main{color:var(--red2);filter:drop-shadow(0 10px 34px rgba(230,52,46,.45))}
.verdict .v-sub{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:8px}
@keyframes stampIn{
  0%{opacity:0;transform:scale(2.1) rotate(-10deg)}
  55%{opacity:1;transform:scale(.94) rotate(-3deg)}
  100%{opacity:1;transform:scale(1) rotate(-3deg)}
}
.fight-narrative{
  text-align:center;color:#d6d6de;font-size:14.5px;max-width:560px;margin:12px auto 6px;
  opacity:0;animation:fadeUp .5s ease forwards;
}
.reveal-later{opacity:0;animation:fadeUp .5s ease forwards}

/* ═══════════════════════ FIN DE CARRIÈRE ═══════════════════════ */
.end-body{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-bottom:60px}
.end-hero{
  text-align:center;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);padding:clamp(26px,5vw,48px);position:relative;overflow:hidden;
}
.end-hero::before{
  content:"";position:absolute;inset:-40% -20% auto;height:70%;
  background:radial-gradient(closest-side,rgba(232,184,75,.14),transparent);pointer-events:none;
}
.end-kicker{font-size:11.5px;font-weight:800;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.note-octa{
  width:150px;height:150px;margin:6px auto 12px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,85.3% 14.7%,100% 50%,85.3% 85.3%,50% 100%,14.7% 85.3%,0 50%,14.7% 14.7%);
  background:linear-gradient(165deg,var(--gold2),var(--gold) 45%,var(--gold3));
  color:#241703;box-shadow:0 18px 50px -14px rgba(232,184,75,.6);
  animation:notePop .8s cubic-bezier(.25,1.3,.4,1) .2s both;
}
.note-octa b{font-family:var(--font-display);font-size:64px;line-height:.9;font-weight:400}
.note-octa small{font-size:10px;font-weight:800;letter-spacing:.22em}
@keyframes notePop{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
.ending-title{font-family:var(--font-display);font-size:clamp(36px,7vw,58px);letter-spacing:.05em;line-height:1;margin:8px 0 10px}
.ending-text{color:var(--muted);max-width:560px;margin:0 auto;font-size:15px}
.end-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px}
.end-tile{
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;
  padding:16px 10px;text-align:center;
}
.end-tile b{font-family:var(--font-display);font-size:30px;letter-spacing:.03em;display:block;line-height:1}
.end-tile span{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.end-tile.duel-win{border-color:var(--gold);background:linear-gradient(180deg,rgba(232,184,75,.14),rgba(232,184,75,.03));box-shadow:0 0 0 1px var(--gold)}
.end-tile.duel-win b{color:var(--gold)}
.end-sec{
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:22px;
}
.end-sec h3{font-family:var(--font-display);font-size:24px;letter-spacing:.08em;margin-bottom:14px;text-align:center;color:var(--gold)}
.moments{display:flex;flex-direction:column;gap:9px;max-width:620px;margin:0 auto}
.moment{
  display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:#d0d0da;
  border-left:2px solid rgba(232,184,75,.5);padding-left:12px;
}
.moment b{font-family:var(--font-display);letter-spacing:.06em;color:var(--muted);font-size:14px;flex:0 0 auto}
.badge-grid{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--panel3);border:1px solid var(--line2);border-radius:99px;
  padding:8px 15px;font-size:12.5px;font-weight:700;
}
.badge.new{
  border-color:rgba(232,184,75,.6);color:var(--gold);
  box-shadow:0 0 22px -6px rgba(232,184,75,.45);
  animation:deltaPop .5s cubic-bezier(.3,1.4,.5,1) both;
}
.card-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
#career-canvas{
  width:min(340px,84vw);border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px var(--line2);
}
.end-actions{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* ═══════════════════════ PANTHÉON / AIDE ═══════════════════════ */
.simple-body{max-width:760px;margin:0 auto;padding-bottom:60px}
.simple-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.simple-title{font-family:var(--font-display);font-size:clamp(36px,7vw,54px);letter-spacing:.05em;line-height:1}
.pantheon-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.ptab{
  padding:9px 18px;border-radius:99px;border:1px solid var(--line2);background:var(--panel);
  color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;transition:.15s;
}
.ptab.on{border-color:var(--gold);color:var(--gold);background:rgba(232,184,75,.08)}
.pantheon-list{display:flex;flex-direction:column;gap:9px}
.prow{
  display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:12px 16px;
}
.prow.top1{border-color:rgba(232,184,75,.55);background:linear-gradient(180deg,rgba(232,184,75,.1),var(--panel))}
.prow .prank{font-family:var(--font-display);font-size:23px;color:var(--muted);text-align:center}
.prow .pname{font-weight:700;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pname small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.prow .ptitle{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--gold);text-transform:uppercase;text-align:right}
.prow .pnote{
  font-family:var(--font-display);font-size:24px;width:52px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,var(--gold2),var(--gold) 45%,var(--gold3));color:#241703;
}
.empty-note{color:var(--faint);text-align:center;padding:40px 0}
.help-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.help-block h3{font-family:var(--font-display);font-size:22px;letter-spacing:.07em;color:var(--gold);margin-bottom:8px}
.help-block p, .help-block li{color:var(--muted);font-size:14px}
.help-block ul{padding-left:20px}
.help-disclaimer{text-align:center;color:var(--faint);font-size:12px;margin:6px 0 18px}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:920px){
  .game-grid{grid-template-columns:1fr;gap:14px}
  .profile-card{position:relative;top:0}
  .profile-panel.collapsed .pc-section,
  .profile-panel.collapsed .pc-league,
  .profile-panel.collapsed .pc-stars,
  .profile-panel.collapsed .pc-record,
  .profile-panel.collapsed .pc-belts{display:none}
  .pc-mobile-toggle{
    display:block;width:100%;padding:9px;font-size:11px;font-weight:800;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
    border-top:1px solid var(--line);background:rgba(255,255,255,.02);
  }
  .pc-top{padding:14px 16px 8px}
  .pc-avatar{width:56px;height:56px}
  .pc-name{font-size:22px}
  .pc-ovr{width:50px;height:50px}
  .pc-ovr b{font-size:25px}
  .pc-foot{padding:9px 16px;font-size:12.5px;margin-top:0}
}
@media (max-width:560px){
  body{font-size:15px}
  .natio-grid{grid-template-columns:repeat(2,1fr)}
  .home-row{flex-direction:column}
  .create-foot .btn{width:100%}
  .vs-side{width:120px}
  .end-stats{grid-template-columns:repeat(2,1fr)}
  .prow{grid-template-columns:34px 1fr auto}
  .prow .ptitle{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ── Créateur d'avatar ── */
.av-builder{display:flex;gap:18px;align-items:center;background:var(--panel,#14141a);
  border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px}
.av-preview{width:96px;height:96px;flex:none;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#23242e,#15161c);
  border:2px solid rgba(232,184,75,.45);box-shadow:0 0 24px rgba(232,184,75,.12)}
.av-preview svg{width:100%;height:100%;display:block}
.av-controls{flex:1;display:flex;flex-direction:column;gap:6px;position:relative}
.av-row{display:flex;align-items:center;gap:8px}
.av-label{width:64px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#8b8fa3)}
.av-val{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--text,#f4f4f7)}
.cycle-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:var(--text,#f4f4f7);font-size:11px;cursor:pointer;
  transition:background .15s,transform .1s}
.cycle-btn:hover{background:rgba(255,255,255,.12)}
.cycle-btn:active{transform:scale(.92)}
.av-dice{position:absolute;top:-6px;right:0;width:34px;height:34px}
@media (max-width:560px){
  .av-builder{flex-direction:column}
  .av-controls{width:100%}
  .av-dice{position:static;align-self:center;margin-top:4px}
}

/* ── Refuser un combat ── */
.choice-btn.decline{border-color:rgba(255,75,69,.35);opacity:.88}
.choice-btn.decline:hover{border-color:rgba(255,75,69,.65);opacity:1}

/* ═══ v3 : catégories de poids ═══ */
.pick-kg{
  margin-left:auto; font-size:12px; font-weight:800; color:var(--gold);
  background:rgba(232,184,75,.1); border:1px solid rgba(232,184,75,.3);
  padding:3px 9px; border-radius:99px; white-space:nowrap;
}
.pc-honor{
  margin-top:5px; font-size:12px; font-weight:800; color:var(--gold);
  letter-spacing:.02em;
}
.end-honor{
  margin:6px auto 10px; display:inline-block; font-weight:800; color:var(--gold);
  background:rgba(232,184,75,.08); border:1px solid rgba(232,184,75,.35);
  padding:7px 16px; border-radius:99px; font-size:14px;
}

.end-archetype{
  display:flex; align-items:center; gap:14px; text-align:left;
  max-width:480px; margin:16px auto 0; padding:12px 16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px;
}
.end-archetype .ea-icon{ font-size:28px; flex:0 0 auto; }
.end-archetype b{ display:block; color:var(--gold); font-size:14px; margin-bottom:3px; }
.end-archetype p{ margin:0; color:var(--muted); font-size:13px; line-height:1.4; }

/* ═══ v3 : bilan annuel ═══ */
.year-recap{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  background:linear-gradient(90deg, rgba(232,184,75,.12), rgba(232,184,75,.03));
  border:1px solid rgba(232,184,75,.25); border-radius:14px;
  padding:10px 16px; margin-bottom:14px; font-size:13px; color:var(--muted);
  animation:fadeUp .5s ease both;
}
.year-recap b{ color:var(--gold); font-size:13px; }
.year-recap span{ white-space:nowrap; }
.year-recap .aging-note{ color:#e0896b; }

/* ═══ v3 : rounds de championnat ═══ */
.round-line.champ-line{
  border-color:rgba(232,184,75,.4);
  background:rgba(232,184,75,.07);
}
.round-line.champ-line span{ color:var(--gold); font-weight:700; }

/* ═══ v3 : cinématique de ceinture ═══ */
.belt-cine{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(35,26,5,.96), rgba(8,8,10,.98));
  animation:bcIn .45s ease both; cursor:pointer; overflow:hidden;
}
.belt-cine.out{ animation:bcOut .6s ease both; }
.bc-rays{
  position:absolute; inset:-50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(232,184,75,.10) 12deg, transparent 24deg,
    transparent 45deg, rgba(232,184,75,.10) 57deg, transparent 69deg,
    transparent 90deg, rgba(232,184,75,.10) 102deg, transparent 114deg,
    transparent 135deg, rgba(232,184,75,.10) 147deg, transparent 159deg,
    transparent 180deg, rgba(232,184,75,.10) 192deg, transparent 204deg,
    transparent 225deg, rgba(232,184,75,.10) 237deg, transparent 249deg,
    transparent 270deg, rgba(232,184,75,.10) 282deg, transparent 294deg,
    transparent 315deg, rgba(232,184,75,.10) 327deg, transparent 339deg);
  animation:bcSpin 14s linear infinite;
}
.bc-inner{ position:relative; text-align:center; padding:24px; }
.bc-belt{
  font-size:110px; line-height:1; filter:drop-shadow(0 0 45px rgba(232,184,75,.55));
  animation:bcBelt .9s cubic-bezier(.2,1.6,.4,1) both .15s;
}
.bc-title{
  font-family:"Bebas Neue", sans-serif; font-size:clamp(40px, 9vw, 76px);
  letter-spacing:.06em; line-height:1.05; margin-top:10px;
  background:linear-gradient(180deg, #f6d488, #e8b84b 55%, #b3822a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp .6s ease both .55s;
}
.bc-sub{
  color:var(--text); font-weight:700; font-size:clamp(14px, 3.5vw, 19px);
  margin-top:8px; animation:fadeUp .6s ease both .85s;
}
.bc-tap{
  color:var(--faint); font-size:12px; margin-top:26px; letter-spacing:.14em;
  text-transform:uppercase; animation:fadeUp .6s ease both 1.6s;
}
@keyframes bcIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes bcOut{ from{ opacity:1 } to{ opacity:0 } }
@keyframes bcSpin{ to{ transform:rotate(360deg) } }
@keyframes bcBelt{
  0%{ transform:scale(.2) rotate(-18deg); opacity:0 }
  100%{ transform:scale(1) rotate(0); opacity:1 }
}

/* ═══════════════ v3.1 · ACCUEIL FAÇON VITRINE ═══════════════ */
.home2{ min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:18px 0 28px; position:relative; overflow:hidden; }
.home-top{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:min(680px, 92vw); margin-bottom:14px; position:relative; z-index:2; }
.home-pill{ background:var(--panel2); border:1px solid var(--line2);
  color:var(--text); font-weight:800; font-size:.72rem; letter-spacing:.06em;
  padding:8px 13px; border-radius:999px; white-space:nowrap; }
.home-pill.ghost{ opacity:.55; }
/* Sélecteur de langue FR/EN (discret, dans le pill d'accueil) */
.lang-switch{ display:inline-flex; align-items:center; gap:3px; }
.lang-switch button{ background:none; border:0; padding:0 2px; cursor:pointer;
  color:var(--muted, #8a8fa3); font:inherit; letter-spacing:inherit; opacity:.6;
  transition:opacity .15s, color .15s; }
.lang-switch button.on{ color:var(--text); opacity:1; }
.lang-switch i{ font-style:normal; opacity:.35; }
.logo2{ font-family:var(--font-display); font-size:clamp(1.25rem, 4.5vw, 1.7rem);
  letter-spacing:.04em; color:#fff; text-align:center; }
.logo2 span{ background:linear-gradient(135deg, #f3cf6e, #d9a13b);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Carrousel héro */
.hero-scroll{ display:flex; gap:14px; width:100%; overflow-x:auto;
  scroll-snap-type:x mandatory; padding:6px calc(50vw - min(270px, 44vw)) 10px;
  scrollbar-width:none; position:relative; z-index:2; }
.hero-scroll::-webkit-scrollbar{ display:none; }
.hero-card{ flex:0 0 min(540px, 88vw); scroll-snap-align:center;
  border-radius:26px; padding:22px 22px 24px; text-align:center; position:relative;
  overflow:hidden; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px rgba(0,0,0,.45); display:flex; flex-direction:column; }
.hc-blue{ background:linear-gradient(165deg, #1b2a52 0%, #131c37 55%, #0d1226 100%); }
.hc-teal{ background:linear-gradient(165deg, #0d3d40 0%, #0c2b31 55%, #091a20 100%); }
.hc-red{  background:linear-gradient(165deg, #4a1420 0%, #2e0e18 55%, #180810 100%); }
.hero-card::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 42% at 50% 34%, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none; }
.hc-label{ font-size:.72rem; font-weight:900; letter-spacing:.14em; color:#fff;
  opacity:.92; text-align:left; margin-bottom:4px; }
.hc-art{ height:clamp(170px, 30vh, 230px); display:flex; justify-content:center;
  align-items:flex-end; margin:2px 0 12px; filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
.hc-art svg{ height:100%; width:auto; }
.hc-art.duo svg{ height:88%; }
.hc-art.duo svg:first-child{ transform:scaleX(-1) translateX(-6%); }
.hc-art.duo svg:last-child{ transform:translateX(-6%); }
.hc-caption{ align-self:center; background:rgba(255,255,255,.94); color:#14151c;
  font-weight:800; font-size:.82rem; padding:7px 15px; border-radius:999px;
  margin-bottom:10px; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.hc-desc{ color:rgba(255,255,255,.88); font-size:.92rem; line-height:1.45; margin-bottom:16px; }
.hc-desc b{ color:#fff; }
.hc-cta{ margin-top:auto; align-self:center; width:min(360px, 92%); border:none; cursor:pointer;
  background:#f4f6fb; color:#14151c; font-family:var(--font-display);
  font-size:1rem; letter-spacing:.08em; font-weight:900;
  padding:15px 20px; border-radius:999px; transition:transform .15s, box-shadow .15s;
  box-shadow:0 8px 22px rgba(0,0,0,.35); }
.hc-cta.gold{ background:linear-gradient(135deg, #f3cf6e, #d9a13b); color:#1c1503; }
.hc-cta:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.45); }
.hc-cta:active{ transform:scale(.98); }
.hero-dots{ display:flex; gap:7px; justify-content:center; margin:12px 0 4px;
  position:relative; z-index:2; }
.hdot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22);
  transition:background .2s, transform .2s; }
.hdot.on{ background:var(--gold, #e8b84b); transform:scale(1.25); }

/* Légendes de l'octogone */
.legends-sec{ width:min(680px, 92vw); margin-top:16px; position:relative; z-index:2; }
.legends-title{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.05em;
  color:#fff; text-align:center; margin-bottom:12px; }
.legends-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.legend-card{ background:var(--panel); border:1px solid var(--line2);
  border-radius:18px; padding:14px 10px 12px; text-align:center;
  transition:transform .15s, border-color .15s; }
/* cartes décoratives (non cliquables) : pas d'effet de survol trompeur */
.lg-av{ height:64px; display:flex; justify-content:center; margin-bottom:8px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.lg-av svg{ height:100%; }
.lg-chip{ display:inline-block; font-size:.62rem; font-weight:900; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gold, #e8b84b);
  border:1px solid rgba(232,184,75,.45); border-radius:999px; padding:3px 9px; margin-bottom:7px; }
.lg-name{ color:#fff; font-weight:800; font-size:.8rem; line-height:1.25; }
.lg-nick{ color:var(--muted, #9a9aa8); font-size:.7rem; font-style:italic; margin:2px 0; }
.lg-rec{ color:var(--gold, #e8b84b); font-weight:900; font-size:.85rem; }

.home-foot2{ margin-top:18px; display:flex; flex-direction:column; align-items:center;
  gap:6px; position:relative; z-index:2; }

@media (max-width: 480px){
  .hero-card{ padding:18px 16px 20px; }
  .hc-art{ height:clamp(150px, 26vh, 190px); }
  .legends-grid{ gap:8px; }
  .legend-card{ padding:11px 6px 10px; }
  .lg-av{ height:52px; }
  .lg-name{ font-size:.72rem; }
}

/* Statut du défi du jour (carte héro) */
.hc-daily-status{ display:inline-block; margin-top:6px; font-size:.78rem; font-weight:800;
  color:#ffd98a; }
.hc-daily-status.played{ color:#7fe0a8; }

/* Pubs (mock + points d'usage) */
.hc-boost{ margin-top:10px; align-self:center; background:none; border:1px dashed rgba(255,255,255,.35);
  color:rgba(255,255,255,.85); font-size:.78rem; font-weight:700; padding:9px 16px;
  border-radius:999px; cursor:pointer; transition:border-color .15s, color .15s; }
.hc-boost:hover{ border-color:var(--gold, #e8b84b); color:#fff; }
.hc-boost.hidden{ display:none; }
.ad-mock{ position:fixed; inset:0; z-index:400; background:rgba(4,4,6,.94);
  display:flex; align-items:center; justify-content:center; }
.ad-mock-box{ text-align:center; padding:40px 30px; border:1px solid var(--line2);
  border-radius:22px; background:var(--panel); width:min(400px, 88vw); }
.ad-mock-tag{ color:var(--muted, #9a9aa8); font-weight:800; font-size:.72rem; letter-spacing:.14em; }
.ad-mock-count{ font-family:var(--font-display, inherit); font-size:64px; color:var(--gold, #e8b84b);
  margin:18px 0; }
.ad-mock-close{ background:linear-gradient(135deg, #f3cf6e, #d9a13b); color:#1c1503; border:none;
  font-weight:900; font-size:.95rem; padding:13px 26px; border-radius:999px; cursor:pointer; }
.ad-mock-close.hidden{ visibility:hidden; }


/* ═══════════════════════════════════════════════════════════════
   v3.4 · PASSE UX — lisibilité, cohérence, tous les boutons visibles
   ═══════════════════════════════════════════════════════════════ */

/* Utilitaire générique (seuls .screen et .hc-boost le géraient) */
.hidden{display:none !important}
.ad-mock-close.hidden{display:inline-block !important;visibility:hidden}

/* Le bouton son est fixe en haut à droite : chaque en-tête lui réserve sa place
   (avant : il masquait le « 1/6 », l'OVR, les titres des écrans secondaires). */
/* absolute (et non fixed) : il reste dans la zone réservée de l'en-tête et ne
   recouvre plus le contenu quand on fait défiler la page */
.sound-toggle{position:absolute;top:max(12px, env(safe-area-inset-top));right:12px;width:40px;height:40px}
.create-head,.simple-head,.game-top,.home-top{padding-right:52px}
@media (min-width:1320px){
  .create-head,.simple-head,.game-top,.home-top{padding-right:0}
}

/* Boutons : focus clavier visible partout */
button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Accueil ── */
.home2{padding:14px 0 28px}
.home-top{flex-direction:column;justify-content:center;gap:4px;margin-bottom:18px;padding-left:52px}
@media (min-width:1320px){ .home-top{padding-left:0} }
.logo2{font-size:clamp(2.1rem, 8.5vw, 3.2rem);line-height:.95;letter-spacing:.05em}
.home-tagline{color:var(--muted);font-size:.8rem;text-align:center;line-height:1.35}

/* Plus de carrousel caché : grille où chaque mode est visible */
.hero-scroll{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;
  width:min(680px, 94vw);overflow:visible;padding:0;scroll-snap-type:none}
.hero-card{flex:none;padding:14px 12px 14px;border-radius:20px}
.hero-card .hc-art{height:86px;margin:0 0 8px}
.hero-card .hc-label{text-align:center;font-size:.66rem;margin-bottom:6px}
.hero-card .hc-caption{font-size:.72rem;padding:5px 11px;margin-bottom:8px}
.hero-card .hc-desc{font-size:.78rem;margin-bottom:10px;line-height:1.4}
.hero-card .hc-cta{width:100%;font-size:.86rem;padding:12px 10px;letter-spacing:.06em;line-height:1.1}
.hero-card.hc-main{grid-column:1 / -1;padding:20px 20px 22px;border-radius:26px}
.hero-card.hc-main .hc-label{font-size:.72rem}
.hero-card.hc-main .hc-art{height:clamp(110px, 18vh, 190px);margin:2px 0 12px}
.hero-card.hc-main .hc-caption{font-size:.82rem;padding:7px 15px}
.hero-card.hc-main .hc-desc{font-size:.92rem;margin-bottom:16px}
.hero-card.hc-main .hc-cta{width:min(380px, 100%);font-size:1.15rem;padding:15px 20px}
.hc-daily-status{display:block;margin:-4px 0 10px;font-size:.74rem;line-height:1.3}
.hero-dots{display:none}
@media (max-width:420px){
  .hero-card:not(.hc-main) .hc-desc{display:none}   /* cartes secondaires : l'essentiel seulement */
  .hero-card:not(.hc-main) .hc-art{height:72px}
}
.legend-card{cursor:default}
.home-foot{color:var(--muted)}

/* ── Création ── */
.stat-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin:-10px 0 16px}
.mini-val{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.pick-card.sel .mini-val{color:var(--text)}
.req-hint{display:block;margin-top:4px;color:var(--gold);font-size:13px}
.req-hint.ok{display:none}
.cycle-btn{width:38px;height:38px;border-radius:10px;font-size:12px}
.av-controls{gap:4px}
.av-dice{position:static;width:auto;height:auto;align-self:flex-start;margin-top:6px;padding:9px 14px;font-size:13px}
@media (max-width:560px){ .av-dice{align-self:stretch} }
.create-detail{bottom:100%;top:auto;translate:none;margin-bottom:8px}
.pick-name{overflow-wrap:anywhere}

/* ── Jeu : barre du haut (quitter + progression) ── */
.game-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-height:42px}
.game-top .btn-back{font-size:16px}
.game-top .btn-back:hover{border-color:var(--red2);color:var(--red2)}
.game-top .phase-bar{flex:1;min-width:0;margin:0;flex-wrap:nowrap;overflow:hidden}
.phase-pill{white-space:nowrap;flex:0 0 auto}
.phase-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.phase-year{white-space:nowrap;flex:0 0 auto}
.phase-year::before{content:"· "}
.phase-dots{flex:0 0 auto}
@media (max-width:560px){
  .phase-sub{display:none}
  .game-top{gap:10px;margin-bottom:10px}
}
.pc-league + .pc-league{margin-top:6px}
.pc-league span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere}
.pc-quick{display:none}
@media (max-width:920px){
  .profile-panel.collapsed .pc-quick{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;
    padding:2px 16px 10px;font-size:12px;color:var(--muted);font-weight:600}
  .pc-quick b{color:var(--text);font-variant-numeric:tabular-nums}
  .pc-quick .low b{color:var(--red2)}
}

/* Hiérarchie : l'action pour avancer se distingue des choix narratifs */
.choice-btn.cta{
  background:linear-gradient(160deg,#ff5149,var(--red) 55%,#b3201b);
  border-color:rgba(255,120,110,.5);font-weight:800;letter-spacing:.02em;
  box-shadow:0 10px 30px -12px rgba(230,52,46,.6), inset 0 1px 0 rgba(255,255,255,.22);
}
.choice-btn.cta:hover{background:linear-gradient(160deg,#ff5f57,var(--red2) 55%,#c4241f);border-color:rgba(255,160,150,.8)}

/* Combat : avatars alignés même si un nom passe sur 2 lignes */
.vs-wrap{align-items:flex-start}
.vs-x{height:82px;display:flex;align-items:center;flex:0 0 auto}
.vs-side{min-width:0}
.vs-name{overflow-wrap:break-word;hyphens:auto}
@media (max-width:560px){ .vs-avatar{width:72px;height:72px} .vs-x{height:72px} }
.verdict .v-main{font-size:clamp(40px, 11vw, 80px);max-width:100%;overflow-wrap:anywhere}
.belt-cine{background:radial-gradient(ellipse at center, rgba(35,26,5,.98), rgba(8,8,10,.995))}

/* ── Fin de carrière ── */
@media (max-width:1319px){ .end-hero{padding-top:56px} }

/* ── Écrans secondaires ── */
.simple-title{font-size:clamp(28px,7.5vw,54px)}
.simple-lead{text-align:center;color:var(--muted);max-width:540px;margin:0 auto 18px}
.duel-turn{display:flex;flex-direction:column;gap:4px;align-items:center;
  max-width:420px;margin:0 auto 20px;padding:14px 18px;border-radius:16px;
  background:rgba(232,184,75,.07);border:1px dashed rgba(232,184,75,.35);color:var(--muted);font-size:14px}
.duel-turn-n{font-family:var(--font-display);font-size:28px;letter-spacing:.08em;color:var(--gold);line-height:1}
.sticky-cta{position:sticky;bottom:0;z-index:10;text-align:center;
  padding:16px 0 calc(14px + env(safe-area-inset-bottom));margin-top:14px;
  background:linear-gradient(transparent, var(--bg) 40%)}
.sticky-cta .btn{min-width:min(360px, 100%)}
.empty-note + div .btn{margin-top:-10px}
/* Petits écrans (320–360 px) : rien ne doit déborder horizontalement */
@media (max-width:920px){ .game-grid{grid-template-columns:minmax(0,1fr)} .event-col{min-width:0} }
@media (max-width:560px){ .vs-side{width:auto;flex:1 1 0;max-width:140px} .vs-wrap{gap:8px} }
@media (max-width:360px){ .phase-year{display:none} .pc-subrow{gap:4px} }
@media (max-width:360px){ .vs-name{font-size:16px} .vs-meta{font-size:10px} }

/* ═══ Étape S1 · Reprise de carrière ═══ */
.hero-card.hc-resume{grid-column:1 / -1;display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;gap:8px 14px;padding:14px 16px;border-radius:18px;
  border:1px solid rgba(232,184,75,.45);
  background:linear-gradient(160deg,#241c09,#141210)}
.hc-resume .hcr-info{flex:1 1 210px;min-width:0}
.hc-resume .hcr-label{font-size:.66rem;font-weight:800;letter-spacing:.14em;color:var(--gold);margin:0 0 3px}
.hc-resume .hcr-line{color:var(--text);font-weight:700;margin:0;overflow-wrap:anywhere;line-height:1.35}
.hc-resume .hcr-daily{display:block;font-size:.74rem;color:var(--gold);margin-top:3px}
.hc-resume .hc-cta{width:auto;flex:0 0 auto;margin:0;align-self:center;font-size:.88rem;padding:12px 18px}
.hc-resume .hcr-abandon{background:none;border:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:.76rem;text-decoration:underline;padding:6px 2px;flex:0 0 auto}
.hc-resume .hcr-abandon:hover{color:var(--red2)}
@media (max-width:560px){ .hc-resume .hc-cta{flex:1 1 100%} }

/* ═══ Options hors de moyens (Histoire · Phase 2) ═══ */
.choice-btn.off{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.choice-btn.off:hover{transform:none}
.choice-btn.off .choice-hint{color:var(--gold)}

/* ═══ Faveur/rancune héritée d'un choix (Histoire Phase 3) ═══ */
.fight-note{color:var(--gold);font-style:italic;opacity:.9}
p.fight-note{margin-top:2px}

/* ═══ Mode Légende retiré : la carte Panthéon prend la pleine largeur ═══ */
.hero-card.hc-wide{grid-column:1 / -1}
.hero-card.hc-wide .hc-art{height:72px}


/* ═══════════════════════════════════════════════════════════════
   v3.5 · Bouton d'action TOUJOURS visible, partout
   ═══════════════════════════════════════════════════════════════ */

/* L'animation d'entrée des écrans utilisait transform : un parent transformé
   devient le repère des éléments position:fixed, et la barre « Continuer »
   de la création se retrouvait sous le bas de l'écran. Fondu seul. */
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* Création : barre du bas collée au bas de la fenêtre, contenu qui défile dessous */
.create-foot{position:fixed;left:0;right:0;bottom:0;
  background:linear-gradient(transparent, rgba(8,8,10,.92) 26%);
  padding-top:18px}
.create-body{padding-bottom:120px}
.create-detail{bottom:calc(100% - 6px)}

/* En-tête de création : fond plein pour que les cartes ne passent plus
   « à travers » en se faisant couper */
.create-head{background:var(--bg);box-shadow:0 10px 18px -6px var(--bg);margin:0 -4px;padding-left:4px;padding-right:56px}
@media (min-width:1320px){ .create-head{padding-right:4px} }

/* Jeu : quand il n'y a qu'un bouton « Continuer », il reste collé en bas de l'écran.
   overflow:clip (et non hidden) pour que position:sticky fonctionne dans la carte. */
.event-card{overflow:clip}
.choices:has(> .choice-btn.cta:only-child){
  position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6}
.choices:has(> .choice-btn.cta:only-child)::before{
  content:"";position:absolute;inset:-14px -40px -30px;z-index:-1;pointer-events:none;
  background:linear-gradient(transparent, rgba(16,16,21,.9) 45%)}

/* Fin de carrière / duel : la barre d'actions principale reste visible */
.end-actions.sticky-cta{position:sticky;bottom:0;z-index:10;margin-top:0;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 35%)}

/* Création · étapes centrées (titre, sous-titre, recherche, personnage) */
.create-title,.create-sub{text-align:center;margin-left:auto;margin-right:auto}
.stat-legend{justify-content:center}
.natio-search{margin-left:auto;margin-right:auto}
.identity-wrap{margin:0 auto}
.av-builder{flex-direction:column;align-items:center;gap:14px}
.av-controls{width:100%;max-width:420px}
.av-dice{align-self:center}
.recap-head{justify-content:center}
.recap-tags{justify-content:center}

/* Jeu sur ordinateur : l'écran tient dans la fenêtre, sans faire défiler la page.
   Chaque colonne défile seule si son contenu dépasse (rare), le bouton reste visible. */
@media (min-width:921px){
  #screen-game:not(.hidden){height:calc(100dvh - 2 * clamp(10px,2.4vw,28px));display:flex;flex-direction:column}
  #screen-game .game-grid{flex:1;min-height:0;align-items:stretch}
  #screen-game .profile-panel,#screen-game .event-col{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
  #screen-game .profile-card{position:relative;top:0}
  #screen-game .event-col{padding-bottom:4px}
  /* fiche compacte */
  .pc-top{padding:14px 16px 8px}
  .pc-avatar{width:60px;height:60px}
  .pc-name{font-size:24px}
  .pc-ovr{width:52px;height:52px}
  .pc-stars{padding:2px 16px 8px}
  .pc-league{margin:0 16px;padding:7px 12px;font-size:12px}
  .pc-section{padding:9px 16px 2px}
  .pc-section h4{margin-bottom:5px}
  .stat-row,.gauge-row{padding:1.5px 0}
  .pc-record{padding:6px 16px 2px}
  .pc-belts{padding:0 16px 4px;min-height:0}
  .pc-foot{margin-top:6px;padding:9px 16px}
  .event-card{padding:22px 26px}
  .ev-cat{margin-bottom:10px}
  .ev-title{margin-bottom:10px}
  .ev-text{margin-bottom:16px}
}

/* Création · dernière étape : 2 colonnes sur ordinateur (réglages | récap) */
@media (min-width:921px){
  .identity-wrap{max-width:1040px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 28px;align-items:start;
    grid-template-areas:"name look" "nick look" "recap look"}
  .identity-wrap > .field:nth-child(1){grid-area:name}
  .identity-wrap > .field:nth-child(2){grid-area:nick}
  .identity-wrap > .field:nth-child(3){grid-area:look}
  .identity-wrap > .recap-card{grid-area:recap;padding:16px}
  .identity-wrap .av-builder{padding:14px}
  .identity-wrap .cycle-btn{width:32px;height:32px}
}
/* Fenêtres basses (ordinateur portable, barre de favoris…) : titres plus compacts */
@media (min-width:921px) and (max-height:760px){
  .create-title{font-size:34px}
  .create-sub{margin-bottom:12px}
  .field label{margin-bottom:5px}
  .text-input{padding:11px 15px}
  .recap-head{margin-bottom:8px}
  .recap-tags{margin-bottom:10px}
}

/* ═══ Fil d'arc narratif dans le profil (Histoire Phase 4) ═══ */
.pc-arc span:first-child{color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════
   v3.6 · PASSE MOBILE — cibles tactiles, fiche compacte, lisibilité
   ═══════════════════════════════════════════════════════════════ */

/* Tactile : pas de délai de double-tap, pas de survol « collant » */
button,.btn,.choice-btn,.pick-card,.natio-chip,.hc-cta{touch-action:manipulation}
@media (hover:none){
  .btn:hover,.choice-btn:hover,.pick-card:hover,.natio-chip:hover,.hc-cta:hover{transform:none;box-shadow:none}
  .choice-btn:hover{border-color:var(--line2);background:var(--panel3)}
  .choice-btn.cta:hover{background:linear-gradient(160deg,#ff5149,var(--red) 55%,#b3201b);border-color:rgba(255,120,110,.5)}
  .hc-cta:hover{box-shadow:0 8px 22px rgba(0,0,0,.35)}
}

/* Cibles tactiles ≥ 44 px (accueil, création, jeu) */
.sound-toggle{width:44px;height:44px}
.lang-switch{padding-top:0;padding-bottom:0}
.lang-switch button{padding:12px 6px;min-height:44px;min-width:40px}
.hero-card .hc-cta{min-height:44px}
.hc-resume .hcr-abandon{min-height:44px}
.btn-back{width:44px;height:44px}
@media (max-width:920px){
  .cycle-btn{width:44px;height:44px;font-size:13px}
  .av-dice{min-height:44px}
  .pc-mobile-toggle{min-height:44px;padding:12px 10px;font-size:11.5px}
  .choice-btn{min-height:48px}
  .natio-chip{min-height:56px}
  /* iOS : un champ < 16 px déclenche un zoom automatique au focus */
  .natio-search,.text-input{font-size:16px}
}

/* Fiche profil repliée : l'événement doit rester visible sans faire défiler */
@media (max-width:920px){
  .profile-panel.collapsed .pc-top{padding:11px 14px 6px;gap:11px;align-items:center}
  .profile-panel.collapsed .pc-avatar{width:48px;height:48px}
  .profile-panel.collapsed .pc-name{font-size:21px;margin-bottom:3px}
  .profile-panel.collapsed .pc-nick{margin-bottom:3px}
  .profile-panel.collapsed .pc-subrow{gap:4px 6px;font-size:11.5px}
  .profile-panel.collapsed .flag-pill{padding:2px 8px;font-size:11px}
  .profile-panel.collapsed .pc-ovr{width:46px;height:46px;border-radius:13px}
  .profile-panel.collapsed .pc-ovr b{font-size:23px}
  .profile-panel.collapsed .pc-ovr small{font-size:8px}
  .profile-panel.collapsed .pc-quick{padding:4px 14px 8px;font-size:12.5px;gap:3px 12px}
  .profile-panel.collapsed .pc-foot{padding:9px 14px;font-size:12.5px}
}
@media (max-width:560px){
  /* repliée : style et catégorie restent dans la fiche complète */
  .profile-panel.collapsed .pc-subrow .flag-pill:nth-of-type(n+2){display:none}
  .profile-panel.collapsed .pc-quick span{white-space:nowrap}
}
@media (max-width:360px){
  /* très petits écrans : 2 × 2 plutôt qu'un « Bilan » orphelin sur sa ligne */
  .profile-panel.collapsed .pc-quick span{flex:1 1 40%}
}

/* Carte événement : libellés centrés même sur deux lignes, textes plus lisibles */
.ev-cat{flex-wrap:wrap;text-align:center}
@media (max-width:560px){
  .ev-cat{font-size:11px;letter-spacing:.18em;margin-bottom:12px;line-height:1.5}
  .ev-title{margin-bottom:12px}
  .ev-text{font-size:16px;line-height:1.5;margin-bottom:20px}
  .choice-btn{padding:14px 16px;font-size:15px}
  .choice-tag{font-size:10px;letter-spacing:.14em}
  .choice-hint{font-size:12px;line-height:1.4}
  .choices{gap:10px}
  .round-line span{font-size:14px}
  .delta{font-size:13px}
  .event-card{padding:20px 16px 18px}
}
@media (max-width:360px){
  .event-card{padding:18px 14px 16px}
  .ev-title{font-size:26px}
  .choice-btn{padding:13px 12px}
}

/* Création : grille des pays lisible en 2 colonnes */
@media (max-width:560px){
  .natio-grid{gap:8px}
  .natio-chip{padding:10px 11px;gap:8px}
  .natio-chip .nflag{font-size:24px}
  .natio-chip .nname{font-size:14px}
  .natio-chip .nbonus{font-size:11.5px;letter-spacing:.02em;line-height:1.35}
  .mini-val{font-size:12px}
  .stat-legend{font-size:12.5px}
}

/* Fin de carrière : blocs plus serrés, tuiles lisibles */
@media (max-width:560px){
  .end-body{gap:14px}
  .end-tile b{font-size:26px}
  .end-tile span{font-size:11px}
  .end-actions .btn{flex:1 1 calc(50% - 6px);min-height:48px}
  .end-actions .btn.btn-xl{flex-basis:100%}
}

/* ── Défi du jour : rang mondial et série (écran de fin) ── */
.end-rank{ margin:10px auto 0; font-size:.9rem; font-weight:700; color:var(--muted); letter-spacing:.01em; transition:color .3s; }
.end-rank.on{ color:var(--cyan); }
.end-streak{ margin:6px auto 0; font-size:.86rem; font-weight:800; color:var(--gold); }

/* ═══════════ Publication v3.6 ═══════════ */

/* Démarrage : l'accueil reste caché tant que ui.js ne l'a pas rempli (avant, les cartes
   vides grandissaient d'un coup au chargement : CLS 0,2). main.js retire .booting ;
   filet de sécurité : tout s'affiche à 6 s quoi qu'il arrive. */
#boot{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:var(--bg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease, visibility 0s .3s}
#boot img{width:84px;height:84px;border-radius:22px;animation:bootPulse 1.4s ease-in-out infinite}
.booting #boot{opacity:1;visibility:visible;transition:none;animation:bootHide 0s 6s forwards}
.booting #app{visibility:hidden;animation:bootShow 0s 6s forwards}
@keyframes bootPulse{50%{transform:scale(.94);opacity:.75}}
@keyframes bootShow{to{visibility:visible}}
@keyframes bootHide{to{opacity:0;visibility:hidden}}

/* Panneau de confirmation (ui.js › ask) : remplace confirm()/prompt() natifs */
.cf-dialog{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:rgba(4,4,6,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:dlgIn .18s ease both}
.cf-dialog-box{width:min(440px,100%);background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px 18px;text-align:center;
  animation:dlgUp .24s cubic-bezier(.2,.8,.3,1) both}
.cf-dialog-box p{font-size:15.5px;line-height:1.5;margin-bottom:18px}
.cf-dialog-box textarea{display:block;width:100%;margin:-4px 0 16px;padding:10px 12px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line2);color:var(--text);font:inherit;font-size:13.5px;resize:none}
.cf-dialog-actions{display:flex;flex-direction:column;gap:10px}
.cf-dialog-actions .btn{width:100%;min-height:48px}
.cf-dialog.out{animation:dlgOut .16s ease both}
.cf-dialog.out .cf-dialog-box{animation:dlgDown .16s ease both}
@media (min-width:561px){
  .cf-dialog{align-items:center}
  .cf-dialog-actions{flex-direction:row-reverse}
  .cf-dialog-actions .btn{flex:1 1 0}
}
@keyframes dlgIn{from{opacity:0}}
@keyframes dlgUp{from{opacity:0;transform:translateY(24px)}}
@keyframes dlgOut{to{opacity:0}}
@keyframes dlgDown{to{opacity:0;transform:translateY(16px)}}

/* Fin de carrière / duel : barre collante sur une seule ligne (≈ 80 px au lieu de 170)
   et fondu plus long : les tuiles ne sont plus coupées net par les boutons */
.end-actions.sticky-cta{flex-wrap:nowrap;padding-top:30px;
  background:linear-gradient(rgba(10,10,13,0), var(--bg) 28px)}
.end-actions.sticky-cta .btn{min-width:0;min-height:52px}
.end-actions.sticky-cta .btn-xl{flex:2 1 0}
.end-actions.sticky-cta .btn-ghost{flex:1 1 0}
.end-actions.sticky-cta .btn{padding-left:14px;padding-right:14px}