/* ==========================================================================
   1. VARIABLES & BASE
   ========================================================================== */
:root {
    /* Couleurs par défaut (Bleu/Violet Cyber) */
    --win-border: #4444ff;
    --win-header: #000088;
    --taskbar-bg: #000088;
    --main-text: #00FF00;
    
    /* Fond par défaut */
    --bg-color: #000005;
    --bg-image: url('https://www.transparenttextures.com/patterns/stardust.png');
}

* { box-sizing: border-box; }

/* Support pour le scaling proportionnel basé sur 1920x1080 */
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    /* Le background est sur html pour couvrir toute la fenêtre même après scaling */
    background-color: #000; /* Noir pour les bords */
    background-image: var(--bg-image);
    background-repeat: repeat;
    background-attachment: fixed;
}

body {
    margin: 0; padding: 0;
    /* Les dimensions sont définies par le JavaScript de scaling (1920x1080 fixe) */
    /* Pas de min-width/min-height pour permettre au body d'être exactement 1920x1080 */
    overflow: visible;

    /* Pas de background sur body, il est sur html */
    background: transparent;

    color: var(--main-text);
    font-family: 'VT323', monospace;
    position: relative;
    cursor: default;
    user-select: none;

    /* Le transform est appliqué par JavaScript */
    transform-origin: top left;

    /* Double gradient DOS À DOS : fade VERS L'EXTÉRIEUR + VERS L'INTÉRIEUR des bords 1920x1080 */
    box-shadow:
        0 0 200px 100px rgba(0, 0, 0, 1),          /* Fade vers l'extérieur */
        inset 0 0 200px 0 rgba(0, 0, 0, 0.9);      /* Fade vers l'intérieur */
}

/* --- ALERTE RESOLUTION --- */
#resolution-alert {
    display: none; /* Caché par défaut, le JS l'activera si besoin */
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background-color: #000000;
    z-index: 99999999; /* Au-dessus de TOUT (Même du Boot Screen) */
    justify-content: center; align-items: center;
    font-family: 'VT323', monospace;
    text-align: center;
}

#performance-alert {
    display: none; /* Caché par défaut, le JS l'activera si besoin */
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 99999998; /* Juste en dessous de resolution-alert */
    justify-content: center; align-items: center;
    font-family: 'VT323', monospace;
    text-align: center;
}

#performance-alert .alert-box {
    border: 4px double #FFCC00;
    padding: 40px;
    background: rgba(20, 15, 0, 0.95);
    box-shadow: 0 0 50px rgba(255, 204, 0, 0.5);
    max-width: 90%;
}

#performance-alert .alert-box p {
    font-size: 1.4rem;
    color: #FFE066;
}

#performance-alert .alert-box .retro-btn:hover {
    background: #FFCC00;
    color: #000 !important;
}

.alert-box {
    border: 4px double red;
    padding: 40px;
    background: rgba(20, 0, 0, 0.9);
    box-shadow: 0 0 50px red;
    max-width: 90%;
}

.alert-box p {
    font-size: 1.5rem;
    color: #ff5555;
}

.alert-box .retro-btn:hover {
    background: red;
    color: black;
}

/* --- BANDEAU D'AVERTISSEMENT ASPECT RATIO --- */
#aspect-ratio-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.5) 0%, rgba(204, 102, 0, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid rgba(255, 170, 0, 0.6);
    z-index: 999998;
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.warning-content {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'VT323', monospace;
    color: #000;
    font-size: 1.2rem;
}

.warning-icon {
    font-size: 1.5rem;
}

.warning-text {
    flex: 1;
    font-weight: bold;
}

.warning-close {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid #000;
    color: #000;
    font-size: 1.3rem;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'VT323', monospace;
    transition: all 0.2s;
}

.warning-close:hover {
    background: #000;
    color: #ffaa00;
    transform: scale(1.1);
}

/* ==========================================================================
   2. EFFETS VISUELS (CRT & VISUALIZER)
   ========================================================================== */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%),
                linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
    background-size: 100% 3px, 3px 100%;
    z-index: 2147483647; pointer-events: none;
    box-shadow: inset 0 0 150px rgba(0,0,0,0.7);
}

/* --- VISUALIZER --- */
.visualizer-layer {
    position: absolute; 
    
    bottom: 42px;
    left: 0; 
    width: 100%; 
    height: calc(100% - 42px);
    
    z-index: 1; 
    pointer-events: none; 
}
#visuCanvas { display: block; }

/* --- FPS COUNTER --- */
#fps-counter {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #00FF00;
    padding: 5px 10px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    border: 2px solid #00FF00;
    border-radius: 3px;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
}

