/* =========================================================
   UNIVERSAL SETTINGS MODULE - GLOBAL STYLES
   Theme: Blue/Purple Glossy (Stratos Aesthetic)
   ========================================================= */

/* --- 1. THE GEAR ICON --- */
#universal-gear-btn {
    position: fixed;
    top: 5px; 
    right: 15px;
    width: 35px;
    height: 35px;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 99999;
    transition: transform 0.2s ease, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#universal-gear-btn svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

#universal-gear-btn:active {
    transform: scale(0.9) rotate(90deg);
    opacity: 0.7;
}

/* --- 2. THE MODAL OVERLAY --- */
#us-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(12, 12, 20, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#us-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* --- 3. THE MODAL BOX --- */
.us-modal {
    width: 340px;
    background: linear-gradient(180deg, #5D3FD3 0%, #311B92 100%);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.6),
        inset 0 1px 1px rgba(255,255,255,0.2),
        inset 0 -4px 0 rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.1);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    font-family: 'Kanit', sans-serif;
    color: white;
}

#us-overlay.active .us-modal {
    transform: scale(1);
}

/* Header */
.us-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

.us-title {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex; align-items: center; gap: 10px;
}

.us-close-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 32px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.us-close-btn:active { color: white; }

/* --- 4. TOGGLE ROWS --- */
.us-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.us-label {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.us-icon {
    font-size: 24px;
    width: 30px;
    text-align: center;
}

/* IOS STYLE TOGGLE SWITCH */
.us-switch {
    position: relative;
    width: 60px;
    height: 34px;
    display: inline-block;
}

.us-switch input { opacity: 0; width: 0; height: 0; }

.us-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #2c2c54; 
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.us-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

input:checked + .us-slider {
    background-color: #00E5FF; 
}

input:checked + .us-slider:before {
    transform: translateX(26px);
}

/* --- 5. ACTION BUTTONS (Home / Restart) --- */
.us-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.us-btn {
    height: 60px;
    border-radius: 12px;
    border: none;
    font-family: 'Kanit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.us-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.us-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.btn-green {
    background: linear-gradient(180deg, #4ADE80 0%, #22C55E 100%);
    box-shadow: 0 4px 0 #15803D;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-green:active { box-shadow: 0 0 0 #15803D; }

.us-footer {
    margin-top: 15px;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    font-family: sans-serif;
    letter-spacing: 1px;
}

/* =========================================================
   GLOBAL OVERRIDE: PREMIUM 3D BUTTONS
   (Applies to Game Over & Victory Screens in ALL Levels)
   ========================================================= */

/* 1. RESET & BASE SHAPE (Squircle) */
.game-over-buttons .action-btn,
.victory-set .action-btn {
    width: 72px !important;
    height: 72px !important;
    border: none !important;       
    border-radius: 20px !important; 
    background: #333 !important; 
    box-shadow: 0 15px 25px rgba(0,0,0,0.4), 0 4px 0 rgba(0,0,0,0.3) !important;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* 2. GLOSS SHINE */
.game-over-buttons .action-btn::before,
.victory-set .action-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 18px 18px 40% 40% / 18px 18px 10px 10px;
    pointer-events: none;
}

/* 3. ICON STYLING */
.game-over-buttons .action-btn svg,
.victory-set .action-btn svg {
    width: 34px !important;
    height: 34px !important;
    fill: #FFF !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)) !important;
    z-index: 2;
}

/* 4. ACTIVE PRESS STATE */
.game-over-buttons .action-btn:active,
.victory-set .action-btn:active {
    transform: translateY(8px) scale(0.95) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 2px 0 rgba(255,255,255,0.4) !important;
}

/* --- THEME COLORS (Targeting IDs) --- */

/* HOME BUTTON (Ocean Blue) */
#btn-home, #vic-btn-home {
    background: linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%) !important;
    box-shadow: 0 8px 0 #01579B, 0 15px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.4) !important;
}
#btn-home:active, #vic-btn-home:active {
    box-shadow: 0 0 0 #01579B, inset 0 2px 0 rgba(255,255,255,0.4) !important;
}

/* RETRY BUTTON (Amber/Orange) */
#btn-retry, #vic-btn-retry {
    background: linear-gradient(180deg, #FFCA28 0%, #F57C00 100%) !important;
    box-shadow: 0 8px 0 #E65100, 0 15px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.4) !important;
}
#btn-retry:active, #vic-btn-retry:active {
    box-shadow: 0 0 0 #E65100, inset 0 2px 0 rgba(255,255,255,0.4) !important;
}

