/* ============================================================
   LA GEMMA DEL DIGUP — direzione artistica:
   vecchio internet (Win98, marquee, WordArt, scintille) + fantasy (oro, gemme, raggi) + cazzone
   ============================================================ */

/* ============================================================
   TOKEN
   Ogni colore, font, livello z-index (e la scala di misure, ombre e durate) sta qui.
   Fuori da :root Stylelint rifiuta colori scritti a mano, font-family, font-size e z-index
   che non siano var(--…): vedi .stylelintrc.json.
   ============================================================ */
/* stylelint-disable color-no-hex, function-disallowed-list -- qui si definiscono i valori dei token */
:root {
  /* ---- Colori di base ---- */
  --color-white: #fff;
  --color-black: #000;
  --color-ink: #111;                 /* testo nelle finestre */
  --color-bg: #1b0b3a;               /* viola notte */
  --color-bg-2: #3a0d5c;
  --color-magenta: #ff3df2;
  --color-cyan: #29f0ff;
  --color-gold: #ffd23f;
  --color-gold-light: #fff6a0;
  --color-orange: #ff7b00;
  --color-violet: #7a2bff;
  --color-aqua-light: #b7fff9;
  --color-purple-deep: #3a0060;      /* contorno della WordArt, titoli epici */
  --color-hl: #c4007a;               /* *parola* evidenziata */
  --color-lime: #7dff6b;             /* terminale: marquee e pannello dev */
  --color-red: #f00;
  --color-glitch-cyan: #0ff;
  --color-alarm: #c00;
  --color-blood: #8a0022;            /* avvisi, interno della bocca */
  --color-blood-dark: #3a000e;
  --color-blood-darkest: #0d0004;
  --color-stamp-fail: #d00000;
  --color-stamp-pass: #0a8a2a;
  --color-caution: #ffd200;          /* nastro "in costruzione" */
  --color-tooltip: #ffffe1;          /* giallo dei tooltip di Windows */
  --color-map-bg: #e9dcb4;           /* pergamena sotto le tile */

  /* ---- Legno delle cornici ---- */
  --color-wood-dark: #5a2a00;
  --color-wood: #6b3a12;
  --color-wood-darkest: #3a1a00;

  /* ---- Grigi ---- */
  --color-grey-light: #ddd;
  --color-grey-checker: #dcdcdc;
  --color-grey-mid: #aaa;
  --color-grey: #888;
  --color-grey-dim: #666;
  --color-grey-dark: #555;
  --color-grey-darkest: #222;
  --color-btn-idle: var(--color-grey);

  /* ---- Windows 98 ---- */
  --color-w98: #c0c0c0;
  --color-w98-light: #dfdfdf;
  --color-w98-dark: #808080;
  --color-w98-shadow: #404040;
  --color-w98-title-from: #000080;
  --color-w98-title-to: #1084d0;
  --w98-title: linear-gradient(90deg, var(--color-w98-title-from), var(--color-w98-title-to));
  --bevel-out: var(--color-white) var(--color-w98-shadow) var(--color-w98-shadow) var(--color-white);
  --bevel-in: var(--color-w98-shadow) var(--color-white) var(--color-white) var(--color-w98-shadow);
  --bevel-in-soft: var(--color-w98-dark) var(--color-white) var(--color-white) var(--color-w98-dark);

  /* ---- Trasparenze ---- */
  --color-black-a12: rgb(0 0 0 / 12%);
  --color-black-a45: rgb(0 0 0 / 45%);
  --color-black-a50: rgb(0 0 0 / 50%);
  --color-black-a55: rgb(0 0 0 / 55%);
  --color-black-a60: rgb(0 0 0 / 60%);
  --color-black-a80: rgb(0 0 0 / 80%);
  --color-black-a92: rgb(0 0 0 / 92%);
  --color-white-a40: rgb(255 255 255 / 40%);
  --color-white-a55: rgb(255 255 255 / 55%);
  --color-white-a85: rgb(255 255 255 / 85%);
  --color-gold-a16: rgb(255 210 63 / 16%);
  --color-gold-a80: rgb(255 210 63 / 80%);
  --color-magenta-a45: rgb(255 61 242 / 45%);
  --color-magenta-a60: rgb(255 61 242 / 60%);
  --color-magenta-a80: rgb(255 61 242 / 80%);
  --color-cyan-a50: rgb(41 240 255 / 50%);
  --color-bg-a88: rgb(27 11 58 / 88%);
  --color-blood-a20: rgb(80 0 0 / 20%);

  /* ---- Font ---- */
  --font-text: 'VT323', ui-monospace, 'Courier New', monospace;
  --font-epic: 'Pirata One', 'Times New Roman', serif;

  /* ---- Scala dei font ---- */
  --font-size-0: 10px;
  --font-size-1: 15px;
  --font-size-2: 16px;
  --font-size-3: 17px;
  --font-size-4: 18px;
  --font-size-5: 19px;
  --font-size-6: 20px;
  --font-size-7: 21px;
  --font-size-8: 22px;
  --font-size-9: 24px;
  --font-size-10: 26px;
  --font-size-11: 30px;
  --font-size-12: 38px;
  --font-size-wordart: clamp(54px, 17vw, 88px);
  --font-size-dialog: clamp(23px, 6.3vw, 29px);
  --font-size-dialog-small: clamp(20px, 5.4vw, 25px);
  --font-size-stamp: clamp(28px, 9vw, 40px);

  /* ---- Spaziature ---- */
  --space-1: 2px;
  --space-2: 3px;
  --space-3: 4px;
  --space-4: 6px;
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 14px;
  --space-9: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --screen-pad-x: var(--space-8);

  /* ---- Livelli (z-index) ---- */
  /* dentro una schermata */
  --z-backdrop: 0;
  --z-stage: 1;
  --z-window: 2;
  --z-props: 3;
  --z-floating: 5;
  /* sopra la mappa (Leaflet usa fino a 1000 per i suoi pannelli interni) */
  --z-map-ui: 500;
  --z-tutorial: 600;
  --z-dev-panel: 700;
  /* sopra tutto */
  --z-modal: 2000;
  --z-wipe: 2500;
  --z-fx: 3000;
  --z-crt: 4000;

  /* ---- Raggi ---- */
  --radius-round: 50%;
  --radius-stamp: 6px;

  /* ---- Ombre ---- */
  --shadow-text-hard: 2px 2px 0 var(--color-black);
  --shadow-text-outline: 2px 2px 0 var(--color-black), -2px -2px 0 var(--color-black), 2px -2px 0 var(--color-black), -2px 2px 0 var(--color-black);
  --shadow-text-outline-thin: 1px 1px 0 var(--color-black), -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black);
  --shadow-glow-current: 0 0 6px currentcolor;
  --shadow-window: 6px 6px 0 var(--color-black-a45);
  --shadow-hard-sm: 4px 4px 0 var(--color-black-a50);
  --shadow-btn: 1px 1px 0 var(--color-black);
  --drop-hard: drop-shadow(3px 3px 0 var(--color-black));
  --drop-hard-lg: drop-shadow(4px 4px 0 var(--color-black));

  /* ---- Curve ---- */
  --ease-pop: cubic-bezier(.2, 1.7, .4, 1);
  --ease-bounce: cubic-bezier(.2, 1.6, .4, 1);
  --ease-shake: cubic-bezier(.36, .07, .19, .97);
  --ease-spring: cubic-bezier(.2, 1.8, .4, 1);

  /* ---- Durate (quelle usate anche in js/fx.js devono coincidere) ---- */
  --duration-bob: 2.6s;
  --duration-flutter: 1.4s;
  --duration-credits: 34s;
  --duration-talk-bump: .12s;
  --duration-blink: 1s;
  --duration-pop: .5s;
  --duration-shake: .45s;
  --duration-shake-big: .7s;
  --duration-glitch: .65s;
  --duration-spark: .85s;
  --duration-trail: .7s;
  --duration-flash: .45s;
  --duration-wipe-in: .4s;
  --duration-wipe-out: .42s;

  /* ---- Console della prova 3 (colori del tema predefinito del simulatore MakeCode Arcade) ---- */
  --color-console-body: #249ca3;
  --color-console-body-dark: #1b7a80;
  --color-console-stroke: #397382;
  --color-console-btn: #333;
  --color-console-text: #cecece;
  --color-console-handle: #999;
  --color-console-bezel: #1d1d1f;
  --color-console-led: #ff3b3b;
  --color-console-led-glow: rgb(255 59 59 / 70%);
  --color-console-shine: rgb(255 255 255 / 18%);

  /* ---- Prova 2: finto Figma (interfaccia scura, canvas grigio, guide rosse, selezione blu) ---- */
  --color-fg-ui: #2c2c2c;
  --color-fg-ui-2: #383838;
  --color-fg-ui-line: #444;
  --color-fg-text: #e6e6e6;
  --color-fg-text-dim: #a0a0a0;
  --color-fg-canvas: #e5e5e5;
  --color-fg-dot: #c4c4c4;
  --color-fg-blue: #0d99ff;
  --color-fg-blue-a20: rgb(13 153 255 / 20%);
  --color-fg-guide: #f24822;
  --color-fg-guide-a15: rgb(242 72 34 / 15%);
  --color-fg-purple: #9747ff;
  --color-fg-green: #14ae5c;
  --color-fg-buddy: #ff24bd;
  --color-fg-belt: #3a3a3a;
  --color-fg-belt-stripe: #464646;
  --duration-fg-slide: .48s;
}
/* stylelint-enable color-no-hex, function-disallowed-list */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-text);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + var(--space-6)) var(--screen-pad-x) calc(var(--safe-bottom) + var(--space-7));
  overflow: hidden;
}
.screen.active { display: flex; }