/* Images flottantes (DVD Screensaver) */
.floating-drawing {
    position: fixed;
    z-index: 2; 
    width: 200px; height: auto;
    pointer-events: none;
    filter: drop-shadow(0 0 5px #00FF00);
}

/* ==========================================================================
   3. BOOT SCREEN & BIOS
   ========================================================================== */
#boot-screen {
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background: #000; color: #fff;
    z-index: 999999; /* Tout devant */
    font-family: 'Courier New', monospace;
    padding: 20px; font-size: 1.2rem;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start;
    
    opacity: 1;
    transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.boot-line { margin: 2px 0; }

#bios-screen {
    display: none;
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background-color: #0000AA; color: white;
    z-index: 1000000;
    font-family: 'Courier New', monospace;
    padding: 50px;
    border: 20px solid #0000AA;
    box-shadow: inset 0 0 0 2px white;
}
.bios-header { text-align: center; background: #ccc; color: blue; font-weight: bold; margin-bottom: 20px; }
.bios-content { display: flex; justify-content: space-between; padding: 20px; border: 2px solid white; height: 80%; }
.bios-menu { width: 100%; }
.bios-item { padding: 5px; color: yellow; cursor: pointer; }
.bios-item.selected { background-color: #aa0000; color: white; }
.bios-value { color: white; float: right; margin-right: 50px; }
.bios-footer { margin-top: 20px; text-align: center; font-size: 0.8rem; }


/* ==========================================================================
   4. BARRE DE TACHES & ICONES
   ========================================================================== */
.taskbar {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 42px;
    background: var(--taskbar-bg);
    border-top: 3px ridge var(--win-border);
    z-index: 9000; 
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

.start-btn {
    background: #C0C0C0; color: black;
    font-family: 'VT323', monospace; font-size: 1.3rem; font-weight: bold;
    padding: 2px 10px; border: 2px outset #fff; cursor: pointer;
    display: flex; align-items: center; gap: 5px; margin-right: 10px;
}
.start-btn:active { border-style: inset; transform: translateY(1px); }
.start-btn img { width: 20px; height: 20px; }

.task-items { flex-grow: 1; display: flex; gap: 5px; padding-left: 5px; overflow-x: auto; }

.task-btn {
    background: #0000aa; color: #ccc; border: 2px outset #6666ff;
    padding: 3px 8px; font-family: 'VT323', monospace; font-size: 1.1rem;
    cursor: pointer; min-width: 100px; max-width: 150px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-btn:hover { background: #0000cc; color: white; }
.task-btn.active-task { background: #000055; border-style: inset; color: #00FF00; font-weight: bold; }

/* --- BOUTON TRAY (Show Desktop) --- */
.tray-btn {
    width: 35px;
    height: 30px;
    background: #C0C0C0;
    border: 2px outset #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px; /* Espace avec l'horloge */
    margin-left: 5px;
}

.tray-btn:active {
    border-style: inset;
    background: #aaa;
}

.tray-btn img {
    width: 20px;
    height: 20px;
}

/* Petite modif pour que l'horloge ne soit pas collée */
.taskbar-clock {
    margin-left: 0;
    background: #000;
    color: #00FF00;
    padding: 5px 15px;
    border: 2px inset #808080;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.2);
}

.taskbar-clock:hover {
    background: #001100;
    border-color: #00FF00;
    color: #00FF00;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.4), 0 0 5px rgba(0, 255, 0, 0.3);
}

.taskbar-clock:active {
    border-style: outset;
    background: #002200;
}

/* --- MENU START --- */
.start-menu {
    position: fixed;
    bottom: 42px;
    left: 0;
    width: 250px;
    background: #C0C0C0;
    border: 3px ridge #fff;
    box-shadow: 5px -5px 20px rgba(0,0,0,0.5);
    z-index: 9001;
    font-family: 'VT323', monospace;
}

.start-menu-header {
    background: linear-gradient(90deg, #000088, #1084d0);
    color: white;
    padding: 10px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #fff;
}

.start-menu-section {
    padding: 5px 0;
}

.start-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
    color: #000;
    font-size: 1.2rem;
    gap: 10px;
    transition: background 0.1s;
}

.start-menu-item:hover {
    background: #000088;
    color: white;
}

.start-menu-item img {
    width: 24px;
    height: 24px;
}

.start-menu-item.has-submenu {
    position: relative;
}

.start-menu-item .submenu-arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: #000;
}

.start-menu-item:hover .submenu-arrow {
    color: #fff;
}

.start-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #c0c0c0;
    border: 2px outset #dfdfdf;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    min-width: 180px;
    z-index: 1001;
}

.start-menu-item.has-submenu:hover > .start-submenu {
    display: block;
}

.start-submenu .start-menu-item {
    padding: 6px 15px;
    font-size: 1.1rem;
}

.start-menu-separator {
    height: 2px;
    background: #808080;
    margin: 2px 5px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #000;
}



/* ICONES - Système de grille avec coordonnées (A-H vertical, 1-6 horizontal, R pour droite) */
.desktop-grid {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 80px; /* Au dessus de la barre des tâches */
    display: grid;
    /* 6 colonnes fixes + espace flexible + 1 colonne droite */
    grid-template-columns: repeat(6, 90px) 1fr 90px;
    grid-template-rows: repeat(8, 90px);    /* 8 lignes (A-H) */
    gap: 20px; /* Espacement entre les icônes */
    z-index: 5;
    pointer-events: none; /* Permet de cliquer à travers la grille */
}

.desktop-grid .icon {
    pointer-events: auto; /* Réactive les clics sur les icônes */
}

/* Positions de grille - Colonnes 1-6 (gauche) */
.pos-A1 { grid-column: 1; grid-row: 1; }
.pos-A2 { grid-column: 2; grid-row: 1; }
.pos-A3 { grid-column: 3; grid-row: 1; }
.pos-A4 { grid-column: 4; grid-row: 1; }
.pos-A5 { grid-column: 5; grid-row: 1; }
.pos-A6 { grid-column: 6; grid-row: 1; }

.pos-B1 { grid-column: 1; grid-row: 2; }
.pos-B2 { grid-column: 2; grid-row: 2; }
.pos-B3 { grid-column: 3; grid-row: 2; }
.pos-B4 { grid-column: 4; grid-row: 2; }
.pos-B5 { grid-column: 5; grid-row: 2; }
.pos-B6 { grid-column: 6; grid-row: 2; }

.pos-C1 { grid-column: 1; grid-row: 3; }
.pos-C2 { grid-column: 2; grid-row: 3; }
.pos-C3 { grid-column: 3; grid-row: 3; }
.pos-C4 { grid-column: 4; grid-row: 3; }
.pos-C5 { grid-column: 5; grid-row: 3; }
.pos-C6 { grid-column: 6; grid-row: 3; }

.pos-D1 { grid-column: 1; grid-row: 4; }
.pos-D2 { grid-column: 2; grid-row: 4; }
.pos-D3 { grid-column: 3; grid-row: 4; }
.pos-D4 { grid-column: 4; grid-row: 4; }
.pos-D5 { grid-column: 5; grid-row: 4; }
.pos-D6 { grid-column: 6; grid-row: 4; }

.pos-E1 { grid-column: 1; grid-row: 5; }
.pos-E2 { grid-column: 2; grid-row: 5; }
.pos-E3 { grid-column: 3; grid-row: 5; }
.pos-E4 { grid-column: 4; grid-row: 5; }
.pos-E5 { grid-column: 5; grid-row: 5; }
.pos-E6 { grid-column: 6; grid-row: 5; }

.pos-F1 { grid-column: 1; grid-row: 6; }
.pos-F2 { grid-column: 2; grid-row: 6; }
.pos-F3 { grid-column: 3; grid-row: 6; }
.pos-F4 { grid-column: 4; grid-row: 6; }
.pos-F5 { grid-column: 5; grid-row: 6; }
.pos-F6 { grid-column: 6; grid-row: 6; }

.pos-G1 { grid-column: 1; grid-row: 7; }
.pos-G2 { grid-column: 2; grid-row: 7; }
.pos-G3 { grid-column: 3; grid-row: 7; }
.pos-G4 { grid-column: 4; grid-row: 7; }
.pos-G5 { grid-column: 5; grid-row: 7; }
.pos-G6 { grid-column: 6; grid-row: 7; }

.pos-H1 { grid-column: 1; grid-row: 8; }
.pos-H2 { grid-column: 2; grid-row: 8; }
.pos-H3 { grid-column: 3; grid-row: 8; }
.pos-H4 { grid-column: 4; grid-row: 8; }
.pos-H5 { grid-column: 5; grid-row: 8; }
.pos-H6 { grid-column: 6; grid-row: 8; }

/* Positions à droite (colonne R = colonne -2, l'avant-dernière ligne de grille = dernière colonne) */
.pos-AR { grid-column: -2; grid-row: 1; justify-self: end; }
.pos-BR { grid-column: -2; grid-row: 2; justify-self: end; }
.pos-CR { grid-column: -2; grid-row: 3; justify-self: end; }
.pos-DR { grid-column: -2; grid-row: 4; justify-self: end; }
.pos-ER { grid-column: -2; grid-row: 5; justify-self: end; }
.pos-FR { grid-column: -2; grid-row: 6; justify-self: end; }
.pos-GR { grid-column: -2; grid-row: 7; justify-self: end; }
.pos-HR { grid-column: -2; grid-row: 8; justify-self: end; }

.icon {
    width: 85px; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; text-align: center; color: white; text-shadow: 1px 1px 0 #000;
}
.icon img {
    width: 48px; height: 48px; margin-bottom: 5px;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5)); 
}
.icon-label { font-size: 1.1rem; padding: 2px 4px; background-color: rgba(0, 0, 0, 0.5); line-height: 1.1; }
.icon:hover .icon-label { background-color: #000088; border: 1px dotted #ffff00; }
.icon:active img { transform: scale(0.95); filter: brightness(0.8); }

/* ==========================================================================
   5. SYSTEME DE FENETRES (WINDOW MANAGER)
   ========================================================================== */
.os-window {
    position: absolute;
    background-color: transparent;
    border: 3px ridge var(--win-border);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
    display: flex; flex-direction: column;
    display: none;
    z-index: 10; /* Au-dessus du visualizer (z-index: 1) */
}

.window-header {
    background: var(--win-header); color: white; padding: 5px 10px;
    border-bottom: 3px ridge var(--win-border); cursor: grab;
    display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem;
}
.window-header:active { cursor: grabbing; background: #0000aa; }

.window-btns {
    display: flex; gap: 3px;
}
.minimize-btn {
    background: #c0c0c0; border: 2px outset #dfdfdf;
    width: 20px; height: 20px; line-height: 16px; text-align: center;
    font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; cursor: pointer;
    color: #000;
}
.minimize-btn:active { border-style: inset; }
.close-btn {
    background: #cc0000; border: 2px outset #ff0000;
    width: 20px; height: 20px; line-height: 16px; text-align: center;
    font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; cursor: pointer;
}
.close-btn:active { border-style: inset; }

.window-content {
    padding: 15px; overflow-y: auto; flex-grow: 1;
    scrollbar-width: thin; scrollbar-color: #00FF00 #000; padding-bottom: 30px;
    background: rgba(0, 0, 0, 0.5); /* Fond noir semi-transparent avec glassmorphism */
    backdrop-filter: blur(10px);
}
.window-content::-webkit-scrollbar { width: 10px; background: #000; }
.window-content::-webkit-scrollbar-thumb { background: #00FF00; border: 1px solid #fff; }

/* Transparence pour les fonds noirs des fenêtres */
.window-content.dark-transparent {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
}

/* Transparence plus forte pour Spotify */
#win-spotify .window-content.dark-transparent {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(15px);
}

/* Settings Window - Style transparent avec glassmorphism */
#win-settings fieldset {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

#win-settings legend {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #00ffff !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5), 0 1px 2px #000 !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    padding: 4px 12px !important;
}

#win-settings fieldset > div {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

#win-settings fieldset > div span {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   WINDOW THEMES (Win98, XP Luna)
   ========================================================================== */

/* Windows 98 Classic - Default style (inherits base styles) */

/* Windows XP Luna - Uses current theme color (--win-header) */
body.window-theme-xp .os-window {
    background-color: #ECE9D8;
    border: 3px solid var(--win-header);
    border-radius: 8px 8px 0 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

body.window-theme-xp .window-header {
    background: linear-gradient(180deg,
        var(--win-header) 0%,
        color-mix(in srgb, var(--win-header) 80%, white) 50%,
        var(--win-header) 100%);
    border-bottom: 1px solid var(--win-header);
    border-radius: 5px 5px 0 0;
    padding: 6px 10px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

body.window-theme-xp .window-header:active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--win-header) 80%, black) 0%,
        var(--win-header) 50%,
        color-mix(in srgb, var(--win-header) 80%, black) 100%);
}

body.window-theme-xp .close-btn {
    background: linear-gradient(180deg, #E35454 0%, #C83030 50%, #B02020 100%);
    border: 1px solid #7A1010;
    border-radius: 3px;
    color: white;
    font-weight: bold;
}

body.window-theme-xp .close-btn:hover {
    background: linear-gradient(180deg, #FF6666 0%, #DD4040 50%, #CC3030 100%);
}

body.window-theme-xp .minimize-btn {
    background: linear-gradient(180deg, #3C7FB1 0%, #245D8C 50%, #1C4D74 100%);
    border: 1px solid #0D3A5C;
    border-radius: 3px;
    color: white;
    font-weight: bold;
}

body.window-theme-xp .minimize-btn:hover {
    background: linear-gradient(180deg, #4C9FD1 0%, #347DAC 50%, #2C6D94 100%);
}

body.window-theme-xp .window-content {
    background-color: #FFFFFF;
    color: #000000;
}


/* ==========================================================================
   6. STYLES SPECIFIQUES (PROFILS, GALERIE, ETC.)
   ========================================================================== */
/* Layout Profil */
.sidebar-layout { display: grid; grid-template-columns: 180px 1fr; height: 100%; gap: 15px; }
/* --- STYLE DE LA PHOTO DE PROFIL AVEC ANIMATION --- */
.profile-pic {
    width: 100px; 
    height: 100px; 
    border: 2px solid white; 
    margin: 0 auto; 
    display: block;
    
    /* L'animation magique est ici : */
    /* Nom de l'anim | Durée | Type de mouvement | Répétition */
    animation: cyber-float 3s ease-in-out infinite;
    
    /* On s'assure que le glow ne soit pas coupé */
    position: relative;
    z-index: 2;
}

/* DÉFINITION DE L'ANIMATION "CYBER-FLOAT" */
@keyframes cyber-float {
    0% {
        /* Position de départ : normale */
        transform: translateY(0px);
        /* Pas d'ombre portée au début */
        filter: drop-shadow(0 0 0px rgba(0, 255, 255, 0));
        border-color: white;
    }
    50% {
        /* Au milieu de l'anim : elle monte de 4 pixels */
        transform: translateY(-4px);
        /* Un glow CYAN apparaît autour de l'image */
        filter: drop-shadow(0 0 8px cyan);
        /* La bordure devient cyan aussi pour accompagner le glow */
        border-color: cyan;
    }
    100% {
        /* Fin de l'anim : retour à la position de départ */
        transform: translateY(0px);
        filter: drop-shadow(0 0 0px rgba(0, 255, 255, 0));
        border-color: white;
    }
}.nav-links { list-style: none; padding: 0; }
.retro-btn {
    display: block; width: 100%; margin-bottom: 8px;
    background: #C0C0C0; color: black; text-decoration: none; padding: 4px;
    border: 2px solid; border-color: #fff #000 #000 #fff;
    font-weight: normal; font-size: 1.2rem; cursor: pointer; text-align: center;
}
.retro-btn:hover { background: #000088; color: white; }

/* Galerie */
.folder-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.folder-item { width: 80px; text-align: center; cursor: pointer; color: white; }
.folder-item:hover { background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.folder-item img { width: 48px; margin-bottom: 5px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.photo-thumb { width: 100%; height: 100px; object-fit: cover; border: 2px solid #555; cursor: zoom-in; transition: transform 0.2s, border-color 0.2s; }
.photo-thumb:hover { transform: scale(1.05); border-color: #00FF00; }

/* Lightbox */
/* Lightbox modifié pour aligner le texte en dessous */
#lightbox {
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background: rgba(0, 0, 0, 0.95); z-index: 99999;
    display: none; 
    flex-direction: column; /* Important pour empiler image et texte */
    justify-content: center; align-items: center; 
    cursor: zoom-out;
}

#lightbox img { 
    max-width: 90%; max-height: 80%; /* Un peu moins haut pour laisser place au texte */
    border: 2px solid #00FF00; box-shadow: 0 0 50px #00FF00; 
}

/* Style du crédit */
#lightbox-caption {
    margin-top: 15px;
    color: #00FF00;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    background: #000;
    padding: 5px 15px;
    border: 1px solid #00FF00;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    text-shadow: 0 0 5px #00FF00;
}


/* ==========================================================================
   7. LECTEUR AUDIO CUSTOM
   ========================================================================== */
#win-audio { border-color: #00FF00; }
#win-audio .window-header { background: #004400; border-bottom-color: #00FF00; }

.player-container { display: flex; flex-direction: column; gap: 10px; }
.player-screen-area {
    background: #000; border: 2px inset #666; padding: 5px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'VT323', monospace; color: #00FF00;
}
/* Version boucle infinie (si JS activé) */
.scrolling-text {
  padding-left: 0; /* Plus besoin du padding */
  animation: marquee-loop 15s linear infinite;
}

@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Seulement la moitié car texte dupliqué */
  }
}
.timer { font-family: monospace; color: #00FF00; }

/* Sliders (Seek & Volume) */
.progress-container { width: 100%; margin: 5px 0; }
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; }
input[type=range]:focus { outline: none; }

/* Seek Slider - see full styling below */

/* Volume Slider */
.vol-container {
    display: flex; align-items: center; gap: 5px; flex-grow: 1;
    background: #111; padding: 2px 5px; border: 1px inset #444;
}
.vol-label { color: #00FF00; font-size: 0.8rem; }
input[type=range].vol-slider { height: 8px; border: 1px solid #00FF00; background: #222; }
input[type=range].vol-slider::-webkit-slider-thumb { height: 12px; width: 8px; background: #fff; border: 1px solid #000; -webkit-appearance: none; margin-top: -2px; }

/* Controles */
.controls-row { display: flex; align-items: center; gap: 10px; }
.ctrl-btn {
    width: 30px; height: 30px; background: #C0C0C0; border: 2px outset #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: black;
}
.ctrl-btn:active { border-style: inset; background: #aaa; }

.upload-label {
    display: block; width: 100%; background: #444; color: white;
    text-align: center; padding: 5px; cursor: pointer; border: 2px outset #fff; margin-top: 10px;
}
.upload-label:hover { background: #666; color: yellow; }
audio { display: none; }

.visu-toggle {
    display: block; width: 100%; background: #000; color: #00FF00;
    border: 1px solid #00FF00; padding: 5px; cursor: pointer; margin-top: 5px;
    font-family: 'VT323', monospace; font-size: 1rem;
}
.visu-toggle.off { color: #555; border-color: #555; }


/* ==========================================================================
   8. NEON PAINT & SNAKE STYLE
   ========================================================================== */
/* PAINT */
.paint-toolbar {
    background: #222; border-bottom: 2px solid #444; padding: 5px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.color-palette { display: flex; gap: 5px; }
.color-btn { width: 20px; height: 20px; border: 2px outset #fff; cursor: pointer; }
.color-btn:active { border-style: inset; }
.color-btn.eraser { background: #000; border-color: #555; }

.brush-size { display: flex; align-items: center; gap: 5px; color: #00FF00; font-family: 'VT323', monospace; }
.small-btn { padding: 0 5px; font-size: 1rem; margin: 0; }

.canvas-wrapper { flex-grow: 1; background: #000; position: relative; cursor: crosshair; }
#paintCanvas { display: block; background: #000; width: 100%; height: 100%; }

/* Slider Special Paint */
input[type=range].paint-slider {
    width: 150px; height: 12px; margin-left: 10px;
    -webkit-appearance: none; background: #222; border: 2px solid #555;
}
input[type=range].paint-slider::-webkit-slider-runnable-track { width: 100%; height: 100%; background: transparent; border: none; }
input[type=range].paint-slider::-webkit-slider-thumb {
    height: 24px; width: 12px; background: #00FF00; border: 2px solid #fff;
    cursor: ew-resize; -webkit-appearance: none; margin-top: -8px; box-shadow: 0 0 5px #00FF00;
}
input[type=range].paint-slider::-moz-range-track { background: transparent; }

/* SNAKE GAME */
.snake-stats {
    width: 100%; display: flex; justify-content: space-between;
    padding: 10px 20px; font-family: 'VT323', monospace; font-size: 1.5rem;
    color: #00FF00; background: #000; border-bottom: 2px solid #00FF00;
    text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00;
    box-shadow: 0 2px 10px rgba(0, 255, 0, 0.5);
}
#snakeCanvas {
    background-color: #000;
    border: 3px solid #00FF00;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 0, 0.2),
        0 0 20px rgba(0, 255, 0, 0.4),
        0 0 40px rgba(0, 255, 0, 0.3),
        0 0 60px rgba(0, 255, 0, 0.2);
    margin: 10px 0;
    image-rendering: pixelated;
    animation: snakeBorderGlow 2s ease-in-out infinite alternate;
}

@keyframes snakeBorderGlow {
    from {
        box-shadow:
            inset 0 0 30px rgba(0, 255, 0, 0.2),
            0 0 20px rgba(0, 255, 0, 0.4),
            0 0 40px rgba(0, 255, 0, 0.3),
            0 0 60px rgba(0, 255, 0, 0.2);
    }
    to {
        box-shadow:
            inset 0 0 40px rgba(0, 255, 0, 0.3),
            0 0 30px rgba(0, 255, 0, 0.6),
            0 0 60px rgba(0, 255, 0, 0.5),
            0 0 90px rgba(0, 255, 0, 0.3);
    }
}

/* Red glow when game over */
#snakeCanvas.game-over {
    border-color: #FF0000;
    box-shadow:
        inset 0 0 30px rgba(255, 0, 0, 0.2),
        0 0 20px rgba(255, 0, 0, 0.4),
        0 0 40px rgba(255, 0, 0, 0.3),
        0 0 60px rgba(255, 0, 0, 0.2);
    animation: snakeBorderGlowRed 2s ease-in-out infinite alternate;
}

@keyframes snakeBorderGlowRed {
    from {
        box-shadow:
            inset 0 0 30px rgba(255, 0, 0, 0.2),
            0 0 20px rgba(255, 0, 0, 0.4),
            0 0 40px rgba(255, 0, 0, 0.3),
            0 0 60px rgba(255, 0, 0, 0.2);
    }
    to {
        box-shadow:
            inset 0 0 40px rgba(255, 0, 0, 0.3),
            0 0 30px rgba(255, 0, 0, 0.6),
            0 0 60px rgba(255, 0, 0, 0.5),
            0 0 90px rgba(255, 0, 0, 0.3);
    }
}

/* Yellow glow when SPEED power-up active */
#snakeCanvas.powerup-speed {
    border-color: #FFD700;
    box-shadow:
        inset 0 0 30px rgba(255, 215, 0, 0.2),
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.3),
        0 0 60px rgba(255, 215, 0, 0.2);
    animation: snakeBorderGlowYellow 0.5s ease-in-out infinite alternate;
}

@keyframes snakeBorderGlowYellow {
    from {
        box-shadow:
            inset 0 0 30px rgba(255, 215, 0, 0.2),
            0 0 20px rgba(255, 215, 0, 0.4),
            0 0 40px rgba(255, 215, 0, 0.3),
            0 0 60px rgba(255, 215, 0, 0.2);
    }
    to {
        box-shadow:
            inset 0 0 40px rgba(255, 215, 0, 0.4),
            0 0 30px rgba(255, 215, 0, 0.7),
            0 0 60px rgba(255, 215, 0, 0.6),
            0 0 90px rgba(255, 215, 0, 0.4);
    }
}

/* Blue glow when SLOW power-up active */
#snakeCanvas.powerup-slow {
    border-color: #00FFFF;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 255, 0.2),
        0 0 20px rgba(0, 255, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 60px rgba(0, 255, 255, 0.2);
    animation: snakeBorderGlowBlue 1.5s ease-in-out infinite alternate;
}

@keyframes snakeBorderGlowBlue {
    from {
        box-shadow:
            inset 0 0 30px rgba(0, 255, 255, 0.2),
            0 0 20px rgba(0, 255, 255, 0.4),
            0 0 40px rgba(0, 255, 255, 0.3),
            0 0 60px rgba(0, 255, 255, 0.2);
    }
    to {
        box-shadow:
            inset 0 0 40px rgba(0, 255, 255, 0.3),
            0 0 30px rgba(0, 255, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.5),
            0 0 90px rgba(0, 255, 255, 0.3);
    }
}

.snake-controls { text-align: center; padding-bottom: 10px; }


/* ==========================================================================
   9. DIMENSIONS ET POSITIONS DES FENETRES
   ========================================================================== */
#win-profile { width: 700px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; }
#win-audio { width: 320px; height: auto; top: 8%; right: 5%; display: flex; }
#win-paint { width: 600px; height: 450px; top: 45%; left: 45%; }
#win-pics { width: 500px; height: 350px; top: 30%; left: 30%; }

/* --- MODIFICATION SNAKE : AGRANDISSEMENT --- */
#win-snake { 
    width: 460px;  /* Assez large pour le canvas de 400 + marges */
    height: 640px; /* Assez haut pour tout le contenu sans scroll */
    top: 10%; left: 10%; 
}

.year-win { width: 600px; height: 400px; top: 35%; left: 35%; }
.popup-win { width: 400px; height: 300px; top: 40%; left: 40%; }

/* --- SECRETS TERMINAL --- */
#secret-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #00FF00;
    color: #00FF00;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    margin-left: 10px;
    outline: none;
    flex-grow: 1;
}

/* --- CCTV CAMERA STYLE --- */
#cctv-canvas {
    width: 100%; height: 100%;
    object-fit: fill;
    /* Le filtre magique pour l'effet vision nocturne verte */
    filter: sepia(1) hue-rotate(90deg) saturate(3) contrast(1.2) brightness(0.9);
    /* Force le rendu pixelisé pour le côté low-res */
    image-rendering: pixelated; 
}

.cctv-overlay {
    position: absolute; top: 10px; left: 10px;
    color: #00FF00; font-family: 'VT323', monospace;
    font-size: 1.2rem; text-shadow: 1px 1px 2px black;
    pointer-events: none;
}

.blink-red { color: red; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- SYSTEME DE SUCCES --- */
#achievement-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 2147483647; /* Au dessus de TOUT */
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; /* Clics traversants */
}

.achievement-popup {
    background: #000;
    border: 2px solid #00FF00;
    color: #00FF00;
    font-family: 'VT323', monospace;
    width: 300px;
    padding: 10px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: -5px 5px 0px rgba(0, 255, 0, 0.3);
    
    /* Animation d'entrée */
    animation: slideIn 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
    /* Reste affiché 5 secondes au total */
}

.ach-icon {
    font-size: 2rem;
    color: yellow;
    text-shadow: 0 0 5px orange;
}

.ach-text h3 { margin: 0; font-size: 1.2rem; text-transform: uppercase; color: yellow; }
.ach-text p { margin: 0; font-size: 1rem; color: white; }

@keyframes slideIn {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}
@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}

/* --- ICONE TROPHEES --- */
#ach-icon {
    position: absolute;
    right: 30px;
    /* On le place un peu plus haut que la corbeille */
    /* La corbeille est gérée par JS, mais on va fixer celui-ci vers le bas */
    bottom: 160px; 
    z-index: 5;
    display: flex; flex-direction: column; align-items: center;
    width: 85px; text-align: center;
}

/* --- LISTE DES SUCCES (DANS LA FENETRE) --- */
.ach-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #333;
    margin-bottom: 10px;
    background: #000;
}

/* Style quand débloqué */
.ach-item-row.unlocked {
    border-color: #00FF00;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
}
.ach-item-row.unlocked h4 { color: #00FF00; margin: 0; }
.ach-item-row.unlocked p { color: #ccc; margin: 0; font-size: 0.9rem; }
.ach-item-row.unlocked .medal { font-size: 1.5rem; }

/* Style quand verrouillé */
.ach-item-row.locked {
    opacity: 0.6;
    border-color: #555;
}
.ach-item-row.locked h4 { color: #666; margin: 0; }
.ach-item-row.locked p { color: #888; margin: 0; font-size: 0.9rem; font-style: italic; }
.ach-item-row.locked .medal { font-size: 1.5rem; filter: grayscale(1); }

/* Style secret (plus mystérieux) */
.ach-item-row.secret {
    opacity: 0.4;
    border-color: #333;
    border-style: dashed;
}
.ach-item-row.secret h4 { color: #444; font-style: italic; }
.ach-item-row.secret p { color: #444; font-style: italic; }
.ach-item-row.secret .medal { filter: grayscale(1) brightness(0.5); }

/* ==========================================================================
   STATISTICS WINDOW
   ========================================================================== */
.stats-section {
    margin-bottom: 18px;
    padding: 14px;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
}

.stats-section h4 {
    margin: 0 0 12px 0;
    color: #00ffcc;
    font-size: 1.15rem;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #1a1a1a;
    border-radius: 4px;
    font-size: 1.05rem;
}

.stat-item .stat-label {
    color: #aaa;
}

.stat-item .stat-value {
    color: #fff;
    font-weight: bold;
    font-family: 'Consolas', monospace;
    font-size: 1.1rem;
}

.stat-item .stat-value.highlight {
    color: #ffcc00;
}

.stat-item.full-width {
    grid-column: 1 / -1;
}

/* ==========================================================================
   NOUVEAU DESIGN AUDIO (CYBER-DECK)
   ========================================================================== */

/* Conteneur global */
.cyber-deck {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #333;
}

/* --- 1. ECRAN LCD --- */
.deck-screen {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border-radius: 4px;
    padding: 4px;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1);
    border: 2px solid #333;
}

.screen-glass {
    background: transparent;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px;
    font-family: 'VT323', monospace;
    color: #00FF00;
    /* Effet grille pixel sur l'écran */
    background-image: linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 4px 4px;
}

.label { font-size: 0.7rem; color: #005500; font-weight: bold; display: block; }

/* --- INFO PISTE (FIX ULTIME) --- */
.track-info { 
    grid-column: 1 / -1; 
    border-bottom: 1px solid #004400; 
    padding-bottom: 5px; 
    margin-bottom: 5px;
    
    /* Mise en page flexible */
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Taille fixe pour éviter l'écrasement */
    height: 30px; 
    width: 100%;
    overflow: hidden; 
}

.label { 
    font-size: 0.7rem; 
    color: #005500; 
    font-weight: bold; 
    flex-shrink: 0; /* Empêche le label de disparaître */
}

/* --- FIX TEXTE DÉFILANT (Audio, Spotify, etc.) --- */

/* Le Masque (Fenêtre visible) */
.scrolling-mask {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  /* Masque simplifié - moins agressif sur les bords */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

/* Le Texte Défilant - VERSION BOUCLE CONTINUE */
.scrolling-text {
  font-size: 1.4rem;
  color: #00ff00;
  white-space: nowrap;
  display: inline-flex; /* Important pour aligner les spans */
  line-height: 1.2;
  
  /* Animation continue sans pause */
  animation: marquee-seamless 15s linear infinite;
}

/* Les spans dupliqués pour la boucle infinie */
.scrolling-text span {
  padding-right: 50px; /* Espace entre les répétitions */
}

/* Animation sans pause - le texte est dupliqué dans le HTML */
@keyframes marquee-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    /* On se déplace exactement de la moitié car le texte est dupliqué */
    transform: translateX(-50%);
  }
}

/* --- Spotify Widget : Héritage du style --- */
#sp-title {
  font-size: 1.1rem; /* Garde sa taille spécifique */
  color: #1db954; /* Couleur Spotify */
}

/* --- Spotify Widget : Héritage du style --- */
#sp-title {
  font-size: 1.1rem; /* Garde sa taille spécifique */
  color: #1db954; /* Couleur Spotify */
}

/* Time display improvements */
.time-info {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.time-separator {
    color: #004400;
    font-size: 0.9rem;
}

#time-total {
    color: #006600;
    font-size: 0.9rem;
}

/* Player status */
.player-status {
    margin-top: 2px;
}

#player-status-text {
    font-size: 0.7rem;
    color: #00aa00;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: status-blink 1.5s ease-in-out infinite;
}

#player-status-text.playing {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

#player-status-text.paused {
    color: #ffaa00;
    text-shadow: 0 0 5px #ffaa00;
    animation: status-blink 0.8s ease-in-out infinite;
}

#player-status-text.stopped {
    color: #666;
    animation: none;
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Fake spectrum animation */
.fake-spectrum {
    display: flex; align-items: flex-end; gap: 2px; height: 20px;
}
.fake-spectrum .bar {
    width: 4px; background: #005500;
    height: 2px;
}
.fake-spectrum.playing .bar:nth-child(1) { animation: bounce1 0.5s infinite alternate; }
.fake-spectrum.playing .bar:nth-child(2) { animation: bounce2 0.5s infinite alternate 0.1s; }
.fake-spectrum.playing .bar:nth-child(3) { animation: bounce3 0.5s infinite alternate 0.3s; }
.fake-spectrum.playing .bar:nth-child(4) { animation: bounce4 0.5s infinite alternate 0.2s; }
.fake-spectrum.playing .bar:nth-child(5) { animation: bounce5 0.5s infinite alternate 0.15s; }
@keyframes bounce1 { from { height: 40%; } to { height: 10%; } }
@keyframes bounce2 { from { height: 80%; } to { height: 20%; } }
@keyframes bounce3 { from { height: 60%; } to { height: 15%; } }
@keyframes bounce4 { from { height: 30%; } to { height: 5%; } }
@keyframes bounce5 { from { height: 90%; } to { height: 25%; } }


/* --- 2. BARRE DE PROGRESSION --- */
.deck-progress {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 1px inset #000;
    margin-top: 5px;
    display: flex;
    align-items: center;
    padding: 3px;
}

/* Le Slider */
input[type=range].seek-slider {
    margin: 0; width: 100%; height: 12px;
    -webkit-appearance: none; background: #222; border: 1px solid #222;
    cursor: pointer;
}

/* Piste - Transparent pour laisser le gradient JS visible */
input[type=range].seek-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    background: transparent;
    cursor: pointer;
}

/* Curseur - Simple ligne verte qui glow */
input[type=range].seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 3px;
    background: #00ff00;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px #00ff00, 0 0 12px #00ff00;
}

input[type=range].seek-slider::-webkit-slider-thumb:hover {
    background: #44ff44;
    box-shadow: 0 0 8px #44ff44, 0 0 16px #44ff44;
}

/* Firefox */
input[type=range].seek-slider::-moz-range-track {
    width: 100%;
    height: 12px;
    background: #0a0a0a;
    border: 1px solid #222;
}

input[type=range].seek-slider::-moz-range-thumb {
    height: 12px;
    width: 3px;
    background: #00ff00;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 6px #00ff00, 0 0 12px #00ff00;
}

input[type=range].seek-slider::-moz-range-progress {
    background: linear-gradient(90deg, #002200, #00aa00);
    height: 12px;
}


/* --- 3. BOUTONS PHYSIQUES --- */
.deck-controls {
    display: flex; justify-content: space-between; align-items: center;
}

.transport-buttons { display: flex; gap: 10px; }

.deck-btn {
    width: 40px; height: 40px;
    background: linear-gradient(to bottom, #333, #111);
    border: 1px solid #444;
    border-radius: 4px;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #000; /* Effet 3D hauteur */
    transition: all 0.1s;
}
.deck-btn:active {
    transform: translateY(4px); /* Enfoncement */
    box-shadow: 0 0 0 #000;
    color: #00FF00;
    border-color: #00FF00;
}
.deck-btn i { pointer-events: none; }


/* --- 4. VOLUME --- */
.deck-volume {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    padding: 5px 10px; border-radius: 20px; border: 1px solid #333;
    width: 120px;
}


/* --- 5. ACTIONS (BAS) --- */
.deck-actions {
    display: flex; gap: 10px;
}

.action-btn {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    color: #888;
    text-align: center;
    padding: 8px;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.action-btn:hover { background: #333; color: white; }

/* Bouton Visu Actif */
#visuToggleBtn.active {
    background: #002200;
    border-color: #00FF00;
    color: #00FF00;
    box-shadow: inset 0 0 10px #00FF00;
}
#visuToggleBtn.off {
    background: #220000;
    border-color: #FF0000;
    color: #FF0000;
}

/* --- MIDI PLAYER (AIMP-style) --- */
#win-midi {
    width: 360px;
    height: auto;
    top: 75%;
    left: 15%;
    transform: translate(-50%, -50%);
    display: none;
}

.mp-body {
    background: linear-gradient(180deg, #3a3d42 0%, #2a2d32 40%, #222528 100%);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    border-top: 1px solid #555;
}

/* --- LCD Screen --- */
.mp-screen {
    display: flex;
    gap: 10px;
    background: linear-gradient(180deg, #1a2a1a 0%, #0e1e12 50%, #0a160e 100%);
    border: 2px inset #111;
    border-radius: 3px;
    padding: 8px 10px;
    min-height: 48px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
}

.mp-screen-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mp-time {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.6rem;
    color: #e8a030;
    text-shadow: 0 0 8px rgba(232, 160, 48, 0.6), 0 0 2px rgba(232, 160, 48, 0.3);
    letter-spacing: 1px;
    min-width: 46px;
}

.mp-screen-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    border-left: 1px solid #1a3a1a;
    padding-left: 10px;
}

.mp-track-name {
    color: #c0d8c0;
    font-family: 'Tahoma', sans-serif;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 4px rgba(180, 220, 180, 0.3);
    letter-spacing: 0.5px;
}

.mp-info {
    display: flex;
    gap: 6px;
}

.mp-info-tag {
    font-size: 0.55rem;
    font-family: 'Tahoma', sans-serif;
    color: #6a8a6a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Seek bar --- */
.mp-seek-row {
    padding: 0 1px;
}

.mp-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mp-seek::-webkit-slider-runnable-track {
    height: 6px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
}

.mp-seek::-moz-range-track {
    height: 6px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
}

.mp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    background: radial-gradient(circle at 35% 35%, #eee, #999);
    border: 1px solid #555;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.mp-seek::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 35% 35%, #eee, #999);
    border: 1px solid #555;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.mp-seek:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mp-seek:disabled::-webkit-slider-thumb {
    background: #666;
    cursor: not-allowed;
}
.mp-seek:disabled::-moz-range-thumb {
    background: #666;
    cursor: not-allowed;
}

/* --- Controls row --- */
.mp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-transport {
    display: flex;
    gap: 2px;
}

.mp-btn {
    width: 28px;
    height: 24px;
    background: linear-gradient(180deg, #5a5d62 0%, #44474c 50%, #3a3d42 100%);
    border: 1px solid;
    border-color: #666 #2a2a2a #2a2a2a #666;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: all 0.1s;
}

.mp-btn:hover {
    background: linear-gradient(180deg, #6a6d72 0%, #54575c 50%, #4a4d52 100%);
    color: #fff;
}

.mp-btn:active {
    background: linear-gradient(180deg, #3a3d42 0%, #44474c 50%, #5a5d62 100%);
    border-color: #2a2a2a #666 #666 #2a2a2a;
}

.mp-btn svg {
    display: block;
}

.mp-btn-play {
    width: 32px;
    color: #8fbf8f;
}

.mp-btn-play:hover {
    color: #a0e0a0;
}

/* --- Volume --- */
.mp-vol-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mp-vol-icon {
    font-size: 0.7rem;
    user-select: none;
    flex-shrink: 0;
}

.mp-vol {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mp-vol::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(to right, #4a8a4a 0%, #4a8a4a 50%, #8a4a4a 100%);
    border-radius: 3px;
    border: 1px solid #222;
}

.mp-vol::-moz-range-track {
    height: 6px;
    background: linear-gradient(to right, #4a8a4a 0%, #4a8a4a 50%, #8a4a4a 100%);
    border-radius: 3px;
    border: 1px solid #222;
}

.mp-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    background: radial-gradient(circle at 35% 35%, #eee, #888);
    border: 1px solid #444;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.mp-vol::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%, #eee, #888);
    border: 1px solid #444;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.mp-vol-pct {
    font-size: 0.6rem;
    font-family: 'Tahoma', sans-serif;
    min-width: 30px;
    text-align: right;
    color: #999;
}

.mp-vol:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mp-vol:disabled::-webkit-slider-thumb {
    background: #666;
    cursor: not-allowed;
}
.mp-vol:disabled::-moz-range-thumb {
    background: #666;
    cursor: not-allowed;
}

/* --- Browse button --- */
.mp-browse {
    display: block;
    text-align: center;
    padding: 4px 8px;
    background: linear-gradient(180deg, #4a4d52 0%, #3a3d42 100%);
    border: 1px solid;
    border-color: #666 #2a2a2a #2a2a2a #666;
    border-radius: 3px;
    font-size: 0.72rem;
    font-family: 'Tahoma', sans-serif;
    cursor: pointer;
    color: #bbb;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}

.mp-browse:hover {
    background: linear-gradient(180deg, #5a5d62 0%, #4a4d52 100%);
    color: #fff;
}

#win-achievements {
    width: 350px;
    height: auto;
    
    /* On le place au milieu de l'écran */
    top: 65%;
    left: 80%;
    
    /* Cette ligne décale la fenêtre de moitié pour qu'elle soit PARFAITEMENT centrée */
    transform: translate(-50%, -50%);
    
    /* Flexbox pour que le contenu s'affiche bien */
    display: none; /* Caché par défaut */
}

/* --- WORDLE & README: maintenant gérés par le système de grille (pos-B2, pos-C2) --- */

/* --- EFFET ASGORE BACKGROUND --- */

/* Nécessaire pour positionner le canvas en absolu par rapport à cette fenêtre */
.relative-content {
    position: relative;
    /* On enlève le padding ici car on le gère dans l'overlay maintenant */
}

/* Le canvas qui prend toute la place derrière */
#asgoreCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Tout au fond */
    background: #000; /* Fond noir de base */
    image-rendering: pixelated; /* Important pour le look rétro */
}

/* Le contenu par-dessus */
.profile-overlay {
    position: relative;
    z-index: 1; /* Devant le canvas */
    /* Petits ajustements pour la lisibilité */
    text-shadow: 1px 1px 2px black;
}

/* Ajustement de la bordure de la colonne de gauche pour qu'elle ressorte mieux */
.profile-overlay .sidebar-layout > div:first-child {
    border-right-color: rgba(68, 68, 255, 0.5) !important;
    background: rgba(0,0,0,0.5);
    padding: 10px;
}

/* --- LOADER GALERIE --- */

.photo-wrapper {
    position: relative;
    width: 100%;
    height: 100px;
    background: #050505;
    border: 2px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img-loader {
    width: 30px;
    height: 30px;
    border: 4px solid #111;
    border-top: 4px solid #00FF00;
    border-radius: 50%;
    animation: spinLoader 1s linear infinite;
}

@keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.photo-thumb {

    width: 100%; height: 100%; 
    object-fit: cover; 
    cursor: zoom-in; 
    transition: transform 0.2s, border-color 0.2s, opacity 0.5s;
    

    opacity: 0; 
}

.photo-thumb.loaded {
    opacity: 1;
}

.photo-name-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 0;
    pointer-events: none;
}

/* --- SECURITE : FLASH & TREMBLEMENT --- */

/* Le Flash Rouge */
#security-flash {
    position: fixed; top: 0; left: 0; width: 1920px; height: 1080px;
    background-color: red;
    opacity: 0; /* Invisible */
    pointer-events: none; /* On clique à travers */
    z-index: 2147483647; /* Tout en haut, même au dessus du CRT */
    transition: opacity 0.1s ease-out;
}

/* La classe qui fait trembler tout l'écran */
.system-lockdown {
    animation: earthquake 0.1s linear infinite;
}

@keyframes earthquake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-10px, 10px) rotate(-1deg); }
    50% { transform: translate(10px, -10px) rotate(1deg); }
    75% { transform: translate(-10px, -10px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- FILIGRANE ANTI-VOL (WATERMARK) --- */
#watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Juste au-dessus de l'image */
    pointer-events: none; /* Permet de cliquer au travers pour fermer */
    
    /* Génération du motif répété via SVG encodé */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ctext x='50%25' y='50%25' font-family='monospace' font-weight='bold' font-size='20' fill='rgba(0, 255, 0, 0.15)' text-anchor='middle' transform='rotate(-45 150 150)'%3E%E2%9A%A0%EF%B8%8F BE NICE, DO NOT STEAL! %E2%9A%A0%EF%B8%8F%3C/text%3E%3C/svg%3E");
    
    background-repeat: repeat;
}

/* --- WIDGET SPOTIFY --- */
#win-spotify {
    width: 300px;
    height: 120px;
    /* Position initiale en haut à droite */
    top: 500px; 
    right: 20px;
    left: auto !important; /* Force la droite */
    transform: none !important; /* Annule le centrage auto */
    display: none; /* Le JS l'ouvrira */
    z-index: 50;
    border-color: #1DB954; /* Vert Spotify */
}

#win-spotify .window-header {
    background: #111;
    border-bottom-color: #1DB954;
    color: #1DB954;
}



.spotify-container {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
    height: 100%;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(15px);
}

/* Cover Art */
.sp-cover-wrapper {
    width: 60px; height: 60px;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.sp-cover-wrapper:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}
#sp-cover {
    width: 100%; height: 100%;
    object-fit: cover;
    border: 1px solid #333;
    position: relative; z-index: 2;
    transition: border-color 0.2s ease;
}
.sp-cover-wrapper:hover #sp-cover {
    border-color: #1DB954;
    box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
}

/* Texte */
.sp-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
}
.sp-status { font-size: 0.7rem; color: #555; margin-bottom: 2px; letter-spacing: 1px; }
.sp-artist { font-size: 0.9rem; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Animation si musique active */
.playing .sp-status { color: #1DB954; text-shadow: 0 0 5px #1DB954; }
.playing #sp-cover { animation: pulseBeat 1s infinite alternate; }

@keyframes pulseBeat { from{ box-shadow: 0 0 0 #1DB954; } to { box-shadow: 0 0 10px #1DB954; } }

/* Equalizer Déco */
.sp-bars {
    display: flex; gap: 2px; align-items: flex-end; height: 20px;
}
.sp-bars .bar {
    width: 4px; background: #1DB954;
    height: 5px;
    animation: eqBounce 0.5s infinite alternate;
}
.sp-bars .bar:nth-child(2) { animation-delay: 0.1s; }
.sp-bars .bar:nth-child(3) { animation-delay: 0.2s; }
.sp-bars .bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes eqBounce { to { height: 100%; } }

/* --- CYBER DATE INPUTS --- */
.cyber-date-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 10px 0;
}

.date-field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-field label {
    font-size: 0.7rem;
    color: #ff5555;
    margin-bottom: 2px;
    font-family: monospace;
}

.date-field input {
    background: #000;
    border: 2px solid #550000;
    color: #ff0000;
    font-family: 'VT323', monospace;
    font-size: 2rem; /* Gros chiffres */
    text-align: center;
    width: 60px;
    padding: 5px;
    outline: none;
    box-shadow: inset 0 0 10px #330000;
    transition: all 0.2s;
}

/* L'année est un peu plus large */
#age-year { width: 90px; }

/* Quand on clique dedans (Focus) */
.date-field input:focus {
    border-color: #ff0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6), inset 0 0 10px #550000;
    background: #1a0000;
}

.slash {
    font-size: 2rem;
    color: #550000;
    padding-bottom: 5px;
    animation: blinkSlash 1s infinite;
}

@keyframes blinkSlash { 50% { opacity: 0.5; } }

/* ==========================================================================
   MINESWEEPER GAME
   ========================================================================== */
#win-minesweeper {
    width: auto;
    height: auto;
    top: 15%;
    left: 15%;
}

.mine-header {
    width: 100%;
    background: #C0C0C0;
    border: 3px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mine-counter {
    background: #000;
    border: 2px inset #808080;
    padding: 5px 8px;
    display: flex;
    gap: 2px;
    font-family: 'Courier New', monospace;
}

.mine-counter .digit {
    width: 13px;
    height: 23px;
    background: #000;
    color: #FF0000;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 23px;
    font-family: 'DS-Digital', 'Courier New', monospace;
}

.mine-face {
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    background: #C0C0C0;
    border: 3px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mine-face:active {
    border-color: #808080 #fff #fff #808080;
}

.mine-board {
    background: #C0C0C0;
    border: 3px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 5px;
    display: inline-grid;
    gap: 0;
    margin-bottom: 10px;
}

.mine-cell {
    width: 20px;
    height: 20px;
    background: #C0C0C0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
    user-select: none;
}

.mine-cell:active {
    border-color: #808080 #fff #fff #808080;
}

.mine-cell.revealed {
    background: #BDBDBD;
    border: 1px solid #808080;
    border-color: transparent;
}

.mine-cell.flagged::before {
    content: '🚩';
    font-size: 0.8rem;
}

.mine-cell.mine::before {
    content: '💣';
    font-size: 0.8rem;
}

.mine-cell.mine-exploded {
    background: #FF0000;
}

.mine-cell[data-count="1"] { color: #0000FF; }
.mine-cell[data-count="2"] { color: #008000; }
.mine-cell[data-count="3"] { color: #FF0000; }
.mine-cell[data-count="4"] { color: #000080; }
.mine-cell[data-count="5"] { color: #800000; }
.mine-cell[data-count="6"] { color: #008080; }
.mine-cell[data-count="7"] { color: #000000; }
.mine-cell[data-count="8"] { color: #808080; }

.mine-controls {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.mine-controls .retro-btn {
    font-size: 0.8rem;
    padding: 5px 10px;
}

/* ==========================================================================
   SOLITAIRE GAME
   ========================================================================== */
#win-solitaire {
    width: 750px;
    height: auto;
    top: 10%;
    left: 15%;
}

.solitaire-header {
    width: 100%;
    background: var(--button-face);
    border: 3px solid;
    border-color: var(--window-border-light) var(--window-border-dark) var(--window-border-dark) var(--window-border-light);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.solitaire-info {
    display: flex;
    gap: 20px;
    font-weight: bold;
    color: var(--button-text);
}

.solitaire-score, .solitaire-timer, .solitaire-stats {
    display: flex;
    gap: 5px;
    align-items: center;
}

.solitaire-header .retro-btn {
    padding: 5px 8px;
    font-size: 0.85rem;
    min-width: auto;
    width: auto;
}

.solitaire-board {
    width: 100%;
}

.solitaire-top-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.card-spacer {
    width: 75px;
}

.solitaire-tableau {
    display: flex;
    gap: 10px;
}

.card-pile {
    width: 75px;
    min-height: 105px;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    position: relative;
    background: rgba(0, 100, 0, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-pile.tableau {
    min-height: 400px;
}

.card {
    width: 71px;
    height: 101px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #333;
    border-radius: 8px;
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 6px;
    user-select: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    z-index: 100;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.card.dragging {
    opacity: 0.7;
    cursor: grabbing;
    transform: rotate(5deg) scale(1.05);
}

.card-back {
    width: 71px;
    height: 101px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
    border: 2px solid #1a1a2e;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.card-back::before {
    content: '';
    position: absolute;
    width: 58px;
    height: 88px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
                inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.card-back::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.05) 10px,
            rgba(255, 255, 255, 0.05) 20px
        );
}

.card-value {
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Georgia', 'Times New Roman', serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

.card-suit {
    font-size: 2rem;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    line-height: 1;
}

.card.red {
    color: #DC143C;
}

.card.red .card-value {
    color: #DC143C;
}

.card.red .card-suit {
    color: #DC143C;
}

.card.black {
    color: #1a1a1a;
}

.card.black .card-value {
    color: #1a1a1a;
}

.card.black .card-suit {
    color: #1a1a1a;
}

.card.face-down {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.card.face-down .card-back {
    display: block;
}

.card:not(.face-down) .card-back {
    display: none;
}

/* ==========================================================================
   IRC CHAT
   ========================================================================== */
#win-irc {
    width: 650px;
    height: 500px;
    top: 10%;
    left: 10%;
    background: transparent;
}

#win-irc .window-content {
    background: rgba(0, 0, 0, 0.5) !important;
}

#irc-messages {
    scrollbar-width: thin;
    scrollbar-color: #00FF00 #000;
}

#irc-messages::-webkit-scrollbar {
    width: 12px;
}

#irc-messages::-webkit-scrollbar-track {
    background: #000;
}

#irc-messages::-webkit-scrollbar-thumb {
    background: #00FF00;
    border: 1px solid #003300;
}

.irc-msg {
    margin-bottom: 5px;
    line-height: 1.4;
    word-wrap: break-word;
}

.irc-msg.system {
    color: #888;
    font-style: italic;
}

.irc-msg.user {
    color: #00FF00;
}

.irc-msg .username {
    color: #00FFFF;
    font-weight: bold;
}

.irc-msg .username.owner {
    color: #FFD700;
    text-shadow: 0 0 5px #FFD700, 0 0 10px #FFA500;
    animation: ownerGlow 2s ease-in-out infinite;
}

@keyframes ownerGlow {
    0%, 100% { text-shadow: 0 0 5px #FFD700, 0 0 10px #FFA500; }
    50% { text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500, 0 0 30px #FF8C00; }
}

.irc-msg .timestamp {
    color: #666;
    margin-right: 5px;
}

.irc-msg.bot {
    color: #FFB000;
}

.irc-msg.bot .username {
    color: #FFB000;
}

.irc-user {
    padding: 3px 5px;
    cursor: pointer;
    transition: background 0.2s;
}

.irc-user:hover {
    background: #003300;
}

/* IRC Context Menu (Admin) */
.irc-context-menu {
    background: #1a1a1a;
    border: 2px solid #00FF00;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
    font-family: 'VT323', monospace;
    font-size: 14px;
}

.irc-menu-header {
    background: #003300;
    color: #00FF00;
    padding: 8px 12px;
    font-weight: bold;
    border-bottom: 1px solid #00FF00;
}

.irc-menu-item {
    padding: 8px 12px;
    color: #00FF00;
    cursor: pointer;
    transition: background 0.2s;
}

.irc-menu-item:hover {
    background: #003300;
}

#irc-input:focus {
    outline: 2px solid #00FF00;
}

#irc-input:disabled {
    background: #1a1a1a;
    color: #666;
    cursor: not-allowed;
    border-color: #333;
}

#irc-input:disabled::placeholder {
    color: #ff6666;
}

/* IRC Username Modal */
.irc-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.irc-modal.hidden {
    display: none;
}

.irc-modal-box {
    background: #111;
    border: 3px solid #00FF00;
    padding: 0;
    width: 300px;
    box-shadow: 0 0 20px #00FF00;
}

.irc-modal-title {
    background: #003300;
    color: #00FF00;
    padding: 10px 15px;
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    text-align: center;
    border-bottom: 2px solid #00FF00;
}

.irc-modal-content {
    padding: 20px;
    text-align: center;
}

.irc-modal-content p {
    color: #00FF00;
    font-family: 'Courier New', monospace;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.irc-modal-content input {
    width: 100%;
    background: #000;
    border: 2px solid #00FF00;
    color: #00FF00;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
}

.irc-modal-content input:focus {
    outline: none;
    box-shadow: 0 0 10px #00FF00;
}

.irc-modal-error {
    color: #FF4444;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 20px;
}

.irc-modal-btn {
    background: #003300;
    border: 2px solid #00FF00;
    color: #00FF00;
    padding: 10px 30px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.2s;
}

.irc-modal-btn:hover {
    background: #004400;
    box-shadow: 0 0 10px #00FF00;
}

/* IRC Ban Overlay */
.irc-ban-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.irc-ban-overlay.hidden {
    display: none;
}

.irc-ban-icon {
    font-size: 8rem;
    margin-bottom: 20px;
    animation: banPulse 1.5s ease-in-out infinite;
}

@keyframes banPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.irc-ban-title {
    font-family: 'VT323', monospace;
    font-size: 3rem;
    color: #FF0000;
    text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000;
    margin-bottom: 20px;
    animation: banFlicker 0.5s ease-in-out infinite;
}

@keyframes banFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.irc-ban-reason {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #FFFFFF;
    text-align: center;
    max-width: 80%;
    opacity: 0.8;
}

/* ==========================================================================
   AUDIO EQUALIZER
   ========================================================================== */
.equalizer-container {
    background: #000;
    border: 2px solid #00FF00;
    padding: 10px;
    margin-top: 10px;
    border-radius: 3px;
    overflow: hidden;
}

.equalizer-title {
    color: #00FF00;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
}

.eq-sliders {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    width: 100%;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.eq-slider-wrapper {
    position: relative;
    height: 100px;
    flex: 1;
    display: flex;
    justify-content: center;
}

.eq-slider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 6px;
    height: 100px;
    background: #111;
    border: 1px solid #00FF00;
    cursor: pointer;
    outline: none;
}

.eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 10px;
    background: #00FF00;
    border: 1px solid #005500;
    cursor: pointer;
    box-shadow: 0 0 5px #00FF00;
}

.eq-slider::-moz-range-thumb {
    width: 16px;
    height: 10px;
    background: #00FF00;
    border: 1px solid #005500;
    cursor: pointer;
    box-shadow: 0 0 5px #00FF00;
}

.eq-label {
    color: #00FF00;
    font-size: 0.7rem;
    font-family: 'VT323', monospace;
    writing-mode: horizontal-tb;
}

.eq-preset-buttons {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.eq-preset-btn {
    flex: 1;
    min-width: 60px;
    background: #1a1a1a;
    border: 1px solid #00FF00;
    color: #00FF00;
    padding: 5px;
    font-family: 'VT323', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.eq-preset-btn:hover {
    background: #002200;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.eq-preset-btn.active {
    background: #00FF00;
    color: #000;
    font-weight: bold;
}

/* ==========================================================================
   SECRET DIALOGUE SYSTEM (Undertale Style)
   ========================================================================== */
.secret-glitch-mode .os-window,
.secret-glitch-mode .taskbar,
.secret-glitch-mode .desktop,
.secret-glitch-mode .crt-overlay,
.secret-glitch-mode .visualizer-layer,
.secret-glitch-mode #fps-counter,
.secret-glitch-mode #win-clock {
    display: none !important;
}

/* Secret Terminal Window */
.secret-terminal {
    background: #0a0a0a !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#secret-login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.secret-prompt {
    display: flex;
    align-items: center;
    gap: 5px;
}

.secret-cursor {
    color: #888;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    animation: secretCursorBlink 1s infinite;
}

@keyframes secretCursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

#secret-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    color: #fff;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    padding: 5px 10px;
    width: 180px;
    text-align: center;
    outline: none;
    letter-spacing: 3px;
    -webkit-text-security: disc;
    text-security: disc;
}

#secret-input::placeholder {
    color: #333;
    letter-spacing: 5px;
}

#secret-input:focus {
    border-bottom-color: #555;
}

#secret-error {
    color: #ff3333;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

#secret-error.visible {
    opacity: 1;
}

.secret-shake {
    display: inline-block;
    animation: secretShake 0.1s infinite;
}

@keyframes secretShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
}

#secret-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#secret-dialogue-box {
    max-width: 800px;
    width: 90%;
    padding: 40px;
    text-align: left;
    position: relative;
}

#secret-dialogue-text {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 2rem;
    color: #ffffff;
    line-height: 1.3;
    min-height: 160px;
    letter-spacing: 1px;
}

#secret-dialogue-continue {
    position: absolute;
    bottom: 10px;
    right: 40px;
    font-size: 1.5rem;
    color: #ffffff;
    visibility: hidden;
}

#secret-dialogue-continue.visible {
    visibility: visible;
    animation: secretBlink 0.8s infinite;
}

@keyframes secretBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

#secret-glitch-text {
    position: absolute;
    font-family: 'VT323', monospace;
    font-size: 4rem;
    color: #0f0;
    text-align: center;
    text-shadow: 2px 2px 0 #f00, -2px -2px 0 #00f;
    pointer-events: none;
    user-select: none;
}

.secret-glitch-line {
    position: absolute;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Pour les écrans moyens (1366x768, 1440x900, etc.) */
@media screen and (max-width: 1600px) {
    body {
        font-size: 14px;
    }

    .os-window {
        max-width: 90vw;
        max-height: 85vh;
    }

    #win-profile {
        width: 90%;
        max-width: 600px;
        height: auto;
        max-height: 80vh;
    }

    #win-audio {
        width: 300px;
        top: 10%;
        right: 2%;
    }

    #win-paint {
        width: 90%;
        max-width: 550px;
        height: auto;
        max-height: 70vh;
    }

    .year-win {
        width: 90%;
        max-width: 550px;
        height: auto;
        max-height: 70vh;
    }

    #win-snake {
        width: 90%;
        max-width: 460px;
        height: auto;
        max-height: 75vh;
    }

    #win-pics {
        width: 90%;
        max-width: 500px;
        height: auto;
        max-height: 70vh;
    }

    #win-tetris {
        width: 90%;
        max-width: 700px;
        height: auto;
        max-height: 80vh;
    }

    .desktop-grid {
        grid-template-columns: repeat(5, 80px) 1fr 80px;
        grid-template-rows: repeat(8, 80px);
        gap: 8px;
    }

    .icon img {
        width: 40px;
        height: 40px;
    }

    .icon-label {
        font-size: 0.95rem;
    }
}

/* Pour les petits écrans (1024x768, tablettes en paysage) */
@media screen and (max-width: 1280px) {
    body {
        font-size: 13px;
    }

    .taskbar {
        height: 38px;
    }

    .start-btn {
        font-size: 1.1rem;
        padding: 2px 8px;
    }

    .taskbar-clock {
        font-size: 0.95rem;
        padding: 4px 12px;
    }

    .os-window {
        max-width: 95vw;
        max-height: 80vh;
    }

    #win-profile {
        width: 95%;
        max-width: 500px;
    }

    #win-audio {
        width: 280px;
    }

    #win-paint {
        width: 95%;
        max-width: 500px;
        height: auto;
        max-height: 70vh;
    }

    .year-win {
        width: 95%;
        max-width: 500px;
        height: auto;
        max-height: 70vh;
    }

    #win-snake {
        width: 95%;
        max-width: 420px;
        height: auto;
        max-height: 70vh;
    }

    #win-pics {
        width: 95%;
        max-width: 450px;
        height: auto;
        max-height: 65vh;
    }

    #win-tetris {
        width: 95%;
        max-width: 650px;
        height: auto;
        max-height: 75vh;
    }

    .sidebar-layout {
        grid-template-columns: 150px 1fr;
        gap: 10px;
    }

    .profile-pic {
        width: 80px;
        height: 80px;
    }

    .retro-btn {
        font-size: 1rem;
        padding: 3px;
    }

    .desktop-grid {
        top: 15px;
        left: 15px;
        right: 15px;
        grid-template-columns: repeat(5, 75px) 1fr 75px;
        grid-template-rows: repeat(8, 75px);
        gap: 6px;
    }

    .icon img {
        width: 36px;
        height: 36px;
    }

    #fps-counter {
        font-size: 14px;
        top: 5px;
        right: 5px;
    }
}

