/* ==========================================
   ANXA 2.0 - GIOCHI & RELAX (STILI DEDICATI)
   ========================================== */

.giochi-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 60px 16px;
    box-sizing: border-box;
}

/* Header & Intro */
.giochi-hero {
    text-align: center;
    margin-bottom: 28px;
}

.giochi-brand-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(0, 51, 160, 0.08);
    color: #0033A0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

body.rossonero-mode .giochi-brand-tag {
    background: rgba(255, 224, 102, 0.15);
    color: #FFE066;
}

.giochi-page-title {
    font-size: 34px;
    font-weight: 900;
    color: #0033A0;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

body.rossonero-mode .giochi-page-title {
    color: #FF3D00;
}

.giochi-page-subtitle {
    font-size: 15px;
    color: var(--text-muted, #64748B);
    margin: 0 auto;
    max-width: 720px;
    font-weight: 500;
    line-height: 1.55;
}

body.rossonero-mode .giochi-page-subtitle {
    color: #94A3B8;
}

/* Intestazione Sezioni Lobby */
.giochi-section-header {
    font-size: 18px;
    font-weight: 800;
    color: #0033A0;
    margin: 28px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.rossonero-mode .giochi-section-header {
    color: #FFE066;
}

/* Griglia Lobby */
.giochi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .giochi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .giochi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .giochi-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Gioco / Passatempo */
.giochi-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, rgba(0, 51, 160, 0.12));
    border-radius: 20px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    position: relative;
}

body.rossonero-mode .giochi-card {
    background: #121212;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.giochi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 51, 160, 0.12);
}

body.rossonero-mode .giochi-card:hover {
    box-shadow: 0 8px 24px rgba(255, 224, 102, 0.15);
}

.giochi-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 51, 160, 0.08);
    color: #0033A0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

body.rossonero-mode .giochi-card-icon {
    background: rgba(255, 224, 102, 0.12);
    color: #FFE066;
}

.giochi-card-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.giochi-card-body {
    flex: 1;
    margin-bottom: 14px;
}

.giochi-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #0033A0;
    margin: 0 0 6px 0;
}

body.rossonero-mode .giochi-card-title {
    color: #FFE066;
}

.giochi-card-desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted, #64748B);
    margin: 0;
}

body.rossonero-mode .giochi-card-desc {
    color: #94A3B8;
}

/* Pulsante Gioca / Apri */
.btn-giochi-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    min-height: 44px;
    border-radius: 14px;
    border: none;
    background: #0033A0;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    box-sizing: border-box;
}

body.rossonero-mode .btn-giochi-action {
    background: #FFE066;
    color: #000000 !important;
}

.btn-giochi-action:hover {
    opacity: 0.92;
}

.btn-giochi-action:active {
    transform: scale(0.98);
}

.btn-giochi-action svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Container Gioco Attivo */
.gioco-view-wrapper {
    display: none;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, rgba(0, 51, 160, 0.12));
    border-radius: 24px;
    padding: 24px;
    margin-top: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

body.rossonero-mode .gioco-view-wrapper {
    background: #121212;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.btn-torna-lobby {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(0, 51, 160, 0.08);
    color: #0033A0;
    font-weight: 800;
    font-size: 13.5px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background 0.2s;
}

body.rossonero-mode .btn-torna-lobby {
    background: rgba(255, 224, 102, 0.15);
    color: #FFE066;
}

.btn-torna-lobby:hover {
    background: rgba(0, 51, 160, 0.15);
}

body.rossonero-mode .btn-torna-lobby:hover {
    background: rgba(255, 224, 102, 0.25);
}

.gioco-view-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.gioco-view-title {
    font-size: 24px;
    font-weight: 900;
    color: #0033A0;
    margin: 0;
}

body.rossonero-mode .gioco-view-title {
    color: #FFE066;
}

/* Controls Bar HUD */
.game-hud-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(0, 51, 160, 0.04);
    border: 1px solid rgba(0, 51, 160, 0.1);
    border-radius: 16px;
    padding: 12px 18px;
    margin-bottom: 18px;
}

body.rossonero-mode .game-hud-bar {
    background: rgba(255, 224, 102, 0.06);
    border-color: rgba(255, 224, 102, 0.15);
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main, #334155);
}

body.rossonero-mode .hud-item {
    color: #F8FAFC;
}

.hud-item label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted, #64748B);
}

body.rossonero-mode .hud-item label {
    color: #94A3B8;
}

