/* One Boat Games — un foglio solo, per tutte le pagine e tutte e due le lingue.
 *
 * L'aria del sito e' quella del gioco, non una palette inventata: le tessere con
 * gli angoli tondi, i sei colori pieni e il fondo di carta sono gli stessi che si
 * vedono nelle schermate di Wordkeeper. Se un giorno i colori del gioco cambiano,
 * si cambiano qui sotto e cambia tutto il sito.
 *
 * L'unico effetto strutturale e' il bordo inferiore pieno sui pulsanti e sulle
 * schede (--spesso): e' quello che fa sembrare le cose premibili, ed e' il modo
 * in cui il gioco disegna i suoi bottoni. Non e' decorazione, e' la firma. */

:root{
  --carta:#f6f1e5;          /* il fondo: carta calda, come lo sfondo dipinto */
  --carta-alta:#fffcf4;     /* le schede, un gradino sopra il fondo */
  --tessera:#efe7d6;        /* le lettere non trovate, nella griglia del gioco */
  --inchiostro:#2b2723;
  --inchiostro-tenue:#6d6458;
  --bordo:#e2d9c6;

  --rosso:#d9534f;
  --blu:#3b82f6;
  --verde:#1fbe7e;
  --viola:#9b5cf6;
  --ambra:#e8a317;
  --rosa:#ec4899;

  --accento:var(--blu);
  --accento-scuro:#2c63c4;

  --raggio:22px;
  --raggio-piccolo:14px;
  --spesso:0 4px 0;         /* il gradino sotto: si somma a un colore piu' scuro */
  --ombra:0 10px 30px rgba(43,39,35,.10);
  --wrap:1120px;

  --titolo:"Baloo 2","Baloo2",ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,sans-serif;
  --testo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* I due caratteri sono serviti da noi. Baloo 2 e' tondo e pieno come il lettering
 * del gioco e fa i titoli; Inter tiene il testo lungo, dove Baloo stancherebbe.
 * Sono tutti e due a peso variabile: un file solo copre tutti gli spessori. */
@font-face{font-family:"Baloo 2";src:url(/font/baloo2-latin.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";src:url(/font/baloo2-latin-ext.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(/font/inter-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(/font/inter-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--testo);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Una carta con la grana, non un colore piatto: due velature appena percettibili. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 15% -10%,rgba(59,130,246,.10),transparent 60%),
    radial-gradient(50rem 36rem at 95% 8%,rgba(232,163,23,.12),transparent 62%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accento-scuro);text-underline-offset:3px}
a:hover{color:var(--inchiostro)}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--titolo);font-weight:800;line-height:1.08;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:1.45rem}
h4{font-size:1.1rem}
p{margin:0 0 1rem}

/* ── Le tessere di lettere ──────────────────────────────────────────────────
 * Il segno che tiene insieme il sito. Sono decorative: chi usa uno screen
 * reader legge il titolo accanto, non le lettere una per una (aria-hidden). */
