/*
  Flatten Frenzy — foglio di stile del sito.

  SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
  Copyright (c) 2026 Contardo Molteni

  I colori vengono da `FlattenFrenzy/Core/Palette.swift`, che è la loro unica
  sede nel gioco: qui sono ricopiati, non reinventati. Chi cambia una tinta lì
  la cambia anche qui, altrimenti le catture di schermo smettono di stare nella
  pagina che le contiene.

  Due regole della spec valgono anche fuori dal gioco (§8.1): tinte piatte,
  nessun contorno, nessuna ombra dura. Da qui l'assenza di `box-shadow` su
  pannelli e pulsanti: la profondità la fa il salto di tono fra `ink` e
  `navy`, come fra il cielo e la trave.
*/

:root {
  /* Palette.swift */
  --ink: #1C1C3A;
  --navy: #2E3460;
  --steel: #566096;
  --steel-light: #7884BE;
  --orange: #FF8A3D;
  --orange-dark: #E86828;
  --yellow: #FFCD3D;
  --coral: #FF6B6B;
  --teal: #2EC4B6;
  --purple: #9B5DE5;
  --pink: #FF3D7F;
  --cream: #FFF6EB;
  --hi-vis: #A2B645;
  --hud-track: #E2E6F4;
  --hud-label: #7880AA;

  /* Cieli dei quattro distretti (Palette.swift, §8.3) */
  --sunset: linear-gradient(180deg, #FFECC8, #FF9A9E 38%, #A874DC 74%, #563C9C);
  --night: linear-gradient(180deg, #2B2A5E, #3D2E78 38%, #6B3A8F 74%, #231A46);
  --dawn: linear-gradient(180deg, #FFD9A0, #FFB3C1 38%, #8FB8E8 74%, #4A6FA5);
  --zenith: linear-gradient(180deg, #BFE9FF, #8AC6F0 38%, #6B8FD4 74%, #3B4C96);

  --radius: 18px;
  /* La colonna di testo si ferma a 34rem, cioè intorno ai 65 caratteri per riga:
     più lunga, l'occhio fatica a ritrovare l'inizio della riga successiva. Il
     contenitore sta a 52rem invece che a 64 proprio per questo: immagini e
     griglie non hanno quel limite, e con una pagina più larga il testo sembrava
     una colonna smarrita in mezzo al vuoto. */
  --measure: 34rem;
  --page: 52rem;
}

/* Il gioco usa SF Rounded (`design: .rounded`), il materiale promozionale
   Poppins Bold. Qui si parte dal tondo di sistema e si scende per gradi:
   nessun font viene scaricato, come nel gioco non viene caricato nessun asset. */
:root {
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", Nunito, Quicksand,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--hud-track);
  font: 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Il selettore di lingua nasconde una delle due versioni solo se JavaScript
   è vivo: senza, la pagina resta leggibile in entrambe, una sotto l'altra. */
html.js[data-lang="it"] [lang="en"],
html.js[data-lang="en"] [lang="it"] { display: none; }

img, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--yellow);
  text-decoration-color: rgba(255, 205, 61, .4);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: var(--yellow); }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Barra in cima ───────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(28, 28, 58, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 2px solid var(--navy);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--cream);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.top nav { display: flex; align-items: center; gap: 1rem; }
.top nav a { color: var(--hud-track); text-decoration: none; font-size: .95rem; }
.top nav a:hover { color: var(--yellow); }

.lang-switch {
  display: inline-flex;
  background: var(--navy);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--hud-track);
  font: 700 .8rem/1 var(--font);
  letter-spacing: .08em;
  padding: .45rem .7rem;
  border-radius: 999px;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--pink); color: #fff; }
html:not(.js) .lang-switch { display: none; }

/* ── Testata ─────────────────────────────────────────────────────────────── */

.hero {
  background: var(--navy);
  padding: 3.5rem 0 2.75rem;
  text-align: center;
}
.hero h1 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}
.hero .rule {
  width: 6.5rem;
  height: 8px;
  border-radius: 4px;
  background: var(--yellow);
  margin: 1.1rem auto 1.25rem;
}
.hero .tagline {
  margin: 0 auto;
  max-width: 30rem;
  color: var(--hud-track);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .02em;
}
.hero .platforms {
  margin: 1.5rem 0 0;
  color: var(--steel-light);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stage { margin: -1.75rem auto 0; max-width: var(--page); padding: 0 1.25rem; }
.stage video, .stage img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--navy);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 1.75rem 0 0;
}
/* Badge dell'App Store: si usa com'è. Niente ombra, niente riflesso, niente
   angolo, niente effetto al passaggio del mouse, che sarebbero tutte modifiche
   vietate dalle linee guida di Apple. L'altezza minima a schermo è 40 px, lo
   spazio libero intorno è almeno un quarto dell'altezza (qui 50 / 4 = 12,5 px,
   coperti dal margine di `.cta` e dal `.cta-note` sotto). */
.cta .badge { display: inline-block; line-height: 0; }
.cta .badge img { height: 50px; width: auto; }
.button {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: .7rem 1.2rem;
  border-radius: 12px;
}
.button:hover { background: var(--coral); }
.button.ghost {
  background: transparent;
  color: var(--hud-track);
  border: 2px solid var(--steel);
}
.button.ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.cta-note {
  margin: .9rem 0 0;
  text-align: center;
  color: var(--hud-track);
  font-size: .95rem;
}
.cta-req {
  margin: .35rem auto 0;
  max-width: 32rem;
  text-align: center;
  color: var(--hud-label);
  font-size: .85rem;
}

