/* TikForge — POP SHOT, stili della pagina di gioco.
   Foglio autonomo come game.css (Stack) e the-pull.css: font di
   css/styles.css ma nessuna dipendenza da quel file. Tema CHIARO: bianco
   che sfuma nel celestino e NESSUNA scritta in gioco, per scelta del
   progetto — solo il campo. La scena (muri blu, palloncini, palla) è
   tutta nel canvas: qui restano flash, griglia livelli (tasti L/ESC),
   riprova e pannello dev. */

:root{
  color-scheme: light;
  --bg: #FFFFFF;
  --sky: #D6EDFF;      /* il celestino in fondo alla pagina */
  --ink: #0F172A;
  --muted: #8A94A6;
  --line: rgba(15,23,42,0.14);
  --blue: #2563EB;      /* il blu delle basi, delle scritte e dei tratti */
  --blue-soft: #60A5FA;
  --pop: #E11D48;
  --radius: 14px;
}

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

html, body{ height: 100%; }
body{
  /* stesso gradiente che il canvas dipinge: qualunque pixel non coperto
     dal canvas (barre di sistema, rimbalzi di scroll su iOS) resta dello
     stesso colore — il campo È la pagina */
  background: linear-gradient(180deg, var(--bg), var(--sky));
  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;
}

.game-root{ position: fixed; inset: 0; }
/* touch-action: la mira è un drag sul canvas, il browser non deve
   scrollare o zoomare mentre si tende il tiro */
#board{ position: absolute; inset: 0; display: block; touch-action: none; }

/* ------------------------------------------------------------ scritta
   TIKFORGE.NET e LVL.N, BLU come le basi dei livelli (richiesta del
   progetto). LVL.N è anche il bottone della griglia livelli. */
.brand-ui{
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
}
.site-title{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 34px);
  letter-spacing: 0.04em;
  color: var(--blue);
}
/* LVL.N vive ACCANTO all'ingranaggio (in alto a sinistra), non più sotto
   la scritta: è sempre il bottone della griglia livelli. */
.lvl-label{
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: calc(max(12px, env(safe-area-inset-left)) + 52px);
  height: 46px;
  display: grid; place-items: center;
  padding: 0 12px;
  background: none;
  border: 0;
  border-radius: 12px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--blue-soft);
  cursor: pointer;
}
.lvl-label:hover{ color: var(--blue); background: rgba(37,99,235,0.08); }

/* ------------------------------------------------------------ timer
   Il timer dello streamer, al centro sotto TIKFORGE.NET e LVL.N. Font,
   colore, dimensione e sfondo li decide lui dalle impostazioni (stili
   inline da JS); qui solo posizione e ossa. */
.game-timer{
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 50px);
  left: 50%; transform: translateX(-50%);
  padding: 2px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
.game-timer.done{ animation: tm-blink .5s steps(2) 6; }
@keyframes tm-blink{ 50%{ opacity: 0.15; } }