/* ---------- Sfondo stellato animato ---------- */
.stars {
  position: absolute;
  inset: -50%;
  z-index: var(--z-backdrop);
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--color-white), transparent),
    radial-gradient(1px 1px at 90px 120px, var(--color-gold), transparent),
    radial-gradient(2px 2px at 160px 60px, var(--color-cyan), transparent),
    radial-gradient(1px 1px at 50px 170px, var(--color-white), transparent),
    radial-gradient(1.5px 1.5px at 130px 190px, var(--color-magenta), transparent),
    radial-gradient(ellipse at 50% 40%, var(--color-bg-2), var(--color-bg) 60%);
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 100% 100%;
  animation: stars-drift 40s linear infinite;
}
@keyframes stars-drift { to { transform: translate(200px, 200px); } }

/* ---------- Raggi fantasy rotanti ---------- */
.rays {
  position: absolute;
  width: 170vmax;
  height: 170vmax;
  left: 50%;
  top: 50%;
  margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(from 0deg, var(--color-gold-a16) 0 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, var(--color-black) 0%, transparent 55%);
  mask-image: radial-gradient(circle, var(--color-black) 0%, transparent 55%);
  animation: spin 30s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Gemma ---------- */
.gem {
  width: 48px;
  height: 48px;
  position: relative;
  background: conic-gradient(from 45deg, var(--color-cyan), var(--color-magenta), var(--color-violet), var(--color-cyan), var(--color-aqua-light), var(--color-magenta), var(--color-cyan));
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%);
  filter: drop-shadow(0 0 10px var(--color-magenta)) drop-shadow(0 0 4px var(--color-white));
  animation: gem-spin 2.4s ease-in-out infinite;
}
.gem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--color-white-a85) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: shine 2s linear infinite;
}
.gem-lg { width: 64px; height: 64px; }
.gem-xl { width: 92px; height: 92px; }
@keyframes gem-spin { 0%, 100% { transform: scaleX(1) translateY(0); } 50% { transform: scaleX(.55) translateY(-6px); } }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* ---------- Finestre Windows 98 ---------- */
.win {
  background: var(--color-w98);
  color: var(--color-ink);
  border: 2px solid;
  border-color: var(--bevel-out);
  box-shadow: inset 1px 1px var(--color-w98-light), inset -1px -1px var(--color-w98-dark), var(--shadow-window);
  padding: var(--space-2);
}
.win-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--w98-title);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  font-size: var(--font-size-4);
  letter-spacing: .5px;
  line-height: 1.1;
}
.win-btns { display: flex; gap: var(--space-1); }
.win-btns b, .win-btns button {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  background: var(--color-w98);
  color: var(--color-black);
  font-weight: normal;
  font-size: var(--font-size-4);
  line-height: 1;
  border: 2px solid;
  border-color: var(--bevel-out);
}
.win-btns button:active { border-color: var(--bevel-in); }
.win-body { padding: var(--space-6) var(--space-7); position: relative; }

