/* --- Global Style Infrastructure Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100%; min-height: 100vh;
    background-color: #030205;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: hidden;
}

/* --- GLOBAL FLOATING ESCAPE ENGINE (TOP LEFT) --- */
.back-escape-btn {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ff00ff !important; /* Switched to bright fuchsia so it cuts through the dark eye graphic */
    text-decoration: none !important;
    letter-spacing: 2px !important;
    z-index: 99999 !important;
    background: #000000;
    border: 1px solid #ff00ff; /* Added a sharp matching neon border link */
    padding: 8px 14px;
    box-shadow: 3px 3px 0px #000000;
    transition: all 0.15s steps(4);
}

.back-escape-btn:hover {
    color: #000000 !important;
    background: #a3ff00;
    border-color: #a3ff00;
    box-shadow: 0 0 15px #a3ff00 !important;
    transform: scale(1.05);
}

/* --- RE-STYLED NAV TAB LINKS FOR EXPLICIT CENTERING --- */
.y2k-nav-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.pixel-tab-btn {
    display: block;
    background: #11111a;
    color: #00ffff !important;
    border: 2px solid #222233;
    padding: 12px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none !important; /* Aggressively kills the blue underlines */
    text-align: center; /* Dead centers your text labels inside the tab block box */
    position: relative;
    transition: all 0.15s steps(4);
}

.pixel-tab-btn:hover {
    background: #00ffff;
    color: #000000 !important;
    border-color: #ffffff;
    box-shadow: -5px 5px 0px #ff00ff;
    transform: translate(3px, -3px);
}

/* --- SKELETAL HALLWAY BACKGROUND --- */
.ambient-noise-bg {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXVod3Z4ZzVsbXB0dGp2Y2l0M3R5bmNybDF1b3pjdHZjOGV6d3llMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7SKOwf1nD6j6XhfLMG/giphy.gif') no-repeat center center fixed !important;
    background-size: cover !important;
    z-index: 1 !important;
    opacity: 0.12 !important; /* Low opacity creates an eerie shadow layer */
    filter: contrast(1.6) saturate(0.3) brightness(0.6);
    pointer-events: none;
}

