/* ==========================================================================
   Equipo Pool — coquille kiosk + écrans (Lots 1–2)
   Sizing : le contenu des vues est dimensionné en unités "container" (cqh/cqw)
   relatives à #view = la scène 16:9 => s'adapte proprement à tout écran.
   ========================================================================== */
:root{
  --c-partie:#7dff7d; --c-tournoi:#f5c451; --c-stats:#4bc3ff; --c-config:#b884ff;
  --felt:#0c3b22; --felt-dark:#04160d; --ink:#eaf6ee; --muted:#9fb6a8;
  --glass:rgba(255,255,255,.06); --glass-brd:rgba(255,255,255,.14);
  --gold:#f5c451;
}
*{box-sizing:border-box}
html,body{
  margin:0; height:100%; background:#000; color:var(--ink); overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* --- Scène 16:9 centrée (letterbox) --- */
#stage{
  position:absolute; inset:0; margin:auto; overflow:hidden;
  aspect-ratio:16/9; width:min(100vw, 177.7778vh);
}

/* --- Accueil (image + hotspots) --- */
.screen{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .35s ease}
.screen.is-active{opacity:1; visibility:visible}
.screen--home{background:url(../img/background.png) center/cover no-repeat}
.hotspots{position:absolute; inset:0}
.hotspot{
  position:absolute; border:0; padding:0; background:transparent; cursor:pointer;
  border-radius:1.4vw; outline:none;
  transition:transform .09s ease, box-shadow .18s ease, background-color .18s ease;
}
.hotspot:active{transform:scale(.965)}
.hotspot--partie:active {box-shadow:0 0 0 .25vw var(--c-partie),  0 0 4vw var(--c-partie);  background:rgba(125,255,125,.12)}
.hotspot--tournoi:active{box-shadow:0 0 0 .25vw var(--c-tournoi), 0 0 4vw var(--c-tournoi); background:rgba(245,196,81,.12)}
.hotspot--stats:active  {box-shadow:0 0 0 .25vw var(--c-stats),   0 0 4vw var(--c-stats);   background:rgba(75,195,255,.12)}
.hotspot--config:active {box-shadow:0 0 0 .25vw var(--c-config),  0 0 4vw var(--c-config);  background:rgba(184,132,255,.12)}
@media (hover:hover){ .hotspot:hover{background:rgba(255,255,255,.06)} }
/* Zone invisible sur le logo (geste secret : 4 clics rapides = reload) */
.logo-tap{position:absolute; border:0; padding:0; background:transparent; cursor:default;
  -webkit-tap-highlight-color:transparent; outline:none}

/* ==========================================================================
   Vue dynamique (features)
   ========================================================================== */
#view{
  position:absolute; inset:0; container-type:size; display:none;
  background:linear-gradient(180deg,var(--felt),var(--felt-dark));
  --accent:var(--c-partie);
}
#view.show{display:block; animation:viewin .35s ease}
@keyframes viewin{from{opacity:0} to{opacity:1}}
#view canvas.fx{position:absolute; inset:0; z-index:0}
.view-inner{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column}

/* Barre du haut */
.topbar{
  flex:0 0 auto; height:12cqh; display:flex; align-items:center; gap:2cqw; padding:0 3cqw;
}
.btn-back{
  display:inline-flex; align-items:center; gap:.5ch;
  font-size:2.6cqh; font-weight:600; color:var(--ink);
  background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:999px; padding:1.4cqh 2.6cqh; cursor:pointer;
  transition:transform .09s, background-color .15s;
}
.btn-back:active{transform:scale(.94); background:rgba(255,255,255,.16)}
.view-title{
  margin:0; font-size:4cqh; font-weight:800; letter-spacing:-.01em; color:var(--accent);
  text-shadow:0 0 3cqh color-mix(in srgb,var(--accent) 45%,transparent);
}
.view-title small{display:block; font-size:2.1cqh; font-weight:600; color:var(--muted); letter-spacing:.02em; text-shadow:none}

/* Zone principale */
.view-body{flex:1 1 auto; min-height:0; position:relative; padding:0 3cqw 2cqh;
  display:flex; flex-direction:column}

/* ---------- Grille de sélection des joueurs ---------- */
.pick-grid{
  flex:1 1 auto; min-height:0; overflow:hidden; padding:.6cqh .3cqw;
  display:grid; gap:1.3cqh 1cqw;
  /* grid-template-columns/rows fixés en JS (6×3) pour une taille de carte constante */
  scrollbar-width:none;
}
.pick-grid::-webkit-scrollbar{display:none}