/* Pour les tablettes en portrait et petits portables (768px) */
@media screen and (max-width: 1024px) {
    body {
        font-size: 12px;
    }

    /* Masquer l'alerte de résolution pour les petits écrans */
    #resolution-alert {
        display: none !important;
    }

    .taskbar {
        height: 36px;
    }

    .start-btn {
        font-size: 1rem;
        padding: 2px 6px;
    }

    .start-btn img {
        width: 18px;
        height: 18px;
    }

    .taskbar-clock {
        font-size: 0.9rem;
        padding: 3px 10px;
    }

    .start-menu {
        width: 220px;
    }

    .start-menu-item {
        font-size: 1rem;
        padding: 6px 12px;
    }

    .start-menu-item img {
        width: 20px;
        height: 20px;
    }

    .os-window {
        max-width: 100vw;
        max-height: 85vh;
    }

    #win-profile {
        width: 100%;
        height: 90vh;
        top: 5%;
        left: 0;
        transform: none;
    }

    .sidebar-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    #win-audio {
        width: 95%;
        max-width: 350px;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    #win-paint {
        width: 100%;
        height: 85vh;
    }

    #paintCanvas {
        width: 100%;
        height: 100%;
    }

    .paint-toolbar {
        flex-wrap: wrap;
        padding: 8px;
    }

    #win-snake {
        width: 95%;
        max-width: 420px;
        height: auto;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    #win-minesweeper {
        width: 95%;
        max-width: 400px;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    #win-pics {
        width: 95%;
        max-width: 450px;
        height: auto;
        max-height: 75vh;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    .year-win {
        width: 95%;
        max-width: 500px;
        height: auto;
        max-height: 75vh;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    .popup-win {
        width: 90%;
        max-width: 400px;
        height: auto;
        max-height: 70vh;
    }

    #win-tetris {
        width: 95%;
        max-width: 600px;
        height: auto;
        max-height: 80vh;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    .mine-board {
        overflow: auto;
        max-width: 100%;
    }

    .desktop-grid {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 60px;
        grid-template-columns: repeat(4, 70px) 1fr 70px;
        grid-template-rows: repeat(8, 70px);
        gap: 5px;
    }

    .icon {
        width: 70px;
    }

    .icon img {
        width: 32px;
        height: 32px;
    }

    .icon-label {
        font-size: 0.85rem;
    }

    /* Réduire les effets visuels pour les performances */
    .crt-overlay {
        opacity: 0.5;
    }

    #visuCanvas {
        display: none; /* Masquer le visualizer sur petits écrans pour performances */
    }

    /* Ajuster l'égaliseur */
    .eq-sliders {
        height: 80px;
        gap: 4px;
    }

    .eq-slider-wrapper {
        height: 70px;
    }

    .eq-slider {
        height: 70px;
        width: 6px;
    }

    .eq-label {
        font-size: 0.6rem;
    }

    .eq-preset-buttons {
        gap: 3px;
    }

    .eq-preset-btn {
        font-size: 0.7rem;
        padding: 4px;
        min-width: 50px;
    }
}