/* --- MAIN CANVAS STAGE ENVELOPE --- */
.shrine-canvas {
    max-width: 1350px;
    margin: 0 auto;
    padding: 6vh 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- HEADER ACTION: BANNER CORE --- */
.shrine-banner-box {
    background: repeating-linear-gradient(45deg, #111, #111 10px, #000 10px, #000 20px);
    border: 3px double #ff00ff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}

.shrine-title-neon {
    font-size: 54px; font-weight: 900; letter-spacing: 16px;
    color: #a3ff00; font-style: italic;
    text-shadow: 3px 3px 0px #ff00ff, 6px 6px 0px #00ffff;
}

.ticker-ribbon {
    background: #a3ff00; color: #000; font-size: 11px; font-weight: bold;
    padding: 4px 0; margin-top: 15px; letter-spacing: 2px;
}

/* --- THE THREE-COLUMN SPLIT SCHEME --- */
.shrine-grid-matrix {
    display: grid;
    grid-template-columns: 300px 1fr 350px;
    gap: 24px;
    align-items: start;
}

.shrine-column { display: flex; flex-direction: column; gap: 24px; }

/* --- COLUMN 1: Y2K TABULAR ACCESS NAVIGATION --- */
.y2k-nav-stack { display: flex; flex-direction: column; gap: 8px; }

.pixel-tab-btn {
    display: block; background: #11111a; color: #00ffff;
    border: 2px solid #222233; padding: 14px;
    font-size: 12px; font-weight: bold; letter-spacing: 2px;
    text-decoration: none; position: relative;
    transition: all 0.15s steps(4);
}
.pixel-tab-btn .bullet { color: #ff00ff; margin-right: 8px; }

.pixel-tab-btn:hover {
    background: #00ffff; color: #000000; border-color: #ffffff;
    box-shadow: -5px 5px 0px #ff00ff; transform: translate(3px, -3px);
}
.pixel-tab-btn:hover .bullet { color: #000000; }

/* RETRO OS DIALOG MODULE */
.win98-alert-box {
    background: #1c1c24; border: 2px solid #333344;
    box-shadow: 4px 4px 0px #000;
}
.win98-title-bar {
    background: #ff00ff; color: #000; font-size: 11px; font-weight: bold;
    padding: 6px 10px; display: flex; justify-content: space-between; letter-spacing: 1px;
}
.win98-content { padding: 16px; display: flex; gap: 14px; align-items: center; }
.warning-icon { font-size: 28px; color: #a3ff00; }
.win98-content p { font-size: 11px; line-height: 1.5; color: #aaa; }

/* --- BRUTALIST NOTEBOOK CARDS --- */
.notebook-card {
    background: #09090e; border: 2px solid #1a1a26;
    padding: 20px; position: relative;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.9);
}

/* Floating Sticker Tags */
.sticker-tag {
    display: inline-block; font-size: 10px; font-weight: bold;
    letter-spacing: 2px; padding: 4px 10px; margin-bottom: 16px;
    border: 1px solid #000; text-transform: uppercase;
}
.tag-green { background: #a3ff00; color: #000; }
.tag-yellow { background: #ffff00; color: #000; }
.tag-pink { background: #ff00ff; color: #000; }
.tag-purple { background: #9d00ff; color: #fff; }

.card-inner-flow { display: flex; flex-direction: column; gap: 10px; }
.date-stamp { font-size: 11px; color: #a3ff00; font-weight: bold; }
.journal-text { font-size: 13px; line-height: 1.7; color: #eee; }

/* Custom Overrides for Distinct Panel Frames */
.box-nerdy { border-color: #ffff00; background: rgba(5,5,8,0.7); }
.box-grunge { border-color: #ff00ff; background: rgba(8,4,8,0.7); }
.box-spotify { border-color: #9d00ff; padding: 12px; }

.spotify-badge-wrapper img { width: 100%; height: auto; display: block; }

/* --- SONY CRT SCREEN ENCLOSURE OVERLAYS --- */
.crt-tv-frame {
    position: relative; width: 100%; height: 260px;
    background: #000000; border: 2px solid #222; overflow: hidden;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.9);
}
.tv-inner-viewport {
    position: absolute; top: 12%; left: 10%; width: 76%; height: 74%;
    z-index: 1; background: #000;
}
.tv-inner-viewport iframe {
    width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.3) brightness(1.1) saturate(0.9);
}
.tv-png-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3; pointer-events: none;
}
.glass-reflection-glare {
    position: absolute; top: 12%; left: 10%; width: 76%; height: 74%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none; z-index: 4;
}

/* --- FLOOR BLINKIE DECK ARRAY --- */
.blinkie-footer-deck { border-top: 2px dashed #222; padding-top: 24px; margin-top: 10px; }
.blinkie-rack { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.blinkie-slot {
    width: 88px; height: 31px; background: #0c0c12; border: 1px solid #222;
    font-size: 8px; font-weight: bold; text-align: center; line-height: 29px; color: #555;
}
.purple-tint { border-color: #a3ff00; color: #a3ff00; }
.red-tint { border-color: #ff00ff; color: #ff00ff; }

/* --- LOUD Y2K STRIPED TICKER RIBBON --- */
.ticker-ribbon {
    background: #a3ff00;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 0;
    margin-top: 15px;
    letter-spacing: 3px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    /* This creates a flashing warning border animation */
    animation: strobeAlert 0.4s infinite alternate steps(2);
}

@keyframes strobeAlert {
    0% { background: #a3ff00; color: #000; border-color: #ff00ff; }
    100% { background: #ff00ff; color: #fff; border-color: #a3ff00; }
}