/* =================================================================
   0. IMPORTAZIONE FONT DA GOOGLE FONTS
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Press+Start+2P&family=VT323&display=swap');

/* =================================================================
   1. IMPOSTAZIONI GENERALI DEL SITO (BODY & TESTI BASE)
   ================================================================= */

/* Sfondo e colori generali di tutta la pagina */
body {
    background-color: #000000; /* Colore di sfondo nero profondo */
    color: #ffffff;            /* Colore predefinito del testo (bianco) */
    margin: 0;                  /* Rimuove i margini bianchi sui bordi dello schermo */
    padding: 0;                 /* Rimuove gli spazi interni predefiniti */
}

/* Regola generale per tutti i paragrafi normali del sito */
p {
    font-family: 'MedievalSharp', cursive; /* Font in stile scrittura medievale */
    font-size: 1.1rem;                      /* Dimensione del testo base */
    line-height: 1.6;                      /* Spaziatura tra le righe per leggere meglio */
    color: #e0e0e0;                        /* Grigio molto chiaro per non affaticare la vista */
}


/* =================================================================
   2. INTESTAZIONE IN ALTO (HEADER DEL SITO)
   ================================================================= */

/* Il grande banner rosso/nero in cima alla pagina */
.retro-header {
    background: linear-gradient(to bottom, #000000, #990000); /* Sfumatura dal nero al rosso scuro */
    padding: 20px;                             /* Spazio interno sopra, sotto e ai lati */
    border: 4px ridge #ff0000;                  /* Bordo rosso brillante con effetto rilievo 3D */
    box-shadow: 0px 0px 15px #ff0000;          /* Alone/bagliore rosso infuocato attorno al banner */
    display: flex;                             /* Dispone logo e testo affiancati */
    align-items: center;                       /* Allinea verticalmente al centro gli elementi */
    justify-content: center;                   /* Centra tutto orizzontalmente */
    gap: 20px;                                 /* Spazio tra l'immagine del mago e il titolo */
    width: 100%;
    box-sizing: border-box;
}

/* Immagine del mago pixelato nell'header */
.wizard-img {
    height: 150px;              /* Altezza dell'immagine */
    width: auto;               /* Larghezza automatica in proporzione */
    image-rendering: pixelated; /* Mantiene i pixel nitidi senza sfuocarli */
}

/* Titolo grande dell'header ("VAMP SHADOW WIZARD CITY") */
.header-title {
    font-family: 'Press Start 2P', monospace; /* Font in stile videogioco arcade anni '80/'90 */
    font-size: 1.8rem;                        /* Grandezza delle lettere */
    color: #ffffff;                           /* Colore bianco del testo */
    letter-spacing: 2px;                      /* Spaziatura tra le singole lettere */
    text-transform: uppercase;                 /* Forza tutte le lettere in maiuscolo */
    text-shadow: 
        3px 3px 0px #000000,                   /* Ombra profonda nera per effetto 3D */
        0px 0px 10px #ff0000;                  /* Bagliore neon rosso attorno alle lettere */
    margin: 0;
}


/* =================================================================
   3. BANNER SCORREVOLE / NOTIZIE (STILE PERGAMENA ANTICA)
   ================================================================= */

/* Il contenitore marrone/dorato stile pergamena sotto l'header */
.parchment-box {
    background-color: #c29b62; /* Colore di sfondo beige/marrone pergamena */
    border-top: 6px solid #e2bc82;    /* Bordo superiore chiaro (effetto luce) */
    border-bottom: 6px solid #6b4c21; /* Bordo inferiore scuro (effetto ombra) */
    border-left: 12px solid #3d2407;  /* Bordo sinistro spesso colore legno/cuoio */
    border-right: 12px solid #3d2407; /* Bordo destro spesso colore legno/cuoio */
    box-shadow: 
        inset 0 0 20px #221000, /* Ombra scura interna per dare profondità */
        0 0 0 4px #000000,      /* Bordino esterno nero */
        0 0 15px #ff0000;       /* Bagliore rosso di sfondo */
    padding: 12px 20px;
    margin: 20px auto;          /* Centrato nella pagina con spazio sopra e sotto */
    max-width: 850px;           /* Larghezza massima del banner */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Dettagli decorativi per la pergamena (frecce o simboli ai lati) */
.parchment-box::before,
.parchment-box::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}
.parchment-box::before { left: 5px; }
.parchment-box::after { right: 5px; }

/* Titolo sopra il testo scorrevole ("LATEST ANNOUNCEMENTS") */
.parchment-header {
    color: #2b0000;                             /* Marrone molto scuro / sangue di drago */
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Testo del messaggio scorrevole (Ticker) */
.ticker-text {
    color: #1a0300;                             /* Colore marrone/nero leggibile sulla pergamena */
    font-family: 'VT323', 'Courier New', monospace; /* Font stile computer retrò */
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
}


/* =================================================================
   4. LAYOUT A COLONNE DELLA PAGINA
   ================================================================= */

/* Struttura principale che affianca la Sidebar Sinistra, la Parte Centrale e la Sidebar Destra */
.site-layout {
    display: flex;              /* Attiva il layout a colonna flessibile */
    justify-content: space-between; /* Spazia le colonne uniformemente */
    gap: 20px;                  /* Distanza di 20px tra le varie colonne */
    width: 100%;
    max-width: none;
    padding: 0 20px;            /* Spazio dai bordi dello schermo */
    box-sizing: border-box;
    align-items: flex-start;   /* Mantiene le colonne allineate in alto */
}

/* Contenitore vuoto centrale tra le due sidebar */
.main-content {
    flex-grow: 1;               /* Si allarga per occupare tutto lo spazio libero al centro */
    min-height: 400px;
}


/* =================================================================
   5. SIDEBAR DESTRA (WIDGET WINAMP / LETTORE MUSICALE)
   ================================================================= */

/* Larghezza della colonna di destra */
.sidebar-right {
    width: 240px;
    flex-shrink: 0;            /* Impedisce alla colonna di rimpicciolirsi */
    margin-left: auto;
}

/* Scatola esterna del lettore audio Winamp */
.winamp-box {
    background-color: #222222; /* Grigio metallo scuro */
    border: 4px ridge #777777;  /* Bordo grigio metallico in rilievo */
    box-shadow: 
        0 0 10px #000000, 
        0 0 12px rgba(255, 0, 0, 0.4); /* Ombra con alone rosso leggero */
    padding: 8px;
    box-sizing: border-box;
}

/* Barra del titolo in alto nel Winamp ("VAMP-AMP v1.0") */
.winamp-title-bar {
    background: linear-gradient(90deg, #990000, #330000); /* Sfumatura dal rosso al nero */
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 4px;
    text-align: center;
    border: 1px solid #000000;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* Schermetto digitale verde stile Winamp */
.winamp-screen {
    background-color: #001100; /* Verde scuro stile display spento */
    border: 2px inset #003300;  /* Bordo scavato all'interno */
    padding: 6px;
    color: #00ff00;            /* Testo verde fosforescente */
    font-family: 'VT323', monospace;
    margin-bottom: 10px;
    box-shadow: inset 0 0 6px #000000;
}

/* Nome della canzone nello schermo Winamp */
.winamp-track-name {
    font-size: 1.1rem;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    /* Mette i tre pallini "..." se la scritta è troppo lunga */
}

/* Scritta di stato (es. "playing @ 128kbps") */
.winamp-status {
    font-size: 0.85rem;
    color: #00aa00;
    margin-top: 2px;
}

/* Lettore audio HTML personalizzato con filtri di colore retrò */
.retro-audio-player {
    width: 100%;
    height: 36px;
    outline: none;
    filter: invert(0.88) hue-rotate(180deg); /* Inverte i colori del player di default per farlo sembrare scuro/verde */
}

/* Testo in fondo al Winamp */
.winamp-footer {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: #aaaaaa;
    text-align: center;
    margin-top: 6px;
}


/* =================================================================
   6. SIDEBAR SINISTRA (PROFILO REPTILIAN & MENU GOTICO)
   ================================================================= */

/* Contenitore principale della colonna di sinistra */
.sidebar-left {
    width: 280px;              /* Larghezza fissa della colonna */
    flex-shrink: 0;
    background-color: #0d0000; /* Rosso-nero molto scuro */
    border: 4px ridge #990000;  /* Bordo rosso scuro in rilievo */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); /* Bagliore rosso attorno alla sidebar */
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Titolo in cima alla sidebar sinistra ("ARCHMAGE CITADEL") */
.sidebar-header {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #ff3333;
    text-align: center;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 0px #000000;
    border-bottom: 2px dashed #990000; /* Linea rossa tratteggiata */
    padding-bottom: 8px;
}

/* Scheda del profilo dell'Arcimago (Avatar + Stato) */
.archmage-card, .status-card {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%); /* Sfondo sfumato scuro */
    border: 3px ridge #666666;  /* Bordo grigio metallico */
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Contenitore dell'immagine avatar */
.avatar-box {
    text-align: center;
    margin: 10px 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Regole per la foto dell'Avatar Rettiliano */
.pixel-avatar {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;   /* Mantiene lo stile pixel art nitido */
    image-rendering: crisp-edges;
    border: 3px ridge #33cc33;    /* Cornice verde rettile attorno all'avatar */
    box-shadow: 0 0 10px rgba(51, 204, 51, 0.5); /* Alone verde veleno */
    background-color: #000000;
    box-sizing: border-box;
}

/* Testi con le info dello stato (Species, Status, Mood) */
.status-details {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.2rem;
    color: #e0e0e0;
    text-align: left;
}

/* Titoli dorati sopra le schede ("ARCHMAGE" / "STATUS") */
.status-title, .card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #ffd700;            /* Colore oro dorato */
    text-align: center;
    margin: 5px 0 10px 0;
}

/* Singola riga di stato */
.status-item {
    margin: 4px 0;
    line-height: 1.2;
}

/* Blocco Fase Lunare in fondo allo stato */
.moon-box {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #333333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.moon-icon {
    font-size: 1.3rem;
}

/* Menu di navigazione a bottoni gotici */
.gothic-menu {
    display: flex;
    flex-direction: column;    /* Mette i pulsanti uno sopra l'altro */
    gap: 10px;                  /* Spazio tra i vari pulsanti */
}

/* Singolo pulsante del menu */
.menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg, #4a4a4a 0%, #222222 100%); /* Sfondo grigio sfumato */
    color: #ffd700;            /* Testo oro */
    text-decoration: none;      /* Rimuove la sottolineatura dei link */
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    letter-spacing: 1px;
    /* Effetto pulsante 3D di pietra/metallo scavato */
    border-top: 3px solid #777777;
    border-left: 3px solid #666666;
    border-right: 3px solid #111111;
    border-bottom: 3px solid #000000;
    box-shadow: 2px 2px 5px #000000;
    text-shadow: 1px 1px 0px #000000;
    user-select: none;
}

/* Effetto al passaggio del mouse sopra un pulsante del menu (HOVER) */
.menu-btn:hover {
    background: linear-gradient(180deg, #880000 0%, #440000 100%); /* Diventa rosso infuocato */
    color: #ffffff;            /* Il testo diventa bianco */
    border-top: 3px solid #111111;
    border-left: 3px solid #000000;
    border-right: 3px solid #ff3333;
    border-bottom: 3px solid #ff3333;
    text-shadow: 0 0 5px #ff0000; /* Bagliore rosso sul testo */
}

/* Icone dentro i pulsanti del menu */
.btn-icon {
    font-size: 1.2rem;
}


/* =================================================================
   7. WELCOMING CODEX (SEZIONE CENTRALE - BENVENUTO)
   ================================================================= */

/* Contenitore stile pietra/ossidiana gotica */
.codex-box {
    background: linear-gradient(180deg, #120000 0%, #050505 100%);
    border: 4px ridge #990000;  /* Bordo rosso in rilievo */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4), inset 0 0 20px #000000;
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* Titolo "WELCOMING CODEX" */
.codex-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.6rem;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 
        3px 3px 0px #000000, 
        0px 0px 10px #ff0000;   /* Bagliore rosso infuocato */
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px dashed #660000;
    padding-bottom: 12px;
}

/* Testi dei tre paragrafi di benvenuto */
.codex-text {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.5rem;          /* Dimensione grande per facilitare la lettura */
    line-height: 1.7;
    color: #e0e0e0;
    margin: 15px 0;
    text-shadow: 1px 1px 2px #000000;
}

/* Evidenziatore in rosso per le frasi in grassetto <strong> */
.codex-text strong {
    color: #ff3333;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
}

/* Separatore con le spade pixelate (⚔️ ⚔️ ⚔️) */
.pixel-divider {
    text-align: center;
    font-size: 0.9rem;
    color: #888888;
    margin: 15px 0;
    letter-spacing: 5px;
    opacity: 0.7;
}


/* =================================================================
   8. CURRENT SPELLS & RITUALS (TEMA: CYAN ARCANO / MANA DIGITALE)
   ================================================================= */

/* Scatola grande esterna (Sfondo sfumato Blu Scuro / Abisso e bordo Turchese) */
.spells-box {
    background: linear-gradient(180deg, #03141e 0%, #010a10 100%); /* Sfondo sfumato Blu/Abisso scuro */
    border: 4px ridge #006688; /* Bordo turchese scuro in rilievo 3D */
    box-shadow: 
        0 0 15px rgba(0, 229, 255, 0.3), /* Alone turchese brillante attorno alla sezione */
        inset 0 0 15px #000000;
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* Titolo principale ("CURRENT SPELLS & RITUALS") con bagliore neon Cyan Elettrico */
.spells-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 
        3px 3px 0px #000000, 
        0px 0px 10px #00e5ff; /* Bagliore Cyan/Turchese */
    margin-top: 0;
    margin-bottom: 10px;
}

/* Sottotitolo descrittivo (Azzurro ghiaccio e linea tratteggiata turchese) */
.spells-intro {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.2rem;
    color: #80d8ff; /* Azzurro ghiaccio morbido */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px dashed #004d66; /* Linea tratteggiata turchese */
    padding-bottom: 15px;
}

/* Singola scheda progetto (Web Design, Marketing) */
.spell-card {
    background-color: #061824; /* Sfondo blu/grigio scuro notte */
    border: 2px solid #00384d;  /* Bordino turchese scuro */
    border-left: 5px solid #00e5ff; /* Linea verticale Cyan Neon a sinistra */
    padding: 18px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Titolo della scheda (es. "Web Design & CMS Craft") */
.spell-subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.95rem;
    color: #00e5ff; /* Cyan Elettrico brillante */
    margin-top: 0;
    margin-bottom: 12px;
    text-shadow: 1px 1px 0px #000000;
}

/* Testo descrittivo del progetto */
.spell-desc {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #e0f7fa; /* Bianco leggermente intonato all'azzurro */
    margin: 0 0 15px 0;
}

/* Parole chiave in grassetto nella descrizione */
.spell-desc strong {
    color: #80ebd9; /* Verde acqua / Turchese chiaro */
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.4);
}

/* Contenitore dei badge/tag */
.spell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Badge / Tag tecnologici (Cyan Mana style) */
.spell-tag {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #00ffff;            /* Cyan neon stile schermo cyber */
    background-color: #002830; /* Sfondo petrolio scuro */
    border: 1px solid #0088aa;  /* Bordino azzurro brillante */
    padding: 2px 10px;
    border-radius: 3px;
    text-shadow: 0 0 3px #00ffff;
}


/* =================================================================
   9. SEZIONE C: THE OBSIDIAN SHRINE (MEDIA LOG & INTERESSI)
   ================================================================= */

/* 1. SCATOLA GRANDE ESTERNA DEL SANTUARIO */
.shrine-box {
    background: linear-gradient(180deg, #12081a 0%, #050208 100%); /* Sfumatura dal viola scuro al nero ossidiana */
    border: 4px ridge #662288;  /* Bordo stile cristallo viola/ametista in rilievo */
    box-shadow: 
        0 0 20px rgba(136, 34, 204, 0.3),  /* Bagliore violaceo attorno al box */
        inset 0 0 25px #000000;            /* Ombra scura interna per un effetto caverna/santuario */
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* 2. TITOLO PRINCIPALE ("THE OBSIDIAN SHRINE") */
.shrine-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;                   /* Dimensione del titolo */
    color: #f0d5ff;                      /* Viola/rosa chiarissimo quasi luminoso */
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 
        3px 3px 0px #000000,              /* Ombra nera 3D */
        0px 0px 12px #aa22ff;             /* Bagliore neon violaceo */
    margin-top: 0;
    margin-bottom: 5px;
}

/* 3. SOTTOTITOLO ("SACRED MEDIA LOG...") */
.shrine-intro {
    font-family: 'VT323', monospace;      /* Font stile terminale retrò */
    font-size: 1.2rem;
    color: #bb88ee;                      /* Lilla/viola medio */
    text-align: center;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 25px;
}

/* 4. STRUTTURA A GRIGLIA (3 COLONNE PER I 3 ALTARI) */
.shrine-grid {
    display: flex;                        /* Mette le 3 colonne affiancate */
    flex-wrap: wrap;                      /* Se lo schermo è stretto (smartphone), le fa andare a capo */
    gap: 15px;                            /* Spazio tra un altare e l'altro */
    justify-content: space-between;
}

/* 5. SINGOLO ALTARE (MATTONELLA IN CUI È DIVISO OGNI INTERESSE) */
.shrine-altar {
    flex: 1 1 250px;                      /* Permette alle colonne di adattarsi allo spazio (minimo 250px) */
    background: #0d0814;                  /* Fondo scuro melanzana/ossidiana */
    border: 2px solid #2a153d;            /* Bordino viola scuro */
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;            /* Rende l'animazione al passaggio del mouse fluida */
    position: relative;
}

/* EFFETTO HOVER GENERICO SUGLI ALTARI */
.shrine-altar:hover {
    transform: translateY(-4px);          /* Solleva leggermente l'altare verso l'alto */
}

/* 6. PERSONALIZZAZIONE DEL BORDINO E ALONE PER CIASCUN ALTARE */

/* Altare Cinema (Rosso Sangue) */
.altar-cinema {
    border-top: 4px solid #ff2244;       /* Linea superiore rossa */
}
.altar-cinema:hover {
    box-shadow: 0 0 15px rgba(255, 34, 68, 0.4); /* Alone rosso quando ci passi sopra */
}

/* Altare Musica (Viola Ametista) */
.altar-music {
    border-top: 4px solid #aa22ff;       /* Linea superiore viola neon */
}
.altar-music:hover {
    box-shadow: 0 0 15px rgba(170, 34, 255, 0.4); /* Alone viola quando ci passi sopra */
}

/* Altare Libri (Bronzo / Oro Antico) */
.altar-books {
    border-top: 4px solid #ddaa33;       /* Linea superiore dorata */
}
.altar-books:hover {
    box-shadow: 0 0 15px rgba(221, 170, 51, 0.4); /* Alone dorato quando ci passi sopra */
}

/* 7. INTESTAZIONE INTERNA ALL'ALTARE (ICONIC & TITOLO) */
.altar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #3a2055;    /* Linea tratteggiata che separa il titolo */
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.altar-icon {
    font-size: 1.3rem;                    /* Dimensione dell'emoji/icona */
}

.altar-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;                   /* Titolo compatto per entrare perfettamente nella colonna */
    color: #ffffff;
    margin: 0;
}

/* 8. TESTO DESCRITTIVO DELL'ALTARE */
.altar-desc {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.05rem;
    color: #aaaaaa;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* 9. ELENCO PUNTATO DEGLI INTERESSI */
.shrine-list {
    list-style: none;                     /* Rimuove i pallini standard dell'elenco */
    padding: 0;
    margin: 0 0 20px 0;
    font-family: 'MedievalSharp', cursive;
    font-size: 1.1rem;
    color: #dddddd;
}

.shrine-list li {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
    line-height: 1.4;
}

/* Freccetta o simbolo personalizzato prima di ogni punto dell'elenco */
.shrine-list li::before {
    content: "◈";                         /* Simbolo a diamante mistico */
    position: absolute;
    left: 0;
    color: #bb66ff;                       /* Diamantino di colore viola */
    font-size: 0.8rem;
    top: 2px;
}

/* Evidenziazione in grassetto dei titoli degli interessi */
.shrine-list strong {
    color: #ffffff;
    text-shadow: 1px 1px 2px #000000;
}

/* 10. BADGE STATUS IN FONDO A OGNI ALTARE */
.altar-badge {
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    text-align: center;
    padding: 4px;
    border-radius: 2px;
    letter-spacing: 1px;
    font-weight: bold;
}

.badge-cinema {
    background-color: #33000a;
    color: #ff6688;
    border: 1px solid #880022;
}

.badge-music {
    background-color: #1a0033;
    color: #dd88ff;
    border: 1px solid #6600aa;
}

.badge-books {
    background-color: #221800;
    color: #ffee88;
    border: 1px solid #886600;
}

/* 11. CITAZIONE DI CHIUSURA IN FONDO AL SANTUARIO */
.shrine-quote {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.1rem;
    font-style: italic;
    color: #8866aa;                       /* Viola tenue */
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #221133;         /* Linea divisoria scura */
}


/* =================================================================
   10. BADGE WALL 88x31 (SIDEBAR DESTRA)
   ================================================================= */

/* Scatola esterna del Badge Wall */
.badge-wall-box {
    background-color: #0d0000; /* Fondo scuro rosso-nero */
    border: 4px ridge #990000;  /* Bordo rosso in rilievo */
    box-shadow: 
        0 0 10px #000000, 
        0 0 12px rgba(255, 0, 0, 0.4); /* Alone rosso di sfondo */
    padding: 10px;
    margin-top: 20px;           /* Distanza dal lettore Winamp */
    box-sizing: border-box;
    text-align: center;
}

/* Titolo in alto nella cornice ("BADGE WALL 88x31") */
.badge-wall-title {
    background: linear-gradient(90deg, #990000, #330000);
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 5px;
    text-align: center;
    border: 1px solid #000000;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* Griglia flessibile che affianca i bottoni */
.badge-grid {
    display: flex;
    flex-wrap: wrap;             /* Mette i badge a capo quando finisce lo spazio */
    justify-content: center;      /* Centra i bottoni nella griglia */
    gap: 8px;                    /* Spazio di 8px tra un bottone e l'altro */
}

.badge-grid img {
    max-width: 100%;            /* Non esce dai bordi della sidebar */
    height: auto;               /* L'altezza si calcola da sola */
    display: block;
    image-rendering: pixelated; /* Nitidezza pixel art */
    image-rendering: crisp-edges;
    border: 1px solid #333333;
    box-sizing: border-box;
}

/* Effetto hover badge */
.badge-grid a:hover img {
    border-color: #ff0000;       /* Bordo rosso brillante */
    box-shadow: 0 0 8px #ff0000;  /* Alone luminoso rosso */
    transform: scale(1.05);      /* Ingrandimento leggero */
}


/* =================================================================
   11. THE ARCHMAGE'S MANIFESTO (VARIANTE VERDE VELENO)
   ================================================================= */

.manifesto-box {
    background: linear-gradient(180deg, #001405 0%, #000000 100%);
    border: 4px ridge #008822;
    box-shadow: 
        0 0 15px rgba(0, 255, 102, 0.35), 
        inset 0 0 20px #000000;
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.manifesto-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 
        3px 3px 0px #000000, 
        0px 0px 10px #00ff66;
    margin-top: 0;
    margin-bottom: 5px;
}

.manifesto-subtitle {
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: #33cc33;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(51, 204, 51, 0.5);
}

.manifesto-meta {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #001f07;
    border: 1px solid #005511;
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #aaffbb;
    margin-bottom: 20px;
}

.manifesto-meta strong {
    color: #00ff66;
}

.manifesto-text {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #d8ffd8;
    margin: 15px 0;
    text-shadow: 1px 1px 2px #000000;
}

.manifesto-text strong {
    color: #00ff66;
    text-shadow: 0 0 5px rgba(0, 255, 102, 0.5);
}

.manifesto-quote {
    background-color: #001405;
    border-left: 4px solid #00ff66;
    border-right: 1px solid #004411;
    border-top: 1px solid #004411;
    border-bottom: 1px solid #004411;
    padding: 12px 18px;
    margin: 20px 0;
    font-family: 'MedievalSharp', cursive;
    font-size: 1.2rem;
    font-style: italic;
    color: #b3ffcc;
    box-shadow: inset 0 0 10px #000000;
}

.manifesto-footer {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #00ff66;
    text-align: right;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #005511;
    letter-spacing: 1px;
}


/* =================================================================
   12. GUESTBOOK WIDGET (SIDEBAR DESTRA)
   ================================================================= */

/* Box esterno del widget */
.guestbook-widget-box {
    background-color: #0d0000;
    border: 4px ridge #990000;
    box-shadow: 
        0 0 10px #000000, 
        0 0 12px rgba(255, 0, 0, 0.4);
    padding: 10px;
    margin-top: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* Intestazione stile Arcade */
.guestbook-widget-title {
    background: linear-gradient(90deg, #990000, #330000);
    color: #ffffff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 5px;
    text-align: center;
    border: 1px solid #000000;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Pulsante cliccabile del Guestbook */
.guestbook-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 12px 8px;
    background: linear-gradient(180deg, #1a0000 0%, #050000 100%);
    border: 2px ridge #660000;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Effetto al passaggio del mouse sul pulsante */
.guestbook-link:hover {
    background: linear-gradient(180deg, #440000 0%, #1a0000 100%);
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
}

/* Gestione icona (Emoji o Immagine GIF) */
.guestbook-pixel-icon {
    font-size: 2.8rem;
    display: block;
    line-height: 1;
    transition: transform 0.2s ease;
}

.guestbook-icon-container img {
    width: 48px;
    height: 48px;
    display: block;
    image-rendering: pixelated;
    transition: transform 0.2s ease;
}

/* Animazione di ingrandimento dell'icona all'hover */
.guestbook-link:hover .guestbook-pixel-icon,
.guestbook-link:hover .guestbook-icon-container img {
    transform: scale(1.15);
}

/* Scritta principale */
.guestbook-action-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #ff3333;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
    margin-top: 4px;
    line-height: 1.3;
}

/* Sottotitolo descrittivo */
.guestbook-subtext {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: #888888;
}

/* Cambi di colore al passaggio del mouse */
.guestbook-link:hover .guestbook-action-text {
    color: #ffffff;
    text-shadow: 0 0 5px #ff0000;
}

.guestbook-link:hover .guestbook-subtext {
    color: #ffaaaa;
}


/* =================================================================
   13. THE CRYSTAL BALL / ORACOLO DEL GIORNO
   ================================================================= */

/* Contenitore principale */
.crystal-ball-widget {
    background: linear-gradient(180deg, #050010 0%, #000000 100%);
    border: 4px ridge #00e5ff;
    box-shadow: 
        0 0 15px rgba(0, 229, 255, 0.3), 
        inset 0 0 20px #000000;
    padding: 20px;
    margin-bottom: 25px;
    box-sizing: border-box;
    text-align: center;
}

.crystal-widget-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000, 0px 0px 8px #00e5ff;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.crystal-subtext {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #88ffff;
    margin-bottom: 15px;
}

/* Pulsante interattivo della sfera */
.crystal-ball-container {
    display: inline-block;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.2) 0%, transparent 70%);
    transition: transform 0.2s ease, filter 0.2s ease;
    user-select: none;
}

.crystal-ball-container:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 15px #00e5ff);
}

.crystal-ball-container:active {
    transform: scale(0.95);
}

.crystal-orb {
    font-size: 3.8rem;
    display: block;
    line-height: 1;
    animation: orbPulse 3s infinite ease-in-out;
}

/* Animazione di pulsazione magica */
@keyframes orbPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.9));
        transform: scale(1.05);
    }
}

/* Box di risposta dinamica per l'oracolo */
.crystal-response-box {
    display:none;
    margin-top: 15px;
    padding: 12px;
    background-color: #03141e;
    border: 1px dashed #00e5ff;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: #80d8ff;
    min-height: 40px;
    box-sizing: border-box;
}

/* Mostra il box quando viene attivato da JavaScript */
.crystal-response-box.active {
    display: block;
}


/* =================================================================
   14. RESPONSIVE DESIGN (ADATTAMENTO MOBILI E TABLET)
   ================================================================= */

@media (max-width: 900px) {
    .site-layout {
        flex-direction: column;
        align-items: center;
    }

    .sidebar-left,
    .sidebar-right,
    .main-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .retro-header {
        flex-direction: column;
        text-align: center;
    }

    .header-title {
        font-size: 1.2rem;
    }

    .shrine-grid {
        flex-direction: column;
    }
}

/* Overlay scuro a tutto schermo (nascosto di default) */
#oracle-modal.oracle-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Stato visibile attivato da JavaScript */
#oracle-modal.oracle-modal-overlay.active {
    display: flex !important;
}

/* Box della finestra del pop-up */
.oracle-modal-box {
    background: #050010;
    border: 4px ridge #00e5ff;
    padding: 25px 20px;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
    text-align: center;
    max-width: 450px;
    width: 90%;
    position: relative;
    box-sizing: border-box;
}

/* Pulsante di chiusura (X) in alto a destra */
.oracle-modal-close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #1a0000;
    color: #ff3333;
    border: 1px solid #ff3333;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 3px 7px;
    cursor: pointer;
}

.oracle-modal-close-btn:hover {
    background: #ff3333;
    color: #000000;
}

/* Intestazione del pop-up */
.oracle-modal-header {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff;
    margin-top: 10px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* Divisore pixel/icone */
.pixel-divider {
    color: #88ffff;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Testo della profezia */
.oracle-modal-content {
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: #ffffff;
    margin: 20px 0;
    line-height: 1.4;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

/* Pulsante ACCETTA LA PROFEZIA */
.oracle-btn-action {
    background: linear-gradient(180deg, #005577 0%, #002233 100%);
    color: #00e5ff;
    border: 2px ridge #00e5ff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 10px 15px;
    cursor: pointer;
    margin-top: 10px;
    text-shadow: 1px 1px 0 #000000;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.oracle-btn-action:hover {
    background: #00e5ff;
    color: #000000;
    text-shadow: none;
}

/* =================================================================
   SEZIONE COMMENTI (SCROLL OF VOICES)
   ================================================================= */

.comments-box {
    background: linear-gradient(180deg, #0d000d 0%, #030005 100%);
    border: 4px ridge #aa22ff;
    box-shadow: 0 0 15px rgba(170, 34, 255, 0.4), inset 0 0 20px #000000;
    padding: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.comments-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    color: #ffffff;
    text-align: center;
    text-shadow: 2px 2px 0 #000000, 0 0 10px #aa22ff;
    margin-top: 0;
    margin-bottom: 8px;
}

.comments-subtext {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #dd88ff;
    text-align: center;
    margin: 0 0 15px 0;
}

/* Styling del Form */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #06000a;
    border: 2px solid #3a1555;
    padding: 15px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-group label {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #dd88ff;
}

.form-group input,
.form-group textarea {
    background-color: #000000;
    border: 2px solid #662288;
    color: #ffffff;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    padding: 8px 10px;
    outline: none;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #aa22ff;
    box-shadow: 0 0 8px rgba(170, 34, 255, 0.6);
}

.comment-submit-btn {
    background: linear-gradient(180deg, #660099 0%, #330044 100%);
    color: #ffffff;
    border: 2px ridge #aa22ff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 12px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #000000;
    transition: all 0.2s ease;
}

.comment-submit-btn:hover {
    background: #aa22ff;
    color: #000000;
    box-shadow: 0 0 12px #aa22ff;
}

/* Lista Commenti */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.single-comment {
    background-color: #08020c;
    border-left: 4px solid #aa22ff;
    border-top: 1px solid #2a103d;
    border-right: 1px solid #2a103d;
    border-bottom: 1px solid #2a103d;
    padding: 12px;
    box-sizing: border-box;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #441566;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.comment-author-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #ff88ff;
}

.comment-date {
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    color: #888888;
}

.comment-body {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.15rem;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.no-comments {
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: #8866aa;
    text-align: center;
}