/* ------------------------------------------------------------------
   StartNews.it - Stili Pagina Giochi
   Palette del sito: blu #0a5278 - arancio #F97316
   ------------------------------------------------------------------ */

:root {
    --brand-blue:   #0a5278;
    --brand-orange: #F97316;
    --gioco-bordo:  #e5e7eb;
}

/* ---------- SCHEDE DELL'HUB ---------- */
.scheda-gioco {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 1rem .75rem;
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer; width: 100%;
}
.scheda-gioco:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.scheda-gioco:active { transform: translateY(0); }
.scheda-icona {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.scheda-nome { font-weight: 800; color: #1f2937; font-size: .95rem; line-height: 1.2; }
.scheda-desc { font-size: .75rem; color: #6b7280; line-height: 1.25; }
.scheda-record {
    margin-top: .25rem; font-size: .7rem; font-weight: 700;
    color: #b45309; background: #fef3c7; padding: .15rem .5rem; border-radius: 999px;
}

/* ---------- FINESTRA DI GIOCO ---------- */
#gioco-overlay { flex-direction: column; }
.gioco-barra {
    background: var(--brand-blue); color: #fff;
    display: flex; flex-direction: column; gap: .5rem;
    padding: .6rem .8rem; flex: 0 0 auto;
}
.gioco-barra-riga { display: flex; align-items: center; gap: .75rem; }
.gioco-barra h2 { font-weight: 800; font-size: 1.05rem; margin-right: auto; }
#gioco-azioni { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
#gioco-azioni:empty { display: none; }
.btn-azione {
    background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35);
    border-radius: .5rem; padding: .35rem .7rem; font-size: .8rem; font-weight: 600;
    white-space: nowrap;
}
.btn-azione:hover { background: rgba(255,255,255,.28); }
#gioco-chiudi {
    background: var(--brand-orange); color: #fff; border-radius: .5rem;
    width: 36px; height: 36px; font-size: 1.3rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#gioco-aiuto {
    background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%; width: 34px; height: 34px; font-size: .95rem;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#gioco-aiuto:hover { background: rgba(255,255,255,.3); }
#gioco-area { flex: 1; overflow: auto; padding: 1rem .75rem 3rem; background: #f3f4f6; }

/* ---------- FINESTRA ISTRUZIONI (Come si gioca) ---------- */
#aiuto-overlay {
    position: fixed; inset: 0; z-index: 200; display: none;
    background: rgba(15,23,42,.7); padding: 1rem;
    align-items: center; justify-content: center;
}
#aiuto-overlay.aperto { display: flex; }
.aiuto-finestra {
    background: #fff; border-radius: .9rem; width: 100%; max-width: 520px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}
.aiuto-testa {
    background: var(--brand-blue); color: #fff; padding: .8rem 1rem;
    display: flex; align-items: center; gap: .75rem;
}
.aiuto-testa h3 { font-weight: 800; font-size: 1.05rem; margin-right: auto; }
#aiuto-chiudi {
    background: var(--brand-orange); color: #fff; border-radius: .5rem;
    width: 32px; height: 32px; font-size: 1.2rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.aiuto-corpo { padding: 1rem 1.1rem; overflow: auto; color: #374151; font-size: .92rem; line-height: 1.55; }
.aiuto-corpo h4 {
    font-weight: 800; color: var(--brand-blue); margin: .9rem 0 .35rem; font-size: .95rem;
}
.aiuto-corpo h4:first-child { margin-top: 0; }
.aiuto-corpo p  { margin-bottom: .5rem; }
.aiuto-corpo ul { list-style: disc; padding-left: 1.2rem; margin-bottom: .5rem; }
.aiuto-corpo li { margin-bottom: .3rem; }
.aiuto-corpo strong { color: #111827; }
.aiuto-piede { padding: .75rem 1.1rem 1rem; text-align: center; border-top: 1px solid var(--gioco-bordo); }
.gioco-wrap { max-width: 640px; margin: 0 auto; }

/* pannello punteggi comune */
.gioco-stat {
    display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.gioco-stat span {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .5rem;
    padding: .3rem .7rem; font-size: .8rem; font-weight: 700; color: #374151;
}
.gioco-esito {
    margin: 1rem auto 0; max-width: 640px; text-align: center;
    padding: .9rem 1rem; border-radius: .75rem; font-weight: 700;
}
.gioco-esito.ok   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.gioco-esito.ko   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.gioco-esito.info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

.btn-gioco {
    background: var(--brand-blue); color: #fff; font-weight: 700;
    border-radius: .6rem; padding: .55rem 1.1rem; font-size: .9rem;
}
.btn-gioco:hover { filter: brightness(1.15); }
.btn-gioco.arancio { background: var(--brand-orange); }
.btn-gioco.chiaro  { background: #fff; color: var(--brand-blue); border: 1px solid var(--brand-blue); }

/* ---------- SUDOKU ---------- */
.sudoku-griglia {
    display: grid; grid-template-columns: repeat(9, 1fr);
    max-width: 460px; margin: 0 auto; background: #1f2937; gap: 1px;
    border: 3px solid #1f2937; border-radius: .4rem; overflow: hidden;
    touch-action: manipulation;
}
.sudoku-cella {
    aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: clamp(1rem, 4.5vw, 1.5rem); font-weight: 700; color: var(--brand-blue); cursor: pointer;
    user-select: none;
}
.sudoku-cella.fissa { color: #111827; background: #eef2f7; cursor: default; }
.sudoku-cella.sel   { background: #fde68a; }
.sudoku-cella.simile{ background: #f1f5f9; }
.sudoku-cella.errore{ color: #dc2626; }
.sudoku-cella.bordo-d { border-right: 2px solid #1f2937; }
.sudoku-cella.bordo-b { border-bottom: 2px solid #1f2937; }
.sudoku-tasti { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; max-width: 460px; margin: .9rem auto 0; }
.sudoku-tasti button {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .5rem;
    padding: .6rem 0; font-size: 1.1rem; font-weight: 800; color: var(--brand-blue);
}
.sudoku-tasti button:hover { background: #e0f2fe; }

/* ---------- MEMORY ---------- */
.memory-griglia { display: grid; gap: .5rem; max-width: 460px; margin: 0 auto; }
.memory-carta { aspect-ratio: 1/1; perspective: 600px; cursor: pointer; }
.memory-int {
    position: relative; width: 100%; height: 100%;
    transition: transform .4s; transform-style: preserve-3d;
}
.memory-carta.girata .memory-int { transform: rotateY(180deg); }
.memory-faccia {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    border-radius: .6rem; font-size: clamp(1.2rem, 6vw, 2rem);
}
.memory-retro  { background: var(--brand-blue); color: #fff; }
.memory-fronte { background: #fff; border: 2px solid var(--brand-orange); transform: rotateY(180deg); }
.memory-carta.trovata .memory-fronte { background: #dcfce7; border-color: #22c55e; color: #16a34a; }

/* ---------- CRUCIPUZZLE ---------- */
.cp-griglia { display: grid; gap: 2px; max-width: 460px; margin: 0 auto; touch-action: none; user-select: none; }
.cp-cella {
    aspect-ratio: 1/1; background: #fff; border-radius: .2rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: clamp(.7rem, 3vw, 1rem); color: #374151;
}
.cp-cella.sel    { background: var(--brand-orange); color: #fff; }
.cp-cella.trovata{ background: #bbf7d0; color: #166534; }
.cp-parole { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1rem; }
.cp-parole span {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: 999px;
    padding: .2rem .6rem; font-size: .78rem; font-weight: 700; color: #374151;
}
.cp-parole span.ok { background: #dcfce7; color: #166534; text-decoration: line-through; }

/* ---------- CRUCIVERBA ---------- */
.cv-griglia { display: grid; gap: 1px; background: #111827; border: 2px solid #111827; margin: 0 auto; width: max-content; max-width: 100%; }
.cv-cella { position: relative; width: clamp(30px, 11vw, 46px); height: clamp(30px, 11vw, 46px); background: #fff; }
.cv-cella.nera { background: #111827; }
.cv-cella input {
    width: 100%; height: 100%; text-align: center; border: 0; background: transparent;
    font-size: clamp(.9rem, 4vw, 1.2rem); font-weight: 800; color: var(--brand-blue); text-transform: uppercase;
}
.cv-cella input:focus { outline: 2px solid var(--brand-orange); outline-offset: -2px; background: #fff7ed; }
.cv-cella input.giusta { color: #166534; background: #dcfce7; }
.cv-cella input.sbagliata { color: #b91c1c; background: #fee2e2; }
.cv-num { position: absolute; top: 1px; left: 2px; font-size: .55rem; font-weight: 700; color: #6b7280; }
.cv-def { background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .6rem; padding: .8rem; }
.cv-def h4 { font-weight: 800; color: var(--brand-blue); margin-bottom: .4rem; }
.cv-def li { font-size: .82rem; margin-bottom: .25rem; color: #374151; }

/* ---------- PAROLA (indovina) ---------- */
.pd-griglia { display: grid; gap: .35rem; justify-content: center; margin-bottom: 1rem; }
.pd-riga { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.pd-cella {
    width: clamp(42px, 13vw, 56px); height: clamp(42px, 13vw, 56px);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800; text-transform: uppercase;
    border: 2px solid #d1d5db; border-radius: .4rem; background: #fff; color: #111827;
}
.pd-cella.esatta  { background: #16a34a; border-color: #16a34a; color: #fff; }
.pd-cella.presente{ background: #eab308; border-color: #eab308; color: #fff; }
.pd-cella.assente { background: #9ca3af; border-color: #9ca3af; color: #fff; }
.pd-tastiera { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.pd-tastiera div { display: flex; gap: .25rem; }
.pd-tastiera button {
    min-width: 30px; padding: .55rem .35rem; border-radius: .3rem; background: #e5e7eb;
    font-weight: 700; font-size: .82rem; color: #111827;
}
.pd-tastiera button.esatta  { background: #16a34a; color: #fff; }
.pd-tastiera button.presente{ background: #eab308; color: #fff; }
.pd-tastiera button.assente { background: #9ca3af; color: #fff; }

/* ---------- 2048 ---------- */
.g2048-griglia {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
    background: #bbada0; padding: .5rem; border-radius: .6rem;
    width: min(420px, 92vw); margin: 0 auto; touch-action: none;
}
.g2048-cella {
    aspect-ratio: 1/1; border-radius: .4rem; background: #cdc1b4;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: clamp(1rem, 6vw, 1.8rem); color: #776e65;
}
/* ---------- SNAKE ---------- */
.snake-box { width: min(420px, 92vw); margin: 0 auto; }
#snake-canvas { width: 100%; background: #0f172a; border-radius: .6rem; display: block; touch-action: none; }
.snake-dpad { display: grid; grid-template-columns: repeat(3, 60px); gap: .4rem; justify-content: center; margin-top: .8rem; }
.snake-dpad button { background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .5rem; padding: .7rem 0; font-size: 1.1rem; color: var(--brand-blue); }

/* ---------- FORZA 4 ---------- */
.f4-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; background: var(--brand-blue); padding: .5rem; border-radius: .7rem; width: min(430px, 94vw); margin: 0 auto; }
.f4-cella { aspect-ratio: 1/1; border-radius: 50%; background: #eef2f7; }
.f4-cella.g1 { background: var(--brand-orange); }
.f4-cella.g2 { background: #facc15; }
.f4-cella.vinc { box-shadow: 0 0 0 3px #16a34a inset; }
.f4-colonne { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; width: min(430px, 94vw); margin: 0 auto .4rem; padding: 0 .5rem; }
.f4-colonne button { background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .4rem; padding: .25rem 0; color: var(--brand-blue); font-weight: 800; }

/* ---------- QUIZ ---------- */
.quiz-box { background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .8rem; padding: 1rem; }
.quiz-domanda { font-weight: 800; color: #111827; font-size: 1.05rem; margin-bottom: .9rem; }
.quiz-opzione {
    display: block; width: 100%; text-align: left; background: #f9fafb;
    border: 1px solid var(--gioco-bordo); border-radius: .6rem; padding: .7rem .9rem;
    margin-bottom: .5rem; font-weight: 600; color: #374151;
}
.quiz-opzione:hover { background: #e0f2fe; }
.quiz-opzione.giusta   { background: #dcfce7; border-color: #22c55e; color: #166534; }
.quiz-opzione.sbagliata{ background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* ==================================================================
   PARTITE IN SOSPESO E ABBANDONO
   ==================================================================
   Roba del motore, non di un gioco in particolare: l'avviso delle
   partite lasciate a meta' nell'hub, il pulsante "Abbandona la
   partita" nella barra in alto e la richiesta di conferma.
   ================================================================== */

/* ---------- l'avviso in cima all'hub ---------- */

.gioco-sospese {
    background: #fff7ed; border: 1px solid #fed7aa; border-radius: .8rem;
    padding: .9rem 1rem; margin-bottom: 2rem;
}
.gioco-sospese h4 {
    font-size: .82rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: #b45309; margin: 0 0 .6rem;
    display: flex; align-items: center; gap: .4rem;
}

.gioco-sospesa {
    display: flex; align-items: center; gap: .7rem;
    background: #fff; border: 1px solid var(--gioco-bordo);
    border-radius: .6rem; padding: .5rem .6rem;
}
.gioco-sospesa + .gioco-sospesa { margin-top: .45rem; }

.gioco-sospesa-icona {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.gioco-sospesa-testo { flex: 1; min-width: 0; line-height: 1.25; }
.gioco-sospesa-testo strong {
    display: block; font-size: .92rem; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gioco-sospesa-testo span { display: block; font-size: .74rem; color: #6b7280; }

.gioco-sospesa-vai {
    flex: 0 0 auto; background: var(--brand-blue); color: #fff; border: 0;
    border-radius: .5rem; padding: .45rem .9rem;
    font-size: .82rem; font-weight: 700; cursor: pointer;
}
.gioco-sospesa-vai:hover { background: #0d6494; }

.gioco-sospesa-no {
    flex: 0 0 auto; background: none; border: 0; color: #9ca3af;
    font-size: 1.4rem; line-height: 1; padding: 0 .3rem; cursor: pointer;
}
.gioco-sospesa-no:hover { color: #dc2626; }

/* Sulla scheda del gioco, al posto del record, si dice che c'e' una
   partita da riprendere: e' l'informazione che serve in quel momento. */
.scheda-sospesa {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fff7ed; color: #b45309; border-radius: 999px;
    padding: .15rem .6rem; font-size: .7rem; font-weight: 700; margin-top: .35rem;
}

/* ---------- il pulsante Abbandona ---------- */

.btn-azione.btn-abbandona {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
}
.btn-azione.btn-abbandona:hover { background: #dc2626; border-color: #dc2626; }

/* ---------- la richiesta di conferma ---------- */

.gioco-velo {
    position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, .6);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.gioco-conferma {
    background: #fff; border-radius: .9rem; padding: 1.5rem 1.3rem;
    max-width: 380px; width: 100%; text-align: center;
}
.gioco-conferma > i {
    display: block; font-size: 1.9rem; color: #dc2626; margin-bottom: .6rem;
}
.gioco-conferma h4 {
    font-size: 1.1rem; font-weight: 800; color: #111827; margin: 0 0 .5rem;
}
.gioco-conferma p {
    font-size: .86rem; color: #6b7280; line-height: 1.55; margin: 0 0 1.1rem;
}
.gioco-conferma-tasti {
    display: flex; flex-direction: column; gap: .5rem; align-items: stretch;
}
.gioco-conferma-tasti .btn-gioco { background: #dc2626; }
.gioco-conferma-tasti .btn-gioco:hover { background: #b91c1c; }
.gioco-annulla {
    background: none; border: 0; color: var(--brand-blue);
    font-size: .86rem; font-weight: 700; padding: .5rem; cursor: pointer;
}
.gioco-annulla:hover { text-decoration: underline; }

/* ---------- l'avviso "partita ripresa" ---------- */

.gioco-ripresa {
    background: #dcfce7; color: #166534; border-radius: .5rem;
    padding: .5rem .8rem; margin-bottom: .8rem;
    font-size: .82rem; font-weight: 600; text-align: center;
    transition: opacity .8s;
}
.gioco-ripresa.sparisce { opacity: 0; }

/* ---------- serpente: l'avviso di ripartenza ---------- */

.snake-box { position: relative; }
.snake-avviso {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    background: rgba(15, 23, 42, .88); color: #fff; border-radius: 999px;
    padding: .35rem .9rem; font-size: .78rem; font-weight: 700;
    white-space: nowrap; pointer-events: none;
}

@media (max-width: 420px) {
    .gioco-sospesa-vai { padding: .45rem .6rem; font-size: .78rem; }
    .gioco-sospesa-icona { width: 32px; height: 32px; flex-basis: 32px; font-size: .9rem; }
}

/* ==================================================================
   SUDOKU CHAMPIONS
   ==================================================================
   Aggiunta della versione 2.0 del sudoku: accesso col nome, tessera
   con QR, cruscotto della partita, duello e classifiche di stagione.
   Le classi .sudoku-* qui sopra restano quelle di sempre e vengono
   riusate dalla griglia.
   ================================================================== */

.sc-wrap { max-width: 560px; margin: 0 auto; }

.sc-testata { text-align: center; margin-bottom: 1.1rem; }
.sc-testata h3 { font-size: 1.35rem; font-weight: 800; color: var(--brand-blue); margin: 0 0 .2rem; }
.sc-testata p  { font-size: .9rem; color: #6b7280; margin: 0; }

.sc-coppa {
    width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 50%;
    background: var(--brand-orange); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

.sc-scheda {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .8rem;
    padding: 1rem; margin-bottom: 1rem;
}
.sc-scheda.sc-centro { text-align: center; }

.sc-titolo { font-size: .82rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: #6b7280; margin: 0 0 .6rem; }

.sc-eti { display: block; font-size: .8rem; font-weight: 700; color: #374151; margin-bottom: .3rem; }

.sc-campo {
    width: 100%; box-sizing: border-box; padding: .7rem .8rem;
    border: 1px solid var(--gioco-bordo); border-radius: .55rem;
    font-size: 1rem; color: #111827; background: #fff;
}
.sc-campo:focus { outline: 2px solid var(--brand-orange); outline-offset: -1px; }
.sc-campo-sei {
    text-align: center; font-size: 1.8rem; font-weight: 800;
    letter-spacing: .3em; padding-left: .3em;
}

.sc-nota { font-size: .78rem; color: #6b7280; margin: .5rem 0 0; line-height: 1.45; }
.sc-piede { font-size: .78rem; color: #6b7280; text-align: center; margin: .2rem 0 0; }

.sc-gia { margin: .8rem 0; }
.sc-gia summary {
    cursor: pointer; font-size: .82rem; font-weight: 700;
    color: var(--brand-blue); margin-bottom: .5rem;
}

.sc-largo { display: block; width: 100%; margin-top: .8rem; text-align: center; }

.sc-testo {
    background: none; border: 0; color: var(--brand-blue);
    font-size: .85rem; font-weight: 700; cursor: pointer; padding: .5rem;
}
.sc-testo:hover { text-decoration: underline; }
.sc-testo.sc-acceso { color: var(--brand-orange); }

.sc-avviso {
    border-radius: .6rem; padding: .75rem .9rem; margin-bottom: 1rem;
    font-size: .86rem; line-height: 1.5;
}
.sc-avviso.ok   { background: #dcfce7; color: #166534; }
.sc-avviso.ko   { background: #fee2e2; color: #991b1b; }
.sc-avviso.info { background: #e0f2fe; color: #075985; }

.sc-attesa { text-align: center; color: #6b7280; font-size: .9rem; padding: 2rem 0; }

/* ---------- saluto e tessera ---------- */

.sc-saluto {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; margin-bottom: 1rem;
}
.sc-ciao { display: block; font-size: .78rem; color: #6b7280; }
.sc-nome { display: block; font-size: 1.3rem; font-weight: 800; color: var(--brand-blue); }

.sc-tessera-btn {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    background: #fff; border: 1px solid var(--gioco-bordo);
    color: var(--brand-blue); font-size: 1.05rem; cursor: pointer;
}
.sc-tessera-btn:hover { background: #e0f2fe; }

.sc-velo {
    position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .6);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.sc-tessera {
    background: #fff; border-radius: .9rem; padding: 1.4rem 1.2rem;
    max-width: 340px; width: 100%; text-align: center; position: relative;
    max-height: 90vh; overflow-y: auto;
}
.sc-tessera h4 { font-size: 1.05rem; font-weight: 800; color: var(--brand-blue); margin: 0 0 .2rem; }
.sc-tessera-nome { font-size: 1.15rem; font-weight: 800; color: #111827; margin: 0 0 .8rem; }
.sc-qr { display: flex; justify-content: center; margin-bottom: .7rem; }
.sc-qr svg { border-radius: .4rem; }
.sc-cifre {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
    color: var(--brand-blue); margin: 0;
}
.sc-chiudi {
    position: absolute; top: .4rem; right: .6rem; background: none; border: 0;
    font-size: 1.6rem; line-height: 1; color: #9ca3af; cursor: pointer;
}
.sc-esci { margin-top: .8rem; }

.sc-standby i { font-size: 2rem; color: var(--brand-orange); margin-bottom: .5rem; display: block; }
.sc-standby p { font-size: .86rem; color: #6b7280; margin: 0 0 1rem; line-height: 1.5; }

/* ---------- scelta del livello ---------- */

.sc-livelli { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.sc-liv {
    background: #fff; border: 2px solid var(--gioco-bordo); border-radius: .6rem;
    padding: .6rem .5rem; cursor: pointer; text-align: center;
}
.sc-liv:hover { border-color: #93c5fd; }
.sc-liv[data-scelto] { border-color: var(--brand-orange); background: #fff7ed; }
.sc-liv-nome  { display: block; font-weight: 800; color: var(--brand-blue); font-size: .95rem; }
.sc-liv-passo { display: block; font-size: .7rem; color: #6b7280; margin-top: .1rem; }

/* ---------- i due modi ---------- */

.sc-modi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
.sc-modo {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .8rem;
    padding: 1rem .8rem; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.sc-modo:hover { border-color: var(--brand-orange); background: #fff7ed; }
.sc-modo i { font-size: 1.4rem; color: var(--brand-orange); margin-bottom: .2rem; }
.sc-modo strong { font-size: .95rem; color: var(--brand-blue); }
.sc-modo span { font-size: .74rem; color: #6b7280; line-height: 1.35; }

.sc-riprendi { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; }

/* ---------- sfida ---------- */

.sc-sei {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 2.4rem; font-weight: 800; letter-spacing: .18em;
    color: var(--brand-blue); margin: .2rem 0 .9rem; padding-left: .18em;
}

/* ---------- cruscotto della partita ---------- */

.sc-cruscotto {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
    margin-bottom: .8rem;
}
.sc-voce {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .5rem;
    padding: .4rem .3rem; text-align: center;
}
.sc-voce span   { display: block; font-size: .64rem; text-transform: uppercase;
    letter-spacing: .03em; color: #9ca3af; }
.sc-voce strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--brand-blue); }
.sc-voce.sc-punti strong { color: #16a34a; }
.sc-voce.sc-scarso strong { color: #dc2626; }

/* ---------- duello ---------- */

/* Al posto del cruscotto: nella sfida non c'e' niente da contare, si dice
   solo di che partita si tratta e a che livello. */
.sc-duello-testa {
    background: var(--brand-blue); color: #fff; border-radius: .5rem;
    padding: .5rem .8rem; margin-bottom: .5rem; text-align: center;
}

/* I due nomi, sempre sotto gli occhi: in un duello sapere contro chi si
   sta giocando conta piu' di qualsiasi altro dato. */
.sc-vs {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; font-size: 1rem; font-weight: 800; line-height: 1.2;
}
.sc-vs-io, .sc-vs-lui {
    max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-vs-io  { text-align: right; }
.sc-vs-lui { text-align: left; }
.sc-vs-segno {
    flex: 0 0 auto; font-size: .68rem; font-weight: 800;
    letter-spacing: .08em; padding: .1rem .4rem;
    background: var(--brand-orange); color: #fff; border-radius: .3rem;
}
.sc-duello-liv {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    opacity: .75; margin-top: .25rem;
}


.sc-duello {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .6rem;
    padding: .6rem .7rem; margin-bottom: .8rem;
}
.sc-duello-riga {
    display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #374151;
}
.sc-duello-riga + .sc-duello-riga { margin-top: .4rem; }
.sc-duello-riga > span { flex: 0 0 5.5rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-duello-riga > b { flex: 0 0 2.6rem; text-align: right; font-weight: 800; }
.sc-asta { flex: 1; height: 9px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.sc-asta i { display: block; height: 100%; background: #16a34a; transition: width .4s; }
.sc-asta-avv i { background: var(--brand-orange); }

/* ---------- griglia: appunti a matita e unita' completate ---------- */

.sudoku-cella.sc-appunti {
    font-size: .58rem; font-weight: 600; color: #94a3b8; line-height: 1.1;
    padding: 2px; text-align: center;
}
.sudoku-cella.sc-appunti span { display: block; word-break: break-all; }
.sudoku-cella.sc-fatta { animation: sc-lampo .7s ease-out; }
@keyframes sc-lampo {
    0%   { background: #bbf7d0; }
    100% { background: #fff; }
}

.sc-sotto { text-align: center; margin-top: .8rem; }

/* ---------- appunti a matita ---------- */

.sc-matita {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: 999px;
    padding: .4rem .5rem .4rem .8rem; cursor: pointer;
    font-size: .85rem; font-weight: 700; color: #6b7280;
}
.sc-matita:hover { border-color: #93c5fd; }
.sc-matita i { color: #9ca3af; }

/* L'interruttore dice a parole se sono accesi: il colore da solo non basta
   a chi non distingue bene l'arancione dal grigio. */
.sc-interruttore {
    background: #e5e7eb; color: #6b7280; border-radius: 999px;
    padding: .12rem .55rem; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .03em;
}
.sc-matita.sc-acceso {
    border-color: var(--brand-orange); background: #fff7ed; color: var(--brand-orange);
}
.sc-matita.sc-acceso i { color: var(--brand-orange); }
.sc-matita.sc-acceso .sc-interruttore { background: var(--brand-orange); color: #fff; }

.sc-matita-nota {
    max-width: 42ch; margin: .5rem auto 0;
    font-size: .76rem; line-height: 1.5; color: #6b7280;
}
.sc-matita-nota strong { color: #374151; }

/* ---------- fine partita ---------- */

.sc-fine strong { display: block; font-size: 1.05rem; margin-bottom: .5rem; }
.sc-fine p { font-size: .86rem; margin: .6rem 0 0; }
.sc-conto { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.sc-conto span {
    background: rgba(255, 255, 255, .55); border-radius: 999px;
    padding: .2rem .7rem; font-size: .8rem; font-weight: 600;
}
.sc-conto .sc-totale { font-weight: 800; background: rgba(255, 255, 255, .9); }

/* ---------- classifiche ---------- */

.sc-scegli-stagione { margin-bottom: .9rem; }

.sc-linguette {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-bottom: .8rem;
}
.sc-linguetta {
    background: #fff; border: 1px solid var(--gioco-bordo); border-radius: .5rem;
    padding: .45rem .2rem; font-size: .78rem; font-weight: 700;
    color: #6b7280; cursor: pointer;
}
.sc-linguetta[data-scelto] {
    background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
}

.sc-tabella {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--gioco-bordo); border-radius: .6rem; overflow: hidden;
}
.sc-tabella th {
    background: #f8fafc; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .03em; color: #6b7280; padding: .5rem .6rem; text-align: left;
}
.sc-tabella td { padding: .5rem .6rem; font-size: .86rem; border-top: 1px solid #f1f5f9; }
.sc-tabella .sc-pos { width: 2.2rem; font-weight: 800; color: #9ca3af; }
.sc-tabella .sc-chi { font-weight: 700; color: #111827; }
.sc-tabella .sc-tp  { color: #6b7280; text-align: right; width: 4.5rem; }
.sc-tabella .sc-pu  { font-weight: 800; color: var(--brand-blue); text-align: right; width: 3.5rem; }
.sc-tabella tr.sc-io td { background: #fff7ed; }
.sc-tabella tbody tr:nth-child(1) .sc-pos { color: #b45309; }
.sc-tabella tbody tr:nth-child(2) .sc-pos { color: #6b7280; }
.sc-tabella tbody tr:nth-child(3) .sc-pos { color: #92400e; }

.sc-vincitore {
    background: #fef3c7; color: #92400e; border-radius: .5rem;
    padding: .5rem .8rem; font-size: .84rem; margin: 0 0 .7rem;
}
.sc-vuota { text-align: center; color: #6b7280; font-size: .88rem; padding: 1.5rem 0; }

@media (max-width: 420px) {
    .sc-cruscotto { grid-template-columns: repeat(2, 1fr); }
    .sc-modi { grid-template-columns: 1fr; }
    .sc-linguette { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- come si fanno i punti: striscia e cartellino ---------- */

.sc-regole {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .7rem;
    background: #f8fafc; border: 1px solid var(--gioco-bordo); border-radius: .5rem;
    padding: .4rem .6rem; margin-bottom: .8rem;
    font-size: .72rem; color: #6b7280; line-height: 1.4;
}
.sc-regole span { white-space: nowrap; }
.sc-regole i { color: #9ca3af; margin-right: .15rem; }
.sc-regole b { color: var(--brand-blue); font-weight: 800; }

/* La griglia fa da riferimento al cartellino che compare sopra le
   caselle appena completate. */
.sc-partita .sudoku-griglia { position: relative; }

.sc-volante {
    position: absolute; z-index: 20; transform: translate(-50%, -120%);
    background: #16a34a; color: #fff; border-radius: 999px;
    padding: .25rem .7rem; font-size: .78rem; font-weight: 700;
    white-space: nowrap; pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    animation: sc-sale 1.4s ease-out forwards;
}
.sc-volante b { font-size: .95rem; margin-left: .15rem; }

@keyframes sc-sale {
    0%   { opacity: 0; transform: translate(-50%, -60%)  scale(.8); }
    15%  { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    70%  { opacity: 1; transform: translate(-50%, -150%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -210%) scale(1); }
}

@media (max-width: 420px) {
    .sc-regole { font-size: .68rem; gap: .2rem .5rem; }
}