/* TikForge Stack — stili della pagina di gioco.
   Palette e font identici a css/styles.css: il gioco vive su un sottodominio
   ma deve leggersi come una schermata del sito, non come un ospite. */

:root{
  color-scheme: dark;
  --bg: #000000;
  --bg-panel: #100918;
  --bg-panel-2: #150C20;
  --blue: #A855F7;
  --red: #7C1FD4;
  --ink: #F1E7FF;
  --muted: #B6A0CF;
  --line: rgba(214,190,245,0.08);
  --radius: 14px;

  /* Unità di misura dell'interfaccia, ricalcolata da JS sulle dimensioni REALI
     dell'area di gioco (non della finestra): su desktop il campo è una striscia
     verticale stretta, e testi/pulsanti devono scalare su quella, altrimenti un
     pannello tarato sulla finestra 1920px sborda dalla striscia. */
  --u: 4px;
}

*{ 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.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

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

::selection{ background: var(--blue); color: #0E0518; }

button:focus-visible,
a:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.noscript{
  position: fixed; inset: auto 0 0 0; padding: 18px;
  text-align: center; color: var(--muted); font-size: 15px;
  background: var(--bg-panel); border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- struttura */

.game-root{ position: fixed; inset: 0; overflow: hidden; }

#board{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* Senza questo, su mobile il tap per lasciar cadere la piattaforma viene
     interpretato come inizio di scroll/pinch e il primo input arriva in ritardo
     (o non arriva affatto durante lo zoom accidentale a doppio tap). */
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}

/* Posizione/dimensione impostate da JS: coincidono al pixel con l'area di gioco
   disegnata nel canvas. pointer-events:none così un tap sulla HUD "vuota" passa
   al canvas sotto e vale comunque come input di gioco (area utile più grande). */
.stage{
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

/* -------------------------------------------------------------------- pulsanti */

.btn{
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(13.5px, calc(var(--u) * 3.6), 16.5px);
  letter-spacing: 0.01em;
  padding: clamp(11px, calc(var(--u) * 3.1), 16px) clamp(20px, calc(var(--u) * 6.4), 34px);
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: auto;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn-primary{
  background: var(--blue); color: #F1E7FF;
  box-shadow: 0 0 20px rgba(168,85,247,0.32);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 34px rgba(168,85,247,0.55);
}
.btn-primary:active{ transform: translateY(0) scale(.97); }
.btn-outline{
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-outline:hover{
  transform: translateY(-2px);
  border-color: var(--red);
  box-shadow: 0 0 22px rgba(124,31,212,0.3);
}
.btn-outline:active{ transform: translateY(0) scale(.97); }

.btn-play{
  font-size: clamp(15px, calc(var(--u) * 4.4), 19px);
  padding: clamp(13px, calc(var(--u) * 3.8), 18px) clamp(38px, calc(var(--u) * 11), 62px);
  margin-top: clamp(16px, calc(var(--u) * 5), 30px);
}

.icon-btn{
  width: clamp(34px, calc(var(--u) * 9.4), 44px);
  height: clamp(34px, calc(var(--u) * 9.4), 44px);
  border-radius: 50%;
  background: rgba(16,9,24,0.6);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease, color .2s ease;
}
.icon-btn:hover{ border-color: var(--blue); color: #fff; transform: translateY(-1px); }
.icon-btn:active{ transform: scale(.93); }
.icon-btn svg{
  width: 58%; height: 58%;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn svg .ico-fill{ fill: currentColor; stroke: none; }

#btnMute .ico-off{ display: none; }
#btnMute[aria-pressed="true"]{ color: var(--muted); }
#btnMute[aria-pressed="true"] .ico-on{ display: none; }
#btnMute[aria-pressed="true"] .ico-off{ display: block; }

/* -------------------------------------------------------------------- HUD */

/* Sopra le schermate (z-index 3): il pulsante audio deve restare raggiungibile
   anche con un pannello aperto, altrimenti dal menu non lo si può toccare. */
.hud{
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(clamp(12px, calc(var(--u) * 3.4), 22px) + env(safe-area-inset-top, 0px))
           clamp(12px, calc(var(--u) * 3.6), 24px) 0;
  pointer-events: none;
  z-index: 4;
}
.hud-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hud-tools{ display: flex; gap: clamp(7px, calc(var(--u) * 2), 11px); }

.hud-best{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: clamp(10.5px, calc(var(--u) * 2.9), 13px);
  color: var(--muted);
  background: rgba(16,9,24,0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px clamp(10px, calc(var(--u) * 3), 14px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s ease;
}
.hud-best span{ font-size: 0.82em; letter-spacing: 0.12em; opacity: .7; }
.hud-best b{ color: var(--ink); font-weight: 600; }

.hud-score{
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(44px, calc(var(--u) * 13), 96px);
  text-align: center;
  margin-top: clamp(6px, calc(var(--u) * 2), 14px);
  color: var(--ink);
  text-shadow: 0 4px 26px rgba(0,0,0,0.7), 0 0 34px rgba(168,85,247,0.28);
  transition: opacity .3s ease;
}

.hud-combo{
  margin: clamp(4px, calc(var(--u) * 1.4), 9px) auto 0;
  width: fit-content;
  display: flex; align-items: center; gap: 7px;
  font-size: clamp(10px, calc(var(--u) * 2.8), 12.5px);
  font-weight: 700; letter-spacing: 0.14em;
  color: #0E0518;
  background: var(--blue);
  border-radius: 999px;
  padding: 4px clamp(11px, calc(var(--u) * 3.2), 15px);
  box-shadow: 0 0 22px rgba(168,85,247,0.55);
}
.hud-combo b{ font-weight: 600; letter-spacing: 0; }
.hud-combo[hidden]{ display: none; }

/* Punteggio, record e combo esistono solo mentre si gioca: con un pannello
   aperto il punteggio è già dentro il pannello, e su una finestra bassa i due
   si sovrapporrebbero. Della HUD resta visibile solo la fila dei pulsanti. */
.hud-best, .hud-score, .hud-combo{ opacity: 0; }
[data-state="playing"] .hud-best,
[data-state="playing"] .hud-score,
[data-state="playing"] .hud-combo,
[data-state="dying"] .hud-best,
[data-state="dying"] .hud-score,
[data-state="dying"] .hud-combo{ opacity: 1; }
[data-state="menu"] #btnPause,
[data-state="dying"] #btnPause,
[data-state="over"] #btnPause{ display: none; }

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

.screen{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, calc(var(--u) * 5), 40px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .34s cubic-bezier(.22,.9,.3,1), visibility .34s;
  z-index: 3;
}
.screen.is-visible{ opacity: 1; visibility: visible; pointer-events: auto; }

.screen::before{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 50% 26%, rgba(124,31,212,0.22), transparent 62%),
    rgba(5,1,10,0.7);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.panel{
  position: relative;
  width: 100%;
  max-width: clamp(258px, calc(var(--u) * 76), 400px);
  text-align: center;
  background: linear-gradient(180deg, rgba(21,12,32,0.94), rgba(16,9,24,0.94));
  border: 1px solid var(--line);
  border-radius: clamp(16px, calc(var(--u) * 4.6), 26px);
  padding: clamp(22px, calc(var(--u) * 6.6), 40px) clamp(18px, calc(var(--u) * 5.4), 34px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.62), inset 0 0 0 1px rgba(168,85,247,0.05);
  transform: translateY(calc(var(--u) * 3.2)) scale(.965);
  opacity: 0;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.is-visible .panel{ transform: none; opacity: 1; transition-delay: .06s; }

/* Filo luminoso in cima al pannello: stessa firma grafica del footer del sito. */
.panel::before{
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.6), rgba(124,31,212,0.6), transparent);
}

.brand{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--muted);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, calc(var(--u) * 3.6), 16px);
  letter-spacing: -0.01em;
  text-decoration: none;
  pointer-events: auto;
  transition: color .2s ease;
}
.brand:hover{ color: var(--ink); }
.brand img{
  width: clamp(20px, calc(var(--u) * 6), 28px);
  height: auto;
  object-fit: contain;
  transition: transform .2s ease;
}
.brand:hover img{ transform: scale(1.08); }

.title{
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: .96;
  font-size: clamp(40px, calc(var(--u) * 11.5), 80px);
  margin: clamp(8px, calc(var(--u) * 2.6), 16px) 0 0;
  background: linear-gradient(178deg, #FFFFFF 6%, var(--blue) 58%, var(--red) 104%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.tagline{
  margin: clamp(8px, calc(var(--u) * 2.6), 15px) auto 0;
  max-width: 30ch;
  color: var(--muted);
  font-size: clamp(12.5px, calc(var(--u) * 3.4), 15px);
  line-height: 1.45;
}

.best-line{
  margin-top: clamp(14px, calc(var(--u) * 4), 24px);
  font-size: clamp(11.5px, calc(var(--u) * 3.1), 13.5px);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.best-line b{ color: var(--ink); font-weight: 600; margin-left: 5px; }

.hint{
  margin-top: clamp(12px, calc(var(--u) * 3.4), 20px);
  font-size: clamp(10.5px, calc(var(--u) * 2.8), 12.5px);
  color: rgba(182,160,207,0.72);
}
.hint kbd{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.04);
}

.panel-kicker{
  font-size: clamp(10.5px, calc(var(--u) * 2.9), 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-score{
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(56px, calc(var(--u) * 16), 108px);
  margin-top: clamp(4px, calc(var(--u) * 1.6), 10px);
  background: linear-gradient(178deg, #FFFFFF 10%, var(--blue) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.panel-meta{
  margin-top: clamp(6px, calc(var(--u) * 2), 12px);
  font-size: clamp(11px, calc(var(--u) * 3), 13.5px);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.panel-meta b{ color: var(--ink); font-weight: 600; margin-left: 4px; }
.panel-meta i{ width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.panel-actions{
  margin-top: clamp(18px, calc(var(--u) * 5.2), 30px);
  display: flex; flex-wrap: wrap; gap: clamp(8px, calc(var(--u) * 2.4), 12px);
  justify-content: center;
}

.record-badge{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: clamp(10.5px, calc(var(--u) * 2.9), 12.5px);
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #0E0518;
  background: linear-gradient(100deg, #FFD86B, var(--blue) 62%, #FF7BE5);
  background-size: 220% 100%;
  border-radius: 999px;
  padding: 5px clamp(12px, calc(var(--u) * 3.4), 16px);
  margin-bottom: clamp(10px, calc(var(--u) * 3), 16px);
  box-shadow: 0 0 26px rgba(255,180,90,0.4);
  animation: record-shine 2.6s linear infinite;
}
.record-badge::before{ content: '★'; font-size: 1.1em; letter-spacing: 0; }
.record-badge[hidden]{ display: none; }

@keyframes record-shine{
  from{ background-position: 0% 50%; }
  to{ background-position: 220% 50%; }
}

/* ------------------------------------------------------- movimento ridotto */
/* Solo il decorativo: l'oscillazione della piattaforma e lo scorrimento della
   camera vivono nel canvas e restano intatti anche qui, perché sono la
   meccanica del gioco — toglierli renderebbe Stack ingiocabile, non più
   accessibile. Lato canvas la distinzione è applicata in game.js. */
@media (prefers-reduced-motion: reduce){
  .btn:hover, .icon-btn:hover{ transform: none; }
  .panel{ transform: none; transition: opacity .2s ease; }
  .is-visible .panel{ transition-delay: 0s; }
  .record-badge{ animation: none; background-position: 40% 50%; }
  .brand img, .brand:hover img{ transition: none; transform: none; }
}