/* fiafia.games – foglio di stile unico. Colori da grafica/tokens.json (tema scuro) e carte v2 proposta C. */
@font-face{font-family:"Atkinson";src:url(caratteri/atkinson-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(caratteri/atkinson-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(caratteri/atkinson-800.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage";src:url(caratteri/bricolage-800.woff) format("woff");font-weight:800;font-display:swap}

:root{
  --bg:#0F171E;--surface:#17222B;--card:#1F2D38;--border:#2F404E;
  --text:#F4F0E8;--text2:#A7B3BE;--ink:#0F171E;--paper:#F4F0E8;
  --lampada:#FFC44D;--corallo:#FF8F7A;--adult:#A3B1C0;--mark:#FFB86B;
  --sans:"Atkinson",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage","Atkinson",system-ui,sans-serif;
  --max:1080px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.5 var(--sans);overflow-wrap:break-word}
img,svg{display:block}
a{color:var(--lampada);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--lampada);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(26px,5vw,34px)}
h3{font-size:20px;font-family:var(--sans);letter-spacing:0}
p{margin:0 0 1em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:8px;top:-60px;background:var(--lampada);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:9;font-weight:700}
.salta:focus{top:8px}
.contenitore{max-width:var(--max);margin:0 auto;padding:0 20px}

/* testata */
.testata{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:6px;flex-wrap:wrap}
.testata .logo img{height:34px;width:auto}
.lingue ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.lingue a{display:block;min-width:40px;padding:9px 6px;text-align:center;color:var(--text2);text-decoration:none;font-weight:700;font-size:15px;border-radius:8px;text-transform:uppercase}
.lingue a:hover{color:var(--text);background:var(--surface)}
.lingue a[aria-current]{color:var(--ink);background:var(--paper)}

/* apertura */
.apertura{display:grid;gap:18px;padding-top:12px;padding-bottom:36px}
.apertura h1{font-size:clamp(30px,8.2vw,56px);margin:0 0 12px}
.sotto{color:var(--text2);font-size:18px;max-width:34em;margin:18px 0 0}
.riga{font-weight:700;color:var(--corallo);margin:0 0 14px}
.pulsanti{display:flex;flex-wrap:wrap;gap:10px}
.store{display:flex;flex-direction:column;justify-content:center;min-height:58px;min-width:0;flex:1 1 130px;max-width:230px;padding:8px 14px;border-radius:14px;text-decoration:none;line-height:1.15;border:2px solid #5E6E7C;background:var(--surface);color:var(--text)}
.store small{font-size:13px;color:var(--text2);font-weight:700}
.store b{font-family:var(--display);font-size:20px;font-weight:800;white-space:nowrap}
.store.attivo{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.store.attivo small{color:#3E4B58}
.store:hover{border-color:var(--text2)}
.nota-adulti{font-size:15px;color:var(--text2);margin:14px 0 0}

/* carta d'esempio (proposta C "poster notturno") */
.carte{position:relative;width:var(--cw);height:var(--ch);margin:6px auto 0;--cw:250px;--ch:296px}
.carta,.carta-dietro{position:absolute;inset:0;border-radius:24px}
.carta-dietro{background:var(--deep2,#174535);transform:rotate(6deg) translate(14px,4px);opacity:.75;border:1px solid rgba(244,240,232,.10)}
.carta{display:flex;flex-direction:column;width:100%;height:100%;padding:18px 20px 16px;border:1px solid rgba(244,240,232,.10);background:var(--deep,#173345);color:var(--paper);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transform:rotate(-2deg);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:background-color .16s}
.carta-segno{position:relative;z-index:2;display:flex;align-items:center;gap:5px;font:800 14px/22px var(--display);height:22px}
.carta-segno svg{width:16px;height:16px}
.carta-seme{position:absolute;width:var(--s);height:var(--s);right:calc(var(--s) * -.22);top:calc(var(--s) * -.24);fill:var(--pastel,#7CC4F2);--s:190px}
.carta-mascotte{position:absolute;left:10px;top:34px;width:92px;height:92px;color:var(--ink);filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1.5px var(--paper))}
.carta-frase{position:relative;z-index:1;margin-top:auto;padding-bottom:14px;font-size:22px;line-height:1.16;font-weight:800}
.carta-frase .ap{font-weight:400}
.carta-frase.s2{font-size:20px}.carta-frase.s3{font-size:18.5px}
.carta-piede{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid var(--pastel,#7CC4F2);padding-top:10px;font-weight:700;font-size:15px;line-height:20px}
.carta-mazzo{display:flex;align-items:center;gap:6px;color:var(--pastel,#7CC4F2)}
.carta-mazzo svg{width:14px;height:14px;fill:currentColor}
.carta-dentro{display:contents}
.carta.cambia .carta-frase,.carta.cambia .carta-mascotte,.carta.cambia .carta-seme,.carta.cambia .carta-piede{opacity:0}
.carta .carta-frase,.carta .carta-mascotte,.carta .carta-seme,.carta .carta-piede{transition:opacity .16s}
.carta-aiuto{text-align:center;color:var(--text2);font-size:14px;margin:12px 0 0}
@media (prefers-reduced-motion:no-preference){
  .carte{animation:entra .5s ease-out both}
  .carte.saluta .carta{animation:cenno .7s ease-in-out 1.6s 1 both}
}
@keyframes entra{from{transform:translateY(16px) scale(.97)}to{transform:none}}
@keyframes cenno{0%,100%{transform:rotate(-2deg)}35%{transform:rotate(-4deg) translateY(-4px)}70%{transform:rotate(0deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* sezioni */
.sezione{padding:40px 0;border-top:1px solid var(--border)}
.punti{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.punti li{background:var(--surface);border-radius:16px;padding:18px 20px}
.punti li p{color:var(--text2);margin:0}
.punti .num{display:inline-block;font:800 26px/1 var(--display);color:var(--lampada);margin-bottom:8px}
.regole{margin:0;padding:0;list-style:none;counter-reset:r;display:grid;gap:12px;max-width:44em}
.regole li{counter-increment:r;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.regole li::before{content:counter(r);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--corallo);color:var(--ink);font-weight:800}
.mazzi{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mazzi li{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:14px;padding:10px 14px;min-height:60px}
.mazzi .q{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--deep)}
.mazzi .q svg{width:22px;height:22px;fill:var(--pastel)}
.mazzi .n{flex:1;font-weight:700}
.mazzi .n span{display:block;font-weight:400;color:var(--text2);font-size:15px}
.etichetta{flex:none;font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px;letter-spacing:.02em}
.etichetta.gratis{background:var(--corallo);color:var(--ink)}
.etichetta.adulti{border:1.5px solid var(--adult);color:var(--paper)}
.sotto2{color:var(--text2);max-width:40em}
.prezzi{display:grid;gap:12px;margin:18px 0}
.prezzo{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:18px 20px}
.prezzo h3{margin:0 0 4px}
.prezzo .cifra{font:800 30px/1.1 var(--display);color:var(--lampada)}
.prezzo .cifra small{font:400 16px var(--sans);color:var(--text2)}
.prezzo p{color:var(--text2);margin:.5em 0 0}
.elenco{padding-left:1.2em;color:var(--text2);max-width:46em}
.elenco li{margin-bottom:.4em}
.avviso18{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:14px 16px;max-width:46em}
.avviso18 b{flex:none;border:1.5px solid var(--adult);border-radius:999px;padding:2px 9px;font-size:14px}

/* piè di pagina */
.piede{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--text2);font-size:15px}
.piede nav ul{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0}
.piede nav a{display:inline-block;padding:6px 0;font-weight:700}
.piede p{margin:0 0 .5em}
mark.segnaposto{background:var(--mark);color:var(--ink);border-radius:4px;padding:0 4px;font-weight:700}

/* pagine di testo (privacy, termini, assistenza) */
.bozza{background:var(--mark);color:var(--ink);font-weight:800;text-align:center;padding:10px 16px;margin:0}
.testo{max-width:46em;padding-top:12px;padding-bottom:40px}
.testo h1{font-size:clamp(28px,7vw,42px)}
.testo h2{font-size:24px;margin-top:1.6em}
.testo li{margin-bottom:.45em}
.testo code{font-size:.9em;background:var(--surface);padding:1px 5px;border-radius:5px}
.testo .passi{background:var(--surface);border-radius:14px;padding:14px 18px;margin:0 0 12px}
.testo .passi h3{margin:0 0 4px}
.testo .passi p{margin:0}
.torna{display:inline-block;margin:6px 0 10px;font-weight:700}

/* pagina intermedia del pulsante */
.ponte{max-width:32em;padding-top:40px;padding-bottom:60px;text-align:center}
.ponte img.m{width:120px;height:120px;margin:0 auto 12px;color:var(--ink);filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1.5px var(--paper))}
.ponte [hidden]{display:none}

@media (min-width:600px){
  .punti{grid-template-columns:repeat(3,1fr)}
  .mazzi{grid-template-columns:1fr 1fr}
  .prezzi{grid-template-columns:1fr 1fr;max-width:46em}
}
@media (min-width:860px){
  .contenitore{padding:0 32px}
  .apertura{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:36px;padding-bottom:64px;gap:40px}
  .apertura .testo-apertura{order:1}
  .apertura .carte-box{order:2}
  .carte{--cw:300px;--ch:400px}
  .carta{padding:20px 24px 18px}
  .carta-seme{--s:230px}
  .carta-mascotte{width:130px;height:130px;top:42px}
  .carta-frase{font-size:26px}.carta-frase.s2{font-size:24px}.carta-frase.s3{font-size:22px}
  .sezione{padding:56px 0}
}
@media (max-width:359px){
  .contenitore{padding:0 14px}
  .testata .logo img{height:28px}
  .lingue a{min-width:34px;padding:8px 3px;font-size:14px}
  .carte{--cw:236px;--ch:290px}
  .carta{padding:16px 16px 14px}
  .carta-frase{font-size:20px}.carta-frase.s2{font-size:18.5px}.carta-frase.s3{font-size:17px}
  .carta-mascotte{width:92px;height:92px}
  .store{flex-basis:110px;padding:8px 10px}
  .store b{font-size:17px}
}