/* ============================================================
   Byup Run — stessa lingua visiva di Eureka Games: quasi-nero,
   oro, niente webfont. Tutto sopra un canvas a tutto schermo.
   ============================================================ */
:root{
  --bg:#08090f; --bg-1:#101320; --bg-2:#171b2c;
  --txt:#f2f4fb; --txt-soft:#c7ccdd; --txt-mute:#8f96ad;
  --gold:#e7bd6b; --gold-hi:#f6dfa4; --gold-lo:#8f6c22;
  --accent:#ff4d6d; --accent-2:#a04bff;
  --hair:rgba(255,255,255,.12);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad-t:env(safe-area-inset-top); --pad-r:env(safe-area-inset-right);
  --pad-b:env(safe-area-inset-bottom); --pad-l:env(safe-area-inset-left);
}
*{ margin:0; padding:0; box-sizing:border-box }
html,body{ height:100% ; overflow:hidden }
body{
  font-family:var(--font); background:var(--bg); color:var(--txt);
  line-height:1.45; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#app{ position:fixed; inset:0; overflow:hidden }
canvas#game{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#05060a }

/* ---------- Punteggio ---------- */
.hud{
  position:absolute; top:calc(10px + var(--pad-t)); right:calc(16px + var(--pad-r));
  display:flex; gap:12px; align-items:baseline; pointer-events:none;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.9);
  opacity:0; transition:opacity 220ms var(--ease);
}
.hud.on{ opacity:1 }
.hud .hi{ font-size:14px; font-weight:700; color:var(--gold); opacity:.85 }
.hud .hi i{ font-style:normal; font-size:9.5px; letter-spacing:.14em; opacity:.7 }
.hud .pt{ font-size:26px; font-weight:800; letter-spacing:.02em }
.hud .pt.gold{ color:var(--gold-hi) }
/* Le due forme del «?»: lo stesso colore dell'aura addosso al Byup, così il
   punteggio dice quale potere sta correndo anche a chi guarda gli ostacoli. */
