/*
 * Sito di babelcrash.com (Micro 0.17, D184): landing, privacy, termini,
 * contatti, elimina account. Dal Micro 0.28 nello stile meccanico del
 * gioco (D212, `src/ui/styles.css`): acciaio brunito spazzolato, titoli in
 * Big Shoulders Stencil, testo in Barlow Condensed, piastre con le viti
 * agli angoli e targhette d'ottone, l'azione in ruggine. I colori sono
 * quelli della palette "Acciaio" (`index.html` del gioco), scritti a parte
 * perché il sito non passa da Vite; i font li copia `build-site.mjs` da
 * `public/fonts`.
 */
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil'; font-weight: 900; font-display: swap; src: url('/fonts/big-shoulders-stencil-latin-900-normal.woff2') format('woff2'); }

:root {
  --ink: #141618;
  --shadow: #0e0f11;
  --well: #1a1c1f;
  --bg: #23262a;
  --bg-top: #2c3035;
  --bg-deep: #1d2023;
  --panel: #30343a;
  --plate: #4b5057;
  --plate-2: #3a3f45;
  --plate-edge: #2a2d31;
  --rust: #b4532a;
  --rust-edge: #6b2c12;
  --rust-light: #f2b48c;
  --brass: #b8925a;
  --brass-light: #d9b47a;
  --brass-ink: #1d1a14;
  --text: #efe6d8;
  --text-dim: #c9bfae;
  --text-faint: #a79c8c;
  --on-accent: #f6ece0;
  --danger: #f0a08c;
  --ok: #a8d8a0;
  --font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --stencil: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-deep) 100%);
  --screw-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23b8925a' stroke='%23141618' stroke-width='2'/%3E%3Cpath d='M2.6 9.4l8.8-4.8' stroke='%23141618' stroke-width='2'/%3E%3C/svg%3E");
  --screw-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23b8925a' stroke='%23141618' stroke-width='2'/%3E%3Cpath d='M3.6 3.6l6.8 6.8' stroke='%23141618' stroke-width='2'/%3E%3C/svg%3E");
  --screw-rust-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23d0825c' stroke='%234a1d0b' stroke-width='2'/%3E%3Cpath d='M2.6 9.4l8.8-4.8' stroke='%234a1d0b' stroke-width='2'/%3E%3C/svg%3E");
  --screw-rust-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23d0825c' stroke='%234a1d0b' stroke-width='2'/%3E%3Cpath d='M3.6 3.6l6.8 6.8' stroke='%234a1d0b' stroke-width='2'/%3E%3C/svg%3E");
  --corner-screws: var(--screw-a) left 8px top 8px / 12px no-repeat, var(--screw-b) right 8px top 8px / 12px no-repeat,
    var(--screw-b) left 8px bottom 8px / 12px no-repeat, var(--screw-a) right 8px bottom 8px / 12px no-repeat;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--brushed);
  color: var(--text);
  font: 600 18px/1.45 var(--font);
}

a {
  color: var(--brass-light);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--rust-light);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Testata ---------- */

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.top__home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

/* Il nome col logo, dritto (D247). */
.top__home svg {
  display: block;
  width: 168px;
  height: auto;
  filter: drop-shadow(0 2px 0 var(--shadow));
}

