:root {
    --bg: #000000;
    --panel: #000000;
    --border: #222;
    --text: #eee;
    --accent: #bb86fc;
    --red: red;
    --green: green;
    --blue: blue;
    --button-text: #bdbdbd;
    --vessel: #141414;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: monospace, sans-serif;
    height: var(--app-h, 100vh);
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 1.2s ease;
}

/* --- THE MAIN GRID --- */
/* Update just this block */
/* --- THE MAIN GRID --- */
.app-layout {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    /* Fixed natural size — transform handles scaling for all screen sizes. */
    height: 486px;
    width: 375px;
    transform: scale(var(--landscape-scale, 1));
}




/* --- SIDEBARS (Left & Right) --- */
.col-left,
.col-right {
    background: var(--panel);
    /* border-right: 1px solid var(--border);
    border-left: 1px solid var(--border); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    z-index: 10;
    width: 60px;
    /* Enforce width */
    box-sizing: border-box;
        transition: background-color 1.2s ease;
}



/* Icon Buttons */
.icon-btn {
    background: var(--vessel);
    border: none;
    color: var(--button-text);
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin: 5px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
        display: flex;
    flex-direction: column;
    gap: 4px;
}

.icon-btn span {
        opacity: .7;
    text-transform: capitalize;
    font-size: .5rem;
    letter-spacing: 1px;
}
.icon-btn:hover {
    background: #222;
    color: #fff;
}

.icon-btn:active {
    transform: scale(0.9);
    color: var(--accent);
}

.icon-btn.accent {
    color: var(--accent);
}

/* Grouping in Sidebars */
.nav-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.logo-area {
    margin-bottom: 20px;
    color: var(--accent);
    cursor: pointer;
}

.level-badge, .score-display {
        font-size: .6rem;
    color: var(--button-text);
    font-weight: 700;
    border: 1px solid #333;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--vessel);
            text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
    width: 48px;
}

/* --- CENTER COLUMN (The Lab) --- */
.col-center {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: auto;
    /* Enforce width */
    background: var(--vessel);
    min-width: 0;
    /* Critical CSS Grid fix to prevent blowout */
    border-radius: 24px;
}

.screen.active {
    display: flex;
}

/* Scroll Zone for Grids */
.scroll-zone {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 20px;
    /* Hide Scrollbar but keep functionality */
    scrollbar-width: none;
}

.scroll-zone::-webkit-scrollbar {
    display: none;
}

/* --- GAME UI LAYOUT --- */
/* 1. Header */
.game-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    display: none;
}

#game-match {
    font-size: 1.2rem;
    color: #fff;
}

/* 2. Vessel (Maximize space) */
.vessel-frame {
    flex: 1;
    background: #080808;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
}

.liquid-box {
    flex: 1;
    transition: background 0.5s ease;
    width: 100%;
    /* force GPU compositing layer — snaps to whole pixels */
    transform: translateZ(0);
    /* prevent subpixel gaps between flex children */
    margin-bottom: -2px;
}

.liquid-box:last-child {
    margin-bottom: 0;
}
/* 3. Feedback Bar */
.progress-bar-area {
    height: 6px;
    margin-bottom: 20px;
    width: 100%;
}

.bar-track {
    width: 100%;
    height: 100%;
    background: var(--panel);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0%;
    background: transparent;
    transition: width 0.3s;
    display: flex;
}

.ink-segment {
    flex: 1;
    height: 100%;
}

/* 4. RGB Controls (Bottom) */
.rgb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    height: 48px;
    /* Compact but touchable */
    width: 100%;
}

.rgb-btn {
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.7rem;
    color: var(--button-text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--vessel);
}



.rgb-btn.red {
    /* background: var(--red);
    box-shadow: 0 4px 0 #d32f2f; */
    border: 2px solid red;
}
#val-r {
    color: red;
}

.rgb-btn.green {
    /* background: var(--green);
    box-shadow: 0 4px 0 #388e3c; */
        border: 2px solid green;

}
#val-g {
    color: green;
}
.rgb-btn.blue {
    /* background: var(--blue);
    box-shadow: 0 4px 0 #1976d2; */
        border: 2px solid #1976d2;


}
#val-b {
    color: #1976d2;
}
#val-r, #val-g, #val-b {
    margin-top: 4px;
    font-size: 1rem;
}
.val-text {
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 0.5rem;
    letter-spacing: 1px;
}
.rgb-btn:active {
    transform: translateY(4px);
    box-shadow: none !important;
}

/* --- HOME SCREEN --- */
.vessel-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome-text {
    font-size: 1.8rem;
    letter-spacing: 4px;
    text-align: center;
}