.btn-game-reset {
    padding: 8px 16px;
    min-height: 38px;
    border-radius: 12px;
    background: #0033A0;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

body.rossonero-mode .btn-game-reset {
    background: #FFE066;
    color: #000000;
}

.btn-game-reset:hover {
    opacity: 0.9;
}

/* ==========================================
   1. SOLITARIO (KLONDIKE)
   ========================================== */
.solitario-board {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    max-width: 800px;
    margin: 0 auto;
}

.solitario-top-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.solitario-stock-waste, .solitario-foundations {
    display: flex;
    gap: 8px;
}

.solitario-tableau {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    min-height: 360px;
}

/* Carte Solitario HTML/CSS */
.solitaire-card-slot {
    aspect-ratio: 2.5 / 3.5;
    border: 2px dashed rgba(0, 51, 160, 0.2);
    border-radius: 10px;
    position: relative;
    background: rgba(0, 51, 160, 0.02);
    box-sizing: border-box;
}

body.rossonero-mode .solitaire-card-slot {
    border-color: rgba(255, 224, 102, 0.2);
    background: rgba(255, 224, 102, 0.02);
}

.solitaire-card {
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
    box-sizing: border-box;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.solitaire-card.red-suit {
    color: #DC2626;
}

.solitaire-card.black-suit {
    color: #0F172A;
}

.solitaire-card.card-back {
    background: linear-gradient(135deg, #0033A0 0%, #001240 100%);
    border: 2px solid #ffffff;
    color: transparent;
}

body.rossonero-mode .solitaire-card.card-back {
    background: linear-gradient(135deg, #CC232A 0%, #000000 100%);
    border-color: #FFE066;
}

.solitaire-card.selected-card {
    outline: 3px solid #FFD54F;
    box-shadow: 0 0 16px rgba(255, 213, 79, 0.8);
    transform: translateY(-4px);
    z-index: 99 !important;
}

.card-corner-top {
    font-size: 13px;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-suit-symbol {
    font-size: 13px;
}

.card-center-suit {
    font-size: 24px;
    text-align: center;
    align-self: center;
}

/* Pila Tableau sovrapposta */
.tableau-col {
    position: relative;
    min-height: 180px;
}

.tableau-col .solitaire-card {
    position: absolute;
    left: 0;
    right: 0;
}

@media (max-width: 600px) {
    .solitaire-card {
        padding: 2px;
        border-radius: 6px;
    }
    .card-corner-top {
        font-size: 10px;
    }
    .card-center-suit {
        font-size: 16px;
    }
}

/* ==========================================
   2. CAMPO MINATO
   ========================================== */
.minesweeper-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mines-control-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.btn-mode-toggle {
    padding: 10px 20px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 160, 0.2);
    background: rgba(0, 51, 160, 0.06);
    color: var(--text-main, #334155);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

body.rossonero-mode .btn-mode-toggle {
    border-color: rgba(255, 224, 102, 0.2);
    background: rgba(255, 224, 102, 0.08);
    color: #F8FAFC;
}

.btn-mode-toggle.active {
    background: #0033A0;
    color: #ffffff;
    border-color: #0033A0;
}

body.rossonero-mode .btn-mode-toggle.active {
    background: #FFE066;
    color: #000000;
    border-color: #FFE066;
}

.mines-grid-container {
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

.mines-board {
    display: grid;
    gap: 4px;
    background: rgba(0, 51, 160, 0.08);
    padding: 8px;
    border-radius: 16px;
    border: 2px solid rgba(0, 51, 160, 0.15);
    user-select: none;
    -webkit-user-select: none;
}

body.rossonero-mode .mines-board {
    background: rgba(255, 224, 102, 0.05);
    border-color: rgba(255, 224, 102, 0.2);
}

.mine-cell {
    width: 36px;
    height: 36px;
    background: #0033A0;
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background 0.15s, transform 0.1s;
}

body.rossonero-mode .mine-cell {
    background: #262626;
    color: #FFE066;
}

.mine-cell.revealed {
    background: #E2E8F0;
    color: #0F172A;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.rossonero-mode .mine-cell.revealed {
    background: #334155;
    color: #FFFFFF;
}

.mine-cell.exploded {
    background: #EF4444 !important;
    color: #ffffff !important;
}

.mine-cell[data-num="1"] { color: #2563EB; }
.mine-cell[data-num="2"] { color: #16A34A; }
.mine-cell[data-num="3"] { color: #DC2626; }
.mine-cell[data-num="4"] { color: #7C3AED; }

/* ==========================================
   3. SUDOKU
   ========================================== */
.sudoku-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sudoku-board-container {
    max-width: 440px;
    width: 100%;
    margin-bottom: 20px;
}

.sudoku-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    aspect-ratio: 1 / 1;
    border: 3px solid #0033A0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

body.rossonero-mode .sudoku-board {
    border-color: #FFE066;
    background: #1A1A1A;
}

.sudoku-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

body.rossonero-mode .sudoku-cell {
    color: #F8FAFC;
    border-color: #334155;
}

/* Griglia 3x3 bordi evidenziati */
.sudoku-cell:nth-child(3n) {
    border-right: 2px solid #0033A0;
}
.sudoku-cell:nth-child(9n) {
    border-right: none;
}
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid #0033A0;
}

body.rossonero-mode .sudoku-cell:nth-child(3n) { border-right-color: #FFE066; }
body.rossonero-mode .sudoku-cell:nth-child(n+19):nth-child(-n+27),
body.rossonero-mode .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #FFE066; }

/* Iniziale fisso vs utente */
.sudoku-cell.fixed-num {
    background: rgba(0, 51, 160, 0.05);
    font-weight: 900;
    color: #0033A0;
}

body.rossonero-mode .sudoku-cell.fixed-num {
    background: rgba(255, 224, 102, 0.08);
    color: #FFE066;
}

.sudoku-cell.selected-cell {
    background: #BFDBFE !important;
}

body.rossonero-mode .sudoku-cell.selected-cell {
    background: #854D0E !important;
}

.sudoku-cell.highlight-peer {
    background: #EFF6FF;
}

body.rossonero-mode .sudoku-cell.highlight-peer {
    background: #262626;
}

.sudoku-cell.conflict-num {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* Tastierino Numerico Sudoku */
.sudoku-keypad {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 440px;
    width: 100%;
}

.btn-sudoku-key {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 160, 0.2);
    background: #0033A0;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

body.rossonero-mode .btn-sudoku-key {
    background: #FFE066;
    color: #000000;
    border-color: #FFE066;
}

.btn-sudoku-key.btn-erase {
    width: auto;
    padding: 0 16px;
    background: #EF4444;
    color: #ffffff;
    font-size: 13px;
    text-transform: uppercase;
}

/* ==========================================
   4. MODALE SCHEDA RISULTATO CONDIVISIBILE (1080x1080)
   ========================================== */
.share-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.share-modal-content {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    position: relative;
}

body.rossonero-mode .share-modal-content {
    background: #18181B;
    color: #FFFFFF;
}

.share-card-preview-wrap {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 16px auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
}

.share-card-preview-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.share-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.btn-share-cycle-theme {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 160, 0.2);
    background: rgba(0, 51, 160, 0.08);
    color: #0033A0;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
}

body.rossonero-mode .btn-share-cycle-theme {
    background: rgba(255, 224, 102, 0.15);
    color: #FFE066;
    border-color: rgba(255, 224, 102, 0.3);
}

.btn-share-export {
    padding: 14px 20px;
    min-height: 44px;
    border-radius: 16px;
    background: #0033A0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 51, 160, 0.3);
}

body.rossonero-mode .btn-share-export {
    background: #FFE066;
    color: #000000;
}


/* ==========================================================================
   GIOCHI & RELAX - FULLSCREEN E ORACOLO
   ========================================================================== */

html.game-fullscreen-active,
body.game-fullscreen-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* X: nascosta nei giochi desktop normali, visibile nelle viste fullscreen */
.game-fullscreen-close {
    display: none;
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(15, 23, 42, .86);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 2147483646;
    box-shadow: 0 7px 22px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---------------- ORACOLO ---------------- */
.oracolo-interactive-card {
    width: min(100%, 680px);
    margin: 22px auto 0;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 51, 160, .14);
    border-radius: 22px;
    background: rgba(0, 51, 160, .035);
    text-align: center;
}

body.rossonero-mode .oracolo-interactive-card {
    background: rgba(255, 224, 102, .055);
    border-color: rgba(255, 224, 102, .18);
}

.oracolo-step-box {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main, #1e293b);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}

body.rossonero-mode .oracolo-step-box {
    color: #f8fafc;
}

.btn-oracolo-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: min(100%, 300px);
    min-height: 52px;
    margin: 22px auto 0;
    padding: 12px 22px;
    border: 0;
    border-radius: 15px;
    background: #0033A0;
    color: #fff !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0, 51, 160, .22);
}

body.rossonero-mode .btn-oracolo-next {
    background: #FFE066;
    color: #111 !important;
}

/* ---------------- SCACCHI / DAMA: SEMPRE FULLSCREEN ---------------- */
#view-scacchi.game-is-open,
#view-dama.game-is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #0b0b0b !important;
    box-shadow: none !important;
}

#view-scacchi.game-is-open > .btn-torna-lobby,
#view-dama.game-is-open > .btn-torna-lobby,
#view-scacchi.game-is-open > .gioco-view-title,
#view-dama.game-is-open > .gioco-view-title {
    display: none !important;
}

#view-scacchi.game-is-open .game-fullscreen-close,
#view-dama.game-is-open .game-fullscreen-close {
    display: block !important;
}

#view-scacchi.game-is-open .iframe-game-box,
#view-dama.game-is-open .iframe-game-box {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

#view-scacchi.game-is-open .iframe-game-box iframe,
#view-dama.game-is-open .iframe-game-box iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------- MOBILE: TUTTI I GIOCHI FULLSCREEN ---------------- */
@media (max-width: 767px) {
    .gioco-view-wrapper.game-is-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 20000 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding:
            calc(max(16px, env(safe-area-inset-top)) + 50px)
            14px
            calc(20px + env(safe-area-inset-bottom))
            14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        background: var(--card-bg, #fff) !important;
        box-shadow: none !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.rossonero-mode .gioco-view-wrapper.game-is-open {
        background: #111 !important;
    }

    .gioco-view-wrapper.game-is-open > .btn-torna-lobby {
        display: none !important;
    }

    .gioco-view-wrapper.game-is-open .game-fullscreen-close {
        display: block !important;
    }

    .gioco-view-wrapper.game-is-open > .gioco-view-title {
        margin: 0 58px 18px 0 !important;
        font-size: 23px !important;
        line-height: 1.2 !important;
    }

    /* Oracolo mobile: bottone sempre a portata di dito */
    #view-oracolo.game-is-open {
        display: flex !important;
        flex-direction: column !important;
    }

    #view-oracolo.game-is-open .oracolo-interactive-card {
        flex: 1 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 22px 16px !important;
    }

    #view-oracolo.game-is-open .oracolo-step-box {
        min-height: 150px !important;
        font-size: 19px !important;
    }

    #view-oracolo.game-is-open .btn-oracolo-next {
        width: 100% !important;
        max-width: 360px !important;
        min-height: 56px !important;
        font-size: 17px !important;
        margin-top: 24px !important;
    }

    /* Scacchi e Dama su mobile: iframe occupa davvero tutto lo schermo */
    #view-scacchi.game-is-open,
    #view-dama.game-is-open {
        padding: 0 !important;
    }

    #view-scacchi.game-is-open .iframe-game-box,
    #view-dama.game-is-open .iframe-game-box {
        position: absolute !important;
        inset: 0 !important;
        height: 100dvh !important;
    }

    #view-scacchi.game-is-open .iframe-game-box iframe,
    #view-dama.game-is-open .iframe-game-box iframe {
        min-height: 100dvh !important;
    }
}


/* ==========================================================================
   GIOCHI & RELAX - TEMA SCURO COERENTE CON TERRITORI
   Palette: #121212 / #202020 / #1d1d1d / #FFD54F / #f5f5f5
   ========================================================================== */

body.rossonero-mode,
html.rossonero-mode body {
    background: #0f0f0f !important;
    color: #f5f5f5 !important;
}

/* Intro e titoli */
body.rossonero-mode .giochi-brand-tag,
html.rossonero-mode .giochi-brand-tag {
    background: rgba(255, 213, 79, .12) !important;
    color: #FFD54F !important;
    border: 1px solid rgba(255, 213, 79, .18) !important;
}

body.rossonero-mode .giochi-page-title,
html.rossonero-mode .giochi-page-title,
body.rossonero-mode .giochi-section-header,
html.rossonero-mode .giochi-section-header,
body.rossonero-mode .giochi-card-title,
html.rossonero-mode .giochi-card-title,
body.rossonero-mode .gioco-view-title,
html.rossonero-mode .gioco-view-title {
    color: #FFD54F !important;
}

body.rossonero-mode .giochi-page-subtitle,
html.rossonero-mode .giochi-page-subtitle,
body.rossonero-mode .giochi-card-desc,
html.rossonero-mode .giochi-card-desc {
    color: #d6d6d6 !important;
}

/* Card lobby */
body.rossonero-mode .giochi-card,
html.rossonero-mode .giochi-card {
    background: #121212 !important;
    color: #f5f5f5 !important;
    border: 1.5px solid rgba(255, 213, 79, .28) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.34) !important;
}

body.rossonero-mode .giochi-card:hover,
html.rossonero-mode .giochi-card:hover {
    border-color: rgba(255, 213, 79, .58) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.42) !important;
}

