/* Solitario Napoletano — site stylesheet.
   Majolica blues and yellows, terracotta, glazed white. No external fonts: system stacks. */
:root{
  --azzurro:#1d4b97; --azzurro-cupo:#12336d; --azzurro-velo:#e7eefb;
  --giallo:#efb22e; --giallo-chiaro:#fde7a6; --ocra:#b8800f;
  --smalto:#fbf6ea; --carta:#fffdf7; --linea:#e6dac2;
  --cotto:#b9562f; --cotto-cupo:#8b3b1d; --cotto-velo:#f6e2d6;
  --foglia:#4f7d33; --inchiostro:#2a241e; --grigio:#665c52;
  --serif:"Iowan Old Style","Palatino Linotype","URW Palladio L",P052,"Book Antiqua",Georgia,serif;
  --sans:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,"Segoe UI",sans-serif;
  --raggio:10px; --gutter:16px; --largo:1120px;
  --maiolica:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23fbf6ea'/%3E%3Cpath d='M0 0h7a7 7 0 0 1-7 7zM28 0v7a7 7 0 0 1-7-7zM0 28v-7a7 7 0 0 1 7 7zM28 28h-7a7 7 0 0 1 7-7z' fill='%231d4b97'/%3E%3Cpath d='M14 5c2.5 3 2.5 6 0 9-2.5-3-2.5-6 0-9zM14 23c-2.5-3-2.5-6 0-9 2.5 3 2.5 6 0 9zM5 14c3-2.5 6-2.5 9 0-3 2.5-6 2.5-9 0zM23 14c-3 2.5-6 2.5-9 0 3-2.5 6-2.5 9 0z' fill='%23efb22e'/%3E%3Ccircle cx='14' cy='14' r='2.2' fill='%231d4b97'/%3E%3Cpath d='M14 0l2 2-2 2-2-2zM14 24l2 2-2 2-2-2zM0 14l2-2 2 2-2 2zM24 14l2-2 2 2-2 2z' fill='%234f7d33'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--smalto); color:var(--inchiostro); font:17px/1.62 var(--sans);
  background-image:radial-gradient(1100px 420px at 85% -120px,var(--giallo-chiaro) 0,rgba(253,231,166,0) 70%)}
img,svg{max-width:100%}
a{color:var(--azzurro); text-decoration-color:var(--giallo); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--azzurro-cupo); text-decoration-color:var(--cotto)}
:focus-visible{outline:3px solid var(--giallo); outline-offset:2px}
h1,h2,h3{font-family:var(--serif); color:var(--azzurro-cupo); line-height:1.18; margin:0 0 .5em; font-weight:700; letter-spacing:.005em}
h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.7rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem); margin-top:1.6em}
h3{font-size:1.14rem; margin-top:1.2em}
p,ul,ol,dl,table{margin:0 0 1em}
.salto{position:absolute; left:-999px; top:8px; background:var(--azzurro); color:#fff; padding:8px 14px; border-radius:6px; z-index:50}
.salto:focus{left:8px}
.muto{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header ---------- */
.testata{background:var(--carta); position:relative; z-index:5}
.testata-in{max-width:var(--largo); margin:0 auto; padding:10px var(--gutter); display:flex; align-items:center; gap:14px; min-height:62px}
.marchio{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--azzurro-cupo); min-width:0; flex:0 1 auto; margin-right:auto}
.rotta,.lingue{flex:0 0 auto}
.marchio svg{width:38px; height:38px; flex:0 0 auto}
.marchio-nome{font:700 1.16rem/1.05 var(--serif); letter-spacing:.01em}
.marchio-nome small{display:block; font:600 .68rem/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--cotto)}
.rotta{display:none; gap:4px}
.rotta a{padding:8px 11px; border-radius:8px; text-decoration:none; color:var(--inchiostro); font-weight:600; font-size:.96rem}
.rotta a:hover,.rotta a[aria-current="page"]{background:var(--azzurro-velo); color:var(--azzurro-cupo)}
.lingue{display:none; gap:2px; padding:3px; border-radius:9px; background:var(--smalto); border:1px solid var(--linea)}
.lingue a{font:700 .78rem/1 var(--sans); letter-spacing:.06em; padding:7px 8px; border-radius:6px; text-decoration:none; color:var(--grigio)}
.lingue a[aria-current="true"]{background:var(--azzurro); color:#fff}
.ventaglio{position:relative}
.ventaglio summary{list-style:none; cursor:pointer; width:46px; height:46px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--linea); background:var(--smalto)}
.ventaglio summary::-webkit-details-marker{display:none}
.ventaglio summary svg{width:24px; height:24px; stroke:var(--azzurro-cupo); fill:none; stroke-width:2; stroke-linecap:round}
.ventaglio-pannello{position:absolute; right:0; top:54px; width:min(280px,calc(100vw - 2 * var(--gutter))); background:var(--carta); border:1px solid var(--linea);
  border-radius:12px; box-shadow:0 18px 40px rgba(42,36,30,.18); padding:8px; display:grid; gap:2px}
