/* PIP-BOY 3000 Mk IV - UI STYLESHEET
    Vault-Tec Industries
*/

:root {
    /* Palette Colori Principale */
    --pip-green-bright: #22ff22;
    --pip-green-dim: #1db81d;
    --pip-green-dark: #082d08;
    --pip-green-bg: #030a03;
    --pip-amber: #ffcc00;
    --pip-white: #e0ffe0;
    --pip-screen: #050505;

    /* Colori Stato e Footer */
    --pip-footer-bg: var(--pip-green-bright);
    --pip-footer-text: #050505;

    /* Effetti Monitor */
    --scanline-color: rgba(18, 16, 16, 0.1);
    --crt-glow: rgba(34, 255, 34, 0.05);
    --vignette-color: rgba(0, 0, 0, 0.6);
    --screen-reflection: rgba(255, 255, 255, 0.03);

    /* Layout */
    --border-width: 2px;
}

/* Impedisce la selezione del testo e il trascinamento delle immagini */
body {
    -webkit-user-select: none;  /* Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE10+ */
    user-select: none;          /* Standard */
}

/* Impedisce specificamente il trascinamento delle immagini (evita che appaia l'ombra dell'immagine mentre la trascini) */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* Reset e Struttura Base */
* {
    box-sizing: border-box;
    cursor: crosshair; /* Tocco stile terminale */
}

body, html {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: var(--pip-green-bright);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden; /* Gestiamo lo scroll internamente */
    height: 100vh;
    width: 100vw;
}

/* --- EFFETTI CRT (Scanlines, Curve, Overlay) --- */

#crt-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Effetto Sferico Fisheye */
    transform: perspective(1000px) rotateX(1deg) scale(1.02);
    display: block;
}

/* La Scocca (Predisposizione Immagine PNG) */
#pipboy-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none; /* Trasparente all'interazione */
    /* background-image: url('../assets/pipboy_frame.png'); /* DA AGGIUNGERE */
    background-size: 100% 100%;
    box-shadow: inset 0 0 100px var(--vignette-color);
}

/* Scanlines e Flicker */
#crt-container::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(var(--scanline-color) 50%, rgba(0, 0, 0, 0) 50%);
    background-size: 100% 4px;
    z-index: 90;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}
#crt-container::after {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 95;
pointer-events: none;
background: linear-gradient(to bottom,
                            transparent 0%,
                            rgba(34, 255, 34, 0.03) 50%,
                            transparent 100%);
background-size: 100% 20px;
animation: scanline-move 8s linear infinite;
}

@keyframes scanline-move {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* --- LAYOUT SPA --- */

#screen-content {
    padding: 40px 60px;
    height: 100%;
    display: block;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pip-green-dim) transparent;
    mask-image: radial-gradient(circle, black 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
}
#screen-content::-webkit-scrollbar {
width: 8px;
}

#screen-content::-webkit-scrollbar-track {
background: var(--pip-green-dark);
}

#screen-content::-webkit-scrollbar-thumb {
background: var(--pip-green-bright);
border-radius: 0px;
}

#screen-content::-webkit-scrollbar-thumb:hover {
background: var(--pip-white);
}

/* Header & Menu */
header {
    margin-bottom: 2vmin;
    /* Rimosso il border-bottom globale */
    /*position: fixed;
    top: 0;
    left: 0; */
}

.menu-row {
    display: block;
    width: 100%;
    /* margin-bottom: 10px;*/
}
.menu-row#main-nav {
    display: flex;
    justify-content: space-around; /* Distanzia le tessere */
    padding: 0 40px;
    /* La linea verde ora è legata alla riga, non all'header */
    border-bottom: 2px solid var(--pip-green-bright);
}

.menu-btn {
    display: inline-block;
    padding: 8px 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--pip-green-dim);
    text-decoration: none;
    position: relative;
    top: 2px; /* Allinea il bottone sopra la linea di bordo */
    transition: all 0.1s;
}

/* Tab Attivo: crea l'effetto scasso nella linea */
/* Tab Attivo: effetto segmentato Pip-Boy 3000 Mk IV */
/* --- CORREZIONE TAB MECCANICI --- */
/* --- FIX TAB ATTIVO --- */
.menu-btn.active {
    color: var(--pip-green-bright);
    text-shadow: 0 0 8px var(--pip-green-bright);
    background: transparent;
    border: none;
    border-bottom: 2px solid #000;
    position: relative;
    z-index: 10;
}