.w98-btn {
  background: var(--color-w98);
  color: var(--color-black);
  font-size: var(--font-size-8);
  padding: var(--space-4) var(--space-8);
  border: 2px solid;
  border-color: var(--bevel-out);
  box-shadow: var(--shadow-btn);
}
.w98-btn:active { border-color: var(--bevel-in); transform: translate(1px, 1px); }
.w98-input {
  width: 100%;
  font: inherit;
  font-size: var(--font-size-10);
  padding: var(--space-4) var(--space-5);
  border: 2px solid;
  border-color: var(--bevel-in);
  background: var(--color-white);
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 4px;
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   TITOLO
   ============================================================ */
#screen-title { justify-content: space-between; cursor: pointer; }
.marquee {
  position: relative;
  z-index: var(--z-window);
  width: calc(100% + 2 * var(--screen-pad-x));
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--screen-pad-x)) 0;
  background: var(--color-black);
  color: var(--color-lime);
  border-bottom: 2px solid var(--color-lime);
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--font-size-6);
  padding: var(--space-2) 0;
}
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.title-center {
  position: relative;
  z-index: var(--z-stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.wordart {
  margin: var(--space-6) 0 0;
  font-family: var(--font-epic);
  font-weight: normal;
  font-size: var(--font-size-wordart);
  line-height: .9;
  display: flex;
  flex-direction: column;
  transform: perspective(400px) rotateX(14deg) skewY(-6deg);
  animation: sway 3s ease-in-out infinite;
}
.wordart span {
  background: linear-gradient(180deg, var(--color-gold-light) 0%, var(--color-gold) 35%, var(--color-orange) 60%, var(--color-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-purple-deep);
  filter: drop-shadow(3px 3px 0 var(--color-purple-deep)) drop-shadow(6px 6px 0 var(--color-black)) drop-shadow(0 0 14px var(--color-magenta-a60));
}
@keyframes sway { 0%, 100% { transform: perspective(400px) rotateX(14deg) skewY(-6deg) rotate(-2deg); } 50% { transform: perspective(400px) rotateX(14deg) skewY(-6deg) rotate(2deg) scale(1.04); } }
.subtitle { margin: var(--space-4) 0 0; font-size: var(--font-size-8); color: var(--color-cyan); text-shadow: 0 0 8px var(--color-cyan); }
.tap-hint { margin: 26px 0 0; font-size: var(--font-size-11); color: var(--color-gold); text-shadow: var(--shadow-text-hard); }
.blink { animation: blink var(--duration-blink) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.link-btn { background: none; border: 0; color: var(--color-white); text-decoration: underline; font-size: var(--font-size-6); opacity: .75; padding: var(--space-5); }

.title-footer { position: relative; z-index: var(--z-stage); text-align: center; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.counter { font-size: var(--font-size-4); }
.counter b { background: var(--color-black); color: var(--color-red); padding: 0 var(--space-4); letter-spacing: 3px; border: 1px inset var(--color-grey-dim); }
.construction {
  background: repeating-linear-gradient(45deg, var(--color-caution) 0 14px, var(--color-black) 14px 28px);
  color: var(--color-white);
  font-size: var(--font-size-8);
  padding: var(--space-3);
  text-shadow: var(--shadow-text-outline);
  border: 2px solid var(--color-black);
}
.construction.small { font-size: var(--font-size-4); margin: var(--space-7) 0; }
.title-footer small { font-size: var(--font-size-1); opacity: .6; }

/* ============================================================
   STORIA
   ============================================================ */
#screen-story { justify-content: flex-end; gap: var(--space-6); cursor: pointer; }
.darkness {
  position: absolute;
  inset: 0;
  z-index: var(--z-backdrop);
  background: radial-gradient(circle at 50% 38%, var(--color-blood-a20), var(--color-black-a92) 70%);
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
}
#screen-story.dark .darkness { opacity: 1; }
#screen-story.dark .rays { filter: hue-rotate(-60deg) saturate(3); }

.skip-btn {
  position: absolute;
  z-index: var(--z-floating);
  top: calc(var(--safe-top) + var(--space-6));
  right: var(--space-7);
  background: var(--color-black-a55);
  border: 1px solid var(--color-white-a40);
  color: var(--color-white);
  font-size: var(--font-size-4);
  padding: var(--space-3) var(--space-6);
  opacity: .7;
}
.skip-btn.armed { background: var(--color-alarm); opacity: 1; animation: blink calc(var(--duration-blink) / 2) steps(1) infinite; }

.stage {
  position: relative;
  z-index: var(--z-stage);
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 0;
}
.matteo-wrap {
  position: relative;
  width: min(74vw, 44dvh, 380px);
  animation: bob var(--duration-bob) ease-in-out infinite;
}
.matteo-wrap.enter { animation: enter-bounce .8s var(--ease-bounce) both, bob var(--duration-bob) ease-in-out .8s infinite; }
.matteo-wrap.zoom-punch { animation: zoom-punch .6s var(--ease-bounce), bob var(--duration-bob) ease-in-out .6s infinite; }
.matteo-wrap.talk-bump > .matteo { animation: talk-bump var(--duration-talk-bump) ease-out; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes enter-bounce { from { transform: translateY(120%) scale(.3) rotate(-30deg); opacity: 0; } }
@keyframes zoom-punch { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(3deg); } }
@keyframes talk-bump { 50% { transform: scale(1.025, .975); } }

/* Cornice dorata fantasy + ombra da vecchio internet */
.matteo-wrap > .matteo {
  border: 6px solid var(--color-gold);
  outline: 3px solid var(--color-wood-dark);
  box-shadow: 0 0 0 9px var(--color-wood-dark), 0 0 0 12px var(--color-gold), 0 0 40px 14px var(--color-magenta-a45), 14px 14px 0 12px var(--color-black-a50);
}

.props {
  position: absolute;
  z-index: var(--z-props);
  top: 2%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.banner-row { display: flex; align-items: center; gap: var(--space-6); }
.banner-row .banner-svg { width: 46px; filter: var(--drop-hard); animation: flutter var(--duration-flutter) ease-in-out infinite; }
@keyframes flutter { 50% { transform: skewY(4deg) translateY(-3px); } }

/* ---------- Finale: rito degli stendardi ---------- */
#screen-story.ritual { cursor: default; }
#screen-story.ritual .matteo-wrap { opacity: .12; transition: opacity .6s; }
#screen-story.ritual .props { bottom: 0; align-items: center; }
.ritual-stage {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-9) 14vw;
  place-items: center;
}
.ritual-stage .gem {
  --lit: 0;

  grid-area: 2 / 2;
  filter: grayscale(calc(1 - var(--lit))) brightness(calc(.45 + var(--lit) * .75)) drop-shadow(0 0 calc(6px + var(--lit) * 30px) var(--glow, var(--color-magenta)));
  transition: filter .5s;
}
.ritual-banner { background: none; border: 0; padding: var(--space-5); animation: ritual-call 1.2s ease-in-out infinite; }
.ritual-banner:nth-of-type(1) { grid-area: 1 / 1; }
.ritual-banner:nth-of-type(2) { grid-area: 1 / 3; animation-delay: .3s; }
.ritual-banner:nth-of-type(3) { grid-area: 3 / 1; animation-delay: .6s; }
.ritual-banner:nth-of-type(4) { grid-area: 3 / 3; animation-delay: .9s; }
.ritual-banner .banner-svg { width: 64px; filter: var(--drop-hard-lg); animation: flutter var(--duration-flutter) ease-in-out infinite; }
/* durata = BANNER_FLY_MS in js/main.js */
.ritual-banner.fly {
  pointer-events: none;
  animation: none;
  transform: translate(var(--dx), var(--dy)) scale(.2) rotate(360deg);
  opacity: 0;
  transition: transform .6s ease-in, opacity .6s ease-in;
}
@keyframes ritual-call { 50% { transform: scale(1.12); } }

/* ---------- Personaggio con bocca Pac-Man ---------- */
.matteo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-black);

  --jaw: 0;
}
.matteo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.matteo .hole {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mouth-y) - 1%);
  height: 24%;
  background: radial-gradient(ellipse 70% 60% at 50% 10%, var(--color-blood) 0%, var(--color-blood-dark) 45%, var(--color-blood-darkest) 80%);
}
.matteo .head {
  clip-path: inset(0 0 calc(100% - var(--mouth-y)) 0);
  transform-origin: var(--hinge-x) var(--mouth-y);
  transform: rotate(calc(var(--jaw) * var(--head-angle)));
  transition: transform 50ms linear;
}
.matteo .jaw {
  clip-path: inset(var(--mouth-y) 0 0 0);
  transform-origin: var(--hinge-x) var(--mouth-y);
  transform: rotate(calc(var(--jaw) * var(--jaw-angle))) translateY(calc(var(--jaw) * var(--jaw-drop)));
  transition: transform 50ms linear;
}
.mouth-guide {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mouth-y);
  border-top: 2px dashed var(--color-red);
  z-index: var(--z-floating);
}
.mouth-guide::before {
  content: '';
  position: absolute;
  left: var(--hinge-x);
  top: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--radius-round);
  background: var(--color-red);
}

