/* Rompi il blocco — stile. Palette e font dal kit social MediaFM. */
@font-face { font-family: "Anton"; src: url("fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; src: url("fonts/anton-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --notte: #001621;
  --notte-2: #022331;
  --vulcanico: #FF4103;
  --ink: #001621;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .74);
  --line: rgba(255, 255, 255, .16);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(12px, 3vw, 28px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--notte); color: var(--text); }
body {
  font: 400 16px/1.45 "Jakarta", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
  overscroll-behavior: none;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); }

/* Intestazione (solo pagina autonoma) */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
.brand b { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--vulcanico); box-shadow: 0 0 0 4px rgba(255, 65, 3, .25); }
.skip {
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 65, 3, .7); color: #fff;
  transition: background .25s var(--ease);
}
.skip:hover { background: rgba(255, 65, 3, .18); }
.embed .site-head { display: none; }

/* Barra di gioco */
.hud {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
  padding: 8px var(--gutter);
}
.stats { display: flex; gap: clamp(14px, 3vw, 36px); }
.stats div { display: flex; flex-direction: column; min-width: 44px; }
.stats dt { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stats dd { font: 400 26px/1.05 "Anton", Impact, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
#hud-lives { color: var(--vulcanico); letter-spacing: .12em; }
#hud-time.low { color: var(--vulcanico); }
.actions { display: flex; align-items: center; gap: 8px; }
.skip-hud { display: none; }
.embed .skip-hud { display: inline-block; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .16); }
.icon-btn svg { width: 22px; height: 22px; }
#btn-audio .on { display: none; }
#btn-audio[aria-pressed="true"] .on { display: inline; }
#btn-audio[aria-pressed="true"] .off { display: none; }
#btn-audio[aria-pressed="true"] { background: rgba(255, 65, 3, .25); border-color: rgba(255, 65, 3, .8); }
.close-btn {
  display: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 0;
  background: #fff; color: var(--ink); font-weight: 800;
}
.embed .close-btn { display: inline-block; }

/* Area di gioco */
.stage { position: relative; flex: 1; min-height: 0; outline: none; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: none; }
.stage.idle canvas { cursor: default; }

/* Schermate HTML sopra il canvas */
.screen {
  position: absolute; inset: 0; z-index: 2; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px var(--gutter) 32px; gap: 14px;
  background: radial-gradient(120% 80% at 50% 110%, rgba(255, 65, 3, .28), transparent 60%), rgba(0, 22, 33, .84);
  animation: screen-in .45s var(--ease) both;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.poster-title {
  font: 400 clamp(64px, 15vw, 190px)/.86 "Anton", Impact, sans-serif; text-transform: uppercase;
  letter-spacing: -.005em; max-width: 9ch; text-wrap: balance;
}
.poster-title.small { font-size: clamp(56px, 12vw, 120px); }
.lead { font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; max-width: 32ch; }
.hint { font-size: 13px; color: var(--muted); }
.teaser { font-size: 14px; color: var(--muted); max-width: 40ch; }
.teaser strong { color: #fff; }
.skip-link { font-weight: 600; font-size: 15px; text-underline-offset: 4px; padding: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 800; font-size: 16px; text-decoration: none; letter-spacing: .005em;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary { background: var(--vulcanico); color: var(--ink); box-shadow: 0 10px 40px -10px rgba(255, 65, 3, .7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(255, 65, 3, .9); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-xl { font: 400 30px/1 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 18px 56px; margin-top: 6px; }
.btn-block { width: 100%; }

/* Fine partita */
.screen-end { justify-content: safe center; background-color: rgba(0, 22, 33, .95); }
.end-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 4vw, 56px); align-items: center;
  width: min(1040px, 100%); text-align: left;
}
.score-big { font: 400 clamp(72px, 11vw, 150px)/.9 "Anton", Impact, sans-serif; display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.score-big small { font: 600 16px "Jakarta"; color: var(--muted); }
.record { font-weight: 600; margin-top: 6px; }
.record .new { color: var(--ink); background: #FFBE0B; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; }
.breakdown { list-style: none; margin-top: 16px; display: grid; gap: 6px; font-size: 15px; }
.breakdown li { display: block; }
.breakdown i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 10px; vertical-align: -1px; }
.breakdown b { font-weight: 800; }
.prize {
  border-radius: 24px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 14px;
  background: radial-gradient(90% 90% at 100% 0%, rgba(255, 65, 3, .35), transparent 60%), #032636;
  border: 1px solid rgba(255, 65, 3, .45);
}
.prize-kicker { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--vulcanico); }
.prize-title { font: 400 clamp(34px, 4.4vw, 58px)/.95 "Anton", Impact, sans-serif; text-transform: uppercase; }
.prize-sub { display: block; font: 800 18px/1.3 "Jakarta"; text-transform: none; color: var(--muted); margin-top: 8px; }
.prize .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fine { font-size: 12.5px; color: var(--muted); }

.toast {
  position: absolute; left: 50%; bottom: 24px; z-index: 5; transform: translate(-50%, 20px); opacity: 0;
  background: #fff; color: var(--ink); font-weight: 800; padding: 10px 18px; border-radius: 999px;
  transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.noscript { padding: 24px; }

/* Telefono */
@media (max-width: 720px) {
  .site-head { padding-top: 8px; padding-bottom: 8px; }
  .brand { font-size: 13px; } .brand b { font-size: 16px; }
  .skip { font-size: 13px; padding: 7px 12px; }
  .hud { padding-top: 6px; padding-bottom: 6px; }
  .stats dd { font-size: 22px; }
  .stats .lvl { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .embed .skip-hud { order: -1; }
  .end-grid { grid-template-columns: 1fr; gap: 18px; }
  .screen-end { justify-content: flex-start; }
  .score-big { font-size: 76px; }
  .breakdown { font-size: 14px; margin-top: 10px; }
}
@media (max-width: 420px) {
  .embed .hud { justify-content: center; }
  .embed .stats { width: 100%; justify-content: space-between; }
  .prize .row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}