/* le righe dei controlli timer nelle impostazioni */
.tm-rows{
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
  text-align: left;
}
.tm-rows label{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.tm-rows select, .tm-rows input[type="number"]{
  width: 110px;
  padding: 5px 7px;
  font: inherit; font-size: 12px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tm-rows input[type="range"]{ width: 110px; accent-color: var(--blue); }
/* Il cerchio del colore (che apre il picker NOSTRO, non quello del
   sistema: la finestrella nativa non si può stilare). */
.tm-color-btn{
  width: 32px; height: 32px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.tm-color-btn:hover{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
  transform: scale(1.06);
}

/* La finestrella del colore: quadrato saturazione/luminosità + barra
   della tinta + hex — lo schema del picker degli overlay in dashboard,
   in formato tascabile. Fixed accanto al cerchio, come quella dei font. */
.tm-color-pop{
  position: fixed;
  width: 190px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  background: #FFFFFF;
  border: 2px solid var(--blue);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,23,42,0.18);
  z-index: 3;
}
.tm-color-pop[hidden]{ display: none; }
.tm-sv{
  position: relative;
  height: 120px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: crosshair;
  touch-action: none;
}
.tm-sv i, .tm-hue i{
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tm-hue{
  position: relative;
  height: 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.tm-hue i{ top: 50%; }
.tm-hex{
  padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-transform: uppercase;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tm-hex:focus{ outline: none; border-color: var(--blue); }
.tm-btns{ display: flex; gap: 8px; }
.tm-btns .btn{ flex: 1; padding: 8px 10px; font-size: 13px; }

/* Il font picker con l'ANTEPRIMA: il bottone mostra il font scelto nel
   font scelto, e ogni voce della tendina è disegnata col proprio font. */
.tm-font-btn{
  width: 110px;
  padding: 5px 7px;
  font-size: 13px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-font-btn:hover{ border-color: var(--blue); }
/* FINESTRELLA flottante: appare accanto alla colonna quando si clicca il
   bottone del font, e sparisce scegliendo o cliccando altrove. Il
   display sta su [hidden]... senza questa riga il flex della classe
   vincerebbe sull'attributo e la lista resterebbe aperta per sempre
   (successo davvero). */
.tm-font-list{
  /* fixed, con le coordinate calcolate da JS accanto al bottone: da
     figlia del pannello veniva CLIPPATA dall'overflow-y della colonna
     (posizionata fuori dal suo box, spariva — successo davvero) */
  position: fixed;
  width: 190px;
  max-height: min(420px, 84vh);
  overflow-y: auto;
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 2px solid var(--blue);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,23,42,0.18);
  z-index: 3;
}
.tm-font-list[hidden]{ display: none; }
.tm-font-item{
  padding: 6px 10px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  background: none; border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.tm-font-item:last-child{ border-bottom: 0; }
.tm-font-item:hover{ background: rgba(37,99,235,0.08); color: var(--blue); }

/* ------------------------------------------------------------ flash
   Il testo centrale: COMBO ×N sulle catene, LIVELLO COMPLETATO! scuro,
   RIPROVA! rosso sul tiro nel vuoto. Vive di sola animazione: parte con
   .pop e a fine corsa torna invisibile da solo — niente timer. */
.big-flash{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'Bangers', 'Baloo 2', sans-serif;
  font-size: clamp(44px, 9vmin, 96px);
  letter-spacing: 3px;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 3px 0 rgba(255,255,255,0.9);
  pointer-events: none;
  opacity: 0;
}
.big-flash.is-miss{ color: var(--pop); }
.big-flash.pop{ animation: flash-pop 1s ease-out forwards; }
@keyframes flash-pop{
  0%{ transform: scale(1.9) rotate(-3deg); opacity: 0; }
  18%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  70%{ transform: scale(1.05) rotate(-2deg); opacity: 1; }
  100%{ transform: scale(1.12) rotate(-2deg); opacity: 0; }
}

/* ------------------------------------------------------------ impostazioni
   L'ingranaggio in alto a sinistra, BLU come le basi dei livelli. */
.set-btn{
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--blue);
  cursor: pointer;
}
.set-btn:hover{ background: rgba(37,99,235,0.1); }

.set-actions{
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px;
}
.btn-danger{
  background: #FFFFFF;
  color: var(--pop);
  border-color: var(--pop);
}

/* ------------------------------------------------------------ riprova
   Visibile SOLO in volo: un volo non muore mai da solo finché non cade
   nel vuoto, e una palla può fare la spola in una conca per sempre. */
.retry-btn{
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  /* 20px sopra il fondo: l'angolo è del copyright, come su The Pull */
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 20px);
  width: 52px; height: 52px;
  display: none;
  place-items: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}
.retry-btn:hover{ border-color: rgba(15,23,42,0.4); }
[data-state="flight"] .retry-btn{ display: grid; }

/* ------------------------------------------------------------ griglia livelli */

.screen{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(5px);
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s;
  z-index: 2;
}
.screen.open{ visibility: visible; opacity: 1; }

/* Il cancello 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. */

/* Le impostazioni sono una COLONNA a sinistra (specchio della barra
   dell'editor a destra), non un pannello in mezzo al campo. NIENTE velo
   scuro: il campo resta visibile, e il contenitore a tutto schermo fa
   solo da sensore per il click-fuori che chiude. */
#screenSettings{
  place-items: center start;
  background: transparent;
  backdrop-filter: none;
}
#screenSettings .panel{
  position: relative; /* aggancia la finestrella dei font qui accanto */
  margin-left: max(12px, env(safe-area-inset-left));
  width: auto; min-width: 210px; max-width: 260px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 16px 14px;
  border-color: var(--blue);
}
#screenSettings .set-actions{ margin-top: 12px; }
#screenSettings .btn{ width: 100%; }

.panel{
  width: min(520px, calc(100vw - 32px));
  padding: 26px 24px;
  text-align: center;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.18);
}
.panel-title{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.08em;
}

.levels-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 18px 0 20px;
}
.level-btn{
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 17px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.level-btn:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--ink); }
.level-btn.is-locked{ opacity: 0.4; cursor: default; font-size: 13px; }
/* i livelli CUSTOM della persona: bordo blu e matita per rieditarli */
.level-btn.is-custom{ position: relative; border-color: var(--blue-soft); color: var(--blue); }
.level-btn .lvl-edit{
  position: absolute; top: 1px; right: 5px;
  font-size: 12px; color: var(--blue);
  cursor: pointer;
}
.level-btn .lvl-edit:hover{ color: var(--ink); }
/* il quadratino col PIÙ: da qui chiunque si costruisce il suo livello */
.level-btn.is-add{
  border-style: dashed; border-color: var(--blue);
  color: var(--blue); font-size: 26px;
}