.menu-btn.active::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -2px;
    height: 15px; /* Altezza fissa bordi laterali */
    border-left: 2px solid var(--pip-green-bright);
    border-right: 2px solid var(--pip-green-bright);
    pointer-events: none;
}

.menu-btn.active::after {
    content: "";
    position: absolute;
    /* La connessione perfetta: altezza del before + spessore linea */
    bottom: 13px;
    left: -2px;
    right: -2px;
    height: 2px;
    background: linear-gradient(to right,
                                var(--pip-green-bright) 10px,
                                transparent 10px,
                                transparent calc(100% - 10px),
                                var(--pip-green-bright) 10px
    );
}
.menu-row#sub-nav {
    min-height: 40px; /* Mantiene lo spazio anche se vuoto (es. su STAT) */
    padding: 5px 60px;
    display: flex;
    gap: 15px;
}

.menu-row#sub-nav .menu-btn {
    border: none; /* I sub-menu non hanno i bordi delle tessere */
    font-size: 0.9em;
    top: 0;
}

.menu-btn:hover {
    /* background: var(--pip-green-dark); /* per inserire il bg hover verde scuro di sfondo */
    text-shadow: 0 0 8px var(--pip-green-bright);
}

/* Sezione Centrale */
main {
    min-height: 60vmin;
}

/* Footer */
footer {
    position: fixed;
    bottom: 0px;
    left: 10px;
    right: 10px;
    background: var(--pip-green-dark); /* Sfondo verde scuro/spento */
    /* border: 1px solid var(--pip-green-dim); /* Leggera cornice */
    color: var(--pip-green-bright); /* Testi verdi brillanti */
    padding: 0; /* Gestito dalle colonne */
    font-weight: bold;
    display: block;
    z-index: 80;
}


#current-time {
display: inline-block;
margin-left: 30px;
}

#ap-current-container {
margin-right: 30px; /* Più a sinistra dal bordo */
text-align: right;
}

.footer-inner {
    display: flex;
    width: 100%;
    align-items: center;
    height: 10vmin;
}
.footer-col {
    flex: 1;
    display: flex;
    align-items: center; /* Centra contenuto colonna */
    justify-content: center; /* Centra orizzontalmente */
    height: 100%;
    border-left: 3px solid #000;
}

/* Forza il colore degli AP e dell'Ora */
#current-time, #ap-current, #level-num {
color: var(--pip-green-bright);
}
/* --- PROPORZIONI FOOTER --- */
.footer-col:nth-child(1) { flex: 1; } /* Ora */
.footer-col:nth-child(2) { flex: 3; padding-left: 5vmax; padding-right: 5vmax;} /* Barra (Prende 3 volte lo spazio) */
.footer-col:nth-child(3) { flex: 1; } /* AP */

.level-bar-container {
    width: 80%;
    height: 12px;
    border: 1px solid var(--pip-green-bright);
    background: #000;
    display: block; /* Assicura che esista */
    margin: 0 auto;
}

.level-bar-fill {
    height: 100%;
    background: var(--pip-green-bright);
}

/* --- ELEMENTI HOME (STAT) --- */


/* --- LAYOUT ADATTIVO HOME --- */
/* --- LAYOUT ADATTIVO HOME (STAT) --- */
#view-port {
height: calc(100vmin - 180px) !important;
display: flex;
flex-direction: column; /* Desktop: Alto (Boy) -> Basso (Grid) */
/* justify-content: space-between;*/
padding: 10px 0;
position: relative;
}

.boy-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vmin;
    margin: 10px 0;
}

#vault-boy {
z-index: 1000;
pointer-events: auto;
height: 100%;
width: auto;
filter: brightness(1.2) contrast(1.5) saturate(1.4);
}

.status-grid {
    display: flex;
    width: 95%;
    max-width: 800px;
    margin: 10px auto;
    gap: 8px;
    justify-content: center;
}