.welcome-sub {
    font-size: 0.7rem;
    color: var(--accent);
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.action-btn-large {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 15px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.action-btn-large:hover {
    border-color: var(--button-text);
}

/* --- GRIDS (Journey/Daily) --- */

.calendar-nav-mini {
    padding: 14px 0;
    width: 100%;
        font-size: 0.7rem;
    text-align: center;
}
.cal-item .stars-row {
    height: inherit;
    margin-top: 4px;
}




/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    width: 260px;
}



/* .lvl-item.solved .lvl-sq::after {
    content: "✓";
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 0.8rem;
} */

.logo-area h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 4px;
    color: var(--button-text);
    text-transform: uppercase;
    cursor: default;
}

#tutorial-grid {
    color: var(--text);
}

svg {
    stroke: var(--button-text);
}

.status-area {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.res-row {
    color: gold;
    font-size: larger;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.progress-text {
    align-items: center;
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--button-text) !important;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}


/* --- CALENDAR FIXES --- */
/* Ensure the grid fits perfectly in the 375px mobile view */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* Tighter gap */
    width: 100%;
    padding-top: 24px;
}

.cal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 29px;
    /* background: #222; */
    border-radius: 6px;
    cursor: default; 
}

.cal-day {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    /* Default Unsolved State: Transparent with Border */
    background: transparent;
    /* border: 2px solid #333;  */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--button-text);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.cal-day.locked {
    border-color: #222;
    color: #444;
    cursor: default;
}

/* Solved State: Full Color + Tick */
.cal-day.solved {
    border: none;
    color: #fff; /* Number color */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* .cal-day.solved::after {
    content: "✓";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.6rem;
    font-weight: 900;
} */

/* Stars Row (Used in both Journey and Calendar) */
.stars-row {
    color: #ffd700;
    height: 6px;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: -2px;
    transform: scale(0.7);
    transform-origin: center top;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2px;
}

/* --- JOURNEY GRID FIXES --- */


.lvl-item {
    display: flex;
    padding: 4px 0px;
    cursor: pointer;
    justify-content: center;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    padding-top: 10px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.lvl-sq {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    position: relative;
}

/* Journey Tick Mark */
.lvl-sq.solved::after {
    content: "✓";
        display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 0.7rem;
}

/* --- STATUS AREA UPDATES --- */


.res-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.res-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    color: var(--text-dim);
}

.res-text-dim {
    color: #555 !important;
    font-size: 0.7rem !important;
}

.status-context-label {
    /* font-size: 0.8rem; */
    letter-spacing: 0.12em;
    color: #ababab;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Button inside Status Area (for Solve/Next if needed) */
.status-btn {
    margin-top: 8px;
    background: var(--panel);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    cursor: pointer;
    text-transform: uppercase;
}


/* --- SCREEN & SCROLL LOGIC --- */

/* 1. Make Screens fill the Center Column completely */
.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--vessel);
    /* Remove fixed padding so we can do edge-to-edge if needed */
    padding: 0 15px 10px; 
}

#screen-daily {
    padding: 6px;
}
.screen.active {
    display: flex;
}

/* 2. The Scroll Container (Takes all remaining height) */
.scroll-zone {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 40px; /* Space at bottom so last item isn't cut off */
    
    /* Hide Scrollbar (Chrome/Safari/Webkit) */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.scroll-zone::-webkit-scrollbar { display: none; }

/* 3. Sticky Headers for Hubs */
.sticky-header {
    background: var(--vessel); /* Ensure text doesn't overlap when scrolling */
    z-index: 10;
    padding: 10px 0 10px;
    border-bottom: 1px solid #222;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.sticky-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
}

.sticky-subtitle {
    font-size: 0.6rem;
    color: var(--button-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}
#btn-cal-prev, #btn-cal-next {
    background: var(--vessel);
    border: none;
    color: var(--button-text);
    padding: 0 12px;
    cursor: pointer;
}
/* 4. Grid Adjustment for Full Width */

#btn-share {
    display: none;
}

#btn-mix-r:focus, #btn-mix-g:focus, #btn-mix-b:focus,
#btn-mix-r:focus-visible, #btn-mix-g:focus-visible, #btn-mix-b:focus-visible {
    outline: none;
}
/* Container for the accordion group */
.tier-group {
    width: 100%;
    margin-bottom: 5px;
}

/* The Clickable Header */
.mode-header {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    padding: 8px;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: 0.7rem;
}

/* Active State (When opened) */
.mode-header.active {
    background: #222;
    color: #fff;
    border-color: #333;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* The Arrow Animation */
.tier-arrow {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform 0.3s ease;
}

/* Rotate arrow 90deg when active class is present */
.mode-header.active .tier-arrow {
    transform: rotate(90deg);
}

.tier-stats {
    font-size: 0.6rem;
    opacity: 0.6;
}

/* Container for dynamic buttons */
/* Container for the dynamic buttons */
.status-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
    width: 100%;
    min-height: 28px; /* Prevent layout jump */
    color: var(--button-text);
        text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
    flex-wrap: wrap;
}