/* ── Sezioni ─────────────────────────────────────────────────────────────── */

section { padding: 3.25rem 0 0; }
section > .wrap > h2 {
  margin: 0 0 .35rem;
  color: var(--yellow);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
}
.kicker {
  margin: 0 0 1rem;
  color: var(--hud-label);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
section p { max-width: var(--measure); margin: 0 0 1rem; }
.lede { font-size: 1.12rem; color: var(--cream); }
strong { color: var(--cream); }

/* ── Griglia delle caratteristiche ───────────────────────────────────────── */

.grid {
  display: grid;
  gap: 1rem;
  /* Tre colonne dentro i 52rem del contenitore: con una misura minima più
     larga le nove schede si sarebbero disposte in due colonne, lasciando
     l'ultima da sola in fondo. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.card {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}
.card h3 {
  margin: 0 0 .35rem;
  color: var(--cream);
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.card p { margin: 0; font-size: .95rem; color: var(--hud-track); max-width: none; }
.card .tag {
  display: block;
  margin: 0 0 .55rem;
  width: 2.25rem;
  height: 5px;
  border-radius: 3px;
  background: var(--pink);
}
.card:nth-child(6n+2) .tag { background: var(--yellow); }
.card:nth-child(6n+3) .tag { background: var(--teal); }
.card:nth-child(6n+4) .tag { background: var(--orange); }
.card:nth-child(6n+5) .tag { background: var(--purple); }
.card:nth-child(6n+6) .tag { background: var(--coral); }

/* ── Distretti ───────────────────────────────────────────────────────────── */

.districts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.district {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}
.district .sky { height: 7.5rem; }
.district .sky.sunset { background: var(--sunset); }
.district .sky.night { background: var(--night); }
.district .sky.dawn { background: var(--dawn); }
.district .sky.zenith { background: var(--zenith); }
.district .label { padding: .85rem 1rem 1rem; }
.district .label b { display: block; color: var(--cream); font-size: 1rem; }
.district .label span { color: var(--hud-label); font-size: .85rem; }

/* ── Robot ───────────────────────────────────────────────────────────────── */

/* Sei riquadri: due file da tre, o tre file da due sullo schermo stretto. Con
   `auto-fit` l'ultimo restava da solo in fondo a una fila di cinque. */
.bots {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .bots { grid-template-columns: repeat(3, 1fr); }
}
.bot {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-align: center;
}
.bot svg { display: block; margin: 0 auto .7rem; height: 62px; width: auto; }
.bot b { display: block; color: var(--cream); font-size: .95rem; letter-spacing: .04em; }
.bot span { color: var(--hud-label); font-size: .82rem; }

/* ── Comandi ─────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 1.5rem 0 0; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .95rem;
}
th, td { padding: .8rem 1rem; text-align: left; }
thead th {
  color: var(--hud-label);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
tbody tr + tr { border-top: 2px solid var(--ink); }
tbody th { color: var(--cream); font-weight: 700; white-space: nowrap; }
td { color: var(--hud-track); }
kbd {
  display: inline-block;
  background: var(--ink);
  color: var(--hud-track);
  border-radius: 6px;
  padding: .12em .45em;
  font: 600 .85em/1.4 var(--font);
}

/* ── Schermate ───────────────────────────────────────────────────────────── */

.shots {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
/* Le quattro catture hanno tre proporzioni diverse, perché tre apparecchi Apple
   hanno tre schermi di forma diversa: Mac 16:10, Apple TV 16:9, iPhone 2,16:1.
   A parità di larghezza vengono quindi alte in modo diverso, e le didascalie si
   sfalsano.

   La cornice le riporta tutte a 16:10, che è la forma di due catture su quattro,
   e `contain` ci appoggia dentro l'immagine intera: quelle più larghe ricevono
   due fasce del colore dei pannelli, sopra e sotto. Non si ritaglia niente, che
   vorrebbe dire tagliare gli angoli dell'HUD, dove stanno PIANO e TEMPO. */
.shots figure { margin: 0; }
.shots img {
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--navy);
}
.shots figcaption {
  margin: .55rem 0 0;
  color: var(--hud-label);
  font-size: .85rem;
}

/* ── Piè di pagina ───────────────────────────────────────────────────────── */

footer {
  margin-top: 4rem;
  border-top: 2px solid var(--navy);
  padding: 2rem 0 3rem;
  color: var(--hud-label);
  font-size: .9rem;
}
footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
footer p { max-width: var(--measure); }

/* ── Pagina dell'informativa ─────────────────────────────────────────────── */

.doc { padding-top: 2.5rem; }
.doc h1 {
  margin: 0 0 .25rem;
  color: var(--yellow);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.15;
}
.doc h2 {
  margin: 2.5rem 0 .5rem;
  color: var(--orange);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.doc .sub { color: var(--steel-light); margin: 0 0 2rem; }
.doc p { max-width: var(--measure); }
.doc ul { max-width: var(--measure); margin: 0 0 1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc hr { border: 0; border-top: 2px solid var(--navy); margin: 3.5rem 0; }