.hud .pt.trex{ color:#9ef08a }
.hud .pt.fanta{ color:#a7d6ff }
.hud .lv{
  font-size:14px; font-weight:800; color:#0f1020; padding:3px 9px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold-hi),#e0b45c); text-shadow:none;
}
.hud .lv.up{ animation:lvup 620ms var(--ease) }
@keyframes lvup{
  0%{ transform:scale(1) } 30%{ transform:scale(1.35); filter:brightness(1.3) } 100%{ transform:scale(1) }
}
@media (prefers-reduced-motion: reduce){ .hud .lv.up{ animation:none } }
/* La serie dei cibi. Finché è un conto sta in disparte, quando diventa un
   moltiplicatore si accende: è una cosa che si è guadagnata e che si può
   perdere, e deve stare addosso all'occhio quanto il punteggio. */
.hud .serie{
  font-size:13px; font-weight:800; color:var(--txt-mute);
  border:1px solid var(--hair); border-radius:8px; padding:2px 8px;
}
.hud .serie.on{
  color:#0f1020; border-color:transparent; text-shadow:none;
  background:linear-gradient(135deg,#ffd98a,#ff9f6b);
}
.hud .serie.up{ animation:lvup 620ms var(--ease) }
@media (prefers-reduced-motion: reduce){ .hud .serie.up{ animation:none } }

.icon-btn{
  position:absolute; top:calc(8px + var(--pad-t)); left:calc(10px + var(--pad-l));
  width:40px; height:40px; border-radius:999px; border:1px solid var(--hair);
  background:rgba(8,9,15,.45); color:var(--txt); font-size:17px; cursor:pointer;
  display:grid; place-items:center; opacity:0; transition:opacity 220ms var(--ease);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.icon-btn.on{ opacity:.75 }
.icon-btn.on:hover{ opacity:1 }
.icon-btn.pause{ left:calc(58px + var(--pad-l)) }

/* ---------- Tasto «abbassati» ----------
   Il salto è il gesto sotto pressione e non deve aspettare nessuno, quindi
   resta il tocco libero su tutto lo schermo. La schivata ha il suo tasto:
   così sono istantanee tutte e due e nessuna delle due deve indovinare. */
.duck-btn{
  position:absolute; z-index:7;
  left:calc(18px + var(--pad-l)); bottom:calc(16px + var(--pad-b));
  width:132px; height:132px; border-radius:999px; cursor:pointer;
  border:2px solid rgba(246,223,164,.55); color:var(--gold-hi);
  background:rgba(8,9,15,.34);
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity 220ms var(--ease), transform 90ms var(--ease), background 90ms var(--ease);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
/* La freccia cresce col tondo, se no si perde in mezzo */
.duck-btn svg{ width:52px; height:52px }
/* Il dito che risponde resta più largo del tondo che si vede, ma di poco:
   da quando il tondo è mezzo più grande (10/8, chiesto da Fabio) è lui a
   fare il lavoro, e l'area invisibile non deve mangiarsi mezzo schermo —
   lì il tocco salta, e uno schermo che non salta si sente come un gioco
   che non risponde. */
.duck-btn::after{ content:''; position:absolute; inset:-20px; border-radius:999px }
.duck-btn.on{ opacity:.42; pointer-events:auto }
.duck-btn.on:hover{ opacity:.62 }
.duck-btn.on.press{ opacity:.95; transform:scale(.92); background:rgba(246,223,164,.28) }
@media (max-height:420px){
  .duck-btn{ width:112px; height:112px }
  .duck-btn svg{ width:44px; height:44px }
  .duck-btn::after{ inset:-18px }
}

/* ---------- I comandi, solo alla prima partita ---------- */
.zones{
  position:absolute; left:0; right:0; top:26%; z-index:6;
  display:grid; justify-items:center; gap:8px; pointer-events:none; text-align:center;
  animation:zones-out 900ms var(--ease) 3000ms both;
}
.zones p{
  font-size:14px; font-weight:650; color:var(--txt-soft);
  background:rgba(6,7,12,.6); border:1px solid var(--hair); border-radius:999px;
  padding:7px 16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.zones b{ color:var(--gold-hi); font-weight:850 }
.zones .arrow{ display:inline-block; color:var(--gold-hi); animation:swipe 1.4s var(--ease) infinite }
@keyframes swipe{ 0%,100%{ transform:translateY(-3px); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } }
@keyframes zones-out{ to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
  .zones{ animation-duration:1ms; animation-delay:3000ms } .zones .arrow{ animation:none }
}

/* ---------- Conto alla rovescia della ripartenza ---------- */
.count{
  position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:radial-gradient(60% 70% at 50% 50%, rgba(6,7,12,.5), rgba(4,5,9,.72));
}
.count span{
  font-family:var(--mono); font-weight:900; font-size:clamp(64px,26vh,150px); line-height:1;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.6));
}
.count span.pop{ animation:countpop 620ms var(--ease) both }
@keyframes countpop{
  0%{ transform:scale(1.7); opacity:0 } 22%{ transform:scale(1); opacity:1 }
  75%{ transform:scale(1); opacity:1 } 100%{ transform:scale(.86); opacity:.25 }
}
@media (prefers-reduced-motion: reduce){ .count span.pop{ animation:none } }

/* ---------- Schermate sopra il gioco ----------
   Non stanno su `inset:0` ma dentro al pezzo di finestra che si vede
   davvero (`--vh`/`--vt`, scritte da main.js con visualViewport). La
   differenza si vede solo quando iOS apre la tastiera: il riquadro fisso
   non si accorge di niente, la finestra visibile si dimezza, e una card
   centrata su tutto lo schermo finisce **sotto** la tastiera. È così che
   il campo del nome e il tasto «Salva» sparivano. */
.screen{
  position:absolute; left:0; right:0; top:var(--vt,0px); height:var(--vh,100%);
  display:grid; place-items:center; z-index:5;
  padding:calc(8px + var(--pad-t)) calc(8px + var(--pad-r)) calc(8px + var(--pad-b)) calc(8px + var(--pad-l));
  background:radial-gradient(80% 90% at 50% 45%, rgba(6,7,12,.58), rgba(4,5,9,.84));
  animation:fade 260ms var(--ease) both;
}
.hide{ display:none !important }
@keyframes fade{ from{ opacity:0 } }

/* Le schermate che si aprono **sopra** un'altra (la casa o la sconfitta)
   vogliono un fondo che copra davvero: con la velatura leggera si leggeva
   il «Byup Run» della casa attraverso il podio della classifica, e due
   scritte sovrapposte non sono nessuna delle due.

   E vogliono uno z-index scritto, non l'ordine nel documento. Con l'ordine
   e basta funzionava quasi sempre, ma quando la card sotto diventa più
   alta dello schermo e quindi scorrevole, Chrome la promuove a un livello
   suo e quella finisce **sopra** al velo: si vedeva la casa in chiaro
   davanti alla schermata del nome, proprio con la tastiera aperta, che è
   il momento in cui lo schermo è basso. */
   Niente `backdrop-filter` qui, ed è la stessa storia: con quello acceso
   la card promossa passava davanti lo stesso, z-index o no. Il velo è già
   opaco al 90%, la sfocatura sotto non la vedrebbe nessuno, e in cambio
   costa una riga che rompe l'ordine di disegno. */
#scr-rank, #scr-shop, #scr-trofei, #scr-nome{
  z-index:9;
  background:radial-gradient(80% 90% at 50% 45%, rgba(6,7,12,.94), rgba(4,5,9,.985));
}
/* il nome si apre anche da dentro la classifica: sta sopra a tutti */
#scr-nome{ z-index:10 }

.card{
  width:min(760px, 96%); max-height:100%; overflow:auto;
  text-align:center; display:grid; justify-items:center; gap:9px;
  padding:16px 22px; border-radius:22px;
  background:linear-gradient(180deg, rgba(23,27,44,.86), rgba(16,19,32,.92));
  border:1px solid var(--hair);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  scrollbar-width:none;
}
.card::-webkit-scrollbar{ display:none }
.over{ font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-mute) }
.logo{
  font-size:clamp(34px, 8.2vh, 62px); line-height:1; letter-spacing:-.02em; font-weight:900;
  background:linear-gradient(160deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 18px rgba(231,189,107,.22));
}
.sub{ color:var(--txt-soft); font-size:clamp(13px, 2.4vh, 16px) }
.note{ color:var(--txt-mute); font-size:12.5px; max-width:52ch }
.foot{ font-size:12px; color:var(--txt-mute) }
.foot a{ color:var(--gold); text-decoration:none }

.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:12px 36px; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-size:17px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff5c7a 0%,#ff4d6d 40%,#a04bff 100%);
  box-shadow:0 10px 28px rgba(255,77,109,.28);
  transition:transform 160ms var(--ease), filter 160ms var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:none; border:1px solid var(--hair); box-shadow:none; color:var(--txt-soft); font-weight:700 }
/* L'azione principale della schermata: una sola, grande, in mezzo. In casa è
   «Gioca», dopo una sconfitta è «Riprova». Grande non è vezzo: da fermi si
   guarda il centro, e il pollice deve trovarla senza mirare. */
.btn.grande{ min-height:62px; padding:16px 58px; font-size:23px; border-radius:999px }

/* ---------- Le scorciatoie: icone in alto a destra ----------
   Le stanze di fianco (negozio, trofei, classifica, casa) non competono con
   l'azione principale: stanno in un angolo, sempre lo stesso, con la stessa
   icona in tutte le schermate. L'etichetta sotto resta perché un'icona da
   sola si indovina, e indovinare non è capire. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.scorciatoie{ display:flex; gap:8px; align-items:start; justify-self:end }
.tondo{
  display:grid; justify-items:center; gap:3px; cursor:pointer;
  font:inherit; background:none; border:0; padding:0; color:var(--txt-soft);
}
.tondo .ico{
  width:46px; height:46px; padding:11px; box-sizing:border-box;
  border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid var(--hair); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:color 160ms var(--ease), border-color 160ms var(--ease),
             background 160ms var(--ease), transform 160ms var(--ease);
}
.tondo i{
  font-style:normal; font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-mute);
}
.tondo:hover .ico{
  color:var(--gold-hi); border-color:rgba(231,189,107,.45);
  background:rgba(231,189,107,.1); transform:translateY(-2px);
}
.tondo:hover i{ color:var(--gold) }
.tondo:active .ico{ transform:translateY(0) }

.keys{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; list-style:none }
.keys li{
  font-size:12.5px; color:var(--txt-soft); border:1px solid var(--hair);
  border-radius:999px; padding:6px 13px; background:rgba(255,255,255,.04);
}
.keys b{ color:var(--gold); font-weight:750 }

/* ---------- Sconfitta ----------
   Due colonne, il Byup e il resoconto, e sopra tutto la fila delle icone:
   le scorciatoie prendono la riga intera e si appoggiano a destra, così non
   possono finire addosso al punteggio quando la card si stringe. */
.over-card{ grid-template-columns:auto auto; align-items:center; gap:6px 20px }
.over-card .scorciatoie{ grid-column:1 / -1 }
.over-card img{
  grid-column:1; width:clamp(96px, 22vh, 170px); height:auto; display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.over-card .over-copy{ grid-column:2 }
.over-copy{ display:grid; justify-items:center; gap:6px }
.big{
  font-family:var(--mono); font-size:clamp(38px, 11vh, 68px); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.big2{ font-size:clamp(26px,6vh,40px); font-weight:800 }
.rec{ font-family:var(--mono); font-size:13px; color:var(--txt-mute) }
.rec.new{ color:var(--gold); font-weight:700 }
.row{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center }
.mini{ width:auto; padding:20px 40px }

/* ---------- Byuppini: la moneta ----------
   L'icona è il byuppino d'oro vero, lo stesso che si raccoglie correndo:
   la moneta del negozio e la cosa che si prende in gioco devono essere la
   stessa cosa, se no sono due monete. */
.bmoneta{
  display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em;
  background:url(../assets/items/byuppino.webp) center/contain no-repeat;
  filter:drop-shadow(0 1px 4px rgba(231,189,107,.5));
}
.borsa{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px;
  color:var(--gold-hi); background:rgba(231,189,107,.1);
  border:1px solid rgba(231,189,107,.28); border-radius:999px; padding:5px 12px;
}
.borsa b{ font-weight:800 }
.borsa.grande{ font-size:15px; padding:6px 14px }
.borsa.cresce{ animation:borsa-su 620ms var(--ease) }
@keyframes borsa-su{ 30%{ transform:scale(1.14); background:rgba(231,189,107,.28) } }
@media (prefers-reduced-motion: reduce){ .borsa.cresce{ animation:none } }

/* ---------- La tessera del giocatore, in casa ---------- */
.tessera{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center }
.chi{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.05); border:1px solid var(--hair);
  border-radius:999px; padding:4px 14px 4px 4px; color:var(--txt);
  transition:border-color 160ms var(--ease), background 160ms var(--ease);
}
.chi:hover{ border-color:rgba(231,189,107,.45); background:rgba(231,189,107,.08) }
.chi .avatar{
  width:32px; height:32px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.chi .avatar img{ width:26px; height:auto; display:block; transform:translateY(2px) }
.chi-txt{ display:grid; justify-items:start; line-height:1.15 }
.chi-txt i{ font-style:normal; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute) }
.chi-txt b{ font-size:14px; font-weight:800 }
/* La tessera sta **sotto** al tasto: prima veniva prima, e la prima cosa
   della casa deve essere quella che si fa, non quella che si è. */
.tessera{ margin-top:2px }
.guadagno{ font-size:13px; color:var(--gold); font-weight:700 }
.guadagno b{ font-family:var(--mono); font-weight:800 }

/* ---------- Card con testa e piede fermi ----------
   Solo il corpo scorre. Prima scorreva tutta la card: su uno schermo
   basso i tasti in fondo finivano oltre il bordo, e «Cambia nome» era lì
   ma non lo trovava nessuno. */
.card.rank-card, .card.shop-card, .card.trofei-card{
  overflow:hidden; grid-template-rows:auto minmax(0,1fr) auto; align-content:stretch;
  justify-items:stretch; text-align:left; gap:8px;
}
/* Il corpo che scorre sfuma in fondo: su uno schermo basso la fila dopo
   resta tagliata netta e sembra la fine, mentre è solo il bordo. */
.rank-corpo, .scaffale, .bacheca{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
}
.testa{ display:grid; gap:2px; justify-items:center; text-align:center }
.testa-riga{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap }
.piede{ justify-content:center; margin-top:2px }
.conta{
  font-family:var(--mono); font-size:13px; color:var(--gold);
  background:rgba(231,189,107,.1); border:1px solid rgba(231,189,107,.28);
  border-radius:999px; padding:4px 12px;
}

/* ---------- Classifica ---------- */
.rank-card{ width:min(620px,96%) }
.rank-corpo{ overflow:auto; scrollbar-width:none; display:grid; gap:8px; align-content:start }
.rank-corpo::-webkit-scrollbar{ display:none }

/* Il podio: i primi tre si guardano, non si leggono. Il primo sta in
   mezzo e più alto, come su un podio vero. */
.podio{
  list-style:none; display:grid; grid-template-columns:1fr 1.16fr 1fr;
  align-items:end; gap:8px; padding-top:2px;
}
.podio li{
  display:grid; justify-items:center; gap:3px; text-align:center;
  padding:10px 6px 9px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--hair);
}
.podio li .med{ font-size:19px; line-height:1 }
.podio li .nom{
  font-size:13px; font-weight:800; color:var(--txt); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.podio li .pun{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:800; color:var(--gold-hi);
}
.podio li.p1{
  order:2; padding-top:14px; padding-bottom:13px;
  background:linear-gradient(180deg, rgba(231,189,107,.22), rgba(231,189,107,.05));
  border-color:rgba(231,189,107,.45);
  box-shadow:0 10px 30px rgba(231,189,107,.14);
}
.podio li.p1 .med{ font-size:24px }
.podio li.p1 .pun{ font-size:19px }
.podio li.p2{ order:1 }
.podio li.p3{ order:3 }
.podio li.io{ box-shadow:inset 0 0 0 1.5px rgba(231,189,107,.75) }

.board{
  list-style:none; width:100%; display:grid; gap:2px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.board li{
  display:grid; grid-template-columns:2.4em 1fr auto; gap:10px; align-items:baseline;
  padding:6px 10px; border-radius:9px; font-size:14px; color:var(--txt-soft);
}
.board li:nth-child(odd){ background:rgba(255,255,255,.035) }
.board li b{ font-weight:800; color:var(--txt) }
.board li .pos{ color:var(--txt-mute); font-size:12.5px }
.board li.io{ background:rgba(231,189,107,.16); box-shadow:inset 0 0 0 1px rgba(231,189,107,.4) }
.board li.io b{ color:var(--gold-hi) }
.board .vuoto{ display:block; text-align:center; color:var(--txt-mute); padding:18px; font-family:var(--font) }
.rank{ font-size:13.5px; font-weight:700; color:var(--gold) }
#board-note{ text-align:center }

/* ---------- Diagnostica della rete ---------- */
.rete-card{ width:min(680px,96%) }
.referto{
  width:100%; max-height:46vh; overflow:auto; text-align:left;
  font-family:var(--mono); font-size:12px; line-height:1.55;
  color:var(--txt-soft); background:rgba(0,0,0,.34);
  border:1px solid var(--hair); border-radius:12px; padding:10px 12px;
  white-space:pre-wrap; word-break:break-word;
}
.referto b{ color:var(--gold-hi) }
.referto .no{ color:#ff8a9c; font-weight:800 }
.referto .si{ color:#7ee0a8; font-weight:800 }

/* ---------- Negozio ---------- */
.shop-card{ width:min(760px,96%) }
.scaffale{
  overflow:auto; scrollbar-width:none; display:grid; gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); align-content:start;
  padding:2px;
}
.scaffale::-webkit-scrollbar{ display:none }
.capo{
  display:grid; justify-items:center; gap:5px; text-align:center;
  padding:10px 8px 9px; border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--hair);
}
/* La piastra dietro alla figurina è **chiara e piena**, non una velatura sul
   nero della card: da quando in catalogo c'è il Byup Nero, un fondo scuro
   voleva dire vendere una sagoma invisibile. Un grigio di mezzo regge tutti
   e due gli estremi, il nero e il bianco, ed è il minimo che si deve a chi
   sta per spendere diciottomila Byuppini. */
.capo .vetrina{
  width:100%; height:62px; display:grid; place-items:center;
  border-radius:11px;
  background:
    radial-gradient(62% 74% at 50% 58%, rgba(255,255,255,.30), rgba(255,255,255,.10) 70%, rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* L'ombra portata è l'unica cosa che, sul chiaro, tiene staccato il Byup
   bianco dalla piastra. */
.capo .vetrina img{ height:58px; width:auto; display:block; filter:drop-shadow(0 4px 9px rgba(0,0,0,.45)) }
.capo .nom{ font-size:13px; font-weight:800 }
.capo .nota{ font-size:10.5px; color:var(--txt-mute); line-height:1.3; min-height:2.6em }
.capo .prezzo{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px;
  font-weight:800; color:var(--gold-hi); display:inline-flex; align-items:center; gap:5px;
}
.capo .bmoneta{ width:1em; height:1em }
.capo button{
  font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; width:100%;
  min-height:34px; border-radius:999px; border:0; color:#fff;
  background:linear-gradient(135deg,#ff5c7a,#a04bff);
  transition:filter 140ms var(--ease), transform 140ms var(--ease);
}
.capo button:hover{ transform:translateY(-1px) }
.capo button[disabled]{ cursor:default; transform:none }
.capo.mia button{ background:none; border:1px solid var(--hair); color:var(--txt-soft); font-weight:700 }
.capo.addosso{ border-color:rgba(231,189,107,.5); background:linear-gradient(180deg, rgba(231,189,107,.16), rgba(231,189,107,.03)) }
.capo.addosso button{ background:none; border:1px solid rgba(231,189,107,.5); color:var(--gold-hi) }
.capo.cara .prezzo{ color:var(--txt-mute) }
.capo.cara button{ background:rgba(255,255,255,.07); color:var(--txt-mute) }
#shop-note{ text-align:center }
#shop-note.no{ color:var(--accent); font-weight:700 }

/* ---------- Trofei ---------- */
.trofei-card{ width:min(680px,96%) }
.bacheca{
  list-style:none; overflow:auto; scrollbar-width:none; display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill, minmax(215px,1fr)); align-content:start;
}
.bacheca::-webkit-scrollbar{ display:none }
.bacheca li{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  padding:8px 12px; border-radius:13px;
  background:rgba(255,255,255,.035); border:1px solid var(--hair);
}
.bacheca li .med{ font-size:21px; line-height:1; filter:grayscale(1) opacity(.35) }
.bacheca li .txt{ display:grid; gap:1px }
.bacheca li .nom{ font-size:13px; font-weight:800; color:var(--txt-mute) }
.bacheca li .nota{ font-size:11px; color:var(--txt-mute); opacity:.75; line-height:1.3 }
.bacheca li.preso{
  background:linear-gradient(180deg, rgba(231,189,107,.15), rgba(231,189,107,.03));
  border-color:rgba(231,189,107,.4);
}
.bacheca li.preso .med{ filter:none }
.bacheca li.preso .nom{ color:var(--gold-hi) }
.bacheca li.preso .nota{ color:var(--txt-soft); opacity:1 }

/* ---------- Trofeo appena preso ---------- */
.brindisi{
  position:absolute; z-index:22; left:50%; transform:translateX(-50%);
  top:calc(14px + var(--pad-t));
  display:flex; align-items:center; gap:10px; max-width:min(420px,92%);
  padding:9px 18px 9px 13px; border-radius:999px;
  background:linear-gradient(135deg, rgba(35,28,10,.96), rgba(20,17,12,.96));
  border:1px solid rgba(231,189,107,.5);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  animation:brindisi 3400ms var(--ease) both;
}
.brindisi .med{ font-size:22px; line-height:1 }
.brindisi .txt{ display:grid; gap:1px }
.brindisi i{ font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold) }
.brindisi b{ font-size:14px; font-weight:800; color:var(--txt) }
@keyframes brindisi{
  0%{ opacity:0; transform:translate(-50%,-14px) }
  9%,82%{ opacity:1; transform:translate(-50%,0) }
  100%{ opacity:0; transform:translate(-50%,-10px) }
}
@media (prefers-reduced-motion: reduce){ .brindisi{ animation:none } }

/* ---------- Il nome del giocatore ----------
   Si chiede alla fine della partita finché non c'è, e si cambia dal tasto
   della classifica: in tutti e due i casi è questa schermata, con la faccia
   del gioco. Il Byup di fianco fa capire che è una domanda del gioco e non
   del browser, ed è lo stesso impianto della schermata di sconfitta. */
.nome-card{
  grid-auto-flow:column; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:6px 22px; width:min(620px,96%);
}
.nome-byup{
  width:clamp(74px, 17vh, 128px); height:auto; display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
  animation:nome-bob 2.6s var(--ease) infinite;
}
.nome-copy{ display:grid; justify-items:center; gap:8px }
.nome-copy .sub{ max-width:34ch }
.nome-copy .note{ max-width:38ch }
@keyframes nome-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@media (prefers-reduced-motion: reduce){ .nome-byup{ animation:none } }

.campo{
  font:inherit; font-size:16px; font-weight:700; color:var(--txt); text-align:center;
  letter-spacing:.02em;
  background:rgba(255,255,255,.06); border:1px solid var(--hair);
  border-radius:999px; padding:12px 18px; width:min(220px,52vw); min-height:48px;
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.campo::placeholder{ color:var(--txt-mute); font-weight:500 }
.campo:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,189,107,.18) }
/* campo vuoto e «Salva» premuto: il tasto non può restare muto */
.campo.scuoti{ animation:scuoti 380ms var(--ease); border-color:var(--accent) }
@keyframes scuoti{
  0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-7px) }
  45%{ transform:translateX(6px) } 70%{ transform:translateX(-3px) }
}
@media (prefers-reduced-motion: reduce){ .campo.scuoti{ animation:none } }

/* ---------- Con la tastiera aperta ----------
   La classe la mette main.js quando la finestra **visibile** scende sotto
   i 320 px, che in orizzontale vuol dire una cosa sola: tastiera. Non si
   può fare con una media query, perché quelle guardano il riquadro di
   layout e quello non si accorge della tastiera. Resta in piedi solo
   l'essenziale: la domanda, il campo, i due tasti. */
.basso .card{ padding:8px 14px; gap:5px }
.basso .nome-byup, .basso .nome-copy .note, .basso .over{ display:none }
.basso .big2{ font-size:20px }
.basso .nome-copy .sub{ font-size:11.5px; max-width:60ch }
.basso .campo{ min-height:40px; padding:8px 16px; font-size:15px }
.basso .btn{ min-height:38px; padding:8px 24px; font-size:15px }
.basso .row{ margin-top:2px }
.basso .nome-card{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr) }
/* iPhone in orizzontale con la tastiera aperta: restano poco più di 190 px
   e ci deve stare tutto quello che serve a finire il lavoro. */