/* Pour les smartphones en paysage (640-800px) */
@media screen and (max-width: 800px) {
    body {
        font-size: 11px;
    }

    .visualizer-layer {
        display: none; /* Économie de performance */
    }

    #fps-counter {
        display: none;
    }

    .taskbar {
        height: 34px;
    }

    .window-header {
        font-size: 1rem;
        padding: 4px 8px;
    }

    .close-btn, .minimize-btn {
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 14px;
    }

    .window-content {
        padding: 10px;
    }

    /* Fenêtres adaptatives pour tablettes */
    .os-window {
        border-width: 2px;
        max-width: 95vw !important;
        max-height: calc(95vh - 40px) !important;
    }

    .os-window .window-content {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }

    .window-header {
        min-height: 32px;
        touch-action: none;
    }

    .year-win {
        width: 100%;
        height: 90vh;
        top: 5%;
        left: 0;
        transform: none;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    .photo-thumb {
        height: 80px;
    }

    /* Cyber deck audio player ajusté */
    .cyber-deck {
        padding: 10px;
        gap: 10px;
    }

    .deck-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .deck-volume {
        width: 100px;
    }

    .action-btn {
        font-size: 0.85rem;
        padding: 6px;
    }
}

/* Pour les smartphones en portrait (moins de 640px) */
@media screen and (max-width: 640px) {
    body {
        font-size: 10px;
        overflow: hidden;
    }

    /* Alerte pour vraiment petits écrans */
    #resolution-alert {
        display: flex !important;
    }

    .alert-box {
        padding: 20px;
    }

    .alert-box p {
        font-size: 1.2rem;
    }

    /* Interface simplifiée pour mobile */
    .taskbar {
        height: 32px;
    }

    .start-btn {
        font-size: 0.9rem;
        padding: 2px 5px;
    }

    .tray-btn {
        width: 28px;
        height: 26px;
    }

    .taskbar-clock {
        font-size: 0.8rem;
        padding: 2px 8px;
    }

    .task-items {
        display: none; /* Masquer les tâches sur très petits écrans */
    }

    .start-menu {
        width: 180px;
        bottom: 32px;
    }

    .start-menu-item {
        font-size: 0.9rem;
        padding: 5px 10px;
        gap: 8px;
    }

    .start-menu-item img {
        width: 18px;
        height: 18px;
    }

    /* Masquer les icônes du bureau sur très petits écrans */
    .desktop-grid {
        display: none;
    }

    /* Fenêtres en plein écran */
    .os-window {
        width: 100vw !important;
        height: calc(100vh - 32px) !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0;
        max-width: 100vw;
        max-height: calc(100vh - 32px);
        resize: none !important;
    }

    .window-header {
        padding: 6px 10px;
        min-height: 36px;
    }

    .window-btns {
        gap: 8px;
    }

    .close-btn, .minimize-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
        line-height: 24px;
    }

    .window-content {
        padding: 10px;
        height: calc(100% - 36px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Audio player adapté */
    #win-audio {
        width: 100%;
        max-width: 100%;
    }

    .cyber-deck {
        padding: 8px;
    }

    .deck-screen {
        padding: 3px;
    }

    .screen-glass {
        padding: 6px;
        font-size: 0.9rem;
    }

    .scrolling-text {
        font-size: 1.1rem;
    }

    .deck-controls {
        flex-direction: column;
        gap: 8px;
    }

    .deck-volume {
        width: 100%;
    }

    .deck-actions {
        flex-direction: column;
        gap: 8px;
    }

    .equalizer-container {
        padding: 6px;
    }

    .eq-sliders {
        height: 60px;
        gap: 2px;
    }

    .eq-slider-wrapper {
        height: 50px;
    }

    .eq-slider {
        height: 50px;
        width: 5px;
    }

    .eq-label {
        font-size: 0.5rem;
    }

    /* Paint simplifié */
    .paint-toolbar {
        padding: 5px;
        gap: 5px;
    }

    .color-btn {
        width: 16px;
        height: 16px;
    }

    .brush-size {
        flex-direction: column;
        gap: 2px;
    }

    .paint-slider {
        width: 100px !important;
    }

    /* Snake adapté */
    #snakeCanvas {
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    .snake-stats {
        font-size: 1.2rem;
        padding: 8px 15px;
    }

    /* Minesweeper adapté */
    .mine-header {
        padding: 4px 8px;
    }

    .mine-face {
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
    }

    .mine-counter .digit {
        width: 11px;
        height: 20px;
        font-size: 1.3rem;
    }

    .mine-cell {
        width: 18px;
        height: 18px;
        font-size: 0.8rem;
    }

    .mine-controls {
        flex-direction: column;
        width: 100%;
        gap: 5px;
    }

    .mine-controls .retro-btn {
        width: 100%;
        font-size: 0.75rem;
    }

    /* Galerie photos */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .photo-thumb {
        height: 100px;
    }

    /* Lightbox */
    #lightbox img {
        max-width: 95%;
        max-height: 70%;
    }

    #lightbox-caption {
        font-size: 1.2rem;
        padding: 4px 10px;
    }
}

