@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Crimson+Text&display=swap');

/* === GLOBALI === */
body {
    /* NASCONDE IL CURSORE PREDEFINITO DEL SISTEMA SU TUTTA LA PAGINA */
    cursor: none; 
    background: #0a0a0a url('https://www.transparenttextures.com/patterns/black-paper.png') repeat;
    color: #dcdcdc;
    font-family: 'Crimson Text', serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}
a { color: #ff0d0d; text-decoration: none; transition: color 0.3s; }
a:hover { color: #f0f0f0; text-decoration: underline; text-shadow: 0 0 5px #ff0d0d; }
.highlight { color: #ff0d0d; text-shadow: 0 0 5px #900; }
.underline-dotted { text-decoration: none; border-bottom: 1px dotted #ff0d0d; }

/* REGOLA CURSORE: NON MOSTRARE IL PUNTATORE DI SISTEMA NEMMENO SU LINK */
a, button, .menu-item, .board, .dropdown-toggle {
    cursor: none; 
}


/* === Riquadro principale (Container a 3 Colonne) === */
.abyss-container {
    border: 6px ridge #400;
    background: #050000 url(dark-mosaic.png);
    box-shadow: 0 0 40px #900 inset, 0 0 40px #300;
    border-radius: 10px;
    position: relative;
    width: 95%;
    max-width: 1400px;
    margin: 2rem auto;
    padding: 20px;
    animation: flicker 3s infinite;
    
    /* Layout a 3 Colonne */
    display: grid;
    grid-template-columns: 200px 1fr 250px;
    grid-template-areas: "nav-menu main-content sidebar-right"
                         "nav-menu main-content sidebar-right"
                         "footer footer footer";
    gap: 20px;
}
.nav-menu { grid-area: nav-menu; }
.main-content { grid-area: main-content; }
.sidebar-right { grid-area: sidebar-right; }
footer { grid-area: footer; }

.abyss-container::before,
.abyss-container::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    background: url(pixel-skull.gif) no-repeat center/contain;
    opacity: 0.3;
    filter: drop-shadow(0 0 6px #600);
}
.abyss-container::before { top: -20px; left: -20px; transform: rotate(-15deg); }
.abyss-container::after { bottom: -20px; right: -20px; transform: rotate(10deg); }

/* === STILE FINESTRA (Window Box) === */
.window-box {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-bottom: 2px solid #222;
    border-right: 2px solid #222;
    border-style: solid;
    background: #150000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.1) inset;
    border-radius: 0;
    padding: 0;
    margin-bottom: 15px;
}
.window-header {
    background-color: #500;
    color: #f0f0f0;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    padding: 4px 8px;
    margin-bottom: 0;
    border-bottom: 1px solid #700;
    text-shadow: 0 0 8px #f00;
    cursor: grab;
}

/* === MARQUEE CSS === */
.marquee-container {
    overflow: hidden; 
    white-space: nowrap; 
    padding: 0; 
}
.marquee-content {
    display: inline-block;
    animation: marquee-scroll 10s linear infinite;
}
.marquee-content span {
    display: inline-block;
    padding-right: 40px; 
    text-shadow: 0 0 5px #ff0d0d;
}
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}
/* FINE MARQUEE CSS */

.window-box > *:not(.window-header) {
    padding: 0.5rem 1rem;
}
.board > *:not(.window-header) {
    padding: 0;
}


/* === SIDEBAR DI NAVIGAZIONE SINISTRA (.nav-menu) === */
.nav-menu {
    animation: shake 4s infinite;
}
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-item {
    border-bottom: 1px dashed #300;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-item a, .dropdown-toggle {
    display: block;
    padding: 0.5rem 0.8rem;
    color: #dcdcdc;
    /* La regola cursor: none; si applica qui */
}
.menu-item a:hover, .dropdown-toggle:hover {
    background-color: #300;
    color: #ff0d0d;
}
.dropdown-list {
    list-style: circle;
    margin: 0;
    padding: 0.2rem 0 0.5rem 2rem;
    display: none;
    background-color: #100;
}
.playlist-area {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    justify-content: center;
}
.playlist-area img {
    width: 80px;
    height: 80px;
    border: 1px solid #400;
    transition: transform 0.2s;
}
.playlist-area img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #f00;
}


/* === HEADER (WELCOME WINDOW) === */
.welcome-window {
    margin-bottom: 2rem;
    text-align: center;
}
.welcome-window header {
    margin: 0;
    padding: 0;
}
.welcome-window .intro-text {
    padding-bottom: 1rem;
}
header h1 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 3rem;
    margin: 0;
}
header .subtitle {
    font-size: 1rem;
    margin-top: 0.3rem;
}


/* === NUOVO RIQUADRO ABOUT ME (WHO AM I.dat) === */
.about-me-window {
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}
.about-me-window .window-content {
    padding: 1rem;
}
.about-me-window h2 {
    color: #ff0d0d;
    font-size: 1.2rem;
    margin-top: 0;
}
.info-list {
    list-style-type: '⚡ ';
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.info-list li {
    margin-bottom: 0.5rem;
}
.quote-box {
    border-left: 3px solid #600;
    padding-left: 10px;
    font-style: italic;
    color: #aaa;
    margin: 10px 0 0 0;
}
.about-me-window .window-header {
    background-color: #400; 
}


/* === GRIGLIA CONTENUTI PRINCIPALI (.central-grid) === */
.central-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.boards-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.board {
    background: url(black-linen.png) repeat #080000;
    box-shadow: 0 0 20px #400 inset, 0 0 15px #900;
    transition: all 0.3s ease;
    animation: float-board 6s infinite alternate;
    position: relative;
    /* La regola cursor: none; si applica qui */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.board:hover {
    border: 2px outset #ff0d0d;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
}
.board:nth-of-type(5) {
    grid-column: 1 / span 2;
}


/* === SIDEBAR DESTRA (.sidebar-right) === */
.sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-section {
    animation: none;
}
.sidebar-section h3 {
    color: #ff0d0d;
    text-shadow: 0 0 8px #f00;
    margin-top: 0;
}
.pfp {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    border: 2px solid #ff0d0d;
    margin-bottom: 0.5rem;
    animation: pulse 2s infinite;
}

.webring-banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 1rem;
}
.webring-banners img {
    max-width: 88px;
    height: auto;
    border: 1px dashed #400;
}


/* === SHOUTBOX / GUESTBOOK === */
.shoutbox-window {
    margin-top: 1rem;
}
.shoutbox-window .window-header {
    background-color: #600;
}
.shout-entry {
    padding: 5px 10px;
    border-bottom: 1px dashed #300;
}
.shout-entry:last-child {
    border-bottom: none;
}
.shout-entry p {
    margin: 0;
    font-size: 0.95rem;
}
.shout-entry strong {
    color: #ff0d0d;
}
.shout-date {
    float: right;
    color: #777;
    font-size: 0.8rem;
}


/* === Note/Board === */
.notes {
    display: grid;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
}
.note {
    background: rgba(10,0,0,0.9);
    border: 1px solid #600;
    padding: 0.8rem;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(255,0,0,0.5);
    animation: flicker-note 5s infinite;
    text-align: center;
}
.note:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 8px 20px #f00, 0 0 6px #600 inset;
}
.note p { margin: 0 0 0.2rem 0; font-size: 1rem; }
.note .date { font-size: 0.8rem; color: #777; display: block; margin-top: 0.3rem; }

/* === Simboli === */
.symbols {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
    animation: float-symbols 6s infinite alternate;
    color: #ff0d0d;
}

/* === Calendario === */
#calendar {
    margin-top: 0.5rem;
    color: #ff0d0d;
    font-size: 0.9rem;
    border: 1px solid #400;
    border-radius: 6px;
    padding: 0.5rem;
    background: rgba(20, 0, 0, 0.9);
    box-shadow: 0 0 8px #900 inset;
}
#calendar table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
#calendar th { color: #ff0d0d; border-bottom: 1px solid #600; font-size: 0.8rem; }
#calendar td { padding: 4px; color: #ccc; text-align: center; }
#calendar td.today {
    background: #700;
    color: #fff;
    border-radius: 4px;
    text-shadow: 0 0 6px #f00;
}