body.rossonero-mode .giochi-card-icon,
html.rossonero-mode .giochi-card-icon {
    background: rgba(255, 213, 79, .10) !important;
    color: #FFD54F !important;
    border: 1px solid rgba(255, 213, 79, .18) !important;
}

/* Pulsanti principali */
body.rossonero-mode .btn-giochi-action,
html.rossonero-mode .btn-giochi-action,
body.rossonero-mode .btn-game-reset,
html.rossonero-mode .btn-game-reset,
body.rossonero-mode .btn-oracolo-next,
html.rossonero-mode .btn-oracolo-next {
    background: #FFD54F !important;
    color: #111 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 213, 79, .18) !important;
}

body.rossonero-mode .btn-torna-lobby,
html.rossonero-mode .btn-torna-lobby {
    background: #1d1d1d !important;
    color: #FFD54F !important;
    border: 1px solid rgba(255, 213, 79, .28) !important;
}

/* Vista gioco */
body.rossonero-mode .gioco-view-wrapper,
html.rossonero-mode .gioco-view-wrapper {
    background: #121212 !important;
    color: #f5f5f5 !important;
    border-color: rgba(255, 213, 79, .28) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.48) !important;
}

body.rossonero-mode .game-hud-bar,
html.rossonero-mode .game-hud-bar {
    background: #1d1d1d !important;
    border-color: rgba(255, 213, 79, .20) !important;
}

