/* =========================================================
   ONESHOT · Scopri la Line Up — grafica dal design ufficiale (UI.pdf)
   Tutte le misure sono in pixel della tavola 1080×1920, convertiti con --u
   ========================================================= */

/* ---------- Font ufficiali ---------- */
@font-face {
  font-family: 'GT Maru';
  src: url('assets/fonts/GT-Maru-Bold.woff2') format('woff2'),
       url('assets/fonts/GT-Maru-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Maru';
  src: url('assets/fonts/GT-Maru-Black.woff2') format('woff2'),
       url('assets/fonts/GT-Maru-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colori e unità ---------- */
:root {
  --blue: #AFC9F1;
  --cream: #FFE295;
  --pink: #D35974;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --W: min(100vw, 480px);
  --H: calc(100vh - var(--safe-t) - var(--safe-b));
  /* 1 pixel della tavola: la tavola 9:16 entra sempre per intero nello schermo */
  --u: min(calc(var(--W) / 1080), calc(var(--H) / 1920));
}
@supports (height: 100dvh) {
  :root { --H: calc(100dvh - var(--safe-t) - var(--safe-b)); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  background: var(--blue);
  color: var(--pink);
  font-family: 'GT Maru', 'Arial Rounded MT Bold', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}
/* line up completa: bianco pieno su tutto lo schermo, safe-area comprese */
html:has(.app[data-screen="end"]), body:has(.app[data-screen="end"]) { background: #FFFFFF; }

button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 999px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Contenitore ---------- */
.app {
  position: relative;
  width: var(--W);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: var(--safe-t) 0 var(--safe-b);
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: var(--safe-t) 0 var(--safe-b);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: screen-in .35s ease both;
}
.screen[hidden] { display: none; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Blocchi "tavola": gli elementi sono posizionati con le coordinate del PDF */
.ab {
  position: relative;
  flex: none;
  width: calc(1080 * var(--u));
  height: calc(var(--h) * var(--u));
}
.at {
  position: absolute;
  margin: 0;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--hh, 21) * var(--u));
}
.at > svg { display: block; width: 100%; height: 100%; }
svg.at, .at > svg { overflow: visible; }
/* la grafica non deve mai intercettare i tocchi destinati ai pulsanti vicini */
svg.at, .at > svg { pointer-events: none; }

/* Righe info in alto e in basso (SATURDAY 17th OCTOBER …): griglia a 3 colonne,
   sinistra / centro / destra; su schermi stretti ogni testo va a capo nella sua colonna */
.inforow {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 12px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0 max(12px, calc(37 * var(--u)));
  font-size: clamp(10px, 2.6vw, 11px);
  letter-spacing: -.04em;
  line-height: 1.15;
  color: var(--pink);
}
.inforow > * { min-width: 0; text-wrap: balance; }
.inforow > :nth-child(1) { justify-self: start; text-align: left; }
.inforow > :nth-child(2) { justify-self: center; text-align: center; max-width: 34vw; }
.inforow > :nth-child(3) { justify-self: end; text-align: right; }
.inforow--top { padding-top: max(8px, calc(26 * var(--u))); }
.inforow--bottom { margin-top: auto; padding-bottom: max(8px, calc(26 * var(--u))); }
/* "TICKETS ON DICE.FM": link con area di tocco di 44px, stesso aspetto del testo */
.dice-link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: max(1px, .08em);
}
.dice-link::after {
  content: '';
  position: absolute;
  left: -8px; right: -8px;
  top: 50%;
  height: max(44px, 100%);
  transform: translateY(-50%);
}
@media (hover: hover) {
  .dice-link:hover { text-decoration-line: underline; }
}
.inforow sup { font-size: .58em; vertical-align: .62em; line-height: 0; }

/* ---------- Pillole ---------- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(73 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: calc(10.5 * var(--u)) solid var(--cream);
  border-radius: 999px;
  background: var(--pink);
  color: var(--cream);
  font-size: calc(40 * var(--u));
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .12s ease;
}
/* area di tocco più grande della grafica (almeno 44px) */
.pill::after {
  content: '';
  position: absolute;
  left: -6px; right: -6px;
  top: 50%;
  height: max(44px, 100%);
  transform: translateY(-50%);
}
.pill:active { transform: scale(.94); }
/* pillola del template (pag. 9): crema con contorno rosa */
.pill--line {
  height: calc(74 * var(--u));
  padding: 0 calc(24 * var(--u));
  border: calc(11 * var(--u)) solid var(--pink);
  background: var(--cream);
  color: var(--pink);
}

/* ================= COPERTINA ================= */
/* data e info → ONE SHOT + mascotte + UNLOCK THE LINE UP → pulsanti → mirino → info → APOLLO
   La tavola si riduce quanto serve perché tutto stia nello schermo; lo spazio in più va tra i blocchi */
.screen--start {
  --bs: 1;   /* scala del mirino NO PLAY NO NAMES */
  justify-content: space-evenly;
  /* 184px = righe info + pulsanti (alti 56–60px) con i loro margini; 1512 = altezza dei disegni in pixel della tavola */
  --u: min(calc(var(--W) / 1080), calc((var(--H) - 184px) / (1512 + 220 * (var(--bs) - 1))));
}
@media (max-aspect-ratio: 1/2) {
  .screen--start { --bs: 1.3; }   /* schermi alti: c'è spazio per un mirino più grande */
}
.cover-top, .cover-foot { display: flex; flex-direction: column; align-items: center; width: 100%; gap: max(4px, calc(12 * var(--u))); }
.cover-top .inforow { padding-top: 0; }
.cover-foot { padding-bottom: max(6px, calc(20 * var(--u))); }
.screen--start h1 { margin: 0; }
.cover-btns {
  position: relative;
  z-index: 1;
  flex: none;
  /* griglia a colonne uguali: i due pulsanti hanno la larghezza del testo più lungo */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 14px;
  max-width: calc(100% - 16px);
  margin: max(10px, calc(30 * var(--u))) 0;   /* più aria attorno a UNLOCK THE LINE UP e ai pulsanti */
}
.cover-btns .pill {
  height: clamp(56px, 14vw, 60px);
  padding: 0 clamp(12px, 4.4vw, 24px);
  border-width: clamp(4px, 1.4vw, 6px);
  font-size: clamp(14px, 4.6vw, 21px);
}
/* BUY TICKETS secondario: crema con contorno e testo rosa (PLAY NOW resta pieno rosa) */
.cover-btns .pill--line { border-color: var(--pink); }
.cover-badge {
  flex: none;
  display: block;
  width: calc(504 * var(--bs) * var(--u));
  height: calc(220 * var(--bs) * var(--u));
  overflow: visible;
  pointer-events: none;
}

/* ================= ROUND ================= */
.screen--game { justify-content: flex-start; }
.flex-space { flex: 1 1 0; min-height: calc(10 * var(--u)); max-height: calc(120 * var(--u)); }

/* Audio on/off: tondo come i tasti, nell'angolo libero sotto la T */
.mute {
  position: absolute;
  right: calc(76 * var(--u));
  top: calc(634 * var(--u));
  width: max(44px, calc(96 * var(--u)));
  height: max(44px, calc(96 * var(--u)));
  padding: 0;
  display: grid;
  place-items: center;
  border: max(1.5px, calc(4 * var(--u))) solid var(--pink);
  border-radius: 50%;
  background: var(--cream);
}
.mute svg { width: 58%; height: 58%; fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mute__spk { fill: var(--pink); }
.mute__off { display: none; }
.mute[aria-pressed="true"] .mute__on { display: none; }
.mute[aria-pressed="true"] .mute__off { display: inline; }

/* Patibolo, mirino e mascotte */
.gallows use, .gallows path { fill-rule: nonzero; }
.mirino__shape, .man use { fill: var(--pink); }

.part { opacity: 0; transform: scale(0); transform-box: view-box; }
.part.is-on { animation: pop .55s cubic-bezier(.28, 1.7, .5, 1) forwards; }
@keyframes pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* mirino a fine round perso: flash + shake */
.mirino { transform-box: view-box; transform-origin: 561.5px 384.5px; }
.mirino__burst { opacity: 0; transform-box: view-box; transform-origin: 561.5px 384.5px; }
.mirino.is-hit { animation: shake .5s ease-in-out 2; }
.mirino.is-hit .mirino__shape { animation: flash .16s steps(1) 6; }
.mirino.is-hit .mirino__burst { animation: burst .6s ease-out 2; }
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-12px) rotate(-14deg); }
  40% { transform: translateX(12px) rotate(12deg); }
  60% { transform: translateX(-8px) rotate(-6deg); }
  80% { transform: translateX(5px) rotate(4deg); }
}
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: .15; }
}
@keyframes burst {
  0% { opacity: .9; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* sconfitta: mirino e mascotte oscillano appesi al gancio */
.hang { transform-box: view-box; transform-origin: 556px 300px; }
.gallows.is-lost .hang { animation: swing 1.6s ease-in-out infinite; }
@keyframes swing {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}

/* vittoria: la mascotte si libera e salta */
.man { transform-box: view-box; transform-origin: 556px 785px; }
.gallows.is-free .man { animation: dance-bounce .5s ease-in-out .3s infinite; }
@keyframes dance-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-34px) rotate(4deg); }
}

