/* TikForge — THE PULL, stili della pagina di gioco.
   Foglio autonomo come game.css (Stack): palette e font di css/styles.css,
   ma nessuna dipendenza da quel file — il gioco vive sul sottodominio e
   deve caricare un foglio solo. La scena è tutta nel canvas: qui c'è la
   cornice — HUD, schermate, pannelli. */

:root{
  color-scheme: dark;
  --bg: #000000;
  --panel: #100918;
  --panel-2: #150C20;
  --ink: #F1E7FF;
  --muted: #B6A0CF;
  --line: rgba(214,190,245,0.10);
  --left: #38BDF8;
  --right: #F43F5E;
  --violet: #A855F7;
  --radius: 14px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{ height: 100%; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  line-height: 1.4;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }

.game-root{ position: fixed; inset: 0; }
#board{ position: absolute; inset: 0; display: block; }

/* La striscia 9:16 in cui vive il gioco (il formato della diretta TikTok):
   la posiziona the-pull.js (left/width, vedi resize), qui solo l'altezza.
   TUTTA la UI sta dentro di lei, così su desktop resta nel campo e non
   spalmata sulla finestra — stessa idea della .stage di Stack. */
.stage{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }

/* ---------------------------------------------------------------- HUD
   Niente più card giocatore in DOM: nomi, WIN e sostenitori sono disegnati
   nel campo dal canvas (drawFieldHeader in the-pull.js) — la parte alta
   della striscia è riservata alla camera dello streamer e resta vuota. */

/* Titolo + tasti: nell'angolo in alto a sinistra, discreti. Il centro dello
   schermo in alto è del watermark e del timer (drawFieldHeader nel canvas),
   e i quarti sono dei contatori WIN: l'angolo è l'unico posto che il campo
   non usa. */
.hud-mid{
  position: absolute; z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  /* a destra del bottone ☰, che occupa l'angolo */
  left: calc(max(12px, env(safe-area-inset-left)) + 64px);
  text-align: left; padding-top: 2px;
}
.hud-mid .hud-tools{ justify-content: flex-start; }
.hud-title{
  font-family: 'Luckiest Guy', 'Baloo 2', sans-serif;
  font-size: 19px; letter-spacing: 1.5px;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(168,85,247,0.55);
}
.hud-tools{ display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.icon-btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(16,9,24,0.82);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.icon-btn:hover{ color: var(--ink); border-color: rgba(214,190,245,0.3); }

/* ---------------------------------------------------------- menu ☰
   Il bottone: tondo, nell'angolo in alto a sinistra, col gradiente del
   brand. Il cassetto: tutta l'altezza del lato sinistro, sottomenù
   <details> espandibili, tipografia Baloo per i titoli e Nunito per le
   etichette — aria fra le righe, non un modulo fitto. */
.menu-fab{
  position: absolute; z-index: 6;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(214,190,245,0.3);
  background: linear-gradient(160deg, #B36AF9, #7E22CE);
  color: #fff; font-size: 21px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(140,60,220,0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-fab:hover{ transform: scale(1.08) rotate(90deg); box-shadow: 0 14px 32px rgba(140,60,220,0.65); }
.menu-fab:active{ transform: scale(.95); }
.menu-fab span{ line-height: 1; }

.menu-panel{
  position: absolute; z-index: 30;
  top: 0; bottom: 0; left: 0;
  width: min(370px, 94vw);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(165deg, rgba(24,13,36,0.97), rgba(13,7,22,0.97));
  border-right: 1px solid rgba(168,85,247,0.25);
  box-shadow: 24px 0 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  animation: menu-in .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes menu-in{
  from{ transform: translateX(-40px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}

.menu-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.menu-title{
  font-family: 'Luckiest Guy', 'Baloo 2', sans-serif;
  font-size: 24px; letter-spacing: 2px;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(168,85,247,0.5);
}
.menu-close{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted); font-size: 14px;
  cursor: pointer;
}
.menu-close:hover{ color: var(--ink); border-color: rgba(244,63,94,0.6); }

.menu-kicker{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted);
  margin: 0 0 8px 2px;
}
/* le tile di navigazione: griglia compatta, icona sopra ed etichetta sotto */
.menu-nav{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.menu-tile{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px 9px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(214,190,245,0.05);
  color: var(--ink);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.menu-tile i{ font-style: normal; font-size: 19px; line-height: 1; }
.menu-tile:hover{
  border-color: rgba(168,85,247,0.6);
  background: rgba(168,85,247,0.14);
  transform: translateY(-1px);
}

/* i sottomenù: <details> con summary grande e freccia che ruota */
.mSez{
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(214,190,245,0.03);
  margin-bottom: 8px;
  overflow: hidden;
}
.mSez summary{
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.mSez summary::-webkit-details-marker{ display: none; }
.mSez summary i{ font-style: normal; font-size: 16px; }
.mSez summary::after{
  content: "▾"; margin-left: auto;
  color: var(--muted); font-size: 12px;
  transition: transform .18s ease;
}
.mSez[open] summary::after{ transform: rotate(180deg); }
.mSez[open] summary{ border-bottom: 1px solid var(--line); }
.mSez > *:not(summary){ margin-left: 14px; margin-right: 14px; }
.mSez > .mRiga:first-of-type{ margin-top: 10px; }
.mSez > *:last-child{ margin-bottom: 12px; }

/* righe cursore/interruttore: etichetta e controllo ben distanziati */
.mRiga{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px; color: var(--muted);
}
.mRiga span{ font-weight: 600; }
.mRiga input[type="range"]{
  width: 138px; flex: none;
  accent-color: var(--violet);
}
.mRiga input[type="checkbox"]{
  width: 19px; height: 19px; flex: none;
  accent-color: var(--violet);
}
.mNota{
  font-size: 11.5px; line-height: 1.5;
  color: var(--muted); opacity: .8;
  margin-top: 8px; margin-bottom: 8px;
}

/* bottoni dentro i sottomenù */
.menu-item{
  display: block; width: calc(100% - 28px);
  text-align: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 13.5px;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(214,190,245,0.06);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.menu-item:hover{ border-color: rgba(168,85,247,0.55); background: rgba(168,85,247,0.12); }
.menu-item.menu-rosso{
  border-color: rgba(244,63,94,0.45);
  background: rgba(244,63,94,0.12);
}
.menu-item.menu-rosso:hover{ border-color: rgba(244,63,94,0.8); background: rgba(244,63,94,0.2); }
.menu-item.menu-oro{
  border-color: rgba(255,209,102,0.45);
  background: rgba(255,209,102,0.1);
  color: #FFD75E;
}
.menu-item.menu-oro:hover{ border-color: rgba(255,209,102,0.8); background: rgba(255,209,102,0.18); }

.menu-langs{ display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.menu-lang{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
}
.menu-lang:hover{ color: var(--ink); border-color: rgba(214,190,245,0.35); }
.menu-lang.is-active{
  color: var(--ink);
  border-color: var(--violet);
  background: rgba(168,85,247,0.18);
}

/* ------------------------------------------------------------ countdown */

/* Più in basso del centro (align-items: end + padding-bottom): il numero
   sta sopra la corda, dove succede la contesa, non in mezzo ai loghi.
   Bangers: cartoonesco e carico, caricato apposta per il countdown (ha
   preso il posto di Titan One, che non è piaciuto). Stretto e alto com'è,
   regge una taglia in più della stessa larghezza. */
.countdown{
  position: absolute; inset: 0;
  display: grid; justify-items: center; align-items: end;
  padding-bottom: 34vh;
  font-family: 'Bangers', 'Luckiest Guy', 'Baloo 2', sans-serif;
  letter-spacing: 4px;
  font-size: clamp(96px, 30vh, 230px);
  color: var(--ink);
  text-shadow: 0 0 44px rgba(168,85,247,0.85), 0 7px 0 rgba(0,0,0,0.5);
  pointer-events: none;
  visibility: hidden;
}
[data-state="countdown"] .countdown{ visibility: visible; }
.countdown.pop{ animation: cd-pop .9s ease-out; }
@keyframes cd-pop{
  0%{ transform: scale(1.7); opacity: 0; }
  25%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(.92); opacity: .9; }
}
/* Il "PULL!" arriva quando lo stato è già battle: .go-flash lo tiene in
   scena per la durata dell'animazione e a fine animazione il JS toglie la
   classe (animationend) — niente timer. */
.countdown.go-flash{
  visibility: visible;
  animation: cd-go 1s ease-out forwards;
}
@keyframes cd-go{
  0%{ transform: scale(2); opacity: 0; }
  20%{ transform: scale(1); opacity: 1; }
  70%{ transform: scale(1.04); opacity: 1; }
  100%{ transform: scale(1.1); opacity: 0; }
}

/* ------------------------------------------------------------ RUSH */

.rush{
  position: absolute; top: 22%; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  font-family: 'Luckiest Guy', 'Baloo 2', sans-serif;
  font-size: clamp(40px, 9vmin, 90px);
  color: #FFD166;
  text-shadow: 0 0 26px rgba(255,160,40,0.85), 0 4px 0 rgba(0,0,0,0.5);
  animation: rush-throb .28s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rush-throb{
  from{ transform: translateX(-50%) rotate(-4deg) scale(1); }
  to{ transform: translateX(-50%) rotate(-2deg) scale(1.12); }
}

/* ------------------------------------------------------------ schermate */

.screen{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility .25s;
}
[data-state="idle"] .screen--menu,
[data-state="win"] .screen--win{ visibility: visible; opacity: 1; }

.panel{
  width: min(430px, calc(100vw - 32px));
  padding: 30px 26px;
  text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.brand{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); text-decoration: none;
  font-weight: 700; font-size: 14px;
  margin-bottom: 12px;
}
.brand:hover{ color: var(--ink); }
.title{
  font-family: 'Luckiest Guy', 'Baloo 2', sans-serif;
  font-size: 44px; letter-spacing: 3px;
  text-shadow: 0 0 24px rgba(168,85,247,0.6);
}
.tagline{ color: var(--muted); font-size: 14.5px; margin: 10px 0 22px; }
.hint{ color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* Template di battle nel menu: chips compatte, due-tre per riga. La scelta
   attiva resta accesa (is-active, messa da the-pull.js). */
.tpl-title{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 13px;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 10px;
}
.tpl-grid{
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: center;
  margin-bottom: 20px;
}
.tpl-chip{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(214,190,245,0.05);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.tpl-chip:hover{ border-color: rgba(214,190,245,0.35); }
.tpl-chip.is-active{
  border-color: var(--violet);
  background: rgba(168,85,247,0.18);
}
/* Da pannello flottante (bottoni ⚔ e 🌆) le chips non hanno il margine di
   respiro che avevano nel menu: il bordo del pannello fa già da cornice. */
.tpl-panel{ width: min(420px, 94%); }
.tpl-panel .tpl-grid{ margin-bottom: 0; }
kbd{
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; background: rgba(214,190,245,0.06);
}

.win-title{
  font-family: 'Luckiest Guy', 'Baloo 2', sans-serif;
  font-size: 38px;
  animation: win-in .5s cubic-bezier(.2,1.6,.4,1);
}
.win-title.win-left{ color: var(--left); text-shadow: 0 0 30px rgba(56,189,248,0.7); }
.win-title.win-right{ color: var(--right); text-shadow: 0 0 30px rgba(244,63,94,0.7); }
@keyframes win-in{
  from{ transform: scale(.4); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.win-sub{ color: var(--muted); font-size: 14px; margin: 10px 0 22px; }

.panel-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.btn{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 15.5px;
  padding: 11px 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary{
  background: linear-gradient(180deg, #B36AF9, #8E30E6);
  color: #fff;
  box-shadow: 0 10px 26px rgba(140,60,220,0.4);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(140,60,220,0.55); }
.btn-primary:active{ transform: translateY(0) scale(.97); }
.btn-outline{
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-outline:hover{ border-color: rgba(214,190,245,0.35); }

/* ------------------------------------------------------------ event log */


/* ------------------------------------------------------------ pannelli */

.dev-panel, .set-panel{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 12px;
  background: rgba(16,9,24,0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}

.dev-grid{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px;
}
.dev-col{ display: flex; gap: 6px; }
.dev-btn{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(214,190,245,0.05);
  color: var(--ink);
  cursor: pointer;
}
.dev-btn:hover{ border-color: rgba(214,190,245,0.35); }
.dev-left{ border-bottom: 2px solid var(--left); }
.dev-right{ border-bottom: 2px solid var(--right); }
.dev-row{ display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.dev-row .dev-btn{ border-bottom: 2px solid var(--violet); }

.set-panel{ width: min(340px, 94%); }

/* Con la banda laterale larga abbastanza (has-band, messa da resize in
   the-pull.js) i pannelli di customizzazione escono dal campo e si
   agganciano al centro della banda sinistra, sotto il titolo: si configura
   SENZA coprire la schermata di gioco. Sul telefono restano dov'erano,
   sopra la scena — lì la banda non esiste. */
.game-root.has-band .set-panel,
.game-root.has-band .dev-panel{
  left: var(--band-cx);
  bottom: auto;
  top: 128px;
  width: min(440px, calc(var(--band-w) - 24px));
}
.game-root.has-band .dev-grid{ grid-template-columns: 1fr; gap: 6px; }
.set-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.set-row label{ font-size: 13px; color: var(--muted); }
.set-row input[type="text"],
.set-row input[type="number"]{
  width: 150px;
  padding: 8px 10px;
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  background: rgba(214,190,245,0.06);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
}
.set-row input[type="number"]{ width: 76px; }
/* ---------------------------------------------------------- pannello 🎁
   Due sezioni (Team Blu / Team Rosso, coi nomi veri del momento) da sei
   righe l'una: il pannello scorre invece di sfondare lo schermo. Ogni riga
   è una griglia fissa — icona, regalo, segno, valore — così le colonne
   restano allineate fra le righe e la lista da 676 regali resta leggibile. */
#railPanel{
  width: min(480px, 96%);
  max-height: min(64vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rail-team{
  display: flex; align-items: center; gap: 8px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 14px;
  margin: 14px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-team:first-child{ margin-top: 0; }
/* la "bandiera" della squadra: un pallino del suo colore prima del nome */
.rail-team::before{
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.rail-team-left{ color: var(--left); }
.rail-team-left::before{ background: var(--left); box-shadow: 0 0 8px var(--left); }
.rail-team-right{ color: var(--right); }
.rail-team-right::before{ background: var(--right); box-shadow: 0 0 8px var(--right); }

/* Due piani per riga: sopra il regalo (icona + tendina + ×), sotto le
   regolazioni (azione, e per Tira anche segno e potenza) — nel pannello da
   340px una riga sola non li terrebbe tutti. L'icona fa da parentesi ai
   due piani. */
.rail-row{
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  grid-template-areas:
    "ico gift del"
    "ico ctrl ctrl";
  gap: 5px 7px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(214,190,245,0.12);
}
.rail-ico{
  grid-area: ico;
  width: 30px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.rail-gift{ grid-area: gift; min-width: 0; }
.rail-del{
  grid-area: del;
  width: 26px; height: 26px; padding: 0;
  font: inherit; font-size: 15px; line-height: 1;
  color: var(--muted);
  background: rgba(214,190,245,0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.rail-del:hover{ color: #FF8585; border-color: rgba(255,133,133,0.5); }
/* azione + segno + potenza: la tendina azione si prende lo spazio, con
   Win ± segno e potenza spariscono ([hidden] esplicito: la regola flex
   sotto altrimenti li terrebbe visibili — lezione già presa coi font) */
.rail-ctrl{ grid-area: ctrl; display: flex; gap: 7px; min-width: 0; }
.rail-ctrl .rail-act{ flex: 1 1 auto; min-width: 0; }
.rail-ctrl .rail-sign{ flex: 0 0 52px; }
.rail-ctrl .rail-power{ flex: 0 0 84px; }
.rail-ctrl [hidden]{ display: none; }
/* "+ Aggiungi regalo" sotto le righe della squadra */
.rail-add{
  width: 100%;
  margin: 6px 0 2px;
  padding: 8px 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 13px;
  color: var(--muted);
  background: none;
  border: 1px dashed var(--line);
  border-radius: 9px;
  cursor: pointer;
}
.rail-add:hover{ color: var(--ink); border-color: rgba(214,190,245,0.4); }

/* ------------------------------------------------------------ cancello
   Il velo abbonati non ha più stile qui: adesso è game/js/access-gate.js,
   uguale per tutti i giochi web, e lo stile se lo porta dietro il file — così
   un gioco nuovo, con il suo CSS nuovo, non deve ricordarsi di ricopiarlo. */
.rail-row select,
.rail-row input[type="number"]{
  width: 100%;
  padding: 8px 8px;
  font: inherit; font-size: 13px;
  color: var(--ink);
  background: rgba(214,190,245,0.06);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
}
.rail-row select:hover,
.rail-row input[type="number"]:hover{ border-color: rgba(214,190,245,0.3); }
.rail-row select:focus,
.rail-row input[type="number"]:focus{ border-color: rgba(168,85,247,0.6); }
/* le option ereditano il tema scuro (il menu nativo altrimenti è bianco) */
.rail-row select option{ background: var(--panel-2); color: var(--ink); }
.rail-sign{ text-align: center; }
.set-row input[type="text"]:focus,
.set-row input[type="number"]:focus{ border-color: rgba(168,85,247,0.6); }
/* upload del logo squadra: input file compatto + la × per toglierlo */
.img-ctl{ display: flex; align-items: center; gap: 6px; }
.img-ctl input[type="file"]{
  width: 132px;
  font-size: 11px; color: var(--muted);
}
.img-ctl input[type="file"]::file-selector-button{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 12px;
  padding: 6px 10px; margin-right: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(214,190,245,0.06);
  color: var(--ink);
  cursor: pointer;
}
.img-ctl input[type="file"]::file-selector-button:hover{ border-color: rgba(214,190,245,0.35); }
.img-clear{
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.img-clear:hover{ color: var(--ink); border-color: rgba(214,190,245,0.35); }

.set-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.set-actions .btn{ padding: 8px 16px; font-size: 13.5px; }

/* ------------------------------------------------------------ mobile */

@media (max-width: 640px){
  .hud-title{ font-size: 18px; letter-spacing: 1px; }
  .dev-grid{ grid-template-columns: 1fr; gap: 6px; }
  /* Sullo schermo stretto l'angolo alto sinistro è del contatore WIN (sta
     al 25% della larghezza, che qui è poco): titolo e tasti scendono in
     basso a sinistra, dove il campo non disegna niente. */
  .hud-mid{
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    /* in basso il bottone ☰ non c'è: si torna al bordo */
    left: max(12px, env(safe-area-inset-left));
  }
}

/* Copyright nell'angolo in basso a destra: figlio di .game-root, quindi
   angolo della FINESTRA — su desktop cade nella banda laterale, sul
   telefono nell'angolo della scena (e il log degli eventi si tiene più su
   apposta, vedi il suo bottom). pointer-events: none: è una scritta, non
   deve mai rubare un click. */
.copyright{
  position: absolute; z-index: 4;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  font-size: 10.5px; color: var(--muted);
  opacity: .75;
  pointer-events: none;
  user-select: none;
}

.noscript{
  position: fixed; inset: auto 16px 16px;
  color: var(--muted); text-align: center;
}