/* Orientation paysage sur mobile */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .os-window {
        max-height: 90vh;
    }

    #win-snake {
        height: auto;
        max-height: 85vh;
    }

    #snakeCanvas {
        max-height: 50vh;
    }
}

/* Pour les très grands écrans (2K, 4K) */
@media screen and (min-width: 2560px) {
    body {
        font-size: 18px;
    }

    .icon img {
        width: 64px;
        height: 64px;
    }

    .icon {
        width: 100px;
    }

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

    .taskbar {
        height: 50px;
    }

    .start-btn {
        font-size: 1.5rem;
        padding: 4px 15px;
    }

    .taskbar-clock {
        font-size: 1.3rem;
        padding: 6px 20px;
    }

    .os-window {
        border-width: 4px;
    }

    .window-header {
        font-size: 1.4rem;
        padding: 8px 15px;
    }

    .close-btn, .minimize-btn {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* Media query pour les hauteurs d'écran réduites (résolutions comme 1536x695) */
@media screen and (max-height: 750px) {
    .os-window {
        max-height: 80vh !important;
    }

    #win-profile {
        max-height: 75vh !important;
        height: auto !important;
    }

    #win-snake {
        max-height: 75vh !important;
        height: auto !important;
        overflow-y: auto;
    }

    #win-paint {
        max-height: 75vh !important;
        height: auto !important;
    }

    #win-pics {
        max-height: 70vh !important;
        height: auto !important;
    }

    .year-win {
        max-height: 70vh !important;
        height: auto !important;
    }

    .popup-win {
        max-height: 65vh !important;
        height: auto !important;
    }

    #win-wordle {
        max-height: 70vh !important;
        height: auto !important;
    }

    #win-minesweeper {
        max-height: 70vh !important;
        height: auto !important;
    }

    #win-tetris {
        max-height: 75vh !important;
        height: auto !important;
        width: 90% !important;
        max-width: 700px !important;
    }

    /* Ajuster le contenu des fenêtres pour éviter les débordements */
    .window-content {
        overflow-y: auto;
        max-height: calc(75vh - 40px);
    }
}

