/* css/stile.css */
body {
    margin: 0; padding: 0; overflow: hidden;
    font-family: 'Alegreya', serif;
}

#canvas-container {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1;
}

#ui-layer {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; /* Lascia passare i click al 3D... */
    z-index: 10;
    display: flex; justify-content: flex-end; /* Pannello a destra su Desktop */
}

/* Pannello laterale (Legno scuro e bordi oro) */
#jury-panel {
    pointer-events: auto; 
    width: 340px;
    height: 100%;
    background-color: #2c1e16; 
    border-left: 4px solid #d4af37; 
    color: #f3f1e8;
    display: flex; flex-direction: column;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    overflow-y: auto; /* <-- AGGIUNTO: permette lo scroll se lo schermo è basso */
}

h1 {
    font-family: 'Cinzel', serif; font-size: 24px; color: #d4af37;
    text-align: center; margin: 0 0 15px 0; border-bottom: 1px solid #d4af37; padding-bottom: 10px;
}

/* Indicatore Turno */
#turn-indicator {
    text-align: center; font-size: 18px; margin-bottom: 15px;
}
#current-contrada {
    font-family: 'Cinzel', serif; font-weight: bold; color: #d4af37; font-size: 22px; display: block;
}

/* Bottoni Lancia Dado */
.btn-primary {
    background: linear-gradient(to bottom, #d4af37, #aa8822);
    border: 2px solid #554411; border-radius: 4px;
    color: #111; font-family: 'Cinzel', serif; font-weight: bold; font-size: 18px;
    padding: 10px; cursor: pointer; width: 100%; margin-bottom: 10px;
}
.btn-primary:hover { background: #e8c33a; }

.overrides {
    display: flex; justify-content: space-between; margin-bottom: 20px;
}
.btn-override {
    background: #4a3219; border: 1px solid #d4af37; color: #d4af37;
    font-family: 'Cinzel', serif; font-weight: bold;
    width: 15%; padding: 5px 0; cursor: pointer; text-align: center;
}
.btn-override:hover { background: #d4af37; color: #111; }
.btn-override[data-val="nero"] { color: #fff; background: #222; }

/* Classifica */
#standings { margin-bottom: 20px; }
.standing-row {
    display: flex; justify-content: space-between; padding: 5px 0;
    border-bottom: 1px solid #4a3219;
}

/* Pergamena dei Log */
#log-container {
    flex-grow: 1;
    flex-shrink: 0; /* <-- AGGIUNTO: impedisce che venga schiacciato a zero */
    min-height: 150px; /* <-- AGGIUNTO: altezza minima garantita */
    background-color: #f0eadd; 
    border: 2px solid #8b7e66;
    border-radius: 4px;
    color: #332b25;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    margin-top: auto; /* Lo spinge sempre verso il basso */
}
.log-entry { margin-bottom: 8px; border-bottom: 1px dashed #ccc; padding-bottom: 4px; }
/* Bottoni di servizio (Nuova Partita, Autoplay, Mute) */
.actions { 
    display: flex; justify-content: space-between; 
    margin-bottom: 20px; flex-wrap: wrap; gap: 5px; 
}
.btn-action {
    background: #332b25; border: 1px solid #8b7e66; color: #f0eadd;
    font-family: 'Cinzel', serif; font-size: 13px; font-weight: bold;
    padding: 8px 4px; cursor: pointer; flex: 1; text-align: center;
}
.btn-action:hover { background: #4a3219; color: #d4af37; border-color: #d4af37; }
/* Tracker Sfide */
#tracker-sfide {
    background: #1a120b; padding: 10px; margin-bottom: 20px; border: 1px solid #4a3219;
}
#tracker-sfide h3 {
    margin: 0 0 10px 0; font-family: 'Cinzel', serif; font-size: 16px; color: #d4af37; text-align: center;
}
.sfida-team { margin-bottom: 8px; font-size: 13px; }
.sfida-team-name { font-weight: bold; color: #f0eadd; display: block; margin-bottom: 2px; }
.sfida-game-badge {
    display: inline-block; background: #332b25; border: 1px solid #554411;
    padding: 2px 5px; margin: 2px; border-radius: 3px; color: #aaa; font-size: 11px;
}
.sfida-game-badge.usato { text-decoration: line-through; opacity: 0.3; }
/* Controlli per l'ordine di partenza */
.order-controls { 
    display: inline-flex; gap: 3px; margin-left: 8px;
}
.btn-order {
    background: #332b25; border: 1px solid #554411; color: #d4af37;
    cursor: pointer; padding: 1px 5px; font-size: 10px; border-radius: 3px;
}
.btn-order:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-order:hover:not(:disabled) { background: #d4af37; color: #111; }
/* Targa Sviluppatore / Personal Branding */
#dev-branding {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1000;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: bold;
    color: #d4af37;
    background: rgba(44, 30, 22, 0.85);
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 8px 15px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    pointer-events: auto; /* Fondamentale per renderlo cliccabile sopra il canvas */
}

#dev-branding:hover {
    background: #d4af37;
    color: #1a120b;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.4);
}
/* Nuvoletta dei Pensieri (Stile Patrician) */
#thought-bubble {
    position: absolute;
    background: rgba(240, 234, 221, 0.95); /* Pergamena chiara */
    border: 2px solid #8b7e66;
    color: #332b25;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 13px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-align: center;
    max-width: 220px;
    pointer-events: none; /* Non blocca i clic sottostanti */
    z-index: 2000;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#thought-bubble.visible {
    opacity: 1;
}

/* Coda del fumetto che punta verso il basso */
#thought-bubble::after { 
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #8b7e66 transparent transparent transparent;
}
/* --- OTTIMIZZAZIONE MOBILE (Smartphone e Tablet) --- */
@media (max-width: 768px) {
    /* Sposta il pannello della giuria in basso e lo rende uno "sheet" scorrevole */
    #jury-panel {
        width: 100%;
        height: 40vh; /* Occupa il 40% in basso dello schermo */
        top: auto;
        bottom: 0;
        right: 0;
        border-radius: 20px 20px 0 0; /* Arrotonda gli angoli in alto */
        overflow-y: auto;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.5);
        padding: 15px;
    }

    /* Rimpicciolisce leggermente i testi per i telefoni */
    .game-title {
        font-size: 22px;
    }
    
    .btn-main {
        font-size: 16px;
        padding: 12px;
    }

    /* La nuvoletta deve essere un po' più compatta */
    #thought-bubble {
        max-width: 160px;
        font-size: 11px;
        padding: 8px 10px;
    }
}
/* Titolo superiore "Medievalia" */
.super-title {
    font-family: 'Old English Text MT', 'UnifrakturMaguntia', 'Cinzel', serif; /* Cerca un font gotico di sistema, altrimenti usa Cinzel */
    color: #ffcc00; /* Giallo intenso come nell'immagine */
    font-size: 38px;
    margin-bottom: -5px; /* Avvicina il testo al titolo sottostante */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}