:root {
    --color-darkest: #0f380f;
    --color-dark: #306230;
    --color-light: #8bac0f;
    --color-lightest: #9bbc0f;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--color-darkest);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', cursive;
    color: var(--color-lightest);
}

/* 
   GAME CONTAINER = THE SAFE GREEN ZONE (540x540 logical)
   This container is sized to fit perfectly between the ribbons.
   It represents the "Green Area" that must be fully visible and clickable.
*/
#game-container {
    position: relative;
    /* Fit within width, and within height minus ribbons (120px) */
    width: min(100vw, calc(100vh - 120px));
    height: min(100vw, calc(100vh - 120px));
    /* Ensure it stays square */
    aspect-ratio: 1 / 1;

    /* Centered visually (flex body handles this, but margin auto is safe) */
    margin: auto;

    /* Border/Shadow for retro feel */
    border: 4px solid var(--color-lightest);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    /* Ensure canvas doesn't overflow this container visually? 
       NO, we want the dead zones to overflow if needed, but be covered by ribbons.
       But ribbons are fixed to body.
       So we allow overflow, but z-index handles hiding.
    */
    overflow: visible;
}

/* 
   GAME CANVAS = THE FULL 600x600 LOGICAL BUFFER
   It is larger than the container (111.11%).
   It is positioned so the Green Area (30,60 to 570,600) aligns with the Container.
*/
#game-canvas {
    display: block;
    position: absolute;

    /* Scale: 600 / 540 = 111.111% */
    width: 111.1111%;
    height: 111.1111%;

    /* Offset: 
       Left: -30 / 540 = -5.5555%
       Top: -60 / 540 = -11.1111%
    */
    left: -5.5555%;
    top: -11.1111%;

    background-color: var(--color-light);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    touch-action: none;

    /* Ensure it is behind ribbons */
    z-index: 1;
}

/* Global Scanline Overlay & CRT Effects */
#scanlines {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;

    /* 1. Static Scanlines (The Mesh) */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;

    /* 2. Vignette (The Tube Shape) */
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.6);
}

/* 3. Rolling Scanline (The Beam) */
#scanlines::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to bottom,
            rgba(155, 188, 15, 0) 0%,
            rgba(155, 188, 15, 0.1) 50%,
            rgba(155, 188, 15, 0) 100%);
    animation: scanline-roll 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanline-roll {
    0% {
        top: -20%;
    }

    100% {
        top: 120%;
    }
}

/* 
   RIBBONS = FIXED UI LAYERS
   They sit on top of everything (z-index 20).
   They cover the "Dead Zones" of the canvas if they overflow the container.
*/
#top-ribbon,
#bottom-ribbon {
    position: fixed;
    /* Fixed to viewport */
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-darkest);
    color: var(--color-lightest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 10px;
    box-sizing: border-box;
    z-index: 20;
    /* Above canvas */
    font-size: 18px;
    text-shadow: 3px 3px 0px var(--color-dark);
    box-shadow: 0 4px 0 var(--color-dark);
    user-select: none;
    touch-action: manipulation;
}

#top-ribbon {
    top: 0;
}

#bottom-ribbon {
    bottom: 0;
}

/* Buttons inside ribbons */
#top-ribbon button,
#bottom-ribbon button {
    background: var(--color-dark);
    color: var(--color-lightest);
    border: none;
    padding: 10px 16px;
    font: inherit;
    cursor: pointer;
    min-width: 56px;
    min-height: 56px;
    box-shadow: 4px 4px 0 var(--color-darkest);
    text-shadow: 3px 3px 0 var(--color-dark);
    /* Flex safety */
    flex: 0 0 auto;
    white-space: nowrap;
}

#top-ribbon button:active,
#bottom-ribbon button:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-darkest);
}

#top-ribbon #title {
    font-size: 28px;
    letter-spacing: 2px;
}

#top-ribbon #stats span {
    margin-left: 20px;
    font-size: 18px;
}

/* Modal overlay */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 56, 15, 0.98);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 30;
    font-size: 20px;
}

#modal-overlay.active {
    display: flex;
}

#modal-container {
    width: 100%;
    max-height: 92%;
    background: var(--color-darkest);
    border-top: 12px solid var(--color-lightest);
    padding: 30px 20px;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#modal-overlay.active #modal-container {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 20px;
    background: var(--color-dark);
    color: var(--color-lightest);
    font-size: 40px;
    width: 64px;
    height: 64px;
    border: none;
    box-shadow: 4px 4px 0 var(--color-darkest);
    cursor: pointer;
}