.bassissimo .nome-copy .sub{ display:none }
.bassissimo .big2{ font-size:18px }
.bassissimo .card{ padding:7px 12px; gap:4px }

/* ---------- Gira il telefono ---------- */
.rotate{
  position:absolute; inset:0; z-index:20; display:grid; place-items:center; align-content:center; gap:14px;
  background:#06070c; text-align:center; padding:24px;
}
.rotate p{ font-size:19px; font-weight:750 }
.rotate .small{ font-size:13px; color:var(--txt-mute); font-weight:400 }
.rotate svg{ animation:tilt 2.6s var(--ease) infinite }
@keyframes tilt{ 0%,45%{ transform:rotate(0) } 62%,100%{ transform:rotate(-90deg) } }

/* ---------- Sigla di Eureka Games ----------
   Stessa lampadina morsa della landing e della splash dell'Impostore:
   il morso arriva a metà, poi il marchio si scrive e tutto sfuma. */
.splash{
  position:absolute; inset:0; z-index:25; background:#06070c;
  display:grid; place-content:center; justify-items:center; gap:2px;
  animation:splash-out 380ms var(--ease) 1720ms both;
}
.splash .mark{ width:clamp(64px,16vh,104px); height:clamp(64px,16vh,104px); overflow:visible }
.splash .glass{ fill:rgba(255,200,74,.13); stroke:var(--gold); stroke-width:2.5 }
.splash .base rect{ fill:rgba(231,189,107,.25); stroke:var(--gold); stroke-width:2 }
.splash .base line{ stroke:var(--gold); stroke-width:2; stroke-linecap:round }
.splash .glow{ fill:#ffc84a; opacity:.16 }
.splash .bulb{ animation:jolt 720ms var(--ease) 620ms both }
.splash .bite circle{ transform-origin:47px 15px; transform:scale(0); animation:biteIn 200ms var(--ease) 620ms both }
.splash .bite circle:last-child{ animation-delay:740ms }
.splash .brand{
  margin-top:12px; font-size:clamp(22px,4.6vh,32px); font-weight:900; letter-spacing:.34em;
  text-indent:.34em; color:var(--gold-hi); animation:rise 460ms var(--ease) 820ms both;
}
.splash .brand-sub{
  font-size:clamp(9px,1.6vh,12px); font-weight:700; letter-spacing:.5em; text-indent:.5em;
  color:var(--txt-mute); animation:rise 460ms var(--ease) 950ms both;
}
@keyframes biteIn{ to{ transform:scale(1) } }
@keyframes jolt{ 0%{rotate:0deg} 22%{rotate:-7deg} 45%{rotate:2.5deg} 62%{rotate:-4deg} 100%{rotate:0deg} }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1 } }
@keyframes splash-out{ to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
  .splash, .splash *{ animation-duration:1ms !important; animation-delay:0ms !important }
  .splash{ animation:splash-out 300ms linear 900ms both }
}