/* Media query additionnelle pour les très petites hauteurs (< 650px) */
@media screen and (max-height: 650px) {
    .os-window {
        max-height: 85vh !important;
    }

    #win-profile,
    #win-snake,
    #win-paint,
    #win-pics,
    .year-win,
    .popup-win,
    #win-wordle,
    #win-minesweeper,
    #win-tetris {
        max-height: 80vh !important;
        height: auto !important;
        top: 5% !important;
        transform: translateX(-50%) !important;
        left: 50% !important;
    }

    .window-content {
        overflow-y: auto;
        max-height: calc(80vh - 40px);
    }
}

/* ==========================================================================
   WORDLE
   ========================================================================== */
#win-wordle {
    width: 400px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wordle-content {
    background: #0a0a0a;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 2px inset #333;
}

.wordle-message {
    color: #00ff00;
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    min-height: 24px;
    text-align: center;
    text-shadow: 0 0 5px #00ff00;
}

.wordle-grid {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    background: #111;
    padding: 8px;
    border: 2px solid #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.wordle-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.wordle-cell {
    width: 48px;
    height: 48px;
    border: 1px solid #00aa00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 2.2rem;
    color: #00ff00;
    text-transform: uppercase;
    background: #0a0a0a;
    text-shadow: 0 0 5px #00ff00;
    transition: all 0.15s;
}