.btn{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 15px;
  padding: 10px 24px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #FFFFFF;
  cursor: pointer;
  transition: transform .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.97); }

/* ------------------------------------------------------------ editor
   Barra dell'editor livelli (SOLO ADMIN): compare con data-editor="1"
   sul game-root. Blu come tutto il resto. */
.editor-bar{
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: 50%; transform: translateY(-50%);
  display: none;
  flex-direction: column; align-items: stretch;
  gap: 6px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 10px 8px;
  background: rgba(255,255,255,0.94);
  border: 2px solid var(--blue);
  border-radius: 14px;
  z-index: 4;
}
[data-editor="1"] .editor-bar{ display: flex; }
/* in editor il bottone riprova non serve e coprirebbe la barra */
[data-editor="1"] .retry-btn{ display: none; }

.ed-btn{
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 13px;
  padding: 7px 11px;
  border-radius: 9px;
  border: 2px solid var(--blue);
  background: #FFFFFF;
  color: var(--blue);
  cursor: pointer;
}
.ed-btn:hover{ background: rgba(37,99,235,0.08); }
.ed-primary{ background: var(--blue); color: #FFFFFF; }
.ed-primary:hover{ background: #1D4ED8; }
.ed-danger{ border-color: var(--pop); color: var(--pop); }
.ed-danger:hover{ background: rgba(225,29,72,0.07); }
.ed-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  text-align: center;
  padding: 2px 4px;
}
.ed-sep{
  height: 2px; width: auto;
  background: var(--line);
  margin: 2px 4px;
}

/* ------------------------------------------------------------ pannello dev
   Si apre col tasto D: in faccia allo spettatore non esiste. */
.dev-panel{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: 3;
}
.dev-row{ display: flex; gap: 6px; justify-content: center; }
.dev-btn{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--ink);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
}
.dev-btn:hover{ border-color: rgba(15,23,42,0.4); border-bottom-color: var(--ink); }

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

@media (max-width: 640px){
  .levels-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* Il copyright nell'angolo in basso a destra, come su The Pull: piccolo,
   spento, e non ruba mai 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: .8;
  pointer-events: none;
  user-select: none;
}

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