/* ---------- Finestra di dialogo ---------- */
.dialog { position: relative; z-index: var(--z-window); width: 100%; max-width: 560px; }
.dialog .win-body { min-height: 7.4em; background: var(--color-white); border: 2px solid; border-color: var(--bevel-in-soft); margin-top: var(--space-2); }
.dlg-text { margin: 0; font-size: var(--font-size-dialog); line-height: 1.05; color: var(--color-ink); }
.dlg-text .w { white-space: nowrap; }
.dlg-text .c { display: inline-block; opacity: 0; transform: translateY(.35em) scale(.5); }
.dlg-text .c.on { opacity: 1; transform: none; transition: transform .14s cubic-bezier(.3, 1.9, .5, 1), opacity .06s; }
.dlg-text .c.hl.on { color: var(--color-hl); animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
.dlg-text .c.rb.on { animation: rainbow 1s linear infinite, wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.08s); text-shadow: 1px 1px 0 var(--color-black); }
@keyframes wave { 50% { transform: translateY(-.16em); } }
/* L'arcobaleno è una sequenza di colori propria di questa animazione: unica eccezione ai token */
/* stylelint-disable color-no-hex, scale-unlimited/declaration-strict-value -- tinte dell'arcobaleno */
@keyframes rainbow {
  0% { color: #ff004c; } 17% { color: #f90; } 33% { color: #e6c800; }
  50% { color: #00c853; } 67% { color: #00b0ff; } 83% { color: #b400ff; } 100% { color: #ff004c; }
}
/* stylelint-enable color-no-hex, scale-unlimited/declaration-strict-value */
.dlg-next {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-3);
  font-size: var(--font-size-9);
  color: var(--color-hl);
  opacity: 0;
}
.dlg-next.show { opacity: 1; animation: nudge .6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ============================================================
   MAPPA
   ============================================================ */
#screen-map { padding: 0; }
#map { position: absolute; inset: 0; z-index: var(--z-backdrop); background: var(--color-map-bg); }
#map .leaflet-tile-pane { filter: sepia(.45) saturate(1.5) hue-rotate(-12deg) contrast(1.05); }
.leaflet-control-attribution { font-size: var(--font-size-0); }

.map-top {
  position: absolute;
  z-index: var(--z-map-ui);
  top: calc(var(--safe-top) + var(--space-5));
  left: var(--space-5);
  right: var(--space-5);
}
#map-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: var(--font-size-7); line-height: 1.1; padding: var(--space-4) var(--space-5); }
.area-tag {
  display: inline-block;
  background: var(--c);
  color: var(--color-white);
  padding: 0 var(--space-4);
  text-shadow: var(--shadow-text-outline-thin);
  border: 1px solid var(--color-black);
}
.inline-btn { font-size: var(--font-size-5); background: var(--color-w98); border: 2px solid; border-color: var(--bevel-out); padding: 0 var(--space-4); color: var(--color-black); }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.map-bottom {
  position: absolute;
  z-index: var(--z-map-ui);
  left: var(--space-5);
  right: var(--space-5);
  bottom: calc(var(--safe-bottom) + 18px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.banner-bar {
  display: flex;
  justify-content: space-around;
  background: var(--color-bg-a88);
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 0 2px var(--color-wood-dark), 4px 4px 0 2px var(--color-black-a50);
  padding: var(--space-4) var(--space-3) var(--space-1);
}
.slot { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-2); color: var(--color-grey-light); }
.slot .banner-svg { width: 34px; }
.slot.got .banner-svg { filter: drop-shadow(0 0 6px var(--color-gold)); animation: flutter var(--duration-flutter) ease-in-out infinite; }
.slot.new { animation: slot-pop .7s var(--ease-spring); }
@keyframes slot-pop { 0% { transform: scale(0) rotate(-40deg); } }

.big-btn {
  --area-color: var(--color-btn-idle);

  position: relative;
  width: 100%;
  font-family: var(--font-epic);
  font-size: var(--font-size-11);
  line-height: 1;
  padding: var(--space-6) var(--space-5) var(--space-5);
  color: var(--color-white);
  background: var(--color-grey-dark);
  border: 3px solid;
  border-color: var(--color-grey-mid) var(--color-grey-darkest) var(--color-grey-darkest) var(--color-grey-mid);
  text-shadow: var(--shadow-text-hard);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.big-btn small { font-family: var(--font-text); font-size: var(--font-size-3); opacity: .9; }
.big-btn:disabled { opacity: .85; font-size: var(--font-size-8); color: var(--color-grey-light); }
.big-btn.ready {
  background: linear-gradient(180deg, var(--color-gold), var(--color-orange) 55%, var(--color-magenta));
  border-color: var(--color-gold-light) var(--color-wood-dark) var(--color-wood-dark) var(--color-gold-light);
  box-shadow: 0 0 0 3px var(--area-color), 0 0 26px 6px var(--color-gold-a80);
  animation: pulse 1s ease-in-out infinite;
}
.big-btn.ready:active { transform: scale(.96); }
@keyframes pulse { 50% { transform: scale(1.035); box-shadow: 0 0 0 3px var(--area-color), 0 0 40px 12px var(--color-magenta-a80); } }

/* Marcatori sulla mappa */
.map-gem { width: 34px; height: 34px; display: grid; place-items: center; }
.map-gem .gem { width: 30px; height: 30px; }
.me { position: relative; width: 30px; height: 30px; }
.me span {
  position: absolute;
  inset: 7px;
  border-radius: var(--radius-round);
  background: var(--color-cyan);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-black);
}
.me::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-round);
  background: var(--color-cyan-a50);
  animation: ping 1.4s ease-out infinite;
}
.me i {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-style: normal;
  font-family: var(--font-text);
  font-size: var(--font-size-2);
  background: var(--color-black);
  color: var(--color-cyan);
  padding: 0 var(--space-3);
}
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }

.ring-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-text);
  pointer-events: none;
}
.ring-label .banner-svg { width: 24px; }
.ring-label .banner-svg.empty path { fill: var(--c); fill-opacity: .35; stroke: var(--color-black); }
.ring-label b { font-size: var(--font-size-3); font-weight: normal; background: var(--color-black); color: var(--color-white); padding: 0 5px; border: 1px solid var(--c); }
.ring-label small { font-size: var(--font-size-1); background: var(--color-white-a85); color: var(--color-black); padding: 0 var(--space-3); }
.ring-label.here b { background: var(--color-gold); color: var(--color-black); animation: blink .8s steps(1) infinite; }
.ring-label.got { opacity: .75; }