/* Pagination (espace réservé même à une seule page => cartes de taille constante) */
.pager{flex:0 0 auto; height:9cqh; display:flex; align-items:center; justify-content:center; gap:2.2cqw}
.pager .pg-btn{width:7.5cqh; height:7.5cqh; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:4cqh; line-height:1;
  color:var(--ink); background:var(--glass); border:1px solid var(--glass-brd);
  transition:transform .09s, background-color .15s}
.pager .pg-btn:active{transform:scale(.9); background:rgba(255,255,255,.18)}
.pager .pg-btn[disabled]{opacity:.28; pointer-events:none}
.pager .dots{display:flex; align-items:center; gap:1.4cqw}
.pager .dot{width:1.7cqh; height:1.7cqh; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer;
  transition:transform .12s, background-color .15s}
.pager .dot.on{background:var(--accent); box-shadow:0 0 2cqh var(--accent); transform:scale(1.15)}
.pcard{
  position:relative; border:0; padding:0; cursor:pointer; background:transparent;
  border-radius:1.6cqh; overflow:hidden; height:100%; min-height:0; min-width:0;
  box-shadow:0 .8cqh 2.4cqh rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .18s ease;
}
.pcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pcard .noimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:7cqh; background:linear-gradient(135deg,#15412a,#0a2417); color:var(--accent)}
.pcard .cap{
  position:absolute; left:.7cqh; right:.7cqh; bottom:.7cqh; padding:.7cqh .9cqh;
  background:rgba(6,20,12,.5);
  -webkit-backdrop-filter:blur(7px) saturate(1.3);
  backdrop-filter:blur(7px) saturate(1.3);
  border:1px solid rgba(255,255,255,.18); border-radius:1.1cqh; text-align:left;
  box-shadow:0 .4cqh 1.2cqh rgba(0,0,0,.35);
}
.pcard .nm{display:block; font-size:1.9cqh; font-weight:800; line-height:1.1; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 .12cqh .3cqh rgba(0,0,0,.6)}
.pcard .st{display:block; font-size:1.35cqh; margin-top:.2cqh; line-height:1.2;
  color:rgba(255,255,255,.85); text-shadow:0 .12cqh .3cqh rgba(0,0,0,.5)}
.pcard::after{content:""; position:absolute; inset:0; border-radius:inherit;
  border:.35cqh solid transparent; transition:border-color .18s, box-shadow .18s}
.pcard:active{transform:scale(.95)}
.pcard:active::after{border-color:var(--accent); box-shadow:0 0 3cqh var(--accent)}
@media (hover:hover){ .pcard:hover::after{border-color:color-mix(in srgb,var(--accent) 70%,transparent)} }

/* Bandeau "joueur 1 choisi" */
.chosen{display:flex; align-items:center; gap:1.4cqw; margin-left:auto;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:999px; padding:1cqh 2cqh 1cqh 1cqh}
.chosen img,.chosen .noimg{width:6cqh; height:6cqh; border-radius:50%; object-fit:cover; border:.3cqh solid var(--accent)}
.chosen .noimg{display:flex; align-items:center; justify-content:center; font-size:2.4cqh;
  background:linear-gradient(135deg,#15412a,#0a2417); color:var(--accent)}
.chosen b{font-size:2.4cqh}
.chosen span{font-size:1.7cqh; color:var(--muted); display:block; margin-top:-.4cqh}

/* ---------- Écran "en jeu" (versus) ---------- */
.versus{height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2cqw}
.vs-p{display:flex; flex-direction:column; align-items:center; gap:1.6cqh; cursor:pointer;
  border:0; background:transparent; color:inherit; padding:2cqh; border-radius:3cqh;
  transition:transform .12s, box-shadow .2s, background-color .2s}
.vs-p:active{transform:scale(.97)}
.vs-p .ava{width:34cqh; height:34cqh; border-radius:50%; object-fit:cover;
  border:.7cqh solid var(--accent); box-shadow:0 0 5cqh color-mix(in srgb,var(--accent) 40%,transparent)}
.vs-p .ava.noimg{display:flex; align-items:center; justify-content:center; font-size:16cqh;
  background:linear-gradient(135deg,#15412a,#0a2417)}
.vs-p .vn{font-size:4.6cqh; font-weight:800}
.vs-p .vstat{font-size:2.2cqh; color:var(--muted)}
.vs-p.win-pick:active{background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 0 6cqh color-mix(in srgb,var(--accent) 55%,transparent)}
.vs-mid{display:flex; flex-direction:column; align-items:center; gap:2.4cqh}
.vs-badge{font-size:9cqh; font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 3cqh color-mix(in srgb,var(--accent) 40%,transparent))}
.h2h{display:flex; flex-direction:column; align-items:center; gap:1cqh; min-width:22cqw}
.h2h .score{font-size:5cqh; font-weight:800; letter-spacing:.02em}
.h2h .bar{width:20cqw; height:1.6cqh; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); display:flex}
.h2h .bar i{display:block; height:100%}
.h2h .bar .a{background:var(--accent)}
.h2h .bar .b{background:#e0663f}
.h2h .lbl{font-size:1.9cqh; color:var(--muted)}
.prompt{position:absolute; left:0; right:0; bottom:1cqh; text-align:center;
  font-size:2.6cqh; font-weight:700; color:var(--accent); letter-spacing:.04em;
  text-transform:uppercase; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55} 50%{opacity:1}}

/* ---------- Écran résultat ---------- */
.result{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqh; text-align:center}
.result .crown{font-size:8cqh; animation:pop .5s ease}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)} 70%{transform:scale(1.2)} 100%{transform:scale(1)}}
.result .champ-ava{width:38cqh; height:38cqh; border-radius:50%; object-fit:cover;
  border:.9cqh solid var(--gold); box-shadow:0 0 8cqh rgba(245,196,81,.6)}