/* Parola da indovinare: lettere outline e trattini */
.word-box { flex: none; text-align: center; width: calc(1080 * var(--u)); }
.word {
  --n: 10;                     /* numero di caselle (impostato da game.js) */
  --p: calc(var(--u) * min(120, 1000 / var(--n)));   /* passo tra le caselle */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--p) * .883);
  margin: 0 calc(var(--p) * .0585);
}
.slot__ch {
  display: block;
  height: calc(var(--p) * .79);
  font-size: calc(var(--p) * 1.125);
  line-height: calc(var(--p) * .79);
  font-weight: 700;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--p) * .042) var(--pink);
}
.slot::after {
  content: '';
  width: 100%;
  height: calc(var(--p) / 6);
  margin-top: calc(var(--p) * .135);
  border-radius: 999px;
  background: var(--pink);
}
.slot--space { width: calc(var(--p) * .7); }
.slot--space::after { visibility: hidden; }
.slot.is-shown .slot__ch { animation: letter-in .4s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes letter-in {
  0% { transform: translateY(30%) scale(.3); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.hint {
  margin: calc(23 * var(--u)) 0 0;
  font-size: max(calc(44.2 * var(--u)), 12px);
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}

/* Tastiera QWERTY a pillole */
.controls {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: calc(3 * var(--kh) + 2 * var(--kgy));
  max-height: calc(3 * var(--kh) + 2 * var(--kgy) + 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  --kw: min(calc(var(--u) * 92), calc((var(--W) - 24px) / 10 - 4px));
  --kh: clamp(44px, calc(var(--kw) * 1.6), 60px);
  --kg: max(3px, calc(var(--u) * 11));
  --kgy: max(6px, calc(var(--u) * 13));
}
.keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kgy);
}
.keyboard.is-hidden { display: none; }
.keyboard__row { display: flex; justify-content: center; gap: var(--kg); }
.key {
  position: relative;
  width: var(--kw);
  height: var(--kh);
  padding: 0;
  border: max(1.5px, calc(4 * var(--u))) solid var(--pink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--pink);
  font-size: calc(var(--kw) * .55);
  font-weight: 700;
  line-height: 1;
  transition: transform .1s ease, opacity .2s ease;
}
.key:active:not(:disabled) { transform: scale(.9); }
.key:disabled { cursor: default; }
.key.is-hit {                    /* lettera giusta: pillola piena */
  background: var(--pink);
  color: var(--cream);
  animation: key-pop .3s ease;
}
.key.is-miss { opacity: .38; }   /* lettera sbagliata: semitrasparente e barrata */
.key.is-miss::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: max(2px, calc(5 * var(--u)));
  height: 78%;
  border-radius: 9px;
  background: var(--pink);
  transform: translate(-50%, -50%) rotate(35deg);
}
@keyframes key-pop {
  50% { transform: scale(1.18); }
}

/* Esito del round: prende il posto della tastiera
   [pulsanti] sopra · scritta curva YOU WIN! / YOU LOSE! · [RIVELA IL NOME] sotto */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(6px, calc(14 * var(--u)));
  padding-top: max(8px, calc(26 * var(--u)));
  animation: screen-in .35s ease both;
}
.panel[hidden] { display: none; }
/* griglia a colonne uguali: i pulsanti hanno tutti la larghezza del testo più lungo */
.panel__actions {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  max-width: calc(100% - 16px);
}
.panel__below { flex: none; display: flex; justify-content: center; }
.panel__below:empty { display: none; }
.panel__actions .pill,
.panel__below .pill {
  height: max(44px, calc(92 * var(--u)));
  padding: 0 clamp(10px, calc(28 * var(--u)), 18px);
  border-width: max(3px, calc(11 * var(--u)));
  font-size: clamp(13px, calc(48 * var(--u)), 19px);
}
.panel__arc {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, calc(972 * var(--u)));
  max-height: calc(343 * var(--u));
}
.panel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.panel[data-result="win"] .panel__svg--lose,
.panel[data-result="lose"] .panel__svg--win { display: none; }
/* "DJ SCOPERTO!" disegnato dentro l'SVG dell'arco: scala insieme alla scritta curva */
.panel__title {
  font-weight: 900;
  letter-spacing: -.03em;
  fill: var(--pink);
  stroke: var(--cream);
  stroke-width: 6px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.ab--stage { overflow: hidden; }   /* il palco parte da y=66 della tavola (sopra c'è solo vuoto) */

/* ================= FINE (template pag. 9) ================= */
.screen--end {
  justify-content: space-evenly;
  padding: max(8px, calc(26 * var(--u))) 0;
  color: var(--pink);
}
.app[data-screen="end"]::before {          /* cornice rosa della tavola */
  content: '';
  position: absolute;
  inset: var(--safe-t) 0 var(--safe-b);
  border: calc(4 * var(--u)) solid var(--pink);
  pointer-events: none;
}
.end__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(70 * var(--u));
  font-size: calc(48 * var(--u));
  letter-spacing: -.045em;
  line-height: 1;
}
.end__mirino { width: calc(180 * var(--u)); height: calc(178 * var(--u)); color: var(--pink); }
.lineup {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.lineup li {
  --len: 6;
  font-size: calc(var(--u) * min(128, 900 / (var(--len) * .74)));
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .86;
  white-space: nowrap;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 8) var(--pink);
  animation: title-in .55s cubic-bezier(.25, 1.6, .5, 1) both;
}
.lineup li:nth-child(2) { animation-delay: .1s; }
.lineup li:nth-child(3) { animation-delay: .2s; }
.lineup li:nth-child(4) { animation-delay: .3s; }
.lineup li:nth-child(5) { animation-delay: .4s; }
.lineup li:nth-child(6) { animation-delay: .5s; }
.lineup li:nth-child(7) { animation-delay: .6s; }
.lineup li:nth-child(8) { animation-delay: .7s; }
@keyframes title-in {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.end__title {
  margin: 0;
  text-align: center;
  font-size: calc(66 * var(--u));
  letter-spacing: -.05em;
  line-height: .85;
}
.end__actions { display: flex; justify-content: center; gap: calc(60 * var(--u)); }
.end__again {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font-size: calc(44 * var(--u));
  letter-spacing: -.045em;
  line-height: 1;
}
.end__again::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---------- Coriandoli ---------- */
.confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  animation: fall var(--d, 2s) cubic-bezier(.25, .6, .5, 1) var(--delay, 0s) forwards;
}
@keyframes fall {
  to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: .9; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .confetti { display: none; }
}