.lang {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Le lingue: due placchette, quella attiva in ruggine. */
.lang a {
  min-width: 48px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-bottom: 4px solid var(--plate-edge);
  border-radius: 6px;
  background: var(--plate-2);
  color: var(--text);
  font: 800 17px var(--font);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.lang a[aria-current='page'] {
  border-bottom-color: var(--rust-edge);
  background: var(--rust);
  color: var(--on-accent);
}

/* ---------- Landing ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 56px;
}

.hero__text {
  flex: 1 1 420px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.title {
  margin: 0;
  width: min(100%, 520px);
  filter: drop-shadow(0 5px 0 var(--shadow));
}

/* Il nome col logo, CRASH che crolla (D247). */
.title svg {
  display: block;
  width: 100%;
  height: auto;
}

.brass-rule {
  width: min(320px, 70%);
  height: 5px;
  border-radius: 3px;
  background: var(--brass);
  box-shadow: 0 2px 0 var(--shadow);
}

.claim {
  margin: 0;
  font: 800 clamp(24px, 4vw, 30px) / 1.2 var(--font);
}

.claim em {
  font-style: normal;
  color: var(--rust-light);
}

.lead {
  margin: 0;
  font-size: 20px;
  color: var(--text-dim);
}

/* "In arrivo su Android": la targhetta d'ottone, una vite per lato. */
.badge {
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 12px 40px;
  border: 2px solid var(--ink);
  border-bottom: 6px solid #6e5532;
  border-radius: 8px;
  background: var(--screw-b) left 12px center / 14px no-repeat, var(--screw-a) right 12px center / 14px no-repeat, var(--brass);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.25);
  color: var(--brass-ink);
  font: 800 22px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone {
  flex: 0 1 340px;
  display: flex;
  justify-content: center;
}

.phone__frame {
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 36px;
  background: #16181b;
  box-shadow: 0 10px 0 var(--shadow);
}

.phone__frame img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
}

/* Le schermate dello store hanno già il loro titolo e il telefono. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  justify-items: center;
  padding-bottom: 56px;
}

.shots img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--shadow);
}

/* ---------- Piè di pagina ---------- */

.foot {
  border-top: 4px solid var(--plate-edge);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 32px;
}

.foot a {
  padding: 10px 4px;
  font: 700 18px var(--font);
  letter-spacing: 0.04em;
}

/* ---------- Pagine di testo ---------- */

/* Privacy, termini, contatti, elimina account: il testo su una piastra
 * avvitata, largo quanto si legge bene. */
.doc {
  max-width: 760px;
  margin: 8px auto 48px;
  padding: 28px 22px 32px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--corner-screws), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 0 var(--shadow);
  font: 600 18px/1.55 var(--font);
}

@media (max-width: 792px) {
  .doc {
    margin-left: 16px;
    margin-right: 16px;
  }
}

.doc h1 {
  margin: 4px 0 22px;
  font: 900 clamp(34px, 7vw, 46px) / 1 var(--stencil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 var(--shadow);
}

.doc h2,
.doc h3 {
  margin: 30px 0 8px;
  font: 800 23px/1.2 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.doc p,
.doc li {
  color: var(--text);
}

.doc strong {
  font-weight: 800;
}

.doc code {
  font: 0.9em var(--mono);
}

/* Il modulo dell'eliminazione: piastra più scura, targhetta d'ottone. */
.vignette {
  position: relative;
  margin-top: 32px;
  padding: 34px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--corner-screws), var(--plate-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 0 var(--shadow);
}

.vignette__caption {
  position: absolute;
  top: -18px;
  left: 22px;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--brass);
  color: var(--brass-ink);
  font: 800 18px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font: 800 17px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field input {
  height: 52px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--well);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: 700 20px var(--mono);
  padding: 0 12px;
}

.field input::placeholder {
  color: var(--text-faint);
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 18px;
}

.check input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: var(--rust);
}

/* Il pulsante: la placca in ruggine del gioco, una vite per estremità. */
.button {
  min-height: 60px;
  padding: 8px 40px;
  border: 2px solid var(--ink);
  border-bottom: 7px solid var(--rust-edge);
  border-radius: 10px;
  background: var(--screw-rust-a) left 12px center / 14px no-repeat, var(--screw-rust-b) right 12px center / 14px no-repeat, var(--rust);
  box-shadow: inset 0 2px 0 rgba(255, 220, 190, 0.2);
  color: var(--on-accent);
  font: 800 23px var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.button:active {
  transform: translateY(4px);
  border-bottom-width: 3px;
  margin-bottom: 4px;
}

.button:disabled {
  opacity: 0.5;
  cursor: default;
}

.result {
  margin: 0;
  font: 700 18px var(--font);
}

.result--error {
  color: var(--danger);
}

.result--ok {
  color: var(--ok);
}

@media (max-width: 480px) {
  .hero {
    gap: 32px;
    padding-top: 8px;
  }

  .top__name {
    font-size: 21px;
  }

  .badge {
    font-size: 19px;
  }
}