/* =============================================================================
   SOLITAIRE.CSS — Klondike a tema cyber, carte francesi standard.
   Carte in proporzione standard (~5:7) dimensionate con clamp(): la stessa
   regola vale su desktop e mobile, nessun breakpoint separato per le carte.
   touch-action:manipulation + tap-highlight/user-select disattivati fin da
   subito su tutti gli elementi cliccabili (lezione imparata su Threat Hunter:
   il doppio tap ripetuto altrimenti attiva lo zoom nativo del browser).
   ========================================================================== */
.sol { max-width: 1040px; margin: 0 auto; --sol-card-w: clamp(46px, 11.5vw, 92px); --sol-gap-x: calc(var(--sol-card-w) * 0.15); --sol-card-h: calc(var(--sol-card-w) * 1.4); --sol-gap: calc(var(--sol-card-h) * 0.38);
  /* la faccia della carta è sempre chiara (avorio), come una carta fisica vera:
     l'inchiostro nero/rosso classico funziona quindi identico in entrambi i
     temi del sito, non serve più adattarlo (prima il "nero" era un grigio
     chiaro pensato per sfondi scuri e spariva sul tema chiaro). */
  --sol-red: #b3122a; --sol-black: #16181d; --sol-paper: #f6f3ec; --sol-paper-2: #ece7db; }
.sol-privacy { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin: 6px 0 18px; }
.sol-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); flex: none; }
.sol-disclaimer { font-size: .78rem; color: var(--muted-2); text-align: center; margin-top: 18px; }

/* ---- guida ---- */
.sol-guide { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; }
.sol-guide__title { font-family: var(--font); font-size: 1.02rem; margin: 0 0 8px; }
.sol-guide__text { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.sol-guide__rules { margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: .84rem; line-height: 1.7; }

/* ---- HUD: pannello "di vetro" (blur del contenuto sottostante) con filo di
   luce superiore, coerente con il tavolo ---- */
.sol-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg-glass, var(--bg-soft))), var(--bg-glass, var(--bg-soft)));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
.sol-hud::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: var(--grad, linear-gradient(90deg, var(--accent), var(--accent-2))); opacity: .55; }
.sol-modes { display: flex; gap: 6px; flex: none; }
.sol-mode { font-family: var(--body); font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--bg-soft-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 6px 13px; cursor: pointer; transition: .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.sol-mode:hover { color: var(--text); border-color: var(--accent); }
.sol-mode.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.sol-stats { display: flex; gap: 16px; flex: 1 1 auto; justify-content: center; }
.sol-stat { display: flex; flex-direction: column; gap: 1px; align-items: center; min-width: 46px; }
.sol-stat__label { font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); }
.sol-stat__value { font-family: var(--font); font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; }
.sol-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

/* ---- tavolo: superficie di gioco "premium" - filo di luce sul bordo
   superiore (gradiente del sito), vignettatura verso i bordi come un tavolo
   illuminato dall'alto, texture a circuito e bagliore ambientale che deriva
   lentamente (solo transform: costo GPU trascurabile). ---- */
.sol { --sol-pad: clamp(10px, 2.2vw, 22px); }
.sol-table { position: relative; padding: var(--sol-pad); border-radius: var(--radius); border: 1px solid var(--line);
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 55%, color-mix(in srgb, #000 22%, transparent) 100%),
    radial-gradient(110% 70% at 20% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    radial-gradient(110% 70% at 85% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-soft), var(--bg-soft-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 60px -30px rgba(0,0,0,.6), 0 18px 44px -26px rgba(0,0,0,.9); overflow: hidden; }
/* filo di luce sul bordo superiore, stesso gradiente del brand */
.sol-table { border-top: none; }
.sol-table::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .25;
  border-top: 2px solid transparent;
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000, transparent 85%);
          mask-image: radial-gradient(140% 100% at 50% 0%, #000, transparent 85%); }
.sol-table::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; pointer-events: none;
  background: var(--grad, linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3, var(--accent)))); opacity: .7;
  border-radius: var(--radius) var(--radius) 0 0; }
/* bagliore ambientale che "respira" e deriva sopra il tavolo */
.sol-glow { position: absolute; width: 55%; padding-bottom: 55%; border-radius: 50%; top: -20%; left: 10%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%);
  animation: solAmbient 16s ease-in-out infinite alternate; }