.ring { transition: fill-opacity .3s; }
.ring.flash { animation: ring-flash .5s ease-in-out 4; }
@keyframes ring-flash { 50% { fill-opacity: .55; stroke-width: 6; } }

/* Evidenziazione durante il tutorial */
.spot { position: relative; z-index: var(--z-window); animation: spot .9s ease-in-out infinite !important; }
@keyframes spot {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-magenta), 0 0 18px 6px var(--color-magenta); }
  50% { box-shadow: 0 0 0 6px var(--color-cyan), 0 0 30px 12px var(--color-cyan); }
}
.map-gem.spot, .me.spot { border-radius: var(--radius-round); }

/* Tutorial */
.tutorial-layer {
  position: absolute;
  z-index: var(--z-tutorial);
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  cursor: pointer;
}
.tut-box { width: 100%; display: flex; align-items: flex-end; gap: var(--space-4); animation: pop .45s var(--ease-pop); }
.tut-avatar { flex: 0 0 auto; width: 96px; }
.tut-avatar .matteo { border: 3px solid var(--color-gold); box-shadow: 0 0 0 3px var(--color-wood-dark), 4px 4px 0 3px var(--color-black-a50); }
.tut-avatar.talk-bump > .matteo { animation: talk-bump var(--duration-talk-bump) ease-out; }
.dialog.small .win-body { min-height: 5.6em; }
.dialog.small .dlg-text { font-size: var(--font-size-dialog-small); }

/* Pannello dev */
.dev-panel {
  position: absolute;
  z-index: var(--z-dev-panel);
  left: var(--space-5);
  top: calc(var(--safe-top) + 92px);
  background: var(--color-black-a80);
  color: var(--color-lime);
  font-size: var(--font-size-1);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-lime);
}
.dev-panel button { font-size: var(--font-size-1); background: var(--color-grey-darkest); color: var(--color-lime); border: 1px solid var(--color-lime); margin: var(--space-1); padding: 1px var(--space-4); }

/* ============================================================
   PROVA (segnaposto)
   ============================================================ */
#screen-trial { justify-content: center; }
.trial-win { position: relative; z-index: var(--z-stage); width: 100%; max-width: 480px; text-align: center; font-size: var(--font-size-8); }
.trial-banner .banner-svg { width: 80px; filter: var(--drop-hard-lg); animation: flutter var(--duration-flutter) ease-in-out infinite; }
.trial-h { font-family: var(--font-epic); font-weight: normal; font-size: var(--font-size-12); margin: var(--space-3) 0; color: var(--color-purple-deep); }

/* ============================================================
   MODALE
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-9);
  background: var(--color-black-a60);
}
.modal-win { width: 100%; max-width: 440px; font-size: var(--font-size-7); line-height: 1.15; }
.modal-win p { margin: 0 0 var(--space-6); }
.modal-lead { font-size: var(--font-size-9); color: var(--color-blood); }
.modal-actions { display: flex; gap: var(--space-5); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.modal-actions.col { flex-direction: column; align-items: stretch; }
.tiny { font-size: var(--font-size-2); opacity: .7; margin-top: var(--space-6) !important; }

/* ============================================================
   EFFETTI
   ============================================================ */
#fx-layer { position: fixed; inset: 0; z-index: var(--z-fx); pointer-events: none; overflow: hidden; }
.spark {
  position: absolute;
  transform: translate(-50%, -50%);
  text-shadow: var(--shadow-glow-current);
  animation: spark var(--duration-spark) cubic-bezier(.1, .8, .3, 1) forwards;
}
@keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.2); opacity: 0; } }
.trail {
  position: absolute;
  font-size: var(--font-size-4);
  transform: translate(-50%, -50%);
  text-shadow: var(--shadow-glow-current);
  animation: trail var(--duration-trail) ease-out forwards;
}
@keyframes trail { to { transform: translate(-50%, 30px) rotate(180deg) scale(.2); opacity: 0; } }

.flash { position: absolute; inset: 0; animation: flash var(--duration-flash) ease-out forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }

.toast {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 110px);
  transform: translateX(-50%);
  max-width: 92vw;
  background: var(--color-tooltip);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  box-shadow: var(--shadow-hard-sm);
  padding: var(--space-4) var(--space-7);
  font-size: var(--font-size-7);
  text-align: center;
  animation: pop .4s var(--ease-pop);
  transition: opacity .35s, transform .35s;
}
.toast.bye { opacity: 0; transform: translateX(-50%) translateY(-20px); }

.pop-in { animation: pop var(--duration-pop) var(--ease-pop) both; }
@keyframes pop { from { transform: scale(0) rotate(-12deg); opacity: 0; } }

#app.shake { animation: shake var(--duration-shake) var(--ease-shake); }
#app.shake-big { animation: shake-big var(--duration-shake-big) var(--ease-shake); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); }
}
@keyframes shake-big {
  10%, 90% { transform: translate(-4px, 2px) rotate(-1deg); } 20%, 80% { transform: translate(8px, -4px) rotate(1deg); }
  30%, 50%, 70% { transform: translate(-14px, 6px) rotate(-2deg); } 40%, 60% { transform: translate(14px, -6px) rotate(2deg); }
}
#app.glitch { animation: glitch var(--duration-glitch) steps(2) both; }
@keyframes glitch {
  0% { filter: none; transform: none; }
  15% { filter: hue-rotate(90deg) saturate(4); transform: translate(-6px, 0) skewX(8deg); clip-path: inset(10% 0 40% 0); }
  30% { filter: invert(1); transform: translate(6px, 2px); clip-path: inset(50% 0 5% 0); }
  45% { filter: hue-rotate(-90deg) contrast(2); transform: translate(-3px, -2px) skewX(-6deg); clip-path: none; }
  60% { filter: drop-shadow(5px 0 0 var(--color-red)) drop-shadow(-5px 0 0 var(--color-glitch-cyan)); transform: translate(3px, 0); }
  80% { filter: saturate(6); transform: none; }
  100% { filter: none; transform: none; }
}