.wordle-cell.filled {
    border-color: #00ff00;
    color: #fff;
    text-shadow: 0 0 8px #00ff00;
    animation: wordle-pop 0.1s;
}

.wordle-cell.correct {
    background: #00aa00;
    border-color: #00ff00;
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 10px #00ff00;
    animation: wordle-flip 0.5s;
}

.wordle-cell.present {
    background: #aa6600;
    border-color: #ffaa00;
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 10px #ffaa00;
    animation: wordle-flip 0.5s;
}

.wordle-cell.absent {
    background: #222;
    border-color: #444;
    color: #555;
    text-shadow: none;
    animation: wordle-flip 0.5s;
}

@keyframes wordle-pop {
    50% { transform: scale(1.15); border-color: #00ff00; }
}

@keyframes wordle-flip {
    0% { transform: rotateX(0) scale(1); }
    50% { transform: rotateX(90deg) scale(0.9); }
    100% { transform: rotateX(0) scale(1); }
}

.wordle-keyboard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: #111;
    border: 1px solid #333;
}

.wordle-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.wordle-key {
    min-width: 28px;
    height: 42px;
    border: 1px solid #00aa00;
    background: #0a0a0a;
    color: #00ff00;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: all 0.1s;
    text-shadow: 0 0 3px #00ff00;
}

.wordle-key:hover {
    background: #002200;
    box-shadow: 0 0 8px #00ff00;
}

.wordle-key.wide {
    min-width: 50px;
    font-size: 0.9rem;
}

.wordle-key.correct {
    background: #00aa00;
    color: #000;
    border-color: #00ff00;
    text-shadow: none;
}

.wordle-key.present {
    background: #aa6600;
    color: #000;
    border-color: #ffaa00;
    text-shadow: none;
}

.wordle-key.absent {
    background: #222;
    color: #444;
    border-color: #333;
    text-shadow: none;
}

.wordle-streak {
    color: #00ff00;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    padding: 8px 15px;
    background: #0a0a0a;
    border: 1px solid #00aa00;
    text-align: center;
    text-shadow: 0 0 3px #00ff00;
}

.wordle-streak .streak-current {
    color: #ffaa00;
    text-shadow: 0 0 5px #ffaa00;
}

