/* Kaizo Bridge: colori, caratteri e pezzi comuni a tutte le pagine (vedi brand.html) */
@import url("fonts.css");

:root {
  --mare: #0E2A47;        /* fondo: il mare profondo prima dell'alba */
  --mare-2: #15365A;      /* pannelli sul fondo */
  --marea: #2F6FA3;       /* acqua, link */
  --schiuma: #E8F1F2;     /* testo */
  --schiuma-2: #A9C1D3;   /* testo secondario */
  --sabbia: #E9C46A;      /* il sentiero del ponte: azione principale */
  --legno: #8E5B3A;       /* piloni, bordi */
  --brace: #E4572E;       /* una vita: sconfitte, run, pericolo */
  --erba: #6BB37A;        /* esito positivo */
  --display: "Pixelify Sans", ui-monospace, monospace;
  --testo: "Atkinson Hyperlegible", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --misura: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mare); color: var(--schiuma);
  font: 400 1.0625rem/1.6 var(--testo);
}
img.pixel, canvas.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--sabbia); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sabbia); outline-offset: 3px; }

/* testata comune */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px; justify-content: space-between;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--mare) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--schiuma) 10%, transparent);
}
.firma { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--schiuma); }
.firma img { width: 28px; height: 28px; image-rendering: pixelated; }
.firma span { font: 600 1.25rem/1 var(--display); letter-spacing: .02em; }
.testata nav { display: flex; gap: 20px; }
.testata nav a { color: var(--schiuma-2); text-decoration: none; font-weight: 700; }
.testata nav a:hover, .testata nav a[aria-current="page"] { color: var(--schiuma); }

/* pulsanti: il sentiero di sabbia, con il bordo in rilievo dei menu del gioco */
.bottone {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1.125rem/1 var(--display); color: var(--mare); background: var(--sabbia);
  padding: 14px 20px; border: 0; border-radius: 4px; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 -4px 0 #C9A24E, 0 4px 0 #6A4329;
  transition: transform .08s, box-shadow .08s;
}
.bottone:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #C9A24E, 0 1px 0 #6A4329; }
.bottone.secondario { background: transparent; color: var(--schiuma); box-shadow: inset 0 0 0 2px var(--schiuma-2); }
.bottone:disabled { opacity: .45; cursor: default; transform: none; }

.piede {
  padding: 40px var(--gutter) 56px; color: var(--schiuma-2); font-size: .9375rem;
  border-top: 1px solid color-mix(in srgb, var(--schiuma) 10%, transparent);
}
.piede p { max-width: var(--misura); margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* lingua del sito (il gioco resta in inglese) e avviso sui cookie, comuni a tutte le pagine (js/lingua.js) */
[data-lingua][hidden] { display: none !important; }
.scelta-lingua { display: inline-flex; border: 2px solid var(--schiuma-2); border-radius: 6px; overflow: hidden; }
.scelta-lingua button { font: 600 .8125rem/1 var(--display); color: var(--schiuma-2); background: none; border: 0; padding: 6px 9px; cursor: pointer; }
.scelta-lingua button[aria-pressed="true"] { background: var(--sabbia); color: var(--mare); }
.avviso-cookie { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin: 0 auto;
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, #071629 94%, transparent); border: 1px solid color-mix(in srgb, var(--schiuma) 18%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4); font-size: .9375rem; }
.avviso-cookie p { margin: 0; color: var(--schiuma-2); }
.avviso-cookie .bottone { flex: none; font-size: .9375rem; padding: 10px 14px; }
@media (max-width: 520px) { .avviso-cookie { flex-direction: column; align-items: stretch; } }
.piede .legale { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; }