/* ============================================================================
   WOOWOO2 - Stili CSS, integrati con game-layout.js
   Frame campogioco 1024x750, canvas 960x576 (griglia 15x9 di caselle da 32 px
   disegnate al doppio). Il tabellone si prende tutta la larghezza: il
   pannello che stava a destra non c'e' piu'.
   ============================================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #12301c;
    color: #ffffff;
    -webkit-touch-callout: none;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === SIDEBARS (AdSense, riempite da game-layout.js) === */
.sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, #1a6b30 0%, #145524 50%, #0f4a1c 100%);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
#sidebar-left { left: 0; }
#sidebar-right { right: 0; }

/* === CAMPO DI GIOCO (1024 x 750 fisso, riscalato dal layout engine) === */
#campogioco {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1024px;
    height: 750px;
    background: linear-gradient(135deg, #17532a 0%, #0c3316 100%);
    transform-origin: center center;
    border-radius: 10px;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#schermo {
    position: absolute;
    top: 0; left: 0;
    width: 1024px; height: 750px;
    background-color: rgba(0, 0, 0, 0.72);
    z-index: 30000;
    display: none;
}

/* === HEADER === */
#header-bar {
    position: absolute;
    top: 6px; left: 12px;
    width: 1000px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
}

/* I tre numeri che prima stavano nella targa dentro al quadro. Qui si leggono
   sempre nello stesso posto, invece di cercarli nel disegno a ogni schema:
   uno per casella e grande, come nell'originale. Le caselle non sono larghe
   uguali - quella del tempo si porta dietro la barra. */