/* === CURSORE PERSONALIZZATO (Correzione) === */
#custom-cursor {
    position: fixed; 
    top: 0;
    left: 0;
    
    width: 32px; 
    height: 32px; 
    background: url('cursor.gif') no-repeat center center; /* SOSTITUISCI CON IL NOME DEL TUO FILE GIF */
    background-size: contain;
    
    z-index: 9999;
    pointer-events: none; 
    
    transform: translate(-50%, -50%); 
    
    /* Aggiungiamo una transizione e un filtro base */
    transition: transform 0.2s ease-out, filter 0.2s ease-out;
    filter: drop-shadow(0 0 3px #ff0d0d); 
}

/* Nuova classe per l'effetto di interazione (aggiunta da JS) */
.cursor-hover {
    /* Ingresso e Glow più intenso quando è su un elemento cliccabile */
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 0 10px #f00) brightness(1.5);
}

/* Spark style per l'animazione JavaScript */
.spark {
    position: absolute; 
    background: #ff0d0d; 
    border-radius: 50%; 
    opacity: 0.7; 
    pointer-events: none; 
    transition: all 0.5s ease-out; 
    box-shadow: 0 0 5px #ff0d0d; 
}


/* === Footer === */
footer {
    text-align: center;
    color: #aaa;
    border-top: 1px solid #222;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* === Glow Text === */
.glow-text {
    color: #ff0d0d;
    text-shadow: 0 0 10px #900, 0 0 20px #400;
    animation: glow 2s infinite alternate, flicker 3s infinite;
}

/* === Animazioni (@keyframes) === */
@keyframes pulse {0%,100%{transform:scale(1);}50%{transform:scale(1.05);} }
@keyframes shake {0%,100%{transform:translate(0,0);}25%{transform:translate(1px,-1px);}50%{transform:translate(-1px,1px);} }
@keyframes glow {0%{text-shadow:0 0 4px #400;}50%{text-shadow:0 0 20px #ff0d0d;}100%{text-shadow:0 0 4px #400;} }
@keyframes float-board {0%{transform:translateY(0);}50%{transform:translateY(-8px);}100%{transform:translateY(0);} }
@keyframes float-symbols {0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);} }
@keyframes flicker-note {0%,20%,40%,60%,80%,100%{opacity:1;}10%,30%,50%,70%,90%{opacity:0.5;} }

@keyframes marquee-scroll {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%); 
    }
}


/* === Media Queries per schermi più piccoli === */
@media (max-width: 1200px) {
    .abyss-container {
        grid-template-columns: 180px 1fr;
        grid-template-areas: "nav-menu main-content"
                             "sidebar-right main-content"
                             "footer footer";
    }
    .central-grid {
        display: block;
    }
    .sidebar-right {
        width: 100%;
        display: block;
    }
    .boards-area {
        margin-top: 20px;
    }
}

@media (max-width: 800px) {
    .abyss-container {
        grid-template-columns: 1fr;
        grid-template-areas: "nav-menu" "main-content" "sidebar-right" "footer";
        padding: 1rem;
    }
    .boards-area {
        grid-template-columns: 1fr;
    }
    .board:nth-of-type(5) {
        grid-column: 1 / span 1;
    }
    header h1 { font-size: 2rem; }
}