/* NEXT BUTTON (Emerald Green) */
#btn-next, #vic-btn-next {
    background: linear-gradient(180deg, #66BB6A 0%, #2E7D32 100%) !important;
    box-shadow: 0 8px 0 #1B5E20, 0 15px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.4) !important;
}
#btn-next:active, #vic-btn-next:active {
    box-shadow: 0 0 0 #1B5E20, inset 0 2px 0 rgba(255,255,255,0.4) !important;
}

.action-btn.dormant {
    background: linear-gradient(180deg, #9E9E9E 0%, #616161 100%) !important;
    box-shadow: 0 8px 0 #424242 !important;
    filter: grayscale(1) opacity(0.7);
    cursor: default;
    pointer-events: none;
}

/* =========================================================
   GLOBAL OVERRIDE: FONT RESTORATION (1:1 MATCH)
   (Forces 'Rubik Mono One' on all levels to fix Level 2 issue)
   ========================================================= */

/* 1. CONTAINER LAYOUT */
.failure-message, 
.victory-message {
    font-family: 'Rubik Mono One', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    
    /* Ensure flex alignment is correct globally */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
}

/* 2. "LEVEL" WORD */
.word-level, 
.word-level-vic { 
    color: #FFFFFF !important; 
    font-size: 30px !important;
    letter-spacing: normal !important;
}

/* 3. "FAILED/CLEARED" WORD */
.word-failed, 
.word-cleared-vic { 
    font-size: 48px !important;
    letter-spacing: normal !important;
}

/* 4. COLOR SPECIFICS */
.word-failed { color: #FF4444 !important; }
.word-cleared-vic { 
    color: #9BFF6A !important; 
    text-shadow: 0 0 20px rgba(155, 255, 106, 0.4) !important;
}

/* 5. MOBILE OVERRIDE (To ensure it fits on phones) */
@media (max-width: 600px) {
    .failure-message, .victory-message {
        flex-direction: column !important;
        gap: 0px !important;
        bottom: 52% !important;
    }
    .word-level, .word-level-vic {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }
    .word-failed, .word-cleared-vic {
        font-size: 42px !important;
        line-height: 1.1 !important;
    }


}

/* =========================================================
   ADVENTURE GRID + TRAY VERTICAL POSITION PARITY (#82)
   Aligns Adventure-mode grid + tray vertical position with
   Classic mode. Each Adventure level is its own self-contained
   game (own HTML/CSS/JS in `bloxplode adventure level N/`),
   and the per-level CSS lays out the play surface higher than
   Classic. Rather than patch 10 CSS files identically, we
   compensate here in the shared CSS that all 11 source sets
   already import.

   Reference (Classic at full-scale 404px viewport):
     body padding-top  : 60px (invariant — outside .game-column transform)
     .top-bar height   : 100px (scales with .game-column transform)
     .top-bar margin-b : 20px  (scales)
     => grid top edge  : 60 + 120 * scale

   Two Adventure header layouts exist:
     1. ODD levels (1,3,5,7,9) — `#progress-system` lives INSIDE
        `.game-column`. Header height (52px progress-target +
        24px margin-bottom = 76px) scales with the column.
        body padding-top is 40px.
     2. EVEN levels (2,4,6,8,10) — `#goal-bar` is absolutely
        positioned (top:20px) OUTSIDE `.game-column`.
        body padding-top is 130px (which positions both the
        goal-bar and the start of the column).

   For odd levels we lift body padding-top from 40 -> 60 (matches
   Classic's invariant baseline) and add a 44px margin-top to
   `#grid-wrapper` (44px = 120 - 76, the scaling delta between
   Classic's top-bar+margin and Adventure's progress-system+margin).
   Both margin-top and the surrounding column scale together so
   the grid edge tracks Classic at every viewport.

   For even levels the goal-bar's absolute positioning prevents a
   perfect viewport-tracking match without restructuring (see
   factory-improvement note in PR). We add 50px margin-top to
   `#grid-wrapper` (matches Classic at full 404px viewport;
   residual ~5-7px on sub-380px phones — still within the same
   visual band as Classic, vs the previous 50-60px lift gap).

   These rules use `body:has(...)` to scope to Adventure pages
   only — Classic has neither `#progress-system` nor `#goal-bar`,
   so it is unaffected. The `:has()` selector is already used
   extensively in this codebase (see grid-wrapper combo flashes
   in every level's style.css).
   ========================================================= */

/* Odd Adventure levels: progress-system (Levels 1,3,5,7,9) */
body:has(#progress-system) {
    padding-top: 60px;
}
body:has(#progress-system) #grid-wrapper {
    margin-top: 44px;
}

/* Even Adventure levels: goal-bar (Levels 2,4,6,8,10) */
body:has(#goal-bar) #grid-wrapper {
    margin-top: 50px;
}