.status-box {
    flex: 1;
    background: var(--pip-green-dark);
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Desktop: Icona sopra testo */
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.status-box .status-icon {
    font-size: 4vmin;
    color: var(--pip-green-bright) !important;
    margin-bottom: 5px !important;
    display: block;
}

/* Effetto quando la torcia è accesa (grazie alla classe .active che aggiunge il py) */
#torch-btn.active .status-icon {
color: var(--pip-green-bright) !important;
filter: drop-shadow(0 0 8px var(--pip-green-bright));
transform: scale(1.1); /* Leggera pulsazione */
}

.status-data {
    font-size: 1.4vmin;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- FIX MOBILE: STATS A SINISTRA, BOY A DESTRA --- */
@media screen and (max-width: 950px) and (max-height: 950px) and (pointer: coarse)  { /*  */

    #view-port {
    height: calc(100vmin - 200px) !important;
    padding: 0;
    }
    .status-grid {
        position: fixed;
        top: 28vmin;
        left: 10vmin;
        flex-direction: column; /* Colonna verticale a sinistra */
        width: fit-content;
        max-width: 30vw;
        margin: 0;
        gap: 4px;
    }

    .status-box {
        flex-direction: row;
        justify-content: flex-start;
        padding: 5px 10px;
        min-height: 45px;
        width: 100%;
    }

    .status-box .status-icon {
        font-size: 6vmin !important;
        margin: 0 !important;
    }

    .status-data {
        display: none;
        /* font-size: 2vmin;
        text-align: left; */
    }
    #browser-ver, #hw-cores {display: none;}
    #torch-btn {display: block !important;}
}


.os-icon {
    font-size: 20px;
    display: block;
}
.status-icon {
    font-size: 28px; /* Dimensione dell'icona */
    color: var(--pip-footer-text); /* Sarà nera sullo sfondo verde */
    display: block;
    margin: 0 auto 5px auto;
    /* Rimuovi il filter: brightness(0) se lo avevi messo per le immagini,
     *      qui basta il colore del testo */
}

/*
.verde {
    filter: brightness(0) saturate(100%)
    invert(0%) sepia(0%) saturate(100%) hue-rotate(63deg) brightness(100%) contrast(100%)
    drop-shadow(0 0 3px var(--pip-green-dim));
    transition: filter 0.2s ease-in-out;
}/* */


.bianco-verde {
    /* 1. Portiamo il bianco a un grigio medio per poterlo colorare */
    filter: brightness(0.5)
    /* 2. Sepia fornisce la base calda/marrone necessaria per virare al colore */
    sepia(1)
    /* 3. Saturazione estrema per rendere il colore vivido */
    saturate(1000%)
    contrast(100%)
    /* 4. Hue-rotate a circa 65-70 gradi sposta il marrone/giallo verso il verde neon */
    hue-rotate(65deg);

    transition: filter 0.3s ease;
}

.verde {
    /* 1. Portiamo l'immagine a un colore base (se è nera o colorata) */
    filter: brightness(0) saturate(100%)
    /* 2. Iniettiamo il colore verde tramite i filtri */
    invert(65%) sepia(91%) saturate(541%) hue-rotate(63deg) brightness(110%) contrast(110%)
    /* 3. Aggiungiamo un leggero bagliore tipico dei fosfori */
    drop-shadow(0 0 3px var(--pip-green-dim));
    transition: filter 0.2s ease-in-out;
}
/* */

    /* Tip & Warnings area */
#event-message {
    margin-top: 5vmin;
    text-align: center;
    font-weight: bold;
    height: 20px;
    text-transform: uppercase;
}

/* --- MEDIA QUERIES (ROTATION) --- */

@media screen and (orientation: portrait) {
    #crt-container {
        transform: rotate(90deg);
        width: 100vh;
        height: 100vw;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50vw;
        margin-left: -50vh;
    }
}
#landscape-prompt {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vmax; height: 100vmin;
background: rgba(0, 5, 0, 0.95);
z-index: 8000;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--pip-green-bright);
text-align: center;
font-family: 'Monaco', 'Courier New', monospace;
}
.boot-btn {
    background: var(--pip-green-bg);
    border: 2px solid var(--pip-green-bright);
    color: var(--pip-green-bright);
    padding: 15px 30px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: bold;
    animation: blink-anim 1s infinite;
}
@media screen and (max-device-height: 500px) and (orientation: landscape) {
    /* Se non siamo già in fullscreen, mostriamo il prompt */
    :not(:fullscreen) #landscape-prompt {
        display: flex;
    }
}