body.rossonero-mode .hud-item,
html.rossonero-mode .hud-item {
    color: #f5f5f5 !important;
}

body.rossonero-mode .hud-item label,
html.rossonero-mode .hud-item label {
    color: #d6d6d6 !important;
}

/* Oracolo */
body.rossonero-mode .oracolo-interactive-card,
html.rossonero-mode .oracolo-interactive-card {
    background: #1d1d1d !important;
    border-color: rgba(255, 213, 79, .24) !important;
}

body.rossonero-mode .oracolo-step-box,
html.rossonero-mode .oracolo-step-box {
    color: #f5f5f5 !important;
}

/* Campo minato */
body.rossonero-mode .mines-board,
html.rossonero-mode .mines-board {
    background: #1d1d1d !important;
    border-color: rgba(255, 213, 79, .24) !important;
}

body.rossonero-mode .mine-cell,
html.rossonero-mode .mine-cell {
    background: #202020 !important;
    color: #FFD54F !important;
    border: 1px solid rgba(255, 213, 79, .12) !important;
}

body.rossonero-mode .mine-cell.revealed,
html.rossonero-mode .mine-cell.revealed {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
}

/* Toggle difficoltà/modalità */
body.rossonero-mode .btn-mode-toggle,
html.rossonero-mode .btn-mode-toggle {
    background: #1d1d1d !important;
    color: #f5f5f5 !important;
    border-color: rgba(255, 213, 79, .24) !important;
}