/* The CTA Buttons */
.cta-btn {
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cta-btn:hover {
    border-color: #666;
    color: #fff;
}

/* Primary Action (Next Level / Daily Challenge) */
.cta-btn.primary {
    border-color: var(--button-text);
    color: var(--button-text);
}

.cta-btn.primary:hover {
    background: var(--button-text);
    color: #000;
}

/* Add/Replace in your index.css */

/* --- RIGHT COLUMN BUTTONS --- */
.col-right {
    background: var(--panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    z-index: 10;
    width: 60px;
    box-sizing: border-box;
    transition: background-color 1.2s ease;
}

/* New Today Button */
.today-btn {
    width: 48px;
    height: 48px;
    background: var(--vessel);
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--button-text);
    margin-bottom: 5px;
    margin-top: 5px;
}

.today-btn span {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.today-btn.completed::after {
    content: "✓";
    color: var(--text);
    font-size: .7rem;
    text-align: center;
}

/* Tool Groups */
.tool-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
}

/* Adjust stacking within groups if needed */
.icon-btn {
    /* Existing styles... */
    background: var(--vessel);
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}



/* THE NEW CLOSE BUTTON STYLE */
.close-hub-btn, #btn-close-tut {
    position: absolute; /* Floats independently */
    right: 0;
    top: 10px;
    
    background: transparent;
    border: none;
    color: #666;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.2s;
}

.close-hub-btn:hover, #btn-close-tut:hover {
    color: #fff;
    background: #222;
}

.score-count {
    color: #ffd700; /* Gold color */
}
.status-score-count {
    color: #ffd7008c;
    font-size: 0.7rem;
    margin-top: 4px;
}

/* body.light-theme .tool-group .level-badge, */
/* body.light-theme .tool-group .score-display, */
/* body.light-theme .tool-group .score-count */
 body.light-theme .logo-area h2 {
    color: #000 !important;
}

#journey-content {
    /* 1. FORCE SCROLLING INTERNALLY */
    flex: 1;               /* Take up remaining space */
    overflow-y: auto;      /* Enable vertical scroll */
    height: 100%;          /* Essential to define scroll bounds */
    padding-bottom: 60px;  /* Space for bottom buttons */

    /* 2. THE SCROLL TRAP (Magic Fix) */
    overscroll-behavior: contain; /* Stops scroll from passing to Reddit */
    touch-action: pan-y;          /* Tells browser "We handle Vertical swipes" */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
}

#screen-journey {
    padding: 0 6px 10px;
}

.lvl-sq-wrap {
        display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

@keyframes victoryRainbow {
    0%   { background-color: #000000; } /* Red */
    5%   { background-color: #ff8000; } /* Orange */
    10%  { background-color: #ffff00; } /* Yellow */
    15%  { background-color: #00ff00; } /* Green */
    20%  { background-color: #00ffff; } /* Cyan */
    25%  { background-color: #0000ff; } /* Blue */
    30%  { background-color: #8000ff; } /* Purple */
    35%  { background-color: #ff00ff; } /* Magenta */
    40%  { background-color: #FFB3BA; } /* Pastel Red */
    45%  { background-color: #FFDFBA; } /* Pastel Orange */
    50%  { background-color: #FFFFBA; } /* Pastel Yellow */
    55%  { background-color: #BAFFC9; } /* Pastel Green */
    60%  { background-color: #BAE1FF; } /* Pastel Blue */
    65%  { background-color: #D4B2FF; } /* Pastel Purple */
    70%  { background-color: #F0F0F0; } /* Off-White */
    75%  { background-color: #FFFFFF; } /* Pure White */
    80%  { background-color: #A0A0A0; } /* Silver/Gray */
    85%  { background-color: #404040; } /* Dark Gray */
    90%  { background-color: #ff0000; } /* Pure Black */
    100% { background-color: #000000; } /* Loop back to Red */
}

.victory-cycle-bg {
    animation: victoryRainbow 20s ease-in-out 1 forwards !important;
    transition: background-color 4s ease !important;
}

/* @media (orientation: landscape) and (max-height: 500px) {
    body {
        align-items: flex-start;
        justify-content: center;
    }
    .app-layout {
        /* Scale down to fit, anchor from top so nothing clips off-screen 
        transform-origin: top center;
        transform: scale(var(--landscape-scale, 1));
        /* Pull layout up so the gap from scaling doesn't leave dead space 
        margin-top: 0;
        /* The scaled-down visual height is 486*scale, but DOM height is still
           486px — use negative margin-bottom to collapse that extra space 
        margin-bottom: calc((var(--landscape-scale, 1) - 1) * 486px);
    }
} */

#btn-prev, #btn-next, #btn-reset, #btn-undo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}