.result .champ-ava.noimg{display:flex;align-items:center;justify-content:center;font-size:18cqh;background:linear-gradient(135deg,#15412a,#0a2417)}
.result .champ-nm{font-size:6cqh; font-weight:900}
.result .champ-sub{font-size:2.6cqh; color:var(--muted)}
.result .actions{display:flex; gap:2cqw; margin-top:1cqh}
.ep-btn{
  font-size:2.8cqh; font-weight:700; color:#06210f; cursor:pointer;
  background:var(--accent); border:0; border-radius:999px; padding:1.8cqh 4cqh;
  transition:transform .09s, filter .15s;
}
.ep-btn:active{transform:scale(.95)}
.ep-btn.ghost{background:var(--glass); border:1px solid var(--glass-brd); color:var(--ink)}

/* Confettis (CSS) */
.confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2}
.confetti i{position:absolute; top:-6cqh; width:1.2cqh; height:1.8cqh; opacity:.9;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120cqh) rotate(720deg)}}

/* ---------- Divers ---------- */
.center-msg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:2cqh; color:var(--muted); font-size:2.6cqh; text-align:center; padding:0 8cqw}
.spinner{width:8cqh; height:8cqh; border-radius:50%; border:.8cqh solid rgba(255,255,255,.15);
  border-top-color:var(--accent); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Avatar de secours (sans photo) : apparence commune ---------- */
.noimg{display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#123a52,#0a2233); color:var(--accent); font-weight:800}

/* ==========================================================================
   Statistiques (Lot 3)
   ========================================================================== */
.board{height:100%; display:flex; flex-direction:column; gap:1.6cqh; padding-top:1cqh}

/* Podium top 3 */
.podium{flex:0 0 auto; display:flex; justify-content:center; align-items:flex-end; gap:2.5cqw; height:44cqh}
.pod{display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  width:20cqw; max-width:26cqh; cursor:pointer; transition:transform .12s}
.pod:active{transform:scale(.97)}
.pod .medal{font-size:4cqh; line-height:1; margin-bottom:.6cqh}
.pod .pava{width:13cqh; height:13cqh; border-radius:50%; object-fit:cover;
  border:.5cqh solid var(--accent); box-shadow:0 0 4cqh color-mix(in srgb,var(--accent) 45%,transparent)}
.pod .pn{font-size:2.3cqh; font-weight:800; margin-top:.8cqh; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pod .pw{font-size:1.8cqh; color:var(--muted)}
.pod .ped{width:88%; margin-top:1cqh; border-radius:1.4cqh 1.4cqh 0 0;
  border:1px solid var(--glass-brd); border-bottom:0; display:flex; align-items:flex-start; justify-content:center;
  font-size:5cqh; font-weight:900; color:#fff; padding-top:1cqh;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 42%,transparent), color-mix(in srgb,var(--accent) 8%,transparent))}
.pod.first .pava{width:17cqh; height:17cqh; border-color:var(--gold); box-shadow:0 0 5cqh rgba(245,196,81,.6)}
.pod.first .ped{height:20cqh; background:linear-gradient(180deg, rgba(245,196,81,.5), rgba(245,196,81,.1))}
.pod.second .ped{height:14cqh}
.pod.third .ped{height:10cqh}

/* Liste des rangs 4+ */
.rank-list{flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:1.1cqh;
  padding:.5cqh 1cqw 1cqh; scrollbar-width:none}
.rank-list::-webkit-scrollbar{display:none}
.rrow{display:grid; grid-template-columns:5cqh 8cqh 1fr auto; align-items:center; gap:1.8cqw;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:1.6cqh; padding:1.1cqh 2cqw; cursor:pointer;
  transition:transform .1s, background-color .15s}
.rrow:active{transform:scale(.99); background:rgba(255,255,255,.1)}
.rrow .rk{font-size:3cqh; font-weight:900; color:var(--accent); text-align:center}
.rrow .rava{width:8cqh; height:8cqh; border-radius:50%; object-fit:cover}
.rrow .rn{font-size:2.3cqh; font-weight:700}
.rrow .rs{font-size:1.7cqh; color:var(--muted); margin-top:.2cqh}
.rrow .nem{display:flex; align-items:center; gap:1cqw; font-size:1.9cqh}
.rrow .nem .nlbl{font-size:1.4cqh; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.rrow .nem .nemava{width:5.5cqh; height:5.5cqh; border-radius:50%; object-fit:cover; font-size:1.8cqh}

/* Fiche joueur */
.pdetail{height:100%; display:grid; grid-template-columns:1fr 1.25fr; gap:2.5cqw; padding:1cqh 1cqw 2cqh; min-height:0}
.pd-left{display:flex; flex-direction:column; align-items:center; gap:1.6cqh}
.pd-ava{width:24cqh; height:24cqh; border-radius:50%; object-fit:cover; font-size:9cqh;
  border:.6cqh solid var(--accent); box-shadow:0 0 6cqh color-mix(in srgb,var(--accent) 45%,transparent)}
.pd-name{font-size:4cqh; font-weight:900; text-align:center}
.pd-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2cqw; width:100%}
.tile{background:var(--glass); border:1px solid var(--glass-brd); border-radius:1.4cqh; padding:1.2cqh .5cqw; text-align:center}
.tile .tv{font-size:3cqh; font-weight:800; color:var(--accent)}
.tile .tl{font-size:1.4cqh; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.nem-card{width:100%; display:flex; align-items:center; gap:2cqw; border-radius:1.6cqh; padding:1.4cqh 2cqw;
  background:linear-gradient(90deg, rgba(224,102,63,.2), rgba(224,102,63,.05)); border:1px solid rgba(224,102,63,.45)}
.nem-card .nemava2{width:10cqh; height:10cqh; border-radius:50%; object-fit:cover; font-size:3.4cqh; border:.3cqh solid #e0663f}
.nem-card .t{font-size:1.5cqh; color:#e7a68f; text-transform:uppercase; letter-spacing:.09em}
.nem-card .n{font-size:2.8cqh; font-weight:800}
.nem-card .s{font-size:1.7cqh; color:#e7a68f}
.pd-right{display:flex; flex-direction:column; gap:1.4cqh; min-height:0; overflow-y:auto; scrollbar-width:none}
.pd-right::-webkit-scrollbar{display:none}
.pd-sec h3{margin:0 0 .8cqh; font-size:2cqh; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.pd-list{display:flex; flex-direction:column; gap:.8cqh}
.orow,.hrow{display:flex; align-items:center; gap:1.6cqw; background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:1.3cqh; padding:1cqh 1.6cqw}
.orow .orava,.hrow .hrava{width:6.5cqh; height:6.5cqh; border-radius:50%; object-fit:cover; font-size:2.2cqh}
.orow .on,.hrow .hn{font-size:2.1cqh; font-weight:700}
.orow .os,.hrow .hs{font-size:1.6cqh; color:var(--muted); margin-top:.1cqh}
.orow .oinfo,.hrow .hinfo{flex:1 1 auto; min-width:0}
.orow .oinfo .on{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hrow .res{flex:0 0 auto; min-width:11cqh; text-align:center; border-radius:999px; padding:.7cqh 1.4cqh;
  font-size:1.65cqh; font-weight:800; text-transform:uppercase; letter-spacing:.03em}
.hrow .res.w{background:rgba(125,255,125,.2); color:#7dff7d; border:1px solid rgba(125,255,125,.5)}
.hrow .res.l{background:rgba(224,102,63,.2); color:#ff9c7a; border:1px solid rgba(224,102,63,.5)}
.empty{color:var(--muted); font-size:1.9cqh; padding:1cqh}

/* ==========================================================================
   Tournoi (Lot 4)
   ========================================================================== */
/* Multi-sélection : réutilise .pcard + état sélectionné */
.pcard.sel::after{border-color:var(--accent); box-shadow:0 0 3cqh var(--accent)}
.pcard .check{position:absolute; top:.8cqh; right:.8cqh; width:4.2cqh; height:4.2cqh; border-radius:50%;
  background:var(--accent); color:#241a00; display:none; align-items:center; justify-content:center;
  font-size:2.6cqh; font-weight:900; z-index:3; box-shadow:0 0 2cqh var(--accent)}
.pcard.sel .check{display:flex}

.pick-actions{flex:0 0 auto; height:11cqh; display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:0 1cqw}
.pa-all{font-size:2cqh; font-weight:600; color:var(--ink); cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:999px; padding:1.3cqh 2.4cqh;
  transition:transform .09s, background-color .15s}
.pa-all:active{transform:scale(.95); background:rgba(255,255,255,.16)}
.pa-go{font-size:2.4cqh; font-weight:800; color:#241a00; cursor:pointer;
  background:var(--accent); border:0; border-radius:999px; padding:1.5cqh 3.2cqh;
  box-shadow:0 0 3cqh color-mix(in srgb,var(--accent) 45%,transparent); transition:transform .09s, filter .15s}
.pa-go:active{transform:scale(.95)}
.pa-go[disabled]{opacity:.35; box-shadow:none; pointer-events:none}

/* Arbre */
.bracket{height:100%; overflow-x:auto; overflow-y:hidden; display:flex; gap:3cqw; padding:1cqh 2cqw 2cqh; scrollbar-width:none}
.bracket::-webkit-scrollbar{display:none}
.round{flex:0 0 auto; display:flex; flex-direction:column; width:27cqh}
.round > h4{margin:0 0 1cqh; text-align:center; font-size:1.9cqh; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.round .matches{flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-around}
.match{background:var(--glass); border:1px solid var(--glass-brd); border-radius:1.4cqh; overflow:hidden;
  transition:transform .1s, box-shadow .18s}
.match.ready{cursor:pointer; border-color:var(--accent); box-shadow:0 0 3cqh color-mix(in srgb,var(--accent) 35%,transparent)}
.match.ready:active{transform:scale(.98)}
.match.done{opacity:.96}
.match .side{display:flex; align-items:center; gap:1.2cqw; padding:1.1cqh 1.3cqw; font-size:2cqh}
.match .side + .side{border-top:1px solid rgba(255,255,255,.1)}
.match .side img,.match .side .noimg{width:5.5cqh; height:5.5cqh; border-radius:50%; object-fit:cover; font-size:1.7cqh; flex:0 0 auto}
.match .side .sn{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.match .side.win{color:var(--accent); font-weight:800}
.match .side.win .sn::after{content:" ✓"}
.match .side.lose{opacity:.45}
.match .side.tbd{opacity:.5; font-style:italic}
.match .bye-tag{margin-left:auto; font-size:1.4cqh; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* Écran champion */
.champion{position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6cqh; text-align:center}
.champion .trophy{font-size:13cqh; line-height:1; animation:pop .6s ease}
.champion .cava{width:32cqh; height:32cqh; border-radius:50%; object-fit:cover; font-size:15cqh;
  border:.9cqh solid var(--gold); box-shadow:0 0 8cqh rgba(245,196,81,.6)}
.champion .ctitle{font-size:2.6cqh; color:var(--gold); text-transform:uppercase; letter-spacing:.14em}
.champion .cname{font-size:6cqh; font-weight:900}
.champion .actions{display:flex; gap:2cqw; margin-top:1cqh; z-index:2}

/* ==========================================================================
   Inscription (Lot 5)
   ========================================================================== */
.reg-landing{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqh; text-align:center}
.big-add{display:flex; flex-direction:column; align-items:center; gap:1.6cqh; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:3cqh; padding:4cqh 7cqw;
  transition:transform .1s, background-color .15s}
.big-add:active{transform:scale(.97); background:rgba(255,255,255,.1)}
.big-add .ic{width:16cqh; height:16cqh; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:9cqh; color:var(--accent); border:.4cqh solid var(--accent);
  box-shadow:0 0 5cqh color-mix(in srgb,var(--accent) 40%,transparent)}
.big-add .t{font-size:3.4cqh; font-weight:800}
.reg-landing .hint{font-size:2.1cqh; color:var(--muted)}

.cam-stage{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqh; padding-bottom:2cqh}
.cam-wrap{height:62cqh; aspect-ratio:1/1; max-width:92cqw; position:relative; overflow:hidden;
  border-radius:3cqh; border:.5cqh solid var(--glass-brd); background:#000}
.cam-wrap video,.cam-wrap img{width:100%; height:100%; object-fit:cover; display:block}
.cam-wrap video.mirror{transform:scaleX(-1)}
.cam-wrap .center-msg{color:#fff}
.cam-actions{flex:0 0 auto; display:flex; gap:2cqw; align-items:center}
.shutter{width:12cqh; height:12cqh; border-radius:50%; border:.7cqh solid #fff; background:var(--accent); color:#241a00;
  cursor:pointer; font-size:5cqh; display:flex; align-items:center; justify-content:center; transition:transform .09s}
.shutter:active{transform:scale(.9)}

.name-stage{height:100%; display:flex; flex-direction:column; gap:1.6cqh; padding-bottom:2cqh}
.name-top{flex:0 0 auto; display:flex; align-items:center; gap:2cqw; padding-top:1cqh}
.name-top .mini{width:12cqh; height:12cqh; border-radius:50%; object-fit:cover; border:.4cqh solid var(--accent); flex:0 0 auto}
.name-field{flex:1 1 auto; min-width:0; background:var(--glass); border:1px solid var(--glass-brd); border-radius:1.6cqh;
  padding:0 2.4cqh; font-size:4cqh; font-weight:700; min-height:10cqh; display:flex; align-items:center;
  white-space:nowrap; overflow:hidden}
.name-field .ph{color:var(--muted); font-weight:500}
.name-field .caret{display:inline-block; width:.09em; height:1.1em; background:var(--accent); margin-left:.06em; animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.kb{flex:0 0 auto; display:flex; flex-direction:column; gap:1cqh}
.kb-row{display:flex; gap:1cqw; justify-content:center}
.key{flex:1 1 0; max-width:9.5cqh; height:9cqh; border-radius:1.2cqh; border:1px solid var(--glass-brd); background:var(--glass);
  color:var(--ink); font-size:3.1cqh; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .06s, background-color .1s}
.key:active{transform:scale(.9); background:var(--accent); color:#241a00}
.key.wide{flex:2 1 0; max-width:none; font-size:2.4cqh}
.key.space{flex:5 1 0; max-width:none; font-size:2.4cqh}
.key.go{flex:2.4 1 0; max-width:none; background:var(--accent); color:#241a00; font-weight:800; font-size:2.6cqh}
.key.go[disabled]{opacity:.35; pointer-events:none}

/* ---------- Écrans "à venir" (stubs des autres lots) ---------- */
.stub{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2.6cqh; padding:0 8cqw}
.stub-badge{font-size:1.8cqh; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--glass-brd); border-radius:999px; padding:.9cqh 2.2cqh}
.stub-icon{width:18cqh; height:18cqh; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:9cqh; color:var(--accent); border:.45cqh solid var(--accent);
  box-shadow:0 0 6cqh color-mix(in srgb,var(--accent) 40%,transparent), inset 0 0 4cqh color-mix(in srgb,var(--accent) 20%,transparent)}
.stub h2{margin:0; font-size:5cqh; font-weight:800}
.stub p{margin:0; font-size:2.8cqh; color:var(--muted); max-width:58ch; line-height:1.5}

/* Voile plein écran (1er tap) */
#fs-hint{position:absolute; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  text-align:center; background:rgba(0,0,0,.72); color:#fff; font-size:3vh; cursor:pointer}
#fs-hint.show{display:flex}
body.idle, body.idle *{cursor:none !important}