.quadrante {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 14px;
    border-radius: 5px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.quadrante span {
    font-size: 9px;
    letter-spacing: 1px;
    opacity: 0.7;
    white-space: nowrap;
    margin-bottom: 2px;
}
.quadrante b {
    font-size: 24px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.quadrante.ok b { color: #6ee7a0; }
.quadrante.ko b { color: #f87171; }
/* La barra non sta sotto il numero: sta sul bordo basso della casella, dentro
   lo spazio che le si lascia col padding. Cosi' il numero resta grande senza
   far crescere la fascia. */
.quadrante.tempo { position: relative; padding-bottom: 6px; min-width: 76px; }
.quadrante.tempo b { color: #ffe000; }
.quadrante.tempo .barra-esterna {
    position: absolute;
    left: 6px; right: 6px; bottom: 2px;
    height: 4px;
}

.lang-switch-header { display: flex; gap: 4px; }
.lang-switch-header a {
    padding: 0 8px;
    height: 26px;
    line-height: 26px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.lang-switch-header a.active { background: #f0c000; color: #2a1a00; border-color: #ffe680; }

#titolo-gioco {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.badge span { opacity: 0.7; letter-spacing: 0.5px; }
.badge b { font-size: 13px; font-variant-numeric: tabular-nums; }
.badge.ok b { color: #6ee7a0; }
.badge.ko b { color: #f87171; }

/* spia dell'acceleratore: compare solo col tasto destro premuto */
#w2-turbo {
    font-style: normal;
    font-weight: bold;
    font-size: 9px;
    color: #ffb020;
    letter-spacing: 0;
}

.barra-esterna {
    height: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}
.barra-piena {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f0c000, #ff7043);
    transition: width 0.25s linear;
}

/* === AREA CENTRALE === */
#area-tabellone {
    position: absolute;
    top: 52px; left: 29px;
    width: 966px; height: 582px;
    display: flex;
    align-items: flex-start;
}

#canvas-wrapper {
    position: relative;        /* il cartello di fine quadro si appende qui */
    width: 960px;
    height: 576px;
    border: 3px solid rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: #000;
    flex: none;
}
#w2-canvas { display: block; width: 960px; height: 576px; cursor: pointer; }

/* === ORARIO DEI TRENI ===
   Sta in fondo a sinistra, non di lato: il tabellone 15x9 si prende tutta la
   larghezza e un pannello a fianco non ci starebbe piu'. Una colonna sola e
   stretto, come un vero tabellone delle partenze. Non sta dentro la barra:
   qui sotto e' l'unica cosa che ha bisogno di altezza, e da solo puo'
   scendere fino al bordo della pagina (638..746) mentre la barra finisce a
   716 e il piedino gli passa a fianco. Due dati per voce: da dove a dove, e
   a che punto e'; ne stanno a vista quattro o cinque, le altre si scorrono. */
#w2-coda {
    position: absolute;
    top: 638px; left: 22px;
    width: 200px; height: 108px;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 3px;
}
.w2-voce {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.32);
    border-left: 3px solid #f0c000;
}
.w2-voce b { white-space: nowrap; }
.w2-voce span { text-align: right; }
/* La banda a sinistra dice a che punto e' il treno senza doverlo leggere:
   azzurra l'annuncio (il treno non c'e' ancora), verde chi e' in stazione
   pronto a partire, gialla la corsa, rossa chi si e' piantato. */
.w2-voce.annuncio { border-left-color: #60a5fa; background: rgba(20, 50, 100, 0.38); }
.w2-voce.partenza { border-left-color: #34d399; background: rgba(16, 80, 60, 0.40); }
/* FERMO: il treno e' sul binario e non va avanti, e' la cosa da guardare */
.w2-voce.allarme { border-left-color: #f87171; background: rgba(120, 20, 20, 0.45); }
.w2-voce b { font-variant-numeric: tabular-nums; }
.w2-voce span { opacity: 0.7; font-size: 10px; font-variant-numeric: tabular-nums; }
.w2-vuoto { font-size: 11px; opacity: 0.5; padding: 4px 2px; }

/* === BARRA INFERIORE === */
/* Nella barra restano i soli comandi, tenuti a destra: l'orario e il campo
   informativo scendono piu' in basso di lei e stanno per conto loro. Sopra,
   il tabellone finisce a 635; sotto, a 720, comincia la riga del piedino. */
#barra-inferiore {
    position: absolute;
    bottom: 34px; left: 234px;
    width: 768px; height: 78px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

/* Anche il campo informativo scende fino in fondo, a fianco dell'orario:
   sotto non c'e' niente, e cosi' i messaggi lunghi di fine quadro ci stanno
   per intero senza stringere i comandi. Sta fuori dalla barra, come
   l'orario, per la stessa ragione: e' piu' alto di lei. */
#w2-messaggio {
    position: absolute;
    top: 638px; left: 234px;
    width: 220px; height: 108px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.45;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* I comandi su una riga sola: le due tendine del quadro e, di seguito, i due
   tasti che agiscono sul quadro scelto. I rimandi al resto del sito non
   stanno qui, stanno nel piedino. */
#w2-comandi {
    width: 500px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
#w2-comandi select { flex: 1; min-width: 0; }

.bottone {
    height: 38px;
    padding: 0 16px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
.bottone:hover { background: rgba(255, 255, 255, 0.22); }
.bottone.principale { background: #f0c000; color: #2a1a00; border-color: #ffe680; }

/* Il tasto della pausa lampeggia di giallo: e' l'unico segno che il gioco e'
   fermo, sul quadro non si mette niente. A chi ha chiesto meno animazioni
   resta acceso fisso. */
#w2-pausa.inpausa {
    background: #f0c000;
    color: #2a1a00;
    border-color: #ffe680;
    animation: w2-lampeggio 0.9s steps(1, end) infinite;
}
@keyframes w2-lampeggio {
    50% {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.28);
    }
}
@media (prefers-reduced-motion: reduce) {
    #w2-pausa.inpausa { animation: none; }
}

/* Due tendine: il dischetto A..L e i quadri nostri M..X. */
#w2-scelta,
#w2-scelta2 {
    height: 38px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: #143f21;
    color: #fff;
    font-size: 12px;
}

/* === CARTELLO DI FINE QUADRO ===
   Quello che si vede nei tre secondi prima della modale. Sta sopra il quadro
   ma non lo copre: una striscia sola, nel terzo alto, e il quadro resta
   leggibile sotto. `pointer-events: none' non e' un dettaglio: quel cartello
   non deve prendere nessun clic, ne' dare l'idea che ci sia qualcosa da
   cliccare. */
.w2-annuncio {
    position: absolute;
    top: 150px; left: 50%;
    transform: translateX(-50%);
    padding: 10px 26px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
    z-index: 20;
}
.w2-annuncio.su { opacity: 1; visibility: visible; }
.w2-annuncio b {
    display: block;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;
}
.w2-annuncio.bene b { color: #ffd700; }
.w2-annuncio.male b { color: #ff9a8a; }
.w2-annuncio span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #cfe3d4;
}

/* === MODALE DI FINE QUADRO === */
/* Il riquadro sta in basso e non in mezzo: sopra ci va il banner di fine
   partita, 700x300, che si attacca al riquadro stesso. Per questo il riquadro
   e' largo 700 come negli altri giochi e lascia 300px liberi sopra di se'. */
#w2-modale {
    position: absolute;
    top: 0; left: 0;
    width: 1024px; height: 750px;
    box-sizing: border-box;
    /* Il riquadro si ferma a meta' strada dal fondo: sotto resta libera la
       barra dei comandi, sopra i 300px che servono al banner. */
    padding-bottom: 95px;
    background: rgba(0, 0, 0, 0.72);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 30001;
}
.w2-riquadro {
    position: relative;        /* il banner si appende qui */
    overflow: visible;
    width: 700px;
    box-sizing: border-box;
    padding: 16px 20px 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #1d5c30, #0e3a1b);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    text-align: center;
}
.w2-riquadro h2 {
    font-size: 22px;
    font-weight: 900;
    color: #ffd700;
    margin-bottom: 2px;
}
/* Il riepilogo in tre schede, come le statistiche di fine partita degli altri
   giochi: l'etichetta piccola sopra, il numero grande sotto. */
/* I complimenti dell'ultimo quadro: una riga sola sotto il titolo. */
.w2-finale { font-size: 14px; margin: 6px 0 0; color: #dff0d8; }

.w2-schede {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0 14px;
}
.w2-scheda {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 4px;
}
.w2-scheda .lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}
.w2-scheda .val {
    font-size: 20px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.w2-bottoni { display: flex; gap: 10px; justify-content: center; }
.w2-riquadro button {
    height: 38px;
    padding: 0 18px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.w2-riquadro button:hover { background: rgba(255, 255, 255, 0.22); }
/* Il quadro successivo e' il bottone giallo in mezzo, quello che si cerca. */
.w2-riquadro button.giallo {
    border-color: #ffe680;
    background: #f0c000;
    color: #2a1a00;
    box-shadow: 0 0 8px rgba(240, 192, 0, 0.35);
}
.w2-riquadro button.giallo:hover { background: #ffd720; }
/* I due rimandi copiati dal piedino, negli angoli in basso del riquadro. */
.w2-angolo { position: absolute; bottom: 10px; }
.w2-angolo.sx { left: 14px; }
.w2-angolo.dx { right: 14px; }

/* === PIEDINO ===
   Una riga sola in fondo, a destra dell'orario che scende fin qui: i due
   link di legge a sinistra, i tre rimandi a destra. */
.legal-links-w2 {
    position: absolute;
    bottom: 10px; left: 466px;
    font-size: 11px;
    opacity: 0.75;
}
.legal-links-w2 a { color: #d9f2e0; text-decoration: none; }
.legal-links-w2 a:hover { text-decoration: underline; }
.legal-links-w2 .sep { margin: 0 6px; opacity: 0.5; }

/* I rimandi fuori dal gioco, nello stile degli altri giochi del sito:
   tastini bassi in fondo a destra. TUTTI I GIOCHI e' l'uscita verso il
   resto del sito, quindi e' quello giallo. */
.link-giochi-w2 {
    position: absolute;
    bottom: 4px; right: 22px;
    display: flex;
    gap: 6px;
}
.pulsante-link-w2 {
    height: 26px;
    line-height: 24px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: all 0.2s;
}
.pulsante-link-w2:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}
.pulsante-home-w2 {
    background: #f0c000;
    color: #2a1a00;
    border-color: #ffe680;
    box-shadow: 0 0 8px rgba(240, 192, 0, 0.35);
}
.pulsante-home-w2:hover {
    background: #ffd720;
    color: #2a1a00;
    border-color: #fff2b0;
    box-shadow: 0 0 14px rgba(240, 192, 0, 0.6);
}