body.rossonero-mode .btn-mode-toggle.active,
html.rossonero-mode .btn-mode-toggle.active {
    background: #FFD54F !important;
    color: #111 !important;
    border-color: #FFD54F !important;
}

/* Sudoku e altri pannelli/controlli generici */
body.rossonero-mode .sudoku-board-container,
html.rossonero-mode .sudoku-board-container,
body.rossonero-mode .sudoku-controls,
html.rossonero-mode .sudoku-controls {
    color: #f5f5f5 !important;
}

/* Solitario: retro carte coerente col tema Territori */
body.rossonero-mode .solitaire-card.card-back,
html.rossonero-mode .solitaire-card.card-back {
    background: linear-gradient(135deg, #202020 0%, #111111 100%) !important;
    border-color: #FFD54F !important;
}

/* X fullscreen */
body.rossonero-mode .game-fullscreen-close,
html.rossonero-mode .game-fullscreen-close {
    background: #1d1d1d !important;
    color: #FFD54F !important;
    border: 1px solid rgba(255, 213, 79, .36) !important;
}

/* Mobile fullscreen */
@media (max-width: 767px) {
    body.rossonero-mode .gioco-view-wrapper.game-is-open,
    html.rossonero-mode .gioco-view-wrapper.game-is-open {
        background: #121212 !important;
        color: #f5f5f5 !important;
    }
}