.modal-close:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-darkest);
}

#ui-layer {
    display: none;
}

/* =========================================
   RESPONSIVE LAYOUT (Mobile / Small Screens)
   ========================================= */
@media (max-width: 600px) {

    /* Shrink Ribbons */
    #top-ribbon,
    #bottom-ribbon {
        padding: 0 5px;
        gap: 2px;
    }

    /* Top Ribbon: Scale down text */
    #top-ribbon #title {
        font-size: 16px;
        letter-spacing: 1px;
    }

    #top-ribbon #stats span {
        margin-left: 8px;
        font-size: 10px;
    }

    /* Bottom Ribbon: Fluid Buttons */
    #bottom-ribbon button {
        flex: 1 1 0;
        /* Share space equally */
        min-width: 0;
        /* Allow shrinking below content size */
        padding: 0;
        /* Remove horizontal padding, center text */
        font-size: 10px;
        /* Smaller text */
        overflow: hidden;
        text-overflow: ellipsis;
        /* "Settings" -> "Set..." */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Start Screen Overlay */
#start-screen {
    position: absolute;
    inset: 0;
    /* Covers the whole game container */
    background-color: rgba(15, 56, 15, 0.90);
    /* Darkest green, high opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* Must be higher than Ribbons (z-index: 20) */
    backdrop-filter: blur(2px);
    /* Slight blur for modern polish */
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

#start-screen .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--color-lightest);
}

#start-screen h1 {
    font-size: 32px;
    margin: 0;
    text-shadow: 4px 4px var(--color-darkest);
    letter-spacing: 2px;
}

#start-screen p {
    font-size: 16px;
    color: var(--color-light);
    margin: 0;
}

/* Retro Blink Animation */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.blink {
    animation: blink 1s step-end infinite;
}

/* Utility to hide the screen */
#start-screen.hidden {
    display: none !important;
}

/* =========================================
   SETTINGS MODAL & RETRO METER
   ========================================= */

.settings-modal {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-header {
    font-size: 24px;
    text-align: center;
    color: var(--color-lightest);
    text-shadow: 4px 4px 0 var(--color-darkest);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.setting-label {
    font-size: 16px;
    color: var(--color-light);
    width: 100px;
    /* Fixed width for alignment */
}

.retro-meter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blocks-container {
    display: flex;
    align-items: center;
    background: var(--color-darkest);
    padding: 4px;
    border: 2px solid var(--color-dark);
}

.block {
    width: 12px;
    height: 16px;
    margin: 0 2px;
    background-color: var(--color-dark);
}

.block.active {
    background-color: var(--color-lightest);
    box-shadow: 0 0 4px var(--color-lightest);
}

.arrow-btn {
    background: var(--color-dark);
    color: var(--color-lightest);
    border: 2px solid var(--color-darkest);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-darkest);
}

.arrow-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.retro-btn {
    background: var(--color-light);
    color: var(--color-darkest);
    border: 4px solid var(--color-darkest);
    padding: 12px 24px;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--color-dark);
}

.retro-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* Mobile Adjustments for Settings */
@media (max-width: 600px) {
    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .retro-meter {
        width: 100%;
        justify-content: space-between;
    }

    .blocks-container {
        flex: 1;
        justify-content: center;
    }

    .block {
        width: 8px;
        /* Smaller blocks */
        margin: 0 1px;
    }
}

/* =========================================
   COURSE MODAL
   ========================================= */

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

.section-title {
    font-size: 14px;
    color: var(--color-light);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.full-width {
    width: 100%;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-items: center;
}

.campaign-btn {
    width: 40px;
    height: 40px;
    background: var(--color-dark);
    color: var(--color-lightest);
    border: 2px solid var(--color-darkest);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-darkest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.campaign-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.campaign-btn:hover {
    background: var(--color-light);
    color: var(--color-darkest);
}

/* =========================================
   LEVEL INDICATOR
   ========================================= */
#level-indicator {
    position: fixed;
    top: 70px;
    left: 10px;
    z-index: 10;
    background: var(--color-darkest);
    color: var(--color-lightest);
    border: 2px solid var(--color-dark);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    padding: 8px;
    pointer-events: none;
    box-shadow: 2px 2px 0 var(--color-darkest);
}