/* ---------- Caricamento ---------- */
.boot{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:#06070c }
.boot .bar{ width:min(240px,60vw); height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden }
.boot .bar i{ display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)); transition:width 220ms linear }

@media (prefers-reduced-motion: reduce){
  .screen{ animation:none } .rotate svg{ animation:none } .btn{ transition:none }
}
/* schermi bassi in orizzontale: la card non deve mai sforare.
   È la variante che conta davvero, perché è quella dei telefoni girati. */
@media (max-height:420px){
  .card{ padding:12px 18px; gap:7px }
  .note{ display:none }
  .keys li{ font-size:11.5px; padding:5px 11px }
  .home .foot{ display:none }
  .chi{ padding:3px 12px 3px 3px }
  .chi .avatar{ width:28px; height:28px }
  .chi .avatar img{ width:23px }
  /* Sul telefono girato «Gioca» resta il pezzo grosso, ma di poco: l'altezza
     è quella che manca, non la larghezza. */
  .btn.grande{ min-height:52px; padding:12px 46px; font-size:20px }
  .tondo .ico{ width:40px; height:40px; padding:9.5px }
  .tondo i{ font-size:8.5px }
  .scorciatoie{ gap:6px }
  .over-card .guadagno{ font-size:12px }
  .capo{ padding:8px 7px }
  .capo .vetrina{ height:50px }
  .capo .vetrina img{ height:46px }
  .capo .nota{ display:none }
  .scaffale{ grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:7px }
  .bacheca li .nota{ display:none }
  .bacheca{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)) }
  .podio li{ padding:7px 5px 6px }
  .podio li.p1{ padding-top:10px; padding-bottom:9px }
}