/* ============ ICONES ============ */
/* Une seule regle de dimensionnement : le SVG remplit toujours son conteneur,
   et c'est le conteneur qui porte la taille. Evite les icones geantes. */
[data-icon]{display:inline-block;width:20px;height:20px;flex:none;line-height:0}
[data-icon]>svg{width:100%;height:100%;display:block}

/* ============ MISE EN PAGE ============ */
.pad{padding:0 var(--sp-4)}
.screen{flex:1 0 auto;display:flex;flex-direction:column;
  padding-bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}
.screen.nonav{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.row{display:flex;align-items:center;gap:var(--sp-2)}
.grow{flex:1}

/* ============ BARRE HAUTE ============ */
.topbar{display:flex;align-items:center;gap:var(--sp-3);
  padding:calc(10px + env(safe-area-inset-top)) var(--sp-4) var(--sp-2);position:relative;z-index:5}
.topbar .brand{display:flex;align-items:center;gap:9px;min-width:0}
.topbar .brand .name{font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:.14em;color:var(--silver-200);white-space:nowrap}
.topbar .brand .tag{font-size:8.5px;letter-spacing:.16em;color:var(--silver-500);
  text-transform:uppercase;margin-top:2px}
.iconbtn [data-icon]{width:19px;height:19px}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--glass);color:var(--ink-2);flex:none}
.scorepill{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid rgba(245,176,26,.35);background:rgba(245,176,26,.10);
  font-weight:800;font-size:14px;color:var(--gold-300);flex:none}

/* ============ TITRES ============ */
.h-screen{font-size:30px;line-height:1.05;text-transform:uppercase;text-align:center;
  margin-top:var(--sp-3)}
.h-screen .hi{color:var(--gold-400)}
.sub{text-align:center;color:var(--ink-3);font-size:13.5px;margin-top:7px}
.eyebrow{font-size:10.5px;letter-spacing:.22em;color:var(--silver-500);text-transform:uppercase}
.section{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silver-500);margin:var(--sp-5) 0 var(--sp-3)}

/* ============ BOUTONS ============ */
.btn{width:100%;padding:16px 18px;border-radius:var(--r-btn);font-weight:800;font-size:15.5px;
  letter-spacing:.05em;text-transform:uppercase;transition:transform .12s,filter .12s;
  display:flex;align-items:center;justify-content:center;gap:10px}
.btn:active{transform:scale(.978)}
.btn.gold{background:linear-gradient(180deg,var(--gold-400),var(--amber-600));
  color:#241701;box-shadow:var(--glow-gold)}
.btn.ghost{background:var(--glass);border:1px solid var(--line-strong);color:var(--ink)}
.btn.plain{background:none;color:var(--ink-3);font-size:13.5px;letter-spacing:.03em;padding:12px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ============ CARTES ============ */
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);overflow:hidden}
.stat{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 8px;text-align:center}
.stat .v{font-family:var(--display);font-weight:800;font-size:21px;color:var(--gold-400)}
.stat .l{font-size:10.5px;color:var(--ink-3);margin-top:4px;line-height:1.3}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}

/* ============ ETOILES ============ */
.stars{display:inline-flex;gap:4px}
.star{width:16px;height:16px;flex:none}
.star.on{color:var(--gold-400)}
.star.off{color:rgba(201,212,226,.22)}
.stars.big .star{width:44px;height:44px}

/* ============ BARRE DE PROGRESSION ============ */
.bar{height:6px;border-radius:var(--r-pill);background:rgba(201,212,226,.13);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--amber-600),var(--gold-300));transition:width .45s ease}

/* ============ NAVIGATION BASSE ============ */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(10,20,40,.86),rgba(5,11,26,.98));
  border-top:1px solid var(--line);backdrop-filter:blur(14px);z-index:20}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-3);font-size:10.5px;font-weight:600}
.nav button.on{color:var(--gold-400)}
.nav [data-icon]{width:23px;height:23px}

/* ============ FEUILLE MODALE ============ */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
  border-top:1px solid var(--line-strong);border-radius:22px 22px 0 0;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  max-height:82%;overflow-y:auto;box-shadow:0 -18px 50px rgba(0,0,0,.6)}
.sheet.up{transform:translateY(0)}
.sheet h3{font-size:17px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-3)}
.scrim{position:absolute;inset:0;background:rgba(2,6,14,.6);z-index:55;opacity:0;
  pointer-events:none;transition:opacity .3s}
.scrim.up{opacity:1;pointer-events:auto}

/* ============ PASTILLES ============ */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--glass);font-size:11.5px;color:var(--ink-2)}
.chip.ok{border-color:rgba(57,196,110,.4);background:var(--success-bg);color:var(--success)}
.chip.lock{color:var(--ink-3)}

/* ============ NOTE DE BAS D'ECRAN ============ */
.disclaimer{font-size:11px;line-height:1.5;color:var(--ink-3);text-align:center;
  padding:var(--sp-5) var(--sp-4) 0}

.topbar .mark-sm{width:26px;height:26px;color:var(--silver-300)}
.scorepill [data-icon]{width:15px;height:15px}
.fb .h [data-icon]{width:17px;height:17px}
.reward .ic [data-icon]{width:22px;height:22px}
.bdg .ic [data-icon]{width:22px;height:22px}
.set [data-icon]{width:20px;height:20px;color:var(--gold-400)}
.dcard [data-icon]{width:20px;height:20px;color:var(--ink-3);margin-right:4px}
.node .hex [data-icon]{width:22px;height:22px;color:var(--ink-3)}
.soon .ic{width:70px;height:70px;color:var(--silver-500);margin:0 auto 18px;display:block}