/* Stili specifici per pagina di scelta mods */
.selection-wrapper {
    text-align: center;
    padding-top: 1vmin; /* 20px; */
}

.terminal-header-mini {
    color: var(--pip-green-bright);
    margin-bottom: 3vmin;
    font-size: 3.5vmin;
    text-shadow: 0 0 5px var(--pip-green-dim);
}

/* --- FIX MODS CHOICE --- */
.choice-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    flex-wrap: wrap; /* Su mobile vanno a capo */
}
.choice-card {
    flex: 0 1 20vmin; /* Dimensione flessibile basata sul display */
    min-width: 150px;
    background: var(--pip-green-dark);
    border: 2px solid var(--pip-green-dim);
    padding: 15px 5px;
}



.choice-card i, .choice-card .status-icon {
    font-size: 6vmin !important;
    height: auto;
    margin: 0 auto 8px auto;
}

.choice-card .status-icon,
.choice-card .verde {
    height: 40px !important; /* Dimensione controllata */
    width: auto;
    margin: 0 auto 10px auto;
}

/* Rimuove sottolineatura e blu dai link delle card */
a.choice-card,
a.choice-card:link,
a.choice-card:visited,
a.choice-card:hover,
a.choice-card:active {
    text-decoration: none !important;
    color: var(--pip-green-bright); /* Forza il verde invece del blu */
    outline: none; /* Rimuove il bordo di focus se presente */
}

/* Assicuriamoci che anche l'etichetta interna sia pulita */
.choice-label {
    text-decoration: none !important;
    display: block; /* Aiuta a gestire meglio lo spazio */
}

.choice-label {
    font-size: 0.9em;
    color: var(--pip-green-bright);
    text-decoration: none !important;
}

.choice-label * {
    text-decoration: none !important;
}

/* Al passaggio del mouse si "accendono" */
.choice-card:hover {
    background: var(--pip-green-dim);
    box-shadow: 0 0 15px var(--pip-green-bright);
}
.choice-card:hover .choice-label {
    color: #000;
}

.choice-card:active {
    transform: scale(0.95);
}

.info-footer-choice {
    margin-top: 40px;
    font-size: 0.8em;
    color: var(--pip-green-dim);
    border-top: 1px solid var(--pip-green-dim);
    display: inline-block;
    padding-top: 10px;
}


/* --- STILI SEZIONE SERVER --- */

.terminal-header-mini {
    color: var(--pip-green-bright);
    margin-bottom: 0;
    font-size: 2.5vmin;
    text-shadow: 0 0 5px var(--pip-green-dim);
    border-bottom: 1px solid var(--pip-green-dark);
    padding-bottom: 5px;
    text-transform: uppercase;
}

/* Contenitore centrale per dati tipo terminale */
.data-display-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 1vmin;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid var(--pip-green-dark);
}

.status-value {
    font-size: 4vmin;
    font-weight: bold;
    letter-spacing: 2px;
}

.log-text {
    font-size: 2.3vmin;
    color: var(--pip-green-dim);
    line-height: 1.6;
}

.highlight-amber {
    color: var(--pip-amber);
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* Footer informativo specifico della sezione */
.info-footer-data {
    margin-top: auto;
    font-size: 1.5vmin;
    color: var(--pip-green-dark);
    border-top: 1px solid var(--pip-green-dark);
    padding-top: 10px;
    text-transform: uppercase;
}


/* --- SILO CODES SPECIFIC --- */

.silo-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2vmin;
}

.silo-card {
    flex: 1;
    max-width: 200px;
    background: var(--pip-green-dark);
    border: 2px solid var(--pip-green-dim);
    padding: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.silo-name {
    font-size: 3.5vmin;
    color: var(--pip-green-bright);
    border-bottom: 1px solid var(--pip-green-dim);
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.silo-code {
    font-size: 3.5vmin;
    font-weight: bold;
    color: var(--pip-white);
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--pip-white);
}

/* Effetto errore per codici mancanti */
.code-error {
    color: #ff3333 !important;
    text-shadow: 0 0 8px #ff3333 !important;
    font-size: 1.5vmin;
}


/* --- TABLES & LISTS (Fallout Style) --- */

.pip-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1vh;
    font-size: 3.2vmin;
}