/* Transizione a cerchio */
#wipe {
  position: fixed;
  inset: 0;
  z-index: var(--z-wipe);
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--color-magenta) 0 15deg, var(--color-gold) 15deg 30deg);
  clip-path: circle(0% at 50% 50%);
}
#wipe.in { pointer-events: auto; animation: wipe-in var(--duration-wipe-in) ease-in forwards; }
#wipe.out { animation: wipe-out var(--duration-wipe-out) ease-out forwards; }
@keyframes wipe-in { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes wipe-out { from { clip-path: circle(80% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }

/* Scanline CRT sopra tutto */
.crt {
  position: fixed;
  inset: 0;
  z-index: var(--z-crt);
  pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--color-black-a12) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 80px var(--color-black-a55);
  animation: flicker 4s steps(1) infinite;
}
@keyframes flicker { 0%, 100% { opacity: .9; } 47% { opacity: .75; } 48% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .stars, .rays, .marquee span { animation: none; }
}

/* ============================================================
   MINIGIOCHI — contenitore
   ============================================================ */
#screen-game { padding: 0; }
.game-root { position: absolute; inset: 0; }
.gview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  padding: calc(var(--safe-top) + var(--space-6)) var(--screen-pad-x) calc(var(--safe-bottom) + var(--space-7));
  overflow: hidden;
}
.gview[data-view="guardian"] { cursor: pointer; }

/* ---------- Guardiano e giudizio ---------- */
.g-wrap { width: min(70vw, 40dvh, 360px); }
.g-stage.judging { display: flex; align-items: center; justify-content: center; gap: var(--space-9); }
.g-stage.judging .g-wrap { width: min(40vw, 28dvh, 220px); }
.g-stage.pondering .g-wrap { animation: ponder .9s ease-in-out infinite; }
@keyframes ponder { 50% { transform: translateX(12px) rotate(7deg) scale(1.06); } }

.g-thumb {
  position: relative;
  z-index: var(--z-window);
  background: var(--color-white);
  border: 8px solid var(--color-wood);
  box-shadow: 0 0 0 3px var(--color-gold), 0 0 0 6px var(--color-wood-darkest), 8px 8px 0 6px var(--color-black-a50);
  transform: rotate(4deg);
}
.g-thumb img { display: block; max-width: 42vw; max-height: 34dvh; }
.g-stage.pondering .g-thumb { animation: thumb-glow .6s ease-in-out infinite alternate; }
@keyframes thumb-glow { to { box-shadow: 0 0 0 3px var(--color-gold), 0 0 0 6px var(--color-wood-darkest), 0 0 30px 12px var(--color-gold-a80); } }

.stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-epic);
  font-size: var(--font-size-stamp);
  line-height: 1;
  padding: var(--space-3) var(--space-6) var(--space-1);
  border: 4px solid;
  border-radius: var(--radius-stamp);
  background: var(--color-white-a55);
  transform: translate(-50%, -50%) rotate(-18deg);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.stamp.fail { color: var(--color-stamp-fail); border-color: var(--color-stamp-fail); }
.stamp.pass { color: var(--color-stamp-pass); border-color: var(--color-stamp-pass); }
.stamp.slam { animation: slam .32s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes slam {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(4); }
  to { opacity: .95; transform: translate(-50%, -50%) rotate(-18deg) scale(1); }
}

.g-actions { position: relative; z-index: var(--z-props); width: 100%; max-width: 560px; }
.g-actions .modal-actions { margin-top: 0; }
.reward { text-align: center; font-size: var(--font-size-9); text-shadow: var(--shadow-text-hard); margin-bottom: var(--space-5); }
.reward .banner-svg { width: 110px; filter: drop-shadow(0 0 16px var(--color-gold)); animation: flutter var(--duration-flutter) ease-in-out infinite; }
.reward p { margin: var(--space-3) 0 0; }
.reward b { color: var(--color-gold); font-family: var(--font-epic); font-weight: normal; font-size: var(--font-size-11); }

/* ---------- Paint ---------- */
.paint-view { justify-content: stretch; padding: calc(var(--safe-top) + var(--space-4)) var(--space-4) calc(var(--safe-bottom) + var(--space-5)); }
.paint-win { flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 0; }
.paint-subject {
  background: var(--color-tooltip);
  border: 1px solid var(--color-black);
  margin: var(--space-3) var(--space-1);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-7);
  line-height: 1.05;
}
.paint-subject b { color: var(--color-hl); font-weight: normal; }
.paint-try { color: var(--color-grey-dark); }
.paint-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.paint-main { flex: 1; display: flex; gap: var(--space-3); min-height: 0; }
.paint-tools { display: flex; flex-direction: column; gap: var(--space-2); width: 50px; }
.paint-tools button {
  flex: 1 1 0;
  min-height: 28px;
  max-height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: var(--font-size-6);
  background: var(--color-w98);
  border: 2px solid;
  border-color: var(--bevel-out);
}
.paint-tools button.on {
  border-color: var(--bevel-in);
  background: repeating-conic-gradient(var(--color-white) 0 25%, var(--color-grey-checker) 0 50%) 0 0 / 4px 4px;
}
.paint-tools button i { display: block; border-radius: var(--radius-round); background: var(--color-black); }
.paint-tools hr { width: 100%; margin: 1px 0; border: 0; border-top: 1px solid var(--color-w98-dark); border-bottom: 1px solid var(--color-white); }
.paint-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--color-w98-dark);
  border: 2px solid;
  border-color: var(--bevel-in);
}
.paint-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-white); touch-action: none; cursor: crosshair; }
.paint-palette { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-1) var(--space-1); }
.paint-current {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 2px solid;
  border-color: var(--bevel-in);
}
.paint-current i { width: 30px; height: 30px; border: 1px solid var(--color-black); }
.paint-swatches { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-1); }
.paint-swatches button { aspect-ratio: 1; padding: 0; min-height: 20px; border: 2px solid; border-color: var(--bevel-in); }
.paint-swatches button:active { transform: scale(.85); }
.paint-submit { margin-top: var(--space-4); font-size: var(--font-size-10); }

/* ============================================================
   PROVA 3 — Console in stile MakeCode Arcade
   ============================================================ */
.console-view { padding: 0; justify-content: stretch; }
.console {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: calc(var(--safe-top) + var(--space-7)) var(--space-8) calc(var(--safe-bottom) + var(--space-7));
  background:
    radial-gradient(ellipse at 30% 0%, var(--color-console-shine), transparent 60%),
    var(--color-console-body);
  touch-action: none;
}
.console.console-on { animation: console-on .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes console-on { from { transform: scale(.85); opacity: 0; } }
.console.console-bump { animation: console-bump .15s ease-out; }
@keyframes console-bump { 50% { transform: translateY(2px); } }
.console.console-hit { animation: shake var(--duration-shake) cubic-bezier(.36, .07, .19, .97); }

.console-screen-area { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.console-bezel {
  position: relative;
  width: 100%;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-9);
  background: var(--color-console-bezel);
  border-radius: var(--space-6) var(--space-6) 28px var(--space-6);
  box-shadow: inset 0 0 0 2px var(--color-console-stroke), 0 4px 0 var(--color-console-body-dark);
}
.console-led {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--color-console-led);
  box-shadow: 0 0 6px var(--color-console-led-glow);
}
.console-screen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  background: var(--color-black);
}
.console-brand {
  font-family: var(--font-text);
  font-size: var(--font-size-6);
  letter-spacing: 3px;
  color: var(--color-console-text);
}
.console-brand b { color: var(--color-white); font-weight: normal; }