@keyframes solAmbient {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60%, 25%) scale(1.25); }
}
.sol-top, .sol-tableau { position: relative; z-index: 1; }
.sol-top { display: flex; align-items: flex-start; gap: var(--sol-gap-x); margin-bottom: calc(var(--sol-card-h) * 0.14); }
.sol-spacer { flex: 1; }
.sol-foundations { display: flex; gap: var(--sol-gap-x); }
.sol-tableau { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sol-gap-x); }
.sol-column { position: relative; height: calc(var(--sol-gap) * (var(--n) - 1) + var(--sol-card-h)); min-height: var(--sol-card-h); }
/* slot vuoti = "incavi" scavati nel tavolo: fondo scurito + ombra interna +
   filo di luce sul bordo basso, come alloggiamenti fresati. Molto più
   materico dei vecchi bordi tratteggiati. */
.sol-column__empty { position: absolute; inset: 0; border-radius: calc(var(--sol-card-w) * 0.12);
  background: color-mix(in srgb, #000 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05); }
.sol-column__empty::after { content: "K"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: calc(var(--sol-card-w) * 0.3); color: var(--muted-2); opacity: .3;
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 1px rgba(0,0,0,.5); }

/* ---- pile (stock/waste/foundation) ---- */
.sol-pile { position: relative; width: var(--sol-card-w); height: var(--sol-card-h); flex: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-pile--empty { border-radius: calc(var(--sol-card-w) * 0.12);
  background: color-mix(in srgb, #000 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05); }
.sol-stock { cursor: pointer; border-radius: calc(var(--sol-card-w) * 0.12); }
/* mazzo "spesso": bordi sfalsati dietro il dorso per suggerire la pila */
.sol-stock::before, .sol-stock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  border: 1px solid var(--line-2); background: var(--bg-soft-2); }
.sol-stock::before { transform: translate(2px, 2px); opacity: .7; }
.sol-stock::after { transform: translate(4px, 4px); opacity: .4; }
.sol-stock--empty { display: grid; place-items: center; color: var(--muted-2);
  background: color-mix(in srgb, #000 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05); }
.sol-stock--empty::before, .sol-stock--empty::after { display: none; }
.sol-stock--empty.is-recyclable { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.sol-stock--empty.is-recyclable svg { animation: solRecycleSpin 6s linear infinite; }
@keyframes solRecycleSpin { to { transform: rotate(360deg); } }
.sol-stock--empty svg { width: 46%; height: 46%; }
.sol-pile__count { position: absolute; bottom: -6px; right: -6px; z-index: 2; font-family: var(--mono); font-size: .6rem; font-weight: 800;
  color: var(--accent-ink); background: var(--accent); border: none; border-radius: 99px; padding: 1px 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.sol-waste { display: block; }
.sol-waste__slot { position: absolute; top: 0; left: calc(var(--i) * var(--sol-card-w) * 0.32); }
.sol-tcard.is-behind, .sol-waste__slot .is-behind { pointer-events: none; }
.sol-foundation { cursor: pointer; border-radius: calc(var(--sol-card-w) * 0.12); display: grid; place-items: center;
  background: color-mix(in srgb, #000 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05);
  transition: border-color .2s, box-shadow .2s; }
.sol-foundation[data-suit="H"], .sol-foundation[data-suit="D"] { border-color: color-mix(in srgb, var(--sol-red) 26%, transparent); }
/* semi fantasma sui segnaposto delle fondazioni: colori PROPRI, legati al
   tema del sito, NON l'inchiostro delle carte (--sol-black è un quasi-nero
   pensato per la faccia avorio: sul tavolo scuro diventava invisibile). */
.sol-foundation__ghost { font-size: calc(var(--sol-card-w) * 0.44); opacity: .5; line-height: 1; }
.sol-foundation__ghost.sol-black { color: var(--muted-2); }
.sol-foundation__ghost.sol-red { color: color-mix(in srgb, var(--sol-red) 55%, var(--muted-2)); }
/* fondazione completata (Asso -> Re): sigillo luminoso */
.sol-foundation.is-complete { border: 1px solid var(--accent); box-shadow: 0 0 16px -3px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---- carta: faccia avorio come una carta fisica vera, non più "vetro
   scuro" a tema. Il tocco cyber resta nel tavolo, nel dorso e nei bagliori
   di selezione/fondazione - la faccia stampata è quella di sempre. ---- */
.sol-card { position: relative; z-index: 0; width: var(--sol-card-w); height: var(--sol-card-h); border-radius: calc(var(--sol-card-w) * 0.1);
  border: 1px solid rgba(0,0,0,.22);
  background: linear-gradient(165deg, var(--sol-paper), var(--sol-paper-2) 92%);
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 12px -2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6); box-sizing: border-box; overflow: hidden;
  font-family: var(--mono); user-select: none; -webkit-user-select: none; }
/* z-index:0 sopra crea un proprio stacking context: senza, lo z-index:1 dello
   scudo sul dorso (sotto) "sfuggirebbe" al contenitore della singola carta e
   verrebbe confrontato con le carte SORELLE nello stack (impilate sopra),
   dipingendosi sopra di loro invece di restare coperto come dovrebbe. */
/* cornice interna sottile, come il margine bianco/il filo di stampa di una carta vera */
.sol-card::after { content: ""; position: absolute; inset: calc(var(--sol-card-w) * 0.05); pointer-events: none; z-index: 0;
  border: 1px solid rgba(0,0,0,.14); border-radius: calc(var(--sol-card-w) * 0.06); }
/* indice d'angolo un filo più compatto (0.19 invece di 0.22) e più rientrato:
   libera spazio orizzontale al campo dei semi, che così può stare più largo
   senza mai lambire l'indice (nemmeno quello a due cifre del "10") */
.sol-card__corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1.02;
  font-size: clamp(.58rem, calc(var(--sol-card-w) * 0.19), .95rem); font-weight: 800; z-index: 2; }
.sol-card__corner b { font-size: 1em; }
.sol-card__corner em { font-style: normal; }
.sol-card__corner--tl { top: 5%; left: 7%; }
/* il seme singolo "da app" esiste nel markup di ogni numerale ma di base è
   nascosto: viene mostrato (al posto della griglia) solo su schermi piccoli.
   Selettore composto: deve battere il display:grid di .sol-card__pip, che
   sta più avanti nel file a parità di specificità. */
.sol-card__pip.sol-card__pip--mono { display: none; }
/* indice speculare in basso a destra, ruotato 180°: come su una carta vera,
   leggibile anche "capovolta" - sicuro da mostrare anche sulle carte coperte
   nello stock/scarto perché la carta successiva lo ricopre sempre per intero
   (è già condizionato da hidePip in JS, non serve altra protezione qui). */
.sol-card__corner--br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.sol-card__pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--sol-card-w) * 0.36); z-index: 1; }
/* disposizione classica dei semi sulle carte numerali (2-10): ogni simbolo è
   posizionato in percentuale (calcolata in JS da PIP_LAYOUTS) e i semi della
   metà inferiore sono ruotati 180°, esattamente come su un mazzo vero. */
.sol-card__pips { position: absolute; inset: 0; z-index: 1; }
.sol-card__pip-i { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--sol-card-w) * 0.26); line-height: 1; }
/* 9 e 10 hanno 9-10 simboli da incastrare: un filo più piccoli per non
   toccarsi mai tra loro né con gli indici d'angolo, ma comunque grandi e ben
   visibili come sulle carte vere */
.sol-card__pip-i--dense { font-size: calc(var(--sol-card-w) * 0.185); }
/* figure (J/Q/K): lettera grande in Space Grotesk + seme sotto, dentro una
   cornice ornamentale che richiama il riquadro illustrato delle carte vere.
   Centrata con left/top 50% + translate: l'elemento eredita "inset:0" da
   .sol-card__pip, e per un box assolutamente posizionato con inset:0 E
   width/height espliciti il browser ignora "right/bottom" e ancora il box
   in alto a sinistra (larghezza/altezza corrette, ma non centrato) - da qui
   il difetto "la lettera non è centrata sulla carta". */
.sol-card__pip--court { position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 4%;
  width: 62%; height: 74%; border: 1.5px solid currentColor; border-radius: calc(var(--sol-card-w) * 0.05); opacity: .95;
  overflow: hidden; }
/* filigrana diagonale nel riquadro delle figure: richiama la trama fitta dei
   ritratti stampati, senza disegnarli davvero */
.sol-card__pip--court::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 5px); }
.sol-card__pip--court b { font-family: var(--font); font-weight: 800; font-size: calc(var(--sol-card-w) * 0.4); line-height: 1; position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.sol-card__pip--court em { font-style: normal; font-size: calc(var(--sol-card-w) * 0.22); line-height: 1; position: relative; }
/* Asso: seme grande con doppio anello inciso, da "asso di stampa" */
.sol-card__pip--ace i { font-style: normal; display: grid; place-items: center; font-size: calc(var(--sol-card-w) * 0.5); line-height: 1;
  width: calc(var(--sol-card-w) * 0.72); height: calc(var(--sol-card-w) * 0.72); border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.sol-red { color: var(--sol-red); }
.sol-black { color: var(--sol-black); }
/* dorso: come i dorsi stampati veri, la carta resta avorio (margine bianco
   attorno) e l'illustrazione - un SVG dedicato con fondo indaco, filigrana,
   cornici, rosetta e stemma (CARD_BACK_ART in solitaire.js) - riempie
   l'area interna. Niente ::before/::after: cornice e decori vivono nell'SVG. */
.sol-card--back { position: relative; }
.sol-card--back::after { content: none; }
.sol-back-art { position: absolute; inset: calc(var(--sol-card-w) * 0.055); width: calc(100% - var(--sol-card-w) * 0.11); height: calc(100% - var(--sol-card-w) * 0.11);
  border-radius: calc(var(--sol-card-w) * 0.06); display: block; }

/* carta nel tableau: impilata con offset verticale */
.sol-tcard { position: absolute; top: calc(var(--i) * var(--sol-gap)); left: 0; width: 100%;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-tcard .sol-card { width: 100%; }
/* selezione: alone neon pulsante */
.sol-tcard.is-selected .sol-card, .sol-waste__slot .sol-card.is-selected, .sol-foundation .sol-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 18px -2px color-mix(in srgb, var(--accent) 80%, transparent), 0 8px 20px rgba(0,0,0,.45);
  animation: solSelectedPulse 1.6s ease-in-out infinite; }
.sol-tcard.is-selected .sol-card { transform: translateY(-3px); }
@keyframes solSelectedPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 18px -2px color-mix(in srgb, var(--accent) 80%, transparent), 0 8px 20px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 26px 0 color-mix(in srgb, var(--accent) 65%, transparent), 0 8px 20px rgba(0,0,0,.45); }
}
.sol-waste__slot.is-top { cursor: pointer; }

/* ---- completa/vittoria/bloccata ---- */
.sol-autofinish { text-align: center; margin-top: 18px; }
.sol-win { position: relative; overflow: hidden; text-align: center; margin-top: 22px; padding: 22px; background: var(--bg-soft); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 30px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: solWinPop .4s cubic-bezier(.2,.9,.3,1.25) both; }
.sol-win__title { font-family: var(--font); font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; position: relative; z-index: 1;
  background: var(--grad, linear-gradient(90deg, var(--accent), var(--accent-2)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sol-win__text { color: var(--muted); margin: 0 0 14px; position: relative; z-index: 1; }
.sol-win .btn { position: relative; z-index: 1; }
@keyframes solWinPop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

.sol-stuck { text-align: center; margin-top: 22px; padding: 22px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius); animation: solWinPop .35s ease both; }
.sol-stuck__title { font-family: var(--font); font-size: 1.15rem; font-weight: 800; color: #fb923c; margin: 0 0 6px; }
.sol-stuck__text { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0 auto 14px; max-width: 520px; }

.sol-verify-result { text-align: center; font-size: .84rem; line-height: 1.5; max-width: 620px; margin: -6px auto 18px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-soft-2); }
.sol-verify-result.is-solved { color: #34d399; border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.sol-verify-result.is-unsolvable { color: #f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.sol-verify-result.is-unknown { color: var(--muted); }

/* ---- confetti di vittoria: pezzi colorati che cadono e sfumano; puramente
   decorativo (aria-hidden), disattivato del tutto se l'utente preferisce
   ridurre le animazioni. ---- */
.sol-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sol-confetti__piece { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: solConfettiFall var(--dur) ease-in var(--delay) 1 both;
  transform: rotate(var(--rot)); }
@keyframes solConfettiFall {
  0% { opacity: 0; transform: translateY(0) rotate(var(--rot)); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translateY(240px) rotate(calc(var(--rot) + 200deg)); }
}
/* ---- animazioni carte: distribuzione iniziale a cascata, atterraggio della
   carta appena spostata, flip della carta che si scopre. Le classi vengono
   applicate una sola volta dal controller (consumate al render successivo). */
.sol-deal-in { animation: solDealIn .32s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc((var(--col, 0) + var(--i, 0)) * 45ms); }
@keyframes solDealIn { from { opacity: 0; transform: translateY(-14px) scale(.92); } to { opacity: 1; transform: none; } }
.sol-flip .sol-card { animation: solFlip .32s cubic-bezier(.3,.9,.3,1); backface-visibility: hidden; }
@keyframes solFlip { 0% { transform: rotateY(88deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
/* carta in viaggio (FLIP, transform inline gestito da JS): sopra le altre e con
   ombra "sollevata" finché non atterra */
.sol-travel { z-index: 60; }
.sol-travel .sol-card { box-shadow: 0 12px 26px rgba(0,0,0,.45); }
/* micro-feedback al passaggio del mouse (solo puntatori precisi: sul touch
   darebbe solo flash fastidiosi) */
@media (hover: hover) and (pointer: fine) {
  .sol-card { transition: transform .15s ease, box-shadow .2s ease; }
  .sol-tcard:hover > .sol-card:not(.sol-card--back), .sol-waste__slot.is-top:hover .sol-card { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 12px 24px -4px rgba(0,0,0,.45); }
}

/* ---- dialogo di conferma a tema (sostituisce window.confirm, che oltre a
   essere fuori tema blocca l'intero thread della pagina) ---- */
.sol-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,5,10,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.sol-modal.sol-show { opacity: 1; }
.sol-modal__panel { width: 100%; max-width: 400px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; text-align: center;
  transform: translateY(12px) scale(.97); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.sol-modal.sol-show .sol-modal__panel { transform: none; }
.sol-modal__title { font-family: var(--font); font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; }
.sol-modal__text { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0 0 18px; }
.sol-modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- ingranaggio impostazioni: nella HUD resta solo lui oltre ad Annulla e
   Verifica, tutto il resto vive nel menu a scomparsa ---- */
.sol-gear { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-glass, var(--bg-soft-2));
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, transform .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-gear svg { width: 55%; height: 55%; }
.sol-gear:hover { color: var(--accent); border-color: var(--accent); transform: rotate(30deg); }

/* ---- menu impostazioni: pannello centrato su desktop, bottom-sheet con
   slide-up su mobile (override nella media query più sotto) ---- */
.sol-menu__panel { width: 100%; max-width: 340px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
  transform: translateY(12px) scale(.97); transition: transform .22s cubic-bezier(.22,1,.36,1); }
.sol-menu.sol-show .sol-menu__panel { transform: none; }
.sol-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sol-menu__head .sol-modal__title { margin: 0; }
.sol-menu__close { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-menu__close svg { width: 50%; height: 50%; }
.sol-menu__close:hover { color: var(--accent); border-color: var(--accent); }
.sol-menu__sec { margin-bottom: 16px; }
.sol-menu__label { display: block; font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted-2); margin-bottom: 8px; }
.sol-menu__sec .sol-modes { display: flex; gap: 6px; }
.sol-menu__sec .sol-mode { flex: 1; text-align: center; padding: 9px 12px; }
.sol-menu__list { display: flex; flex-direction: column; gap: 8px; }
.sol-menu__list .btn { width: 100%; justify-content: center; }

/* ---- interruttore "auto-gioca le carte sicure" ---- */
.sol-switch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-switch__track { flex: none; width: 40px; height: 22px; border-radius: 99px; background: var(--bg-soft-2);
  border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; }
.sol-switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform .2s, background .2s; }
.sol-switch.is-on .sol-switch__track { background: color-mix(in srgb, var(--accent) 35%, var(--bg-soft-2)); border-color: var(--accent); }
.sol-switch.is-on .sol-switch__knob { transform: translateX(18px); background: var(--accent); }
.sol-switch__label { font-size: .86rem; color: var(--text); }

/* ---- statistiche nel menu ---- */
.sol-menu__sec--stats { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 0; }
.sol-menu__stats { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.sol-menu__stat-label { font-size: .8rem; color: var(--muted); }
.sol-menu__stat-value { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--text); text-align: right; }

/* ---- riepilogo nella schermata di vittoria ---- */
.sol-win__meta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 0 0 10px;
  font-family: var(--mono); font-size: .82rem; color: var(--muted); position: relative; z-index: 1; }
.sol-record { color: var(--accent); font-weight: 800; margin-left: 4px; }
.sol-win__daily { color: #fbbf24; font-weight: 700; margin: 0 0 12px; position: relative; z-index: 1; }

/* ---- suggerimento: alone DORATO pulsante su sorgente e destinazione della
   mossa consigliata (distinto dal teal della selezione) ---- */
.sol-hint .sol-card, .sol-column__empty.sol-hint, .sol-foundation.sol-hint, .sol-stock.sol-hint .sol-card {
  border-color: #fbbf24 !important;
  animation: solHintPulse 1.2s ease-in-out infinite; }
@keyframes solHintPulse {
  0%, 100% { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px -2px rgba(251,191,36,.75); }
  50% { box-shadow: 0 0 0 2px #fbbf24, 0 0 24px 2px rgba(251,191,36,.55); }
}

@media (prefers-reduced-motion: reduce) {
  .sol-win, .sol-stuck { animation: none !important; }
  .sol-confetti { display: none; }
  .sol-deal-in, .sol-flip .sol-card { animation: none !important; }
  .sol-card { transition: none !important; }
  .sol-modal, .sol-modal__panel, .sol-menu__panel, .sol-gear { transition: none !important; }
  .sol-hint .sol-card, .sol-column__empty.sol-hint, .sol-foundation.sol-hint, .sol-stock.sol-hint .sol-card { animation: none !important; box-shadow: 0 0 0 2px #fbbf24 !important; }
  .sol-switch__track, .sol-switch__knob { transition: none !important; }
  .sol-glow { animation: none !important; }
}

/* ---- schermo intero: il campo esce dal flusso della pagina e diventa un
   pannello fisso a TUTTO schermo. Attivato di default su mobile (JS) perché
   nel layout normale non c'è spazio a sufficienza e ogni ridisegno rischiava
   di far scorrere la pagina verso la guida sopra al campo.
   La nav del sito viene nascosta del tutto (body.sol-fs-on, impostata da JS):
   in modalità gioco serve ogni pixel verticale, e nasconderla risolve alla
   radice anche il conflitto di stacking context che prima costringeva il
   pannello a partire da sotto la nav (top:66px). */
/* oltre alla nav va nascosto anche il footer: ha position:relative con
   z-index:2 da fratello successivo di <section>, quindi si dipinge SOPRA
   qualunque contenuto della sezione - pannello fullscreen incluso (il suo
   z-index:40 è intrappolato nello stacking context della sezione) - ed è
   per questo che il copyright compariva in mezzo al tavolo da gioco. */
body.sol-fs-on .nav, body.sol-fs-on .footer { display: none; }
/* la larghezza del pannello è vincolata all'ALTEZZA dello schermo: la
   dimensione carta deriva dalla larghezza del contenitore (container query),
   quindi su un monitor largo lasciare il pannello a tutta larghezza produceva
   carte giganti che sforavano sotto lo schermo. Il fattore 1.06 fa sì che il
   layout iniziale (riga superiore + tableau con margine per crescere) stia
   interamente in un viewport tipico; pile molto lunghe scorrono comunque
   dentro il pannello. Su schermi stretti (mobile) vince 100vw come prima.
   Il box-shadow gigante copre i lati del viewport oltre il pannello centrato
   (il contenuto della pagina resta lì sotto, il pannello è solo più stretto). */
.sol.is-fullscreen { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, calc((100vh - 190px) * 1.06));
  z-index: 40; max-width: none; margin: 0;
  background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; }
/* flex-basis auto + niente shrink: il tavolo cresce quanto gli serve (pile
   lunghe incluse) e quando supera lo schermo si scorre DENTRO il pannello.
   Con il "flex: 1" di prima veniva invece compresso all'altezza residua e
   .sol-table{overflow:hidden} tagliava via le carte in fondo alle colonne. */
.sol.is-fullscreen .sol-table { flex: 1 0 auto; }
.sol-fs-close { position: sticky; top: 0; z-index: 5; margin: 0 0 8px auto; width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--bg-glass, var(--bg-soft)); backdrop-filter: blur(10px); color: var(--text); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sol-fs-close svg { width: 55%; height: 55%; }
.sol-fs-close:hover { color: var(--accent); border-color: var(--accent); }
.sol-fs-toggle { display: inline-flex; align-items: center; gap: 6px; }
.sol-fs-toggle svg { width: 15px; height: 15px; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .sol-hud { justify-content: center; }
  .sol-stats { order: 1; flex: 1 1 100%; justify-content: space-around; }
  /* HUD alleggerita: solo Annulla + Verifica (che si dividono la riga) e
     l'ingranaggio quadrato - il resto delle opzioni sta nel menu a scomparsa */
  .sol-actions { order: 2; flex: 1 1 100%; display: flex; gap: 8px; }
  .sol-actions .btn { flex: 1; min-width: 0; padding: 10px 6px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sol-gear { width: 42px; height: 42px; }
  .sol { --sol-gap-x: calc(var(--sol-card-w) * 0.1); }
  /* meno margine attorno al pannello a tutto schermo = più spazio per le carte */
  .sol.is-fullscreen { padding-left: 6px; padding-right: 6px; }

  /* menu impostazioni come bottom-sheet: slide-up dal fondo, larghezza piena,
     angoli arrotondati solo sopra, safe-area rispettata */
  .sol-menu { align-items: flex-end; padding: 0; }
  .sol-menu__panel { max-width: none; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); }
  .sol-menu.sol-show .sol-menu__panel { transform: none; }

  /* ---- faccia carta "da app" per schermi piccoli: a ~47px di carta la
     griglia autentica dei semi è illeggibile. Qui le numerali mostrano un
     UNICO seme grande al centro, l'indice d'angolo diventa molto più grande
     (solo il numero, senza seme sotto: l'identità del seme la dà il centro)
     e figure/assi crescono di conseguenza. Su PC resta il layout autentico. */
  .sol-card__pips { display: none; }
  .sol-card__pip.sol-card__pip--mono { display: grid; font-size: calc(var(--sol-card-w) * 0.5); }
  .sol-card__corner { font-size: calc(var(--sol-card-w) * 0.34); line-height: 1; }
  .sol-card__corner em { display: none; }
  .sol-card__pip--ace i { font-size: calc(var(--sol-card-w) * 0.55); }
  .sol-card__pip--court { width: 72%; height: 66%; }
  .sol-card__pip--court b { font-size: calc(var(--sol-card-w) * 0.44); }
  .sol-card__pip--court em { font-size: calc(var(--sol-card-w) * 0.28); }
}
@media (max-width: 420px) {
  .sol:not(.is-fullscreen) { --sol-card-w: clamp(38px, 12.6vw, 60px); }
  .sol-actions .btn { padding: 9px 4px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-tcard { transition: none !important; }
}

/* ---- dimensione carta esatta via container query (in coda al file: deve
   vincere sui fallback clamp() sopra, anche quelli nelle media query).
   PROBLEMA risolto: le colonne del tableau sono 1fr (larghe quanto serve) ma
   l'altezza carta era fissa su --sol-card-w: le carte della board risultavano
   più larghe di quelle di mazzo/fondazioni e schiacciate in proporzione.
   Qui --sol-card-w viene calcolato ESATTAMENTE come "un settimo del
   contenitore meno i gap" -> ogni carta, ovunque, ha la stessa identica
   dimensione e le proporzioni 5:7 restano corrette a ogni larghezza. */
@supports (width: 1cqw) {
  .sol { container-type: inline-size; }
  .sol {
    --sol-gap-x: clamp(5px, 1.6cqw, 16px);
    --sol-card-w: calc((100cqw - 6 * var(--sol-gap-x)) / 7);
  }
}

/* ---- mobile: carte più grandi possibile. In coda al file perché deve
   vincere sul blocco @supports qui sopra (stessa specificità: conta l'ordine).
   Ogni pixel risparmiato su gap e padding vale x7 (7 colonne): gap fisso 3px
   e padding 4px portano la carta da ~47 a ~50px; togliere la cornice interna
   e ingrandire ancora i glifi fa il resto della leggibilità. ---- */
@media (max-width: 760px) {
  .sol { --sol-gap-x: 3px; }
  .sol.is-fullscreen { padding-left: 4px; padding-right: 4px; }
  .sol-card::after { content: none; } /* niente cornice interna: più aria ai glifi sulle carte piccole */
  .sol-card__pip.sol-card__pip--mono { font-size: calc(var(--sol-card-w) * 0.54); }
  .sol-card__corner { font-size: calc(var(--sol-card-w) * 0.36); }
  .sol-card__pip--ace i { font-size: calc(var(--sol-card-w) * 0.6); }
  .sol-card__pip--court b { font-size: calc(var(--sol-card-w) * 0.48); }
}