.pip-table th {
    text-align: left;
    background: var(--pip-green-dark);
    color: var(--pip-green-bright);
    padding: 1vmin;
    border: 1px solid var(--pip-green-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pip-table td {
    padding: 1vmin; /*12px 10px; */
    border-bottom: 1px dashed var(--pip-green-dark);
    color: var(--pip-green-dim);
}

/* Riga evidenziata (Stato Attivo) */
.pip-table tr.active-row {
    background: rgba(34, 255, 34, 0.1);
    outline: 1px solid var(--pip-green-bright);
}

.pip-table tr.active-row td {
    color: var(--pip-green-bright);
    text-shadow: 0 0 5px var(--pip-green-bright);
}

/* Badge Fallout Style */
.pip-badge {
    background: var(--pip-green-bright);
    color: #000;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 1.4vmin;
    text-transform: uppercase;
    margin-left: 10px;
}

.blink-anim {
    animation: blink-effect 1.5s step-start infinite;
}
.minerva-mobile {display: flex; align-items: flex-start; gap: 20px; margin-bottom: 15px;}

@media screen and (max-width: 950px) and (max-height: 950px) and (pointer: coarse) {
    .minerva-mobile {
        display: none !important;
    }
}
@keyframes blink-effect {
    50% { opacity: 0; }
}








/* --- CALENDAR & QUEST LOG STYLE --- *

.event-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.quest-item {
    background: rgba(34, 255, 34, 0.05);
    border: 1px solid var(--pip-green-dark);
    padding: 10px 15px;
    position: relative;
    transition: all 0.2s;
}

.quest-item:hover {
    background: rgba(34, 255, 34, 0.1);
    border-color: var(--pip-green-dim);
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--pip-green-dark);
    margin-bottom: 5px;
    padding-bottom: 3px;
}

.quest-title {
    font-weight: bold;
    font-size: 1.8vmin;
    text-transform: uppercase;
}

.quest-date {
    font-size: 1.4vmin;
    color: var(--pip-green-dim);
    font-family: monospace;
}

.quest-desc {
    font-size: 1.5vmin;
    color: var(--pip-green-dim);
    line-height: 1.2;
}

/* Indicatore di evento attivo (tipo quest selezionata) */
.quest-active-marker {
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pip-green-bright);
    font-size: 20px;
    display: none;
}

.quest-item:hover .quest-active-marker {
    display: block;
}









.event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne */
    gap: 10px;
    margin-top: 10px;
}

.event-cell {
    display: flex;
    align-items: center;
    background: rgba(34, 255, 34, 0.03);
    border: 1px solid var(--pip-green-dark);
    padding: 8px;
    height: 60px; /* Altezza fissa per simmetria */
    overflow: hidden;
}

.event-icon-box {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*
.event-icon-box img {
    max-width: 100%;
    max-height: 100%;
    filter: brightness(0) saturate(100%) invert(80%) sepia(50%) saturate(1000%) hue-rotate(60deg);
}

/* */

.event-icon-box img {
    max-width: 100%;
    max-height: 100%;
    /* Questo mix trasforma i colori in scala di verde mantenendo i contrasti */
    filter: sepia(100%) hue-rotate(60deg) saturate(300%) brightness(0.9) contrast(1.2);
    /* Se l'icona è originariamente nera, aggiungi 'invert(1)' prima di sepia */
}

.event-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-cell-title {
    font-weight: bold;
    font-size: 3vmin;
    text-transform: uppercase;
    color: var(--pip-green-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-cell-date {
    font-size: 2vmin;
    color: var(--pip-green-dim);
    font-family: monospace;
}














/* Container Principale Loading */
.loading-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
}

/* Logo Vault-Tec Centrale */
.vault-tec-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 10vmin));
    width: 15vmin;
    height: 15vmin;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vault-logo-loading {
    width: auto;
    height: 40vmin;
    z-index: 10;
    /* Applica il tuo filtro verde/bianco
    filter: sepia(100%) hue-rotate(60deg) saturate(300%) brightness(1.2);*/
}