.console-controls {
  flex: 1;
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
}
.console-dpad, .console-ab { width: min(44vw, 30dvh, 200px); aspect-ratio: 1; }
.console-dpad svg, .console-ab svg { display: block; width: 100%; height: 100%; touch-action: none; }
.dpad-bg { fill: var(--color-console-stroke); }
.dpad-arm, .dpad-center { fill: var(--color-console-text); transition: fill .05s; }
.dpad-arm.on { fill: var(--color-white); }
.dpad-handle { fill: var(--color-console-btn); stroke: var(--color-console-handle); stroke-width: 2; }
.ab-btn circle { fill: var(--color-console-btn); stroke: var(--color-console-stroke); stroke-width: 2; transition: transform .05s; transform-box: fill-box; transform-origin: center; }
.ab-btn text {
  fill: var(--color-console-text);
  font-family: var(--font-text);
  font-size: var(--font-size-0);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.ab-btn.on circle { transform: scale(.9); fill: var(--color-black); }

.console-sys { display: flex; gap: var(--space-7); }
.console-sys-btn {
  font-family: var(--font-text);
  font-size: var(--font-size-3);
  color: var(--color-console-text);
  background: var(--color-console-btn);
  border: 2px solid var(--color-console-stroke);
  border-radius: 999px;
  padding: var(--space-1) var(--space-8);
  transform: rotate(-12deg);
}
.console-sys-btn:active { background: var(--color-black); }

.console-pause {
  position: absolute;
  inset: 0;
  z-index: var(--z-floating);
  display: grid;
  place-items: center;
  padding: var(--space-9);
  background: var(--color-black-a60);
}

/* ============================================================
   PROVA 2 — Wireframe a tempo in un finto Figma
   ============================================================ */
.fg-view {
  padding: 0;
  gap: 0;
  justify-content: stretch;
  align-items: stretch;
  background: var(--color-fg-ui);
  color: var(--color-fg-text);
  font-family: var(--font-text);
}

/* Barra in alto, come la toolbar di Figma */
.fg-top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: calc(var(--safe-top) + var(--space-3)) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-fg-ui-line);
}
.fg-menu {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-stamp);
  background: var(--color-fg-ui-2);
  font-size: var(--font-size-6);
}
.fg-file { flex: 1; min-width: 0; font-size: var(--font-size-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-file span { color: var(--color-fg-text-dim); }
.fg-file b { font-weight: normal; }
.fg-avatars { display: flex; }
.fg-av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  border: 2px solid var(--color-fg-ui);
  font-style: normal;
  font-size: var(--font-size-2);
  color: var(--color-white);
}
.fg-av + .fg-av { margin-left: calc(-1 * var(--space-4)); }
.fg-av-buddy { background: var(--color-fg-buddy); }
.fg-av-me { background: var(--color-fg-blue); }

/* Avanzamento e cronometro */
.fg-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  background: var(--color-fg-ui-2);
}
.fg-steps { display: flex; gap: var(--space-3); }
.fg-steps i { width: 22px; height: 8px; border-radius: var(--space-3); background: var(--color-fg-ui-line); transition: background .3s; }
.fg-steps i.now { background: var(--color-fg-blue); }
.fg-steps i.done { background: var(--color-fg-green); }
.fg-time { font-size: var(--font-size-9); }
.fg-time b { font-weight: normal; }
.fg-time.hurry { color: var(--color-fg-guide); animation: blink-hurry .5s steps(2) infinite; }
@keyframes blink-hurry { 50% { opacity: .55; } }

/* Canvas a puntini con il frame del telefono */
.fg-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(var(--color-fg-dot) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--color-fg-canvas);
}
.fg-stage { position: absolute; inset: 0; }
.fg-frame {
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  width: calc(100 * var(--u));
  height: calc(200 * var(--u));
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fg-slide) cubic-bezier(.6, 0, .3, 1);
}
.fg-frame.in { transform: translate(60vw, -50%); transition: none; }
.fg-frame.out { transform: translate(calc(-60vw - 100%), -50%); }
.fg-frame-label {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding-bottom: var(--space-1);
  font-size: var(--font-size-2);
  color: var(--color-grey-dark);
  white-space: nowrap;
}
.fg-frame.done .fg-frame-label { color: var(--color-fg-green); }
.fg-frame.done .fg-frame-label::after { content: ' ✓'; }
.fg-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 1px 4px var(--color-black-a12);
}
.fg-frame.done .fg-screen { outline: 2px solid var(--color-fg-green); }

/* Sagome tratteggiate */
.fg-slot {
  position: absolute;
  border: 1.5px dashed var(--color-grey-mid);
  background: var(--color-black-a12);
  transition: background .15s, border-color .15s;
}
.fg-slot.snap { border: 1.5px solid var(--color-fg-guide); background: var(--color-fg-guide-a15); }
/* Guide rosse che attraversano il frame, come le smart guides */
.fg-slot.snap::before, .fg-slot.snap::after { content: ''; position: absolute; pointer-events: none; }
.fg-slot.snap::before { inset: -1.5px -100vw; border-block: 1px solid var(--color-fg-guide); }
.fg-slot.snap::after { inset: -100vh -1.5px; border-inline: 1px solid var(--color-fg-guide); }
.fg-slot.nope { border-color: var(--color-grey-dark); }
.fg-slot.wrong { animation: slot-wrong .5s; }
@keyframes slot-wrong {
  0%, 100% { translate: 0; }
  20%, 60% { translate: -4px 0; background: var(--color-fg-guide-a15); border-color: var(--color-fg-guide); }
  40%, 80% { translate: 4px 0; }
}
.fg-slot.filled { border: 0; background: none; }
.fg-slot.placed { animation: slot-placed .35s var(--ease-pop); }
@keyframes slot-placed { from { scale: 1.12; outline: 2px solid var(--color-fg-blue); } }
.fg-slot .lf, .fg-piece .lf, .fg-ghost .lf { display: block; width: 100%; height: 100%; overflow: visible; }

/* Componenti lo-fi (classi dentro gli SVG di js/games/figma/pieces.js) */
.lf .b { fill: var(--color-white); stroke: var(--color-grey-dark); }
.lf .f { fill: var(--color-grey-mid); }
.lf .d { fill: var(--color-grey-dark); }
.lf .w { fill: var(--color-white); }
.lf .img { fill: var(--color-grey-light); }
.lf .x, .lf .s { fill: none; stroke: var(--color-grey); }
.lf .b, .lf .x, .lf .s { stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Cursore dell'altro collaboratore */
.fg-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-props);
  pointer-events: none;
  transform: translate(70vw, 40%);
  transition: transform 1.4s cubic-bezier(.45, 0, .2, 1);
}
.fg-cursor svg { display: block; width: 16px; height: 22px; fill: var(--color-fg-buddy); stroke: var(--color-white); stroke-width: 1px; }
.fg-cursor span {
  position: absolute;
  left: 12px;
  top: 18px;
  padding: 0 var(--space-3);
  border-radius: var(--space-2);
  background: var(--color-fg-buddy);
  color: var(--color-white);
  font-size: var(--font-size-2);
  white-space: nowrap;
}
.fg-bubble {
  position: absolute;
  left: 12px;
  top: 40px;
  max-width: 52vw;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 var(--space-7) var(--space-7) var(--space-7);
  background: var(--color-white);
  color: var(--color-ink);
  border: 2px solid var(--color-fg-buddy);
  font-style: normal;
  font-size: var(--font-size-4);
  line-height: 1;
  width: max-content;
}