.tessere{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle}
.tessere .t{
  display:grid;place-items:center;min-width:1.85em;height:1.85em;padding:0 .18em;
  border-radius:.42em;font-family:var(--titolo);font-weight:800;font-size:inherit;
  color:#fff;line-height:1;
}
.tessere .sp{width:.5em}
.t.rosso{background:var(--rosso);box-shadow:var(--spesso) #b03d3a}
.t.blu{background:var(--blu);box-shadow:var(--spesso) #2c63c4}
.t.verde{background:var(--verde);box-shadow:var(--spesso) #159a64}
.t.viola{background:var(--viola);box-shadow:var(--spesso) #7c44cc}
.t.ambra{background:var(--ambra);box-shadow:var(--spesso) #bc8210}
.t.rosa{background:var(--rosa);box-shadow:var(--spesso) #c33380}

/* ── Intestazione ─────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,229,.86);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:2px solid var(--bordo);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:74px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--titolo);font-weight:800;font-size:1.22rem;
  color:var(--inchiostro);text-decoration:none;white-space:nowrap;
}
.brand .mark{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--blu);box-shadow:var(--spesso) #2c63c4;flex:none;
}
.brand .boat{width:22px;height:22px;fill:#fff}
.nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav a{
  padding:8px 14px;border-radius:999px;font-weight:600;font-size:.95rem;
  color:var(--inchiostro);text-decoration:none;
}
.nav a:hover{background:rgba(43,39,35,.07)}
.nav a.current{background:var(--blu);color:#fff}
.head-right{display:flex;align-items:center;gap:8px}

.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border:2px solid var(--bordo);border-radius:999px;background:var(--carta-alta);
  font:600 .9rem/1 var(--testo);color:var(--inchiostro);cursor:pointer;
}
.lang-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.lang-btn .chev{width:13px;height:13px}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;
  list-style:none;min-width:158px;background:var(--carta-alta);
  border:2px solid var(--bordo);border-radius:var(--raggio-piccolo);box-shadow:var(--ombra);
}
.lang-menu li{margin:0}
.lang-menu a,.lang-menu span{
  display:block;padding:8px 12px;border-radius:9px;font-size:.92rem;
  color:var(--inchiostro);text-decoration:none;
}
.lang-menu a:hover{background:rgba(43,39,35,.07)}
.lang-menu span{font-weight:700;background:rgba(59,130,246,.12)}

.burger{
  display:none;width:38px;height:38px;padding:0;cursor:pointer;
  border:2px solid var(--bordo);border-radius:12px;background:var(--carta-alta);
}
.burger svg{width:20px;height:20px;margin:auto;fill:none;stroke:var(--inchiostro);stroke-width:2;stroke-linecap:round}

.langbar{background:var(--ambra);color:#3a2a06;border-bottom:2px solid #c98f10}
.langbar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.langbar p{margin:0;font-size:.94rem;font-weight:500}
.langbar a{color:#3a2a06;font-weight:700}
.langbar-x{
  margin-left:auto;border:0;background:none;font-size:1.4rem;line-height:1;
  color:#3a2a06;cursor:pointer;padding:0 4px;
}

/* ── Pulsanti ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  font-family:var(--titolo);font-weight:700;font-size:1.02rem;
  background:var(--carta-alta);color:var(--inchiostro);
  border:2px solid var(--bordo);box-shadow:var(--spesso) var(--bordo);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{color:var(--inchiostro);transform:translateY(2px);box-shadow:0 2px 0 var(--bordo)}
.btn-primary{background:var(--blu);color:#fff;border-color:var(--accento-scuro);box-shadow:var(--spesso) var(--accento-scuro)}
.btn-primary:hover{color:#fff;box-shadow:0 2px 0 var(--accento-scuro)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

.store-btn{
  display:inline-flex;align-items:center;gap:11px;padding:11px 20px;
  border-radius:999px;background:var(--inchiostro);color:#fff;text-decoration:none;
  box-shadow:var(--spesso) #100e0c;transition:transform .12s ease,box-shadow .12s ease;
}
.store-btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 2px 0 #100e0c}
.store-btn .ico svg{width:23px;height:23px;fill:#fff;display:block}
.store-btn .txt{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.store-btn small{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;opacity:.75}
.store-btn strong{font-family:var(--titolo);font-size:1.06rem;font-weight:700}

/* ── Sezioni ──────────────────────────────────────────────────────────────── */
main{padding-bottom:20px}
.hero{padding:64px 24px 44px;text-align:center}
.hero .tessere{font-size:clamp(1.1rem,2.6vw,1.5rem);justify-content:center;margin-bottom:22px}
.hero .lead{
  max-width:62ch;margin:18px auto 0;font-size:1.14rem;color:var(--inchiostro-tenue);
}
.hero .cta-row{justify-content:center}

.section{padding:44px 24px}
.section-head{margin-bottom:28px}
.section-head .eyebrow{
  display:inline-block;margin-bottom:10px;padding:5px 13px;border-radius:999px;
  background:var(--tessera);color:var(--inchiostro-tenue);
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.section-head p{max-width:60ch;margin-top:10px;color:var(--inchiostro-tenue)}

/* ── Le schede del catalogo ───────────────────────────────────────────────── */
.catalogo{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gioco{
  display:flex;flex-direction:column;gap:14px;padding:24px;
  background:var(--carta-alta);border:2px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--spesso) var(--bordo);text-decoration:none;color:var(--inchiostro);
  transition:transform .14s ease,box-shadow .14s ease;
}
a.gioco:hover{transform:translateY(3px);box-shadow:0 1px 0 var(--bordo);color:var(--inchiostro)}
.gioco .icona{width:76px;height:76px;border-radius:18px;box-shadow:var(--ombra)}
.gioco .kicker{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--inchiostro-tenue)}
.gioco p{margin:0;color:var(--inchiostro-tenue)}
.gioco .piu{margin-top:auto;font-family:var(--titolo);font-weight:700;color:var(--accento-scuro)}
.gioco.presto{
  background:repeating-linear-gradient(45deg,var(--tessera),var(--tessera) 12px,#e8dfcc 12px,#e8dfcc 24px);
  box-shadow:none;
}
.gioco.presto .piu{color:var(--inchiostro-tenue)}

/* ── La vetrina delle schermate ───────────────────────────────────────────── */
.striscia{
  display:flex;gap:18px;overflow-x:auto;padding:6px 24px 22px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.striscia .tel{margin:0;flex:0 0 210px;scroll-snap-align:center}
.striscia .tel img{
  width:100%;border-radius:20px;border:2px solid var(--bordo);box-shadow:var(--ombra);
}
.striscia figcaption{
  margin-top:9px;text-align:center;font-size:.82rem;font-weight:600;
  color:var(--inchiostro-tenue);
}

/* ── Le quattro modalita' ─────────────────────────────────────────────────── */
.modi{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.modo{
  padding:22px;border-radius:var(--raggio);background:var(--carta-alta);
  border:2px solid var(--bordo);box-shadow:var(--spesso) var(--bordo);
}
.modo .pallino{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;
  border-radius:13px;color:#fff;font-family:var(--titolo);font-weight:800;font-size:1.15rem;
}
.modo:nth-child(1) .pallino{background:var(--verde);box-shadow:var(--spesso) #159a64}
.modo:nth-child(2) .pallino{background:var(--viola);box-shadow:var(--spesso) #7c44cc}
.modo:nth-child(3) .pallino{background:var(--rosso);box-shadow:var(--spesso) #b03d3a}
.modo:nth-child(4) .pallino{background:var(--ambra);box-shadow:var(--spesso) #bc8210}
.modo h3{margin-bottom:8px}
.modo p{margin:0;color:var(--inchiostro-tenue);font-size:.97rem}

/* ── Le righe illustrate della pagina del gioco ───────────────────────────── */
.righe{display:flex;flex-direction:column;gap:56px;margin-top:8px}
.riga{display:grid;gap:34px;align-items:center;grid-template-columns:1fr 1fr}
.riga:nth-child(even) .foto{order:2}
.riga .foto img{
  width:100%;max-width:290px;margin:0 auto;border-radius:24px;
  border:2px solid var(--bordo);box-shadow:var(--ombra);
}
.riga .testo .etichetta{
  display:inline-block;margin-bottom:10px;padding:5px 13px;border-radius:999px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:var(--tessera);color:var(--inchiostro-tenue);
}
.riga .testo p{color:var(--inchiostro-tenue);margin-bottom:0}
.riga .testo h3{margin-bottom:10px;font-size:1.7rem}

/* ── La citazione dal racconto ────────────────────────────────────────────── */
.voce{
  margin:56px 0;padding:34px;border-radius:var(--raggio);
  background:var(--viola);color:#fff;box-shadow:var(--spesso) #7c44cc;
}
.voce blockquote{
  margin:0;font-family:var(--titolo);font-weight:700;
  font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.25;
}
.voce cite{display:block;margin-top:14px;font-style:normal;font-size:.88rem;opacity:.85}

/* ── Il riquadro dei fatti ────────────────────────────────────────────────── */
.sapere{
  padding:22px;border-radius:var(--raggio);background:var(--tessera);
  font-size:.95rem;line-height:1.9;
}
.sapere b{font-family:var(--titolo);font-weight:700;margin-right:6px}

/* ── I documenti ──────────────────────────────────────────────────────────── */
.doc-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.doc{
  display:block;padding:22px;border-radius:var(--raggio);text-decoration:none;
  background:var(--carta-alta);border:2px solid var(--bordo);
  box-shadow:var(--spesso) var(--bordo);color:var(--inchiostro);
  transition:transform .14s ease,box-shadow .14s ease;
}
.doc:hover{transform:translateY(3px);box-shadow:0 1px 0 var(--bordo);color:var(--inchiostro)}
.doc h3{margin-bottom:6px}
.doc p{margin:0;color:var(--inchiostro-tenue);font-size:.94rem}

/* ── Chiusura ─────────────────────────────────────────────────────────────── */
.closing{
  margin:56px auto 64px;padding:44px 32px;border-radius:28px;text-align:center;
  background:var(--carta-alta);border:2px solid var(--bordo);box-shadow:var(--spesso) var(--bordo);
}
.closing p{max-width:56ch;margin:12px auto 0;color:var(--inchiostro-tenue)}
.closing .cta-row{justify-content:center}

/* ── Pagine legali ────────────────────────────────────────────────────────── */
.legal{max-width:760px;padding-top:48px;padding-bottom:56px}
.legal h1{font-size:clamp(1.9rem,4.4vw,2.6rem)}
.legal .meta{color:var(--inchiostro-tenue);font-size:.92rem;margin-bottom:30px}
.legal h2{font-size:1.35rem;margin:34px 0 10px}
.legal h3{font-size:1.1rem;margin:22px 0 8px}
.legal ul,.legal ol{padding-left:1.25rem;color:var(--inchiostro-tenue)}
.legal li{margin-bottom:.4rem}
.legal p{color:var(--inchiostro-tenue)}
.legal .box{
  padding:20px 22px;border-radius:var(--raggio-piccolo);background:var(--tessera);
  border-left:6px solid var(--ambra);margin:20px 0;
}
.legal .box p{margin-bottom:.5rem;color:var(--inchiostro)}
.legal .box p:last-child{margin-bottom:0}
.crumb{
  display:inline-block;margin-top:38px;font-family:var(--titolo);font-weight:700;
  text-decoration:none;color:var(--accento-scuro);
}

/* ── Piè di pagina ────────────────────────────────────────────────────────── */
.site-footer{
  margin-top:20px;padding:48px 0 30px;
  background:var(--inchiostro);color:#e9e2d6;
}
.site-footer .cols{
  display:grid;gap:34px;grid-template-columns:1.6fr 1fr 1fr;
}
.site-footer .brand{color:#fff}
.site-footer .brand .mark{background:var(--ambra);box-shadow:var(--spesso) #bc8210}
.site-footer .about{margin-top:14px;font-size:.93rem;color:#b6ab99;max-width:38ch}
.site-footer h4{margin-bottom:12px;color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer li a{color:#c9bfae;text-decoration:none;font-size:.94rem}
.site-footer li a:hover{color:#fff}
.site-footer .bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:#9b9080;
}

/* ── Comparsa al primo passaggio ─────────────────────────────────────────────
 * La classe che nasconde la mette lo script, non questo foglio: senza
 * JavaScript il contenuto resta visibile invece di sparire per sempre. */
.svela.armata{opacity:0;transform:translateY(14px)}
.svela.armata.vista{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion: reduce){
  .svela.armata{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}

/* ── Schermi stretti ──────────────────────────────────────────────────────── */
@media (max-width:860px){
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .site-footer .brandcol{grid-column:1 / -1}
  .riga{grid-template-columns:1fr;gap:20px}
  .riga:nth-child(even) .foto{order:0}
  .riga .foto img{max-width:240px}
}
@media (max-width:760px){
  .burger{display:grid}
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    gap:2px;padding:12px;margin:0;
    background:var(--carta-alta);border-bottom:2px solid var(--bordo);box-shadow:var(--ombra);
  }
  .nav.open{display:flex}
  .nav a{padding:11px 14px;border-radius:12px}
  .site-header .wrap{position:relative}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero{padding-top:44px}
  .site-footer .cols{grid-template-columns:1fr}
}