/* Onde Radar (Pseudo-elementi simulati con div) */
.radar-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1vmin solid var(--pip-green-bright);
    border-radius: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: 5;
}

.wave-1 {
    animation: radar-expand 3s linear infinite;
}

.wave-2 {
    animation: radar-expand 3s linear infinite 1s; /* Asincrono */
}

@keyframes radar-expand {
    0% { width: 0; height: 0; opacity: 0.8; }
    100% { width: 25vmin; height: 25vmin; opacity: 0; }
}

/* Vault Boy a Destra */
.vault-boy-ok {
    position: absolute;
    right: 0;
    bottom: 10%;
    height: 40vmin;
    /* filter: sepia(100%) hue-rotate(60deg) saturate(200%); */
    filter: sepia(10%) saturate(80%);
    z-index: 2;
}

/* Testo in basso */
.stand-by-text {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Monospace', sans-serif;
    font-size: 3vmin;
    letter-spacing: 5px;
    color: var(--pip-green-bright);
    text-shadow: 0 0 10px var(--pip-green-dark);
}

/* Barra di caricamento discreta in fondo */
.loading-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 255, 0, 0.1);
}

.loading-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--pip-green-bright);
    box-shadow: 0 0 10px var(--pip-green-bright);
    transition: width 0.4s ease;
}


















/* --- VAULT-TEC UNIFIED TABLE SYSTEM --- */

/* Header del Settore */
.terminal-header {
    border-bottom: var(--border-width) solid var(--pip-green-dark);
    margin-bottom: 15px;
    padding-bottom: 8px;
    color: var(--pip-amber);
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Container per lo scroll (essenziale per non rompere il layout del Pip-Boy) */
.table-container {
    width: 100%;
    max-height: 63vmin;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--pip-green-dark);
    background: var(--pip-green-bg);
}

/* Tabella Principale Database */
.main-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background: transparent;
}