.fg-countdown {
  position: absolute;
  inset: 0;
  z-index: var(--z-floating);
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--font-epic);
  font-size: var(--font-size-wordart);
  color: var(--color-fg-blue);
  text-shadow: var(--shadow-text-outline);
}

/* Nastro della fabbrica */
.fg-belt {
  border-top: 1px solid var(--color-fg-ui-line);
  padding: var(--space-2) 0 calc(var(--safe-bottom) + var(--space-4));
}
.fg-belt-label {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-6) var(--space-2);
  font-size: var(--font-size-2);
  color: var(--color-fg-text-dim);
}
.fg-belt-track {
  position: relative;
  height: clamp(90px, 15dvh, 130px);
  overflow: hidden;
  touch-action: none;
  border-block: 3px solid var(--color-black);
  background:
    repeating-linear-gradient(90deg, var(--color-fg-belt) 0 22px, var(--color-fg-belt-stripe) 22px 26px);
  animation: belt-move 1.2s linear infinite;
}
@keyframes belt-move { to { background-position: -26px 0; } }
.fg-piece { position: absolute; left: 0; top: 50%; cursor: grab; }
.fg-piece-in { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 var(--color-black-a50)); }
.fg-piece.held { opacity: .25; }

/* Pezzo trascinato, a grandezza del frame */
.fg-ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--z-floating);
  pointer-events: none;
  transform-origin: 0 0;
  outline: 1.5px solid var(--color-fg-blue);
  filter: drop-shadow(0 6px 8px var(--color-black-a45));
}
.fg-ghost.back { transition: transform .26s ease-in, opacity .26s; opacity: 0; }
.fg-ghost-tag {
  position: absolute;
  bottom: 100%;
  left: -1.5px;
  padding: 0 var(--space-3);
  background: var(--color-fg-purple);
  color: var(--color-white);
  font-size: var(--font-size-2);
  white-space: nowrap;
}
.fg-float {
  position: absolute;
  z-index: var(--z-floating);
  pointer-events: none;
  font-size: var(--font-size-10);
  color: var(--color-fg-guide);
  text-shadow: var(--shadow-text-outline-thin);
  translate: -50% -50%;
  animation: float-up .9s ease-out forwards;
}
@keyframes float-up { to { translate: -50% -180%; opacity: 0; } }

/* Schermata iniziale, prototipo finale e finestre */
.fg-start, .fg-flow, .fg-modal {
  position: absolute;
  inset: 0;
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-9);
  text-align: center;
  background: var(--color-black-a55);
}
.fg-start p { margin: 0; font-size: var(--font-size-8); text-shadow: var(--shadow-text-hard); }
.fg-start b { color: var(--color-gold); font-weight: normal; }
.fg-present {
  padding: var(--space-6) var(--space-9);
  border: 0;
  border-radius: var(--radius-stamp);
  background: var(--color-fg-blue);
  color: var(--color-white);
  font-size: var(--font-size-11);
  box-shadow: var(--shadow-hard-sm);
  animation: present-pulse 1.2s ease-in-out infinite;
}
.fg-present:active { transform: scale(.95); }
@keyframes present-pulse { 50% { box-shadow: var(--shadow-hard-sm), 0 0 0 10px var(--color-fg-blue-a20); } }
.fg-modal .modal-win { width: min(92vw, 360px); }
.fg-result { margin: var(--space-5) 0 0; font-size: var(--font-size-8); }

.fg-flow { background: var(--color-fg-canvas); color: var(--color-ink); }
.fg-flow-title { margin: 0; font-size: var(--font-size-10); color: var(--color-fg-blue); }
.fg-flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);

  --u: min(1px, calc((100vw - 120px) / 400));
}
.fg-mini { position: relative; width: calc(100 * var(--u)); height: calc(200 * var(--u)); }
.fg-mini .fg-screen { outline: 1px solid var(--color-grey-mid); }
/* Collegamenti del prototipo: freccia blu tra un frame e l'altro */
.fg-noodle { position: relative; width: 22px; height: 2px; background: var(--color-fg-blue); }
.fg-noodle::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-fg-blue); }
.fg-noodle::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--color-fg-blue); border-right: 0; }

/* ============================================================
   PROVA 4 — Taglia-mail di Natalina
   ============================================================ */
.sl-view { padding: 0; gap: 0; justify-content: stretch; align-items: stretch; background: var(--color-bg); }
.sl-view.sl-hit { animation: sl-hit .35s ease-out; }
@keyframes sl-hit { 30% { background: var(--color-blood); } }
.sl-hud {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: calc(var(--safe-top) + var(--space-5)) var(--space-8) var(--space-5);
  background: var(--color-w98);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--font-size-6);
  border-bottom: 2px solid var(--color-w98-shadow);
}
.sl-menu { font-size: var(--font-size-8); padding: 0 var(--space-5); border: 2px solid; border-color: var(--bevel-out); background: var(--color-w98); color: var(--color-ink); }
.sl-menu:active { border-color: var(--bevel-in); }
.sl-inbox { flex: 1; }
.sl-inbox b { background: var(--color-black); color: var(--color-red); padding: 0 var(--space-4); letter-spacing: 2px; }
.sl-stress { display: flex; align-items: center; gap: var(--space-2); }
.sl-stress i { width: 16px; height: 18px; border: 2px solid; border-color: var(--bevel-in); background: var(--color-white); }
.sl-stress i.on { background: var(--color-stamp-fail); animation: pop .3s ease-out; }
.sl-canvas { flex: 1; width: 100%; min-height: 0; touch-action: none; }
.sl-modal {
  position: absolute;
  inset: 0;
  z-index: var(--z-floating);
  display: grid;
  place-items: center;
  padding: var(--space-9);
  background: var(--color-black-a60);
}
.sl-modal .modal-win { width: min(92vw, 360px); }
.sl-quip { font-style: italic; }

/* ============================================================
   TITOLI DI CODA
   ============================================================ */
#screen-credits { justify-content: center; cursor: pointer; }
.credits-roll {
  position: absolute;
  z-index: var(--z-stage);
  top: 0;
  left: var(--screen-pad-x);
  right: var(--screen-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14dvh;
  text-align: center;
  transform: translateY(100dvh);
}
.credits-roll.rolling { animation: credits-roll var(--duration-credits) linear forwards; }
@keyframes credits-roll { from { transform: translateY(100dvh); } to { transform: translateY(-100%); } }
.credits-title { margin: 0; font-family: var(--font-epic); font-weight: normal; font-size: var(--font-size-12); color: var(--color-gold); text-shadow: var(--shadow-text-hard); }
.credits-item { display: flex; flex-direction: column; gap: var(--space-3); }
.credits-item span { font-size: var(--font-size-6); color: var(--color-cyan); }
.credits-item b { font-family: var(--font-epic); font-weight: normal; font-size: var(--font-size-11); color: var(--color-white); text-shadow: var(--shadow-text-hard); }
.credits-end { position: relative; z-index: var(--z-stage); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); }