/* ==========================================================================
   1. CORE ARCHITECTURE & IMPORT CHAIN
   ========================================================================== */

@import url('./extras.css');

html {
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
}

/* Setup structural flex/grid flow to accommodate top web viewer layout */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
}


/* ==========================================================================
   2. TARGET SELECTION CURSOR CYCLES
   ========================================================================== */

/* DEFAULT STATE: SELECTING MODE */
html, body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="6" stroke="%23ff0000" stroke-width="2" fill="none"/><path d="M16 2V10M16 22V30M2 16H10M22 16H30" stroke="%23ff0000" stroke-width="2" stroke-linecap="round"/></svg>') 16 16, crosshair !important;
}

/* CLICKED / ACTIVE STATE: BACK TO NORMAL */
html:active, body:active, html:active * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M2 2L13 24L18.5 15.5L26 13L2 2Z" fill="black" stroke="%23ff0000" stroke-width="2" stroke-linejoin="round"/></svg>'), auto !important;
}

/* HOVER HOOKS FOR BUTTON CONTROLS */
a, button, .clickable, .red-button, #button-container button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M2 2L13 24L18.5 15.5L26 13L2 2Z" fill="%23ff0000" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>'), pointer !important;
}


/* ==========================================================================
   3. PERMANENT TEXT ERASER & TERMINAL CLEANUP
   ========================================================================== */

/**
 * Erases the typewriter text block instantly once the adventure initializes.
 * Triggered automatically by CSS target states when the display iframe container turns active.
 */
#content-display[style*="display: block"] ~ #terminal-container,
#content-display[style*="display: block"] ~ #terminal-container *,
body:has(#content-display[style*="display: block"]) #terminal-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* REMOVE THE GREEN STICK: Completely targets and destroys the terminal cursor display element */
.cursor {
    display: none !important;
    width: 0px !important;
    background-color: transparent !important;
    animation: none !important;
}


/* ==========================================================================
   4. ADVANCED MULTI-BUTTON CONFIGURATION & 16.7 MILLION COLOR DECK
   ========================================================================== */

/* Modern horizontal flex dashboard layout for multi-button navigation rules */
#button-container {
    display: none; /* Controlled via script initialization */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 30px auto !important;
    padding: 10px;
    z-index: 1000;
}

/* BASE SPECIFICATION FOR THE MODERN MULTI-BUTTON INTERFACE */
#button-container button {
    color: #ffffff;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 30px;
    border-radius: 8px;
    border: 3px solid #000000;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, filter 0.2s;
    box-shadow: 0 6px 0 #000000, 0 10px 15px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

#button-container button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #000000, 0 4px 6px rgba(0,0,0,0.4);
}

/**
 * 16,777,216 COLOR GRADIENT SPECTRUM SHIFT 
 * Maps structural variations across distinct buttons, transitioning cleanly down into deep shadows.
 */
#button-container button:nth-child(1) { background-color: rgb(255, 0, 0); }               /* Videos - Pure Red */
#button-container button:nth-child(2) { background-color: rgb(200, 15, 25); }             /* Arts - Red-Crimson */
#button-container button:nth-child(3) { background-color: rgb(150, 10, 30); }             /* Websites - Deep Sangria */
#button-container button:nth-child(4) { background-color: rgb(100, 5, 20); }              /* Useless - Maroon Void */
#button-container button:nth-child(5) { background-color: rgb(50, 2, 10); }               /* Useful - Near Black-Red */
#button-container button:nth-child(6), .red-button { background-color: rgb(20, 0, 5); }  /* Random / Default - Ultimate Shadow Black */

/* Interactive Hover States: Increases vibrant brilliance via hardware-accelerated filter channels */
#button-container button:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 8px 12px rgba(255, 0, 0, 0.3), 0 6px 0 #000000;
}

/* White Ambient Light Speed Shine effect over the multi-button deck */
#button-container button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.35) 50%, transparent 55%);
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
}

#button-container button:hover::after {
    left: 130%;
    opacity: 1;
    transition: left 0.5s ease-in-out;
}


/* ==========================================================================
   5. VIEW PORT ENHANCEMENTS (Screen Web Viewer on Top)
   ========================================================================== */

#content-display {
    order: -1; /* Forces DOM rendering engine to display the viewport container on top */
    width: 100% !important;
    max-width: 1781px !important;
    height: 75vh !important; /* Maximizes vertical scaling architecture above dashboard */
    border: 3px solid #00FF00 !important;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
    background: #0d0d0d !important;
    margin-bottom: 20px;
}


/* ==========================================================================
   6. CUSTOM INDUSTRIAL RED SYSTEM SCROLLBARS
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #ff0000 #000000;
}