/* Intestazione Colonne */
.main-table th {
    background: var(--pip-green-dark);
    color: var(--pip-amber);
    padding: 10px;
    border: 1px solid var(--pip-green-bg);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* Celle Dati */
.main-table td {
    padding: 8px;
    border: 1px solid var(--pip-green-dark);
    color: var(--pip-white);
    vertical-align: middle;
}

/* Effetto Hover Riga */
.main-table tr:hover {
    background: rgba(34, 255, 34, 0.05);
}

/* Badge per Tipologia (Es: Rifles, Heavy, Armor piece) */
.type-badge {
    color: var(--pip-green-bright);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75em;
    background: var(--pip-green-dark);
    padding: 2px 6px;
    border: 1px solid var(--pip-green-dim);
    display: inline-block;
}

/* Immagini Database (Icone Wiki) */
.main-table img {
    max-width: 40px;
    height: auto;
    /* Filtro stile terminale fosfori */
    filter: sepia(110%) hue-rotate(60deg) saturate(200%) brightness(1.0) contrast(1.2);
    display: block;
    margin: 0 auto;
}

/* Utility per integrità dati */
.data-footer {
    margin-top: 1vmin;
    font-size: 0.7em;
    color: var(--pip-green-dim);
    text-transform: uppercase;
    opacity: 0.7;
}

/* Nascondi elementi di disturbo dalla Wiki */
.main-table .msgbox,
.main-table .noprint,
.main-table .metadata,
.main-table .editsection {
    display: none;
}

/* Personalizzazione scrollbar per stile CRT */
.table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-container::-webkit-scrollbar-track {
    background: var(--pip-green-bg);
}
.table-container::-webkit-scrollbar-thumb {
    background: var(--pip-green-dark);
    border: 1px solid var(--pip-green-dim);
}

/* --- ARMOR SPECIFIC UTILITIES --- */

.set-name {
    text-align: left !important;
    color: var(--pip-green-bright) !important;
    font-weight: bold;
    text-transform: uppercase;
}
.summary-note {
    color: var(--pip-amber);
    font-size: 0.75em;
    margin-top: 1vmin;
    font-style: italic;
}
.text-center { text-align: center !important; }

.table-header {
    color: var(--pip-amber);
    margin-bottom: 0;
    font-size: 2vmin;
    text-shadow: 0 0 5px var(--pip-green-dim);
}


/* Gestione liste dentro le tabelle (per Special Effects) parmor*/
.main-table ul {
    margin: 0;
    padding-left: 15px;
    list-style-type: square;
}

.main-table li {
    font-size: 0.85em;
    color: var(--pip-green-dim);
    margin-bottom: 2px;
}


/* --- MODS SPECIFIC UTILITIES --- */
.star-badge {
    color: var(--pip-amber);
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

.mod-description {
    font-size: 0.85em;
    line-height: 1.3;
    color: var(--pip-white);
}

.mod-notes {
    font-size: 0.8em;
    color: var(--pip-green-dim);
    font-style: italic;
}

/* SPECIAL  TABLE*/

.special-icon {
    width: 25px !important;
    /*filter: none !important; /* Le lettere S.P.E.C.I.A.L. le lasciamo pulite o le filtriamo diversamente */
}

/* Toggle RGB: Quando la tabella ha questa classe, rimuove i filtri alle immagini delle card */
.rgb-mode .perk-card-img {
    filter: none !important;
    border-color: var(--pip-amber) !important;
}

/* Overlay per la selezione SPECIAL */
.special-selector-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    max-height: 65vmin;
    background: rgba(0, 10, 0, 0.9);
    z-index: 100;
    display: flex; align-items: flex start; justify-content: center;
}
.special-selector-content {
    background: var(--pip-green-bg);
    /* width: 60vmax; */
    border: 2px solid var(--pip-green-bright);
    padding: 2vmin;
    text-align: center;
    box-shadow: 0 0 20px var(--pip-green-dark);
}
.special-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2vmin;
    margin: 2vmin 0;
}
.special-btn {
    cursor: pointer;
    border: 1px solid var(--pip-green-dim);
    padding: 10px;
    transition: all 0.2s;
}
.special-btn:hover {
    background: var(--pip-green-dark);
    border-color: var(--pip-green-bright);
}
.special-btn img {
    width: 40px;
    display: block;
    margin-bottom: 5px;
}
.special-btn span { color: var(--pip-green-bright); font-weight: bold; }
.special-btn.all {
    grid-column: span 4;
    font-weight: bold;
    color: var(--pip-amber);
}
.close-btn {
    background: transparent;
    border: 1px solid var(--pip-amber);
    color: var(--pip-amber);
    padding: 5px 15px;
    cursor: pointer;
}
.main-table th.searchable-header {
    position: sticky !important;
    top: 0;
    z-index: 20; /* Più alto per coprire l'input */
}
/* Forza il cursore all'inizio quando si clicca */
#perk-search-input:focus {
outline: none;
}
table#perks-table {
    display: table !important; /* MAI block per le tabelle */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Aiuta a mantenere le larghezze delle colonne fisse */
}

/* Protezione Header */
#perks-table thead {
display: table-header-group !important;
visibility: visible !important;
}
#perks-table th {
min-width: 12%;
cursor: pointer;
}




/* LOADER */
#boot-loader {
position: fixed;
top: 0; left: 0;
width: 100vmax; height: 100vmin;
background: var(--pip-screen);
color: var(--pip-green-bright);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Courier New', monospace;
transition: opacity 1s ease, visibility 1s;
}
#boot-loader video{
position: fixed;
top: 50%; left: 0;
transform: translatey(-50%);
width: 100vmax; height: auto;
z-index: 9000;
transition: opacity 1s ease, visibility 1s;
filter: sepia(90%) hue-rotate(60deg) saturate(200%) brightness(0.9) contrast(1.1);
}

.loading-complete {
opacity: 0;
visibility: hidden;
height: 0;
}

.boot-content {
    position: absolute;
    z-index: 9999;
    width: 80%; max-width: 500px;
    height: fit-content;
    bottom: 23vmin;
}

.load-bar-container {
    background-color: var(--pip-screen);
    position: fixed;
    z-index: 9999;
    top: 80vmin;
    left: 25vmax;
    width: 50vmax;
    height: 3vmin;
    border: 1px solid var(--pip-green-dim);
    padding: 2px;
}

#load-bar {
width: 0%;
height: 100%;
background: var(--pip-green-bright);
transition: width 0.3s ease;
}

.boot-log {
    font-size: 0.8em;
    color: var(--pip-green-dark);
    margin-top: 15px;
}