.wordle-streak .streak-best {
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.wordle-game-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.wordle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.wordle-overlay.hidden {
    display: none;
}

.wordle-start-btn {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    padding: 15px 30px;
    background: #0a0a0a;
    color: #00ff00;
    border: 2px solid #00ff00;
    text-shadow: 0 0 5px #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.wordle-start-btn:hover {
    background: #002200;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.5);
    transform: scale(1.05);
}

.wordle-key.special {
    background: #004400;
    border-color: #006600;
}

.wordle-key.special:hover {
    background: #005500;
}

/* ==========================================================================
   2048 GAME
   ========================================================================== */
.game-2048-content {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.game-2048-header {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.game-2048-score, .game-2048-best {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 2px solid #4a4a6a;
    padding: 8px 20px;
    text-align: center;
    min-width: 80px;
}

.game-2048-score span, .game-2048-best span {
    display: block;
    font-family: 'VT323', monospace;
}

.game-2048-score span:first-child, .game-2048-best span:first-child {
    font-size: 0.8rem;
    color: #888;
}

.game-2048-score span:last-child {
    font-size: 1.5rem;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.game-2048-best span:last-child {
    font-size: 1.5rem;
    color: #ffaa00;
    text-shadow: 0 0 5px #ffaa00;
}

.game-2048-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    border: 3px solid #4a4a6a;
    padding: 10px;
    border-radius: 5px;
}

.tile-2048 {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 3px;
    background: #2a2a3e;
    color: #fff;
    transition: all 0.1s;
}

.tile-2048[data-value="2"] { background: #3a3a5e; color: #aaa; }
.tile-2048[data-value="4"] { background: #4a4a6e; color: #bbb; }
.tile-2048[data-value="8"] { background: #ff6b35; color: #fff; text-shadow: 0 0 5px #ff6b35; }
.tile-2048[data-value="16"] { background: #ff4500; color: #fff; text-shadow: 0 0 5px #ff4500; }
.tile-2048[data-value="32"] { background: #ff2200; color: #fff; text-shadow: 0 0 8px #ff2200; }
.tile-2048[data-value="64"] { background: #ff0000; color: #fff; text-shadow: 0 0 10px #ff0000; }
.tile-2048[data-value="128"] { background: #f0e030; color: #000; text-shadow: 0 0 10px #f0e030; font-size: 1.5rem; }
.tile-2048[data-value="256"] { background: #e0d020; color: #000; text-shadow: 0 0 12px #e0d020; font-size: 1.5rem; }
.tile-2048[data-value="512"] { background: #d0c010; color: #000; text-shadow: 0 0 15px #d0c010; font-size: 1.5rem; }
.tile-2048[data-value="1024"] { background: #00ff88; color: #000; text-shadow: 0 0 15px #00ff88; font-size: 1.3rem; }
.tile-2048[data-value="2048"] { background: #00ffff; color: #000; text-shadow: 0 0 20px #00ffff; font-size: 1.3rem; animation: pulse2048 0.5s infinite alternate; }

@keyframes pulse2048 {
    from { box-shadow: 0 0 10px #00ffff; }
    to { box-shadow: 0 0 25px #00ffff, 0 0 40px #00ffff; }
}

/* New tile pop animation */
.tile-2048.tile-new {
    animation: tileNew 0.2s ease-out;
}

@keyframes tileNew {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Merged tile bounce animation */
.tile-2048.tile-merged {
    animation: tileMerge 0.2s ease-out;
}

@keyframes tileMerge {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.game-2048-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 10;
}

.game-2048-overlay.hidden {
    display: none;
}

.game-2048-message {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
}

.game-2048-hint {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* ==========================================================================
   LOFI RADIO
   ========================================================================== */
.lofi-radio-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.radio-visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 60px;
    padding: 10px;
    background: #0a0a15;
    border: 2px inset #333;
    width: 100%;
    box-sizing: border-box;
}

.radio-bar {
    width: 20px;
    height: 10%;
    background: linear-gradient(to top, #ff00ff, #00ffff);
    border-radius: 2px 2px 0 0;
    transition: height 0.1s;
}

.radio-visualizer.playing .radio-bar {
    animation: radioBar 0.4s infinite ease-in-out alternate;
}

.radio-visualizer.playing .radio-bar:nth-child(1) { animation-delay: 0s; }
.radio-visualizer.playing .radio-bar:nth-child(2) { animation-delay: 0.1s; }
.radio-visualizer.playing .radio-bar:nth-child(3) { animation-delay: 0.05s; }
.radio-visualizer.playing .radio-bar:nth-child(4) { animation-delay: 0.15s; }
.radio-visualizer.playing .radio-bar:nth-child(5) { animation-delay: 0.02s; }
.radio-visualizer.playing .radio-bar:nth-child(6) { animation-delay: 0.12s; }
.radio-visualizer.playing .radio-bar:nth-child(7) { animation-delay: 0.08s; }
.radio-visualizer.playing .radio-bar:nth-child(8) { animation-delay: 0.18s; }

@keyframes radioBar {
    0% { height: 15%; }
    100% { height: 90%; }
}

.radio-display {
    text-align: center;
    width: 100%;
    padding: 10px;
    background: #000;
    border: 2px solid #333;
}

.radio-status {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 5px;
}

.radio-status.playing {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.radio-station {
    font-family: 'VT323', monospace;
    font-size: 1.3rem;
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

.radio-controls {
    display: flex;
    gap: 10px;
}

.radio-btn {
    width: 50px;
    height: 40px;
    background: #1a1a2e;
    border: 2px solid #4a4a6a;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.1s;
}

.radio-btn:hover {
    background: #2a2a4e;
    border-color: #6a6a8a;
}

.radio-btn.play {
    width: 70px;
    background: #002200;
    border-color: #00aa00;
    color: #00ff00;
}

.radio-btn.play:hover {
    background: #003300;
}

.radio-btn.play.active {
    background: #004400;
    box-shadow: 0 0 10px #00ff00;
}

.radio-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 10px;
    background: #0a0a15;
    border: 1px solid #333;
}

.radio-volume input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: #333;
    border-radius: 3px;
    cursor: pointer;
}

.radio-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #00ffff;
    border-radius: 50%;
    cursor: pointer;
}

.radio-stations-list {
    width: 100%;
    max-height: 100px;
    overflow-y: auto;
    background: #0a0a15;
    border: 1px solid #333;
}

.radio-station-item {
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: #aaa;
    cursor: pointer;
    border-bottom: 1px solid #222;
    transition: all 0.1s;
}

.radio-station-item:hover {
    background: #1a1a2e;
    color: #fff;
}

.radio-station-item.active {
    background: #002233;
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

/* ==========================================================================
   TETRYYU GAME
   ========================================================================== */
#win-tetris {
    width: 650px; /* Réduit de 780px pour s'adapter au nouveau canvas plus petit */
    height: auto;
    max-height: 700px; /* Limite la hauteur pour éviter que la fenêtre dépasse */
}

.tetris-content {
    background: rgba(0, 0, 0, 0.85) !important; /* Fond plus opaque pour Tetryyu */
    backdrop-filter: blur(10px);
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.tetris-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 0, 128, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.tetris-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.tetris-side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 160px;
}

.tetris-panel-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #333;
    border-radius: 4px;
    padding: 8px;
    box-shadow:
        inset 0 0 20px rgba(0, 255, 255, 0.1),
        0 0 10px rgba(0, 0, 0, 0.5);
}

.tetris-panel-title {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: #888;
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.tetris-panel-box canvas {
    display: block;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
}

.tetris-stats {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #333;
    border-radius: 4px;
    padding: 10px;
}

.tetris-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.tetris-stat:last-child {
    margin-bottom: 0;
}

.tetris-stat .stat-label {
    font-size: 1.1rem;
    color: #666;
    letter-spacing: 1px;
}

.tetris-stat .stat-value {
    font-size: 1.8rem;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    font-weight: bold;
}

/* Timer warning states for Blitz mode */
.tetris-stat .stat-value.timer-warning {
    color: #ffaa00;
    text-shadow: 0 0 10px #ffaa00;
    animation: timer-pulse 1s ease-in-out infinite;
}

.tetris-stat .stat-value.timer-critical {
    color: #ff3333;
    text-shadow: 0 0 15px #ff3333;
    animation: timer-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* Game over time display */
.game-over-time {
    font-size: 2rem;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
    margin: 10px 0;
}

.tetris-board-wrapper {
    position: relative;
    border: 3px solid #444;
    border-radius: 4px;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.8);
    background: #000;
    transition: transform 0.08s ease-out;
}

/* Danger Zone Effect - when 3/4 of board is filled */
.tetris-board-wrapper.danger-zone {
    animation: danger-flash 0.5s ease-in-out infinite;
    border-color: #ff3333;
    box-shadow:
        0 0 30px rgba(255, 50, 50, 0.5),
        inset 0 0 30px rgba(255, 0, 0, 0.2);
}

@keyframes danger-flash {
    0%, 100% {
        border-color: #ff3333;
        box-shadow:
            0 0 30px rgba(255, 50, 50, 0.5),
            inset 0 0 30px rgba(255, 0, 0, 0.2);
    }
    50% {
        border-color: #ff6666;
        box-shadow:
            0 0 40px rgba(255, 80, 80, 0.7),
            inset 0 0 40px rgba(255, 0, 0, 0.3);
    }
}

/* Danger Smoke Effect */
.danger-smoke {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 50, 50, 0.6) 0%, rgba(255, 0, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: smoke-rise 1.5s ease-out forwards;
    filter: blur(5px);
}

@keyframes smoke-rise {
    0% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(2);
    }
}

#tetris-board {
    display: block;
    background: linear-gradient(180deg, #050510 0%, #0a0a20 100%);
}

.tetris-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.tetris-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: tetris-particle-fly 0.8s ease-out forwards;
}

@keyframes tetris-particle-fly {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(0) translate(var(--dx, 0), var(--dy, -50px));
    }
}

.tetris-line-clear {
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        rgba(0, 255, 255, 1),
        rgba(255, 255, 255, 0.8),
        transparent);
    animation: line-clear-flash 0.3s ease-out forwards;
    pointer-events: none;
}

@keyframes line-clear-flash {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(2);
    }
    100% {
        opacity: 0;
        transform: scaleY(0);
    }
}

.tetris-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.tetris-overlay-content {
    text-align: center;
}

/* Countdown Overlay */
.tetris-countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.tetris-countdown-number {
    font-family: 'VT323', monospace;
    font-size: 12rem;
    color: #00ffff;
    text-shadow:
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #0088ff,
        4px 4px 0 #ff00ff;
    animation: countdown-pulse 0.8s ease-out;
}

.tetris-countdown-number.go {
    font-size: 8rem;
    color: #00ff00;
    text-shadow:
        0 0 20px #00ff00,
        0 0 40px #00ff00,
        0 0 80px #00aa00,
        4px 4px 0 #ffff00;
}

@keyframes countdown-pulse {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Menu button selected state for gamepad */
.tetris-menu-btn.selected {
    background: linear-gradient(180deg, #00ffff 0%, #0088ff 100%);
    color: #000;
    box-shadow:
        0 0 15px #00ffff,
        0 0 30px #00ffff,
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.tetris-title {
    font-family: 'VT323', monospace;
    font-size: 3.5rem;
    color: #00ffff;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #0088ff,
        2px 2px 0 #ff00ff;
    margin-bottom: 20px;
    letter-spacing: 8px;
    animation: tetris-title-glow 2s ease-in-out infinite;
}

@keyframes tetris-title-glow {
    0%, 100% {
        text-shadow:
            0 0 10px #00ffff,
            0 0 20px #00ffff,
            0 0 40px #0088ff,
            2px 2px 0 #ff00ff;
    }
    50% {
        text-shadow:
            0 0 20px #00ffff,
            0 0 40px #00ffff,
            0 0 60px #0088ff,
            2px 2px 0 #ff00ff,
            -2px -2px 0 #00ff88;
    }
}

.tetris-start-btn {
    font-size: 1.2rem;
    padding: 10px 30px;
    background: linear-gradient(180deg, #1a1a3e 0%, #0a0a2e 100%);
    border: 2px solid #00ffff;
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
    cursor: pointer;
    transition: all 0.2s;
}

.tetris-start-btn:hover {
    background: linear-gradient(180deg, #2a2a5e 0%, #1a1a4e 100%);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    transform: scale(1.05);
}

.tetris-controls-hint {
    margin-top: 20px;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.tetris-controls-hint p {
    margin: 5px 0;
}

/* Tetris Menu Styles */
.tetris-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
    width: 240px;
}

.tetris-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 1.3rem;
    background: linear-gradient(180deg, #1a1a3e 0%, #0a0a2e 100%);
    border: 2px solid #00ffff;
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.tetris-menu-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #2a2a5e 0%, #1a1a4e 100%);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    transform: scale(1.05);
}

.tetris-menu-btn.tetris-locked {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #666;
    color: #666;
    text-shadow: none;
}

.tetris-menu-btn .menu-icon {
    font-size: 1.5rem;
}

.tetris-menu-btn .menu-label {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    letter-spacing: 2px;
}

.tetris-menu-btn .menu-lock {
    position: absolute;
    right: 10px;
    font-size: 0.9rem;
}

.tetris-settings-btn {
    margin-top: 10px;
    border-color: #ff00ff;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.tetris-settings-btn:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5) !important;
}

/* Tetris Settings Modal */
.tetris-settings-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tetris-settings-content {
    background: linear-gradient(180deg, #1a1a3e 0%, #0a0a2e 100%);
    border: 3px solid #00ffff;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    width: 280px;
    max-height: 90%;
    overflow-y: auto;
}

.tetris-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(180deg, #00ffff 0%, #0088aa 100%);
    color: #000;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    min-height: 36px;
}

.tetris-settings-header .close-btn {
    background: #ff0000;
    color: white;
    border: 2px outset #ff6666;
    padding: 4px 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.tetris-settings-header .close-btn:hover {
    background: #cc0000;
}

.tetris-settings-body {
    padding: 15px;
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section h3 {
    color: #00ffff;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #00ffff;
}

.tetris-keybind {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 3px;
}

.keybind-label {
    color: #aaa;
    font-size: 0.9rem;
}

.keybind-btn {
    min-width: 70px;
    padding: 5px 10px;
    background: linear-gradient(180deg, #2a2a5e 0%, #1a1a4e 100%);
    border: 2px solid #00ffff;
    color: #00ffff;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.keybind-btn:hover {
    background: linear-gradient(180deg, #3a3a7e 0%, #2a2a5e 100%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.keybind-btn.waiting {
    background: #ff00ff;
    border-color: #ff00ff;
    color: #fff;
    animation: pulse-key 0.5s infinite;
}

@keyframes pulse-key {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.settings-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.settings-buttons .retro-btn {
    flex: 1;
    padding: 8px;
    font-size: 0.9rem;
}

/* Gamepad status */
.tetris-gamepad-status {
    margin-top: 10px;
    padding: 8px;
    background: linear-gradient(180deg, #0a3a0a 0%, #0a2a0a 100%);
    border: 2px solid #00ff00;
    color: #00ff00;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    text-align: center;
    animation: gamepad-glow 1s ease-in-out infinite;
}

@keyframes gamepad-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
    50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8); }
}

#tetris-gamepad-info {
    color: #888;
    font-size: 0.9rem;
    padding: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

#tetris-gamepad-info.connected {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
}

/* Gamepad notification popup */
.gamepad-notification {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: linear-gradient(180deg, #1a1a3e 0%, #0a0a2e 100%);
    border: 3px solid #00ff00;
    color: #00ff00;
    padding: 15px 25px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    z-index: 10000;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
    animation: slide-in-notification 0.5s ease-out;
}

@keyframes slide-in-notification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.gamepad-notification.fade-out {
    animation: slide-out-notification 0.5s ease-in forwards;
}

@keyframes slide-out-notification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.tetris-game-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.game-over-text {
    font-family: 'VT323', monospace;
    font-size: 2.8rem;
    color: #ff0044;
    text-shadow:
        0 0 10px #ff0044,
        0 0 20px #ff0044;
    margin-bottom: 15px;
    letter-spacing: 4px;
    animation: game-over-pulse 0.5s ease-in-out infinite;
}

@keyframes game-over-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.game-over-score {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 20px;
}

.game-over-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 220px;
}

.game-over-buttons .tetris-menu-btn {
    padding: 12px 18px;
    font-size: 1.2rem;
}

.tetris-pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 20, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 14;
}

.pause-text {
    font-family: 'VT323', monospace;
    font-size: 3.2rem;
    color: #00ffff;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 30px #0088ff;
    letter-spacing: 6px;
    animation: pause-blink 1s ease-in-out infinite;
}

.pause-hint {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: #888;
    margin-top: 15px;
}

@keyframes pause-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.tetris-combo {
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 1.6rem;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.tetris-combo-text {
    color: #ffcc00;
    text-shadow: 0 0 10px #ffcc00;
    animation: combo-pop 0.3s ease-out;
    font-size: 1.8rem;
    font-weight: bold;
}

.tetris-combo-bonus {
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff;
    font-size: 1.5rem;
}

@keyframes combo-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tetris-music-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.tetris-sound-btn {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #444;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tetris-sound-btn:hover {
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.tetris-sound-btn.muted {
    opacity: 0.5;
}

/* Tetris screen shake effect */
.tetris-shake {
    animation: tetris-shake 0.2s ease-in-out;
}

@keyframes tetris-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Tetris hard drop effect */
.tetris-hard-drop-line {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #00ffff, transparent);
    animation: hard-drop-trail 0.2s ease-out forwards;
    pointer-events: none;
}

@keyframes hard-drop-trail {
    0% {
        opacity: 1;
        height: 100%;
    }
    100% {
        opacity: 0;
        height: 0;
    }
}

/* ==========================================================================
   CHEATER JUMPSCARE
   ========================================================================== */
.cheater-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    animation: cheater-flash 0.15s linear infinite;
}

@keyframes cheater-flash {
    0%, 49% { background: #0a0a0a; }
    50%, 100% { background: #1a0000; }
}

.cheater-alert-icon {
    font-size: 6rem;
    color: #ff0000;
    text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000;
    animation: cheater-shake 0.1s linear infinite;
}

@keyframes cheater-shake {
    0% { transform: translate(-3px, 2px); }
    25% { transform: translate(3px, -2px); }
    50% { transform: translate(-2px, -3px); }
    75% { transform: translate(2px, 3px); }
    100% { transform: translate(-3px, 2px); }
}

.cheater-title {
    font-family: 'VT323', monospace;
    font-size: 4rem;
    color: #ff0000;
    text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 80px #cc0000;
    letter-spacing: 8px;
    text-align: center;
    animation: cheater-shake 0.1s linear infinite;
}

.cheater-subtitle {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: #ff4444;
    letter-spacing: 4px;
    text-align: center;
}

.cheater-message {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #cc3333;
    text-align: center;
    max-width: 500px;
    margin-top: 10px;
    line-height: 1.6;
}

.cheater-id {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: #883333;
    margin-top: 10px;
}

.cheater-bar {
    width: 300px;
    height: 16px;
    background: #1a0000;
    border: 2px solid #ff0000;
    margin-top: 15px;
    overflow: hidden;
}

.cheater-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff4444);
    transition: width 0.3s linear;
    box-shadow: 0 0 10px #ff0000;
}

.cheater-bar-label {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: #ff4444;
    margin-top: 6px;
    letter-spacing: 2px;
}

/* ==========================================================================
   BOOMER MEMORIAL
   ========================================================================== */
.boomer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 3s ease-in;
    overflow: hidden;
}

/* Vignette */
.boomer-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

.boomer-overlay.visible {
    opacity: 1;
}

.boomer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 6s ease-in;
    z-index: 2;
}

.boomer-overlay.content-visible .boomer-content {
    opacity: 1;
}

.boomer-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.2rem;
    color: #e8dcc8;
    letter-spacing: 2px;
    font-weight: 300;
    margin: 0;
    text-align: center;
}

.boomer-photo {
    width: 320px;
    max-width: 80vw;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
}

.boomer-dates {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.4rem;
    color: #a09882;
    letter-spacing: 4px;
    font-weight: 300;
    margin: 0;
}

.boomer-exit-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
    opacity: 0;
    transition: opacity 3s ease-in;
}

.boomer-exit-hint.show {
    opacity: 1;
}

.boomer-credit {
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    opacity: 0;
    transition: opacity 6s ease-in;
}

.boomer-overlay.content-visible .boomer-credit {
    opacity: 1;
}

/* Stars */
.boomer-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: boomer-star-appear ease-in forwards;
}

.boomer-star.bright {
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

@keyframes boomer-star-appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: var(--star-opacity, 0.5);
        transform: scale(1);
    }
}

@keyframes boomer-star-twinkle {
    0%, 100% {
        opacity: var(--star-opacity, 0.5);
    }
    50% {
        opacity: calc(var(--star-opacity, 0.5) * 0.3);
    }
}

/* Snow particles */
.boomer-snow {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: boomer-snowfall linear forwards;
}

.boomer-snow.landed {
    animation: none;
    transition: opacity 3s ease-out;
    opacity: 0;
}

@keyframes boomer-snowfall {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    8% {
        opacity: var(--snow-opacity, 0.4);
    }
    100% {
        opacity: var(--snow-opacity, 0.4);
        transform: translate(var(--snow-drift, 120px), calc(100vh - 8px));
    }
}

/* ==========================================================================
   CREDITS OVERLAY
   ========================================================================== */
.credits-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.credits-overlay.visible {
    opacity: 1;
}

.credits-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'VT323', monospace;
    will-change: transform;
}

.credits-scroll-container h1 {
    font-size: 3.5rem;
    color: #00FF00;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    margin-bottom: 5px;
}

.credits-scroll-container h2 {
    font-size: 2rem;
    color: #00FF00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    margin-bottom: 10px;
}

.credits-scroll-container p {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 5px 0;
}

.credits-section {
    margin-bottom: 80px;
}

.credits-subtitle {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.credits-note {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 10px !important;
}

.credits-final {
    margin-bottom: 50vh;
}

.credits-year {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 1rem !important;
}

.credits-exit-hint {
    position: fixed;
    bottom: 35px;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'VT323', monospace;
    font-size: 1rem;
    z-index: 100000;
    opacity: 0;
    transition: opacity 2s ease-in;
}

.credits-exit-hint.show {
    opacity: 1;
}