.ventaglio-pannello a{padding:11px 12px; border-radius:8px; text-decoration:none; color:var(--inchiostro); font-weight:600}
.ventaglio-pannello a:hover{background:var(--azzurro-velo)}
.ventaglio-lingue{display:flex; flex-wrap:wrap; gap:4px; border-top:1px solid var(--linea); margin-top:4px; padding-top:8px}
.ventaglio-lingue a{padding:8px 10px; font-size:.9rem}
.ventaglio-lingue a[aria-current="true"]{background:var(--azzurro); color:#fff}
.fascia{height:14px; background:var(--maiolica) 0 0/14px 14px repeat-x; border-top:2px solid var(--azzurro); border-bottom:2px solid var(--azzurro)}
.rotta a,.lingue a{white-space:nowrap}
@media (min-width:1180px){
  .rotta,.lingue{display:flex}
  .ventaglio{display:none}
}

/* ---------- page ---------- */
.pagina{max-width:var(--largo); margin:0 auto; padding:18px var(--gutter) 40px}
.briciole{font-size:.88rem; color:var(--grigio); margin:0 0 10px}
.briciole ol{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:4px 6px}
.briciole li+li::before{content:"›"; margin-right:6px; color:var(--ocra)}
.briciole a{color:var(--grigio)}
.testo{max-width:46rem}
.testo-largo{max-width:62rem}
.occhiello{font:700 .8rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cotto); margin:0 0 .4em}
.lead{font-size:1.1rem; color:#3c342c}

/* ---------- buttons ---------- */
.bottoni{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px}
.bottone{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px; border-radius:9px;
  background:var(--cotto); color:#fff8ef; font:700 1rem/1.2 var(--sans); text-decoration:none; border:0; cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 var(--cotto-cupo)}
.bottone:hover{background:var(--cotto-cupo); color:#fff}
.bottone-chiaro{background:var(--carta); color:var(--azzurro-cupo); box-shadow:inset 0 0 0 2px var(--azzurro)}
.bottone-chiaro:hover{background:var(--azzurro-velo); color:var(--azzurro-cupo)}
.bottone svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- hero ---------- */
.sipario{display:grid; gap:22px; align-items:center; padding:8px 0 10px}
.sipario-arte svg{display:block; width:100%; height:auto; max-width:min(460px,78vw); margin:0 auto}
@media (min-width:860px){ .sipario{grid-template-columns:1.15fr .85fr; gap:40px; padding:20px 0 16px} }

/* ---------- panels ---------- */
.riquadro{background:var(--carta); border:1px solid var(--linea); border-radius:14px; padding:18px; position:relative}
.riquadro > h2:first-child{margin-top:0}
.riquadro-maiolica{border:0; box-shadow:0 0 0 2px var(--azzurro), 0 0 0 6px var(--carta), 0 0 0 8px var(--giallo)}
.ripresa{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:18px 0 6px; background:var(--azzurro); color:#f5f0e4; border-radius:14px; padding:14px 18px}
.ripresa h2{color:#fff; margin:0; font-size:1.15rem}
.ripresa p{margin:0; color:#dce6f7}
.ripresa .bottone{margin-left:auto; background:var(--giallo); color:var(--azzurro-cupo); box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}

/* ---------- game cards ---------- */
.vetrina{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px; margin:14px 0 8px; padding:0; list-style:none}
.tessera{background:var(--carta); border:1px solid var(--linea); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s}
.tessera:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(42,36,30,.12)}
.tessera-arte{display:block; aspect-ratio:5/3; background:var(--cotto)}
.tessera-arte svg{display:block; width:100%; height:100%}
.tessera-corpo{padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1}
.tessera-nome{font:700 1.18rem/1.2 var(--serif); color:var(--azzurro-cupo); text-decoration:none}
.tessera-nome::after{content:""; position:absolute; inset:0}
.tessera{position:relative}
.tessera-mazzo{font:700 .72rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cotto)}
.tessera-corpo p{margin:0; font-size:.95rem; color:#4a4037}

/* ---------- section headings with tile mark ---------- */
.capitolo{margin-top:34px}
.capitolo > h2:first-child{margin-top:0}
.titolo-piastrella{display:flex; align-items:center; gap:10px}
.titolo-piastrella::before{content:""; flex:0 0 18px; height:18px; background:var(--maiolica) center/18px 18px; border-radius:3px; box-shadow:0 0 0 1px var(--azzurro)}

/* ---------- game table ---------- */
.scena{margin:6px 0 8px}
.scena-testa{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:10px}
.scena-testa h1{margin:0}
.etichetta{display:inline-flex; align-items:center; gap:6px; font:700 .76rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--azzurro-cupo); background:var(--azzurro-velo); border-radius:999px; padding:6px 10px}
.etichetta-cotto{background:var(--cotto-velo); color:var(--cotto-cupo)}
.cornice{padding:5px; border-radius:16px; background:var(--maiolica) 0 0/18px 18px; box-shadow:0 0 0 2px var(--azzurro), 0 14px 30px rgba(42,36,30,.18)}
.tavola{--k:.8; position:relative; border-radius:11px; overflow:hidden; background:#9a4425;
  height:clamp(var(--hmin,360px), calc(var(--k) * min(100vw - 2 * var(--gutter), var(--largo) - 2 * var(--gutter)) + 104px), var(--hmax,min(86svh,760px)))}
.tavola-lunga{--hmin:470px; --hmax:min(calc(100svh - 24px),900px)}
.tavola-attesa{position:absolute; inset:0; display:grid; place-items:center; color:#fff1e2; font:600 1rem var(--sans); padding:20px; text-align:center}
@media (max-width:599px){
  .cornice{margin-inline:calc(-1 * var(--gutter)); border-radius:0; padding:4px 0; box-shadow:0 -2px 0 var(--azzurro), 0 2px 0 var(--azzurro)}
  .tavola{border-radius:0; height:clamp(var(--hmin,360px), calc(var(--k) * 100vw + 104px), var(--hmax,min(86svh,760px)))}
}

/* ---------- article text ---------- */
.regole{padding-left:1.3em}
.regole li{margin:0 0 .55em; padding-left:.2em}
.regole li::marker{color:var(--cotto); font-weight:700; font-family:var(--serif)}
.consigli{list-style:none; padding:0; display:grid; gap:12px; margin:12px 0 18px}
@media (min-width:760px){ .consigli{grid-template-columns:1fr 1fr} }
.consigli li{background:var(--carta); border:1px solid var(--linea); border-left:5px solid var(--giallo); border-radius:10px; padding:12px 14px}
.consigli h3{margin:0 0 4px; font-size:1.05rem}
.consigli p{margin:0; font-size:.97rem}
.domande h3{font-family:var(--sans); font-size:1.04rem; color:var(--inchiostro); margin:1.1em 0 .25em}
.domande p{margin:0 0 .6em}
.tabella{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--carta); border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px var(--linea)}
.tabella th,.tabella td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--linea); vertical-align:top}
.tabella th{background:var(--azzurro); color:#fff; font-weight:700}
.tabella tr:last-child td{border-bottom:0}
.scorri{overflow-x:auto; margin:0 0 1em}
.scorri .tabella{margin:0; min-width:0}

/* ---------- suits ---------- */
.semi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:14px 0}
@media (min-width:760px){ .semi{grid-template-columns:repeat(4,minmax(0,1fr))} }
.seme{background:var(--carta); border:1px solid var(--linea); border-radius:12px; padding:12px; text-align:center}
.seme svg{width:56px; height:56px; display:block; margin:0 auto 6px}
.seme b{display:block; font-family:var(--serif); font-size:1.1rem; color:var(--azzurro-cupo)}
.seme span{font-size:.88rem; color:var(--grigio)}
.valori{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:10px 0 14px}
.valori li{min-width:44px; text-align:center; padding:6px 9px; border-radius:7px; background:var(--carta); border:1px solid var(--linea); font:700 .95rem/1.2 var(--serif)}
.valori li small{display:block; font:600 .72rem/1.2 var(--sans); color:var(--grigio)}

/* ---------- daily ---------- */
.gettoni{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.gettone{appearance:none; border:1px solid var(--linea); background:var(--carta); color:var(--inchiostro); border-radius:999px; padding:9px 14px; min-height:42px;
  font:600 .92rem/1.2 var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.gettone[aria-pressed="true"]{background:var(--azzurro); color:#fff; border-color:var(--azzurro)}
.gettone i{width:9px; height:9px; border-radius:50%; background:var(--linea); flex:0 0 auto}
.gettone.spunta-fatto i{background:var(--foglia)}
.contatori{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 14px}
.contatore{background:var(--carta); border:1px solid var(--linea); border-radius:12px; padding:10px; text-align:center}
.contatore b{display:block; font:700 1.9rem/1.1 var(--serif); color:var(--cotto)}
.contatore span{font-size:.84rem; color:var(--grigio)}
.striscia{display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:4px; list-style:none; padding:0; margin:8px 0 6px}
.striscia li{aspect-ratio:1; border-radius:5px; background:#efe5d1; position:relative}
.striscia li.spunta-fatto{background:var(--azzurro); box-shadow:inset 0 0 0 3px var(--giallo)}
.striscia li.spunta-oggi{outline:2px solid var(--cotto); outline-offset:1px}
.nota{font-size:.9rem; color:var(--grigio)}

/* ---------- deals ---------- */
.livello{display:inline-block; font:700 .74rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:6px 10px}
.livello-1{background:#e3efd8; color:#35591f}
.livello-2{background:var(--giallo-chiaro); color:#6e4b00}
.livello-3{background:var(--cotto-velo); color:var(--cotto-cupo)}
.mazzetto{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:8px; list-style:none; padding:0; margin:10px 0 18px}
.mazzetto a{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--carta); border:1px solid var(--linea); text-decoration:none; color:var(--inchiostro); position:relative}
.mazzetto a:hover{border-color:var(--azzurro)}
.mazzetto b{font:700 1.02rem/1.2 var(--serif); color:var(--azzurro-cupo)}
.mazzetto span{font-size:.84rem; color:var(--grigio)}
.mazzetto a.spunta-fatto::after{content:"✓"; position:absolute; right:10px; top:8px; width:24px; height:24px; border-radius:50%; background:var(--foglia); color:#fff; display:grid; place-items:center; font:700 .85rem/1 var(--sans)}
.numeri{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0 16px}
.numeri a{display:grid; place-items:center; min-width:42px; height:42px; padding:0 8px; border-radius:8px; background:var(--carta); border:1px solid var(--linea); text-decoration:none; font:700 .95rem var(--sans); color:var(--azzurro-cupo)}
.numeri a.spunta-fatto{background:var(--azzurro); color:#fff; border-color:var(--azzurro)}
.gruppo-giochi{display:grid; gap:18px}
@media (min-width:860px){ .gruppo-giochi{grid-template-columns:1fr 1fr} }
.fatti{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; background:var(--carta); border:1px solid var(--linea); border-radius:12px; padding:14px 16px; margin:12px 0 18px}
.fatti dt{font-weight:700; color:var(--grigio); font-size:.92rem}
.fatti dd{margin:0; font-weight:600}
@media (max-width:480px){ .fatti{grid-template-columns:1fr; gap:0} .fatti dd{margin-bottom:8px} }
.svela{background:var(--carta); border:1px solid var(--linea); border-radius:12px; padding:4px 14px; margin:12px 0 18px}
.svela summary{cursor:pointer; padding:10px 0; font-weight:700; color:var(--azzurro)}
.svela ol{margin:0 0 12px}
.passi{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 10px}
.passi a{flex:1 1 200px; display:flex; flex-direction:column; padding:12px 14px; border-radius:10px; background:var(--carta); border:1px solid var(--linea); text-decoration:none}
.passi a small{color:var(--grigio); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.passi a b{font-family:var(--serif); color:var(--azzurro-cupo)}
.passi .avanti{text-align:right}
.indice-guide{display:grid; gap:12px; list-style:none; padding:0; margin:12px 0}
@media (min-width:760px){ .indice-guide{grid-template-columns:1fr 1fr} }
.indice-guide a{display:block; padding:14px 16px; border-radius:12px; background:var(--carta); border:1px solid var(--linea); text-decoration:none; color:var(--inchiostro); height:100%}
.indice-guide b{display:block; font:700 1.1rem/1.25 var(--serif); color:var(--azzurro-cupo); margin-bottom:4px}
.indice-guide span{font-size:.94rem; color:#4a4037}
.regole-brevi{display:grid; gap:12px; margin:12px 0}
.regole-brevi section{background:var(--carta); border:1px solid var(--linea); border-radius:12px; padding:14px 16px}
.regole-brevi h3{margin:0 0 4px}
.regole-brevi p{margin:0 0 6px}
.posta{display:inline-block; font:700 1.25rem/1.3 var(--serif); padding:10px 16px; border-radius:10px; background:var(--carta); border:2px solid var(--azzurro); text-decoration:none; word-break:break-all}

/* ---------- footer ---------- */
.piede{margin-top:30px; background:var(--azzurro-cupo); color:#d9e2f2}
.piede .fascia{border-color:var(--azzurro-cupo)}
.piede-in{max-width:var(--largo); margin:0 auto; padding:26px var(--gutter) 30px; display:grid; gap:22px}
@media (min-width:760px){ .piede-in{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.piede h2{font-size:1rem; color:var(--giallo); margin:0 0 8px; font-family:var(--sans); letter-spacing:.08em; text-transform:uppercase}
.piede ul{list-style:none; padding:0; margin:0; display:grid; gap:4px}
.piede a{color:#fff; text-decoration-color:rgba(239,178,46,.6)}
.piede p{margin:0 0 .6em; font-size:.94rem}
.piede-marchio{font:700 1.2rem var(--serif); color:#fff}