body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #E8F8FF;
    transition: background 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10pt;
    color: #ff6200;
    overflow: hidden;
}

body.loaded {
    background: black;
}

/* Prevent flashing when entering/exiting fullscreen */
:fullscreen body,
:fullscreen body.loaded,
body:fullscreen,
body.loaded:fullscreen {
    transition: none;
}

@keyframes gradientAnimation {
    0% {
        background-position: 50% 50%;
    }

    50% {
        background-position: 150% 50%;
    }

    100% {
        background-position: 50% 50%;
    }
}



#game-wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#outer {
    width: 100%;
    height: 100%;
    position: relative;  /* So absolute children position relative to it */
}

/* CSS Custom Properties for consistent UI spacing */
:root {
    --ui-padding-x: 5vw;
    --ui-padding-y: 4vh;
    --ui-gap: 1vh;
}

/* UI Overlay Grid Container */
#ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--ui-padding-y) var(--ui-padding-x);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
        "top-left    top-center  top-right"
        "second-left second-left ."
        ".           .           ."
        ".           .           ."
        "bottom-left bottom-left bottom-right";
    pointer-events: none;
    z-index: 3100;
    box-sizing: border-box;
    overflow: hidden;
}

/* Rainbow border shown when game is active - colors jump around the border every 4s */
#ui-overlay.show {
    animation: rainbowBorderRotate 16s steps(1, end) infinite;
}

@keyframes rainbowBorderRotate {
    0%, 100% {
        box-shadow:
            inset 4px 0 0 0 rgb(145, 247, 255),   /* left: Sky Cyan */
            inset -4px 0 0 0 rgb(255, 199, 93),   /* right: Peach Orange */
            inset 0 4px 0 0 rgb(255, 91, 91),     /* top: Coral Red */
            inset 0 -4px 0 0 rgb(184, 255, 82);   /* bottom: Lime Green */
    }
    25% {
        box-shadow:
            inset 4px 0 0 0 rgb(184, 255, 82),    /* left: Lime Green */
            inset -4px 0 0 0 rgb(255, 91, 91),    /* right: Coral Red */
            inset 0 4px 0 0 rgb(145, 247, 255),   /* top: Sky Cyan */
            inset 0 -4px 0 0 rgb(255, 199, 93);   /* bottom: Peach Orange */
    }
    50% {
        box-shadow:
            inset 4px 0 0 0 rgb(255, 199, 93),    /* left: Peach Orange */
            inset -4px 0 0 0 rgb(145, 247, 255),  /* right: Sky Cyan */
            inset 0 4px 0 0 rgb(184, 255, 82),    /* top: Lime Green */
            inset 0 -4px 0 0 rgb(255, 91, 91);    /* bottom: Coral Red */
    }
    75% {
        box-shadow:
            inset 4px 0 0 0 rgb(255, 91, 91),     /* left: Coral Red */
            inset -4px 0 0 0 rgb(184, 255, 82),   /* right: Lime Green */
            inset 0 4px 0 0 rgb(255, 199, 93),    /* top: Peach Orange */
            inset 0 -4px 0 0 rgb(145, 247, 255);  /* bottom: Sky Cyan */
    }
}

#ui-overlay > * {
    pointer-events: auto;
}

#ui-top-left {
    grid-area: top-left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#ui-top-center {
    grid-area: top-center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

#ui-top-right {
    grid-area: top-right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    max-width: 50vw;
    overflow: visible;
    position: relative;
    padding-right: 2vw;
}

#ui-second-left {
    grid-area: second-left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

#ui-compass {
    position: fixed;
    top: 1vw;
    right: 3vh;
    z-index: 9998;
    pointer-events: none;
}

/* Policy Badges — fixed top-left corner */
#policy-badges {
    position: fixed;
    top: 4.5vw;
    left: 6.5vw;
    z-index: 3200;
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    pointer-events: none;
}

.policy-badge {
    width: 8vw;
    height: auto;
    image-rendering: pixelated;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.2s;
}

.policy-badge.inactive {
    opacity: 0.5;
}

#ui-bottom-left {
    grid-area: bottom-left;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2vh;
    margin-bottom: -5px;
    padding-left: 2vw;
}

#ui-bottom-right {
    grid-area: bottom-right;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    gap: var(--ui-gap);
    max-width: 50vw;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    margin-bottom: -5px;
    padding-bottom: 1vh;
}

#ui-bottom-right.show {
    opacity: 1;
}

#top-spacer {
    width: 100%;
    height: 50px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    pointer-events: none;
}

#the-stream {
    width: 100%;
    height: 100vh; /* Always full height - clip-path controls visible area */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    clip-path: url(#wave-clip-inverse); /* Inverse wave clip with ripples at top */
    pointer-events: none; /* Stream is decorative only */
}

#game-menu {
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#game-menu.show {
    opacity: 1;
    pointer-events: auto;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #E8F8FF;
    transition: background-color 0.5s ease;
    overflow: visible;
    pointer-events: none; /* Allow clicks to pass through to elements above/below */
}

body.loaded #container {
    background-color: transparent;
}

canvas {
    display: block;
    pointer-events: auto; /* Allow canvas to receive clicks */
    /* Phaser.Scale.FIT handles sizing and Phaser.Scale.CENTER_BOTH handles centering */
}

#climate_number {
    font-family: Courier New, Courier, monospace;
    color: #000000;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}

/* Land Use Info - Floating Window Style */
#land-use-info {
    position: fixed;
    right: 3vw;
    top: calc(37vh + 3vw);
    width: 20vw;
    z-index: 3800;
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px solid #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#land-use-info.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#land-use-info .window-titlebar {
    display: flex;
    background-color: #000;
    color: #ff6200;
    padding: 0.6vh 0.8vw;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8vw;
    text-shadow: none;
    cursor: grab;
}

#land-use-info .window-close {
    display: block;
    font-size: 1.0vw;
    line-height: 1;
    cursor: pointer;
    margin-right: 0.8vw;
    transition: color 0.2s;
}

#land-use-info .window-close:hover {
    color: #ff6666;
}

#land-use-info .window-content {
    padding: 1vh 1vw;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7vw;
    color: #000;
    line-height: 1.8;
    text-shadow: none;
    min-height: 10vh;
    overflow-y: auto;
}

#land-use-info .info-title {
    font-weight: bold;
    margin-bottom: 0.6vh;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

#land-use-info .info-bullet {
    padding-left: 1vw;
    text-indent: -1vw;
    margin-bottom: 0.4vh;
    font-size: 0.6vw;
}

#land-use-info .info-section-header {
    font-weight: bold;
    margin-top: 0.8vh;
    margin-bottom: 0.4vh;
    color: #ff6200;
    border-top: 1px solid #333;
    padding-top: 0.5vh;
}

#land-use-info .info-sub-bullet {
    padding-left: 2vw;
    text-indent: -0.8vw;
    margin-bottom: 0.3vh;
    font-size: 0.55vw;
}

/* Activity Log Window */
#activity-log {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    min-height: 10vh;
    max-height: 20vh;
    overflow: hidden;
    z-index: 3600;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#activity-log.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#activity-log .window-titlebar {
    display: flex;
    align-items: center;
    background-color: #000;
    color: #ff6200;
    padding: 0.6vh 0.8vw;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8vw;
    text-shadow: none;
}

#activity-log .window-close {
    display: block;
    font-size: 1.0vw;
    line-height: 1;
    cursor: pointer;
    margin-right: 0.8vw;
    transition: color 0.2s;
}

#activity-log .window-close:hover {
    color: #ff6666;
}

#activity-log .window-content {
    padding: 0.6vh 1vw;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.55vw;
    color: #fff;
    line-height: 1.8;
    text-shadow: none;
    max-height: calc(20vh - 3vh);
    overflow-y: auto;
    overflow-x: hidden;
}

#activity-log .window-content::-webkit-scrollbar {
    width: 6px;
}

#activity-log .window-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#activity-log .window-content::-webkit-scrollbar-thumb {
    background: #ff6200;
    border-radius: 3px;
}

#activity-log .log-header,
#activity-log .log-entry {
    display: grid;
    grid-template-columns: 3vw 1fr 8vw 8vw;
    gap: 1vw;
    align-items: baseline;
    padding: 0.3vh 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#activity-log .log-header {
    font-weight: bold;
    color: #ff6200;
    border-bottom: 2px solid #ff6200;
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.95);
    overflow: visible;
    white-space: nowrap;
}

#activity-log .log-col-year {
    color: lightblue;
    font-weight: bold;
    text-align: left;
}

#activity-log .log-col-action {
    color: #fff;
    overflow-wrap: break-word;
    min-width: 0;
    text-align: left;
}

#activity-log .log-col-delta {
    color: #0f0;
    font-weight: bold;
    text-align: right;
}

#activity-log .log-col-total {
    color: lightblue;
    text-align: right;
}

#activity-log .log-disaster .log-col-action {
    color: #ff4444;
    font-weight: bold;
}

#activity-log .log-rebuild .log-col-action {
    color: #e8a317;
}

/* Entry group headers (multi-entry stacks) */
#activity-log .log-group-header {
    cursor: pointer;
}

#activity-log .log-group-header:hover {
    background: rgba(255, 98, 0, 0.15);
}

#activity-log .log-group-entries {
    display: none;
    padding-left: 1em;
}

#activity-log .log-group-entries.open {
    display: block;
}

#activity-log .log-stream-summary {
    cursor: pointer;
}

#activity-log .log-stream-summary:hover {
    background: rgba(255, 98, 0, 0.15);
}

#activity-log .log-stream-summary .log-col-action {
    color: #fff;
}

#activity-log .stream-toggle {
    font-size: 0.7em;
    margin-right: 0.3em;
    display: inline-block;
    transition: transform 0.15s;
}

#activity-log .stream-details {
    display: none;
    padding-left: 1em;
}

#activity-log .stream-details.open {
    display: block;
}

#activity-log .stream-detail-row {
    display: grid;
    grid-template-columns: 3vw 1fr 8vw 8vw;
    gap: 1vw;
    align-items: baseline;
    padding: 0.15vh 0;
    color: #bbb;
    font-size: 0.9em;
}

#activity-log .stream-calc {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 0 0.3em;
    text-align: right;
    justify-content: end;
}

#activity-log .stream-calc .sc-op {
    text-align: center;
    color: #888;
}

#activity-log .log-empty {
    color: #888;
    font-style: italic;
}

/* Location Display (city, state) - in bottom-right UI, left of streaming status */
#location-display {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.85vw;
    font-weight: normal;
    color: #0f0;
    text-shadow: none;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}

#location-display.show {
    opacity: 1;
}

/* Climate Score Display (top center) */
#climate-score {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2vw;
    font-weight: bold;
    background: linear-gradient(135deg, rgb(167, 227, 255), rgb(255, 255, 255), rgb(167, 227, 255));
    background-size: 400% 400%;
    animation: helpLineGradientShift 8s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: auto;
    opacity: 0;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.5s ease;
}

#climate-score.show {
    opacity: 1;
}

#disaster-banner {
    font-family: 'arial', Arial, Helvetica, sans-serif;
    font-size: 3vw;          /* match climate score */
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    color: #FF4C00;
}

#disaster-banner.show {
    opacity: 1;
}


/* Year Timer Display (top left) */
#year-timer {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2vw;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}

#year-timer.show {
    opacity: 1;
}

/* Current year/date - clickable for speed control */
#current-year {
    background: linear-gradient(135deg, rgb(167, 227, 255), rgb(255, 255, 255), rgb(167, 227, 255));
    background-size: 400% 400%;
    animation: helpLineGradientShift 8s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
}

#current-year:hover {
    opacity: 1;
}

/* Temperature display (top right) - clickable to toggle °C/°F */
#temperature-display {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.4vw;
    font-weight: bold;
    color: rgb(167, 227, 255);
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.5s ease;
    text-align: right;
}

#temperature-display.show {
    opacity: 1;
    animation: rainbowShadowNoBlur 8s linear infinite;
}

/* Year tick animation - solid blue + outline + rainbow for 3s, then class auto-removes */
#year-timer.year-tick {
    color: rgb(167, 227, 255);
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    animation: rainbowShadowNoBlurFade 2s linear 1 !important;
}

#year-timer.year-tick #current-year {
    -webkit-text-fill-color: rgb(167, 227, 255);
    background: none;
    animation: none;
}

#climate-score.year-tick {
    -webkit-text-fill-color: rgb(167, 227, 255);
    background: none;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    animation: rainbowShadowNoBlurFade 2s linear 1 !important;
}

/* Rainbow animation for climate score - triggered by build tools only */
#climate-score.score-update {
    animation: rainbowShadowFade 750ms ease-in-out infinite;
}

@keyframes rainbowShadowFade {
    0% {
        filter: drop-shadow(2px 0 0 rgba(255, 91, 91, 0.3)) drop-shadow(-2px 0 0 rgba(255, 199, 93, 0.3)) drop-shadow(0 2px 0 rgba(184, 255, 82, 0.3)) drop-shadow(0 -2px 0 rgba(145, 247, 255, 0.3));
    }
    15% {
        filter: drop-shadow(2px 0 0 rgba(145, 247, 255, 1)) drop-shadow(-2px 0 0 rgba(255, 91, 91, 1)) drop-shadow(0 2px 0 rgba(255, 199, 93, 1)) drop-shadow(0 -2px 0 rgba(184, 255, 82, 1));
    }
    50% {
        filter: drop-shadow(2px 0 0 rgba(184, 255, 82, 1)) drop-shadow(-2px 0 0 rgba(145, 247, 255, 1)) drop-shadow(0 2px 0 rgba(255, 91, 91, 1)) drop-shadow(0 -2px 0 rgba(255, 199, 93, 1));
    }
    85% {
        filter: drop-shadow(2px 0 0 rgba(255, 199, 93, 1)) drop-shadow(-2px 0 0 rgba(184, 255, 82, 1)) drop-shadow(0 2px 0 rgba(145, 247, 255, 1)) drop-shadow(0 -2px 0 rgba(255, 91, 91, 1));
    }
    100% {
        filter: drop-shadow(2px 0 0 rgba(255, 91, 91, 0.3)) drop-shadow(-2px 0 0 rgba(255, 199, 93, 0.3)) drop-shadow(0 2px 0 rgba(184, 255, 82, 0.3)) drop-shadow(0 -2px 0 rgba(145, 247, 255, 0.3));
    }
}


/* Airship Climate Delta Banner - scrolls right to left across screen */
.climate-delta-banner {
    position: fixed;
    left: 0;
    top: 1.7vw;
    z-index: 3200;
    pointer-events: none;
}

.climate-delta-banner .airship-group {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transform: translateX(100vw);
    /* Animation applied by JS: bannerScrollLeft 35s linear forwards */
}

.climate-delta-banner .airship-icon {
    width: 128px;
    height: 128px;
    background: url('assets/ui/airship_anim.png') 0 0 no-repeat;
    background-size: 512px 128px;
    image-rendering: pixelated;
    flex-shrink: 0;
    animation: airshipFrames 3s steps(4) infinite;
}

@keyframes airshipFrames {
    0% { background-position: 0 0; }
    100% { background-position: -512px 0; }
}

.climate-delta-banner .banner-text-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.climate-delta-banner .delta-text {
    background: white;
    color: black;
    font-family: 'Press Start 2P', cursive;
    font-size: 1vw;
    padding: 8px 16px;
    white-space: nowrap;
}

@keyframes bannerScrollLeft {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100vw);
    }
}

/* Bottom status row (location display + streaming status side by side) */
#bottom-status-row {
    position: relative;
}

/* Location display anchored to the left of streaming status via absolute positioning */
#bottom-status-row #location-display {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 4vw;
}

/* Streaming Status Display (loading map, processing map, streaming, etc.) */
#streaming-status {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.85vw;
    color: #0f0;
    text-shadow: none;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

#streaming-status.show {
    opacity: 1;
}

#streaming-status-dots {
    display: inline-block;
    width: 3ch;
    text-align: left;
}

/* Streaming Delta Display Container (holds stacking delta items) */
#streaming-delta {
    position: relative;
    pointer-events: none;
    min-height: 20px;
}

/* Individual delta item (credit roll style) */
.streaming-delta-item {
    position: absolute;
    bottom: 0;
    right: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7vw;
    font-weight: normal;
    text-shadow: none;
    white-space: nowrap;
    will-change: transform, opacity, color;
    backface-visibility: hidden;
}

.streaming-delta-item.positive {
    animation: deltaRiseFadePositive var(--anim-duration, 1500ms) linear forwards;
}

.streaming-delta-item.negative {
    animation: deltaRiseFadeNegative var(--anim-duration, 1500ms) linear forwards;
}

.streaming-delta-item.neutral {
    animation: deltaRiseFadeNeutral var(--anim-duration, 1500ms) linear forwards;
}

/* Credit roll animation: continuous rise 150px over 1.5s, fade starts at 1s */
/* Positive: green → red/orange */
@keyframes deltaRiseFadePositive {
    0% {
        opacity: 1;
        color: #00ff00;
        transform: translate3d(0, var(--start-offset, 0), 0);
    }
    67% {
        opacity: 1;
        color: #ff6200;
        transform: translate3d(0, calc(var(--start-offset, 0) - 100px), 0);
    }
    100% {
        opacity: 0;
        color: #ff6200;
        transform: translate3d(0, calc(var(--start-offset, 0) - 150px), 0);
    }
}

/* Negative: green → blue */
@keyframes deltaRiseFadeNegative {
    0% {
        opacity: 1;
        color: #00ff00;
        transform: translate3d(0, var(--start-offset, 0), 0);
    }
    67% {
        opacity: 1;
        color: #a7e3ff;
        transform: translate3d(0, calc(var(--start-offset, 0) - 100px), 0);
    }
    100% {
        opacity: 0;
        color: #a7e3ff;
        transform: translate3d(0, calc(var(--start-offset, 0) - 150px), 0);
    }
}

/* Neutral: stays green */
@keyframes deltaRiseFadeNeutral {
    0% {
        opacity: 1;
        color: #00ff00;
        transform: translate3d(0, var(--start-offset, 0), 0);
    }
    67% {
        opacity: 1;
        color: #00ff00;
        transform: translate3d(0, calc(var(--start-offset, 0) - 100px), 0);
    }
    100% {
        opacity: 0;
        color: #00ff00;
        transform: translate3d(0, calc(var(--start-offset, 0) - 150px), 0);
    }
}

/* Compass Display */
#compass {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#compass.show {
    opacity: 1;
}

#compass-grid {
    display: grid;
    grid-template-columns: 1fr 0 1fr;
    grid-template-rows: 1fr 0 1fr;
    place-items: center;
    width: min(5vw, 5vh);
    height: min(5vw, 5vh);
    color: #fff;
    text-shadow: none;
}

#compass-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#compass-grid .compass-dir {
    font-family: 'Courier New', Courier, monospace;
    font-size: min(1.4vw, 1.4vh);
}

#compass-grid .compass-arrow {
    font-family: 'Arial', sans-serif;
    font-size: min(1.4vw, 1.4vh);
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Game Navigation Menu in Nav Bar */
#game-menu {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1vw;
    display: flex;
    align-items: center;
}

.menu-bar {
    display: flex;
    justify-content: flex-start;
    gap: clamp(30px, 5vw, 80px);
}

.dropdown {
    position: relative;
    display: inline-block;
    font-weight: normal;
    opacity: 0;
}

.dropdown.pop-in {
    animation: popInDropdown 0.1s ease forwards;
}

#tools-dropdown.pop-in { animation-delay: 0.75s; } /* Interface */

#build-dropdown.pop-in { animation-delay: 1s; }    /* Actions */

@keyframes popInDropdown {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bounce up and down animation */
@keyframes bounceUpDown {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
}

.dropdown-label {
    cursor: pointer;
    padding: 1vh 0;
    width: auto;
    text-align: left;
    display: block;
    text-shadow: none;
    position: relative;
    white-space: nowrap;
    z-index: 1; /* Sit above .help-target-bottom::after so clicks reach the label in help mode */
}

.dropdown-label:hover {
    text-decoration: none;
}

.dropdown-label.active {
    background-color: yellow;
    color: #000;
    text-shadow: none;
    padding: 2px 6px;
}

/* Streaming toggle - positioned on far right, visible by default */
#streaming-toggle {
    width: auto;
    min-width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    font-size: 1vw;
    opacity: 1; /* Override .dropdown opacity - streaming toggle is always visible */
}

/* Prevent pop-in animation from flickering the already-visible streaming toggle */
#streaming-toggle.pop-in {
    animation: none;
}

#streaming-toggle .dropdown-label {
    width: auto;
    min-width: auto;
    max-width: none;
    text-align: right;
    font-size: 1vw;
}

#streaming-dots {
    font-size: 1vw;
}

#streaming-toggle .dropdown-label.active {
    background-color: transparent;
    color: #ff6200;
    text-shadow: none;
    padding: 10px 0;
}

.dropdown-label.hidden {
    opacity: 0;
    pointer-events: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    width: clamp(150px, 18vw, 250px);
    min-width: clamp(150px, 18vw, 250px);
    z-index: 1000;
    bottom: 100%;
    margin-bottom: 2px;
}

.menu-item {
    padding: 4px 8px;
    cursor: pointer;
    color: #333;
}

.menu-item:hover {
    background-color: #f0f0f0;
}

/* Disable all menu hover highlights in help mode */
body.help-mode .menu-item:hover,
body.help-mode #navigate-window .menu-item:hover,
body.help-mode #build-window .menu-item:hover,
body.help-mode #tools-window .menu-item:hover,
body.help-mode .floating-window.subwindow .menu-item:hover {
    background-color: transparent;
}
body.help-mode .menu-item-text:hover,
body.help-mode #navigate-window .menu-item.nav-action .menu-item-text:hover,
body.help-mode #build-window .menu-item-text:hover,
body.help-mode #tools-window .menu-item-text:hover,
body.help-mode .floating-window.subwindow .menu-item-text:hover {
    background-color: transparent;
    color: inherit;
    text-shadow: inherit;
}
body.help-mode #build-window .menu-item:hover .hotkey,
body.help-mode #tools-window .menu-item:hover .hotkey {
    color: inherit;
    text-shadow: inherit;
}
body.help-mode .menu-item.has-submenu:hover .submenu-arrow {
    opacity: 0.7;
}
/* Hide orange active state on Help and Resume Stream during first help mode */
body.help-first #tools-window .menu-item[data-action="toggle-help"].active .menu-item-text,
body.help-first #tools-window .menu-item[data-action="toggle-stream"].active .menu-item-text {
    background-color: transparent;
    color: inherit;
    text-shadow: inherit;
}
/* Disable all menu items until help has been closed for the first time */
body.help-first .floating-window .menu-item {
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
}
body.help-first .floating-window .menu-item .hotkey,
body.help-first .floating-window .menu-item .submenu-arrow {
    color: #888;
    opacity: 1;
}
/* Re-enable pointer events so help window hover tooltips still appear */
body.help-first.help-mode .floating-window .menu-item {
    pointer-events: auto;
    cursor: default;
}

.menu-item.active {
    background-color: #4CAF50;
    color: white;
}

.menu-item.disabled {
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
}
.menu-item.disabled .menu-item-text {
    color: #888;
}
.floating-window .menu-item.disabled .hotkey,
.floating-window .menu-item.disabled .submenu-arrow {
    color: #888;
    opacity: 1;
}

/* Floating Window for Navigate Menu */
.floating-window {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8); /* White with 0.8 opacity */
    border: 2px solid #000;
    border-radius: 0;
    width: clamp(150px, 15vw, 250px); /* Responsive width */
    z-index: 3500; /* Above curtain (3000) and ui-overlay (3100), below modals (5000) */
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.floating-window.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: grab;
}

.floating-window.visible:active {
    cursor: grabbing;
}

.window-titlebar {
    background-color: #000; /* Black banner */
    color: #ff6200; /* Orange to match bottom menu text */
    padding: clamp(4px, 0.8vh, 10px) clamp(8px, 1vw, 14px); /* Responsive padding */
    cursor: grab;
    user-select: none;
    display: none; /* Hidden by default */
    align-items: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8vw;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

/* Show titlebar when window has been moved */
.floating-window.moved .window-titlebar {
    display: flex;
}

.window-titlebar:active {
    cursor: grabbing;
}

.window-close {
    font-size: 1.0vw;
    line-height: 1;
    cursor: pointer;
    margin-right: clamp(6px, 0.8vw, 12px); /* Responsive margin */
    transition: color 0.2s;
    display: none; /* Hidden by default */
}

.window-close.show {
    display: block; /* Show after dragging */
}

.window-close:hover {
    color: #ff6666;
}

.window-title {
    flex: 1;
}

.window-content {
    padding: clamp(4px, 0.8vh, 10px) 0; /* Responsive vertical padding */
}

.floating-window .menu-item {
    padding: clamp(4px, 0.8vh, 10px) clamp(8px, 1vw, 14px); /* Responsive padding */
    cursor: default;
    color: #000;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7vw;
    text-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.floating-window .menu-item .hotkey {
    margin-left: clamp(8px, 1vw, 16px);
    opacity: 0.7;
    pointer-events: none;
    color: #000; /* Always black */
    text-shadow: none; /* No outline */
}

/* Navigate window is draggable from anywhere */
#navigate-window {
    cursor: grab;
}

#navigate-window .menu-item {
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#navigate-window .menu-item.nav-action {
    cursor: grab;
}

#navigate-window .menu-item.nav-action .menu-item-text:hover {
    background-color: #ff6200;
    color: #000;
    text-shadow: none;
}

#navigate-window .menu-item.nav-action.active {
    background-color: transparent;
}

#navigate-window .menu-item.nav-action.active .menu-item-text {
    background-color: #ff6200;
    color: #000;
    text-shadow: none;
}

#navigate-window .menu-item:hover {
    background-color: transparent;
}

#navigate-window .window-titlebar {
    cursor: grab;
}

/* Build, Tools, and attached subwindows are draggable from anywhere */
#build-window,
#tools-window {
    cursor: grab;
}

/* Build and Tools window content uses base .window-content padding */

/* Build, Tools, and subwindows have clickable menu items (text only, each on own line) */
#build-window .menu-item,
#tools-window .menu-item,
.floating-window.subwindow .menu-item {
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Only the text span is clickable, not the full row */
#build-window .menu-item-text,
#tools-window .menu-item-text,
#navigate-window .menu-item-text,
.floating-window.subwindow .menu-item-text {
    cursor: pointer;
}

#build-window .menu-item-text:hover,
#tools-window .menu-item-text:hover,
.floating-window.subwindow .menu-item-text:hover {
    background-color: #ff6200;
    color: #000;
    text-shadow: none;
}

#build-window .menu-item:hover,
#tools-window .menu-item:hover,
.floating-window.subwindow .menu-item:hover {
    background-color: transparent;
}

/* Keep hotkey black on hover */
#build-window .menu-item:hover .hotkey,
#tools-window .menu-item:hover .hotkey {
    color: #000;
    text-shadow: none;
}

/* Active/selected tool state - green highlight behind text */
#build-window .menu-item.active,
#tools-window .menu-item.active,
.floating-window.subwindow .menu-item.active {
    background-color: transparent;
}

#build-window .menu-item.active .menu-item-text,
#tools-window .menu-item.active .menu-item-text,
.floating-window.subwindow .menu-item.active .menu-item-text {
    background-color: #ff6200;
    color: #000;
    text-shadow: none;
}

/* Keep hotkey black on active */
#build-window .menu-item.active .hotkey,
#tools-window .menu-item.active .hotkey {
    color: #000;
    text-shadow: none;
}

/* Submenu arrow indicator */
.submenu-arrow {
    margin-left: clamp(8px, 1vw, 16px);
    opacity: 0.7;
    font-size: 0.6vw;
    pointer-events: none;
}

/* Menu item with submenu hover state */
.menu-item.has-submenu:hover .submenu-arrow,
.menu-item.has-submenu.submenu-open .submenu-arrow {
    opacity: 1;
}

/* Subwindow positioning - appears to the right of parent */
.floating-window.subwindow {
    z-index: 3600; /* Above parent floating window (3500), below modals (5000) */
}

/* Subwindow visible state */
.floating-window.subwindow.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Attached subwindow - no titlebar, not independently draggable */
.floating-window.subwindow.attached {
    cursor: default;
    border-left: none; /* Seamless connection to parent */
}

.floating-window.subwindow.attached .window-content {
    padding-top: clamp(6px, 1vh, 12px);
    padding-bottom: clamp(6px, 1vh, 12px);
}

/* Title Screen Buttons */
#title-ui {
    position: fixed;  /* Fixed since it's outside #container now */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    z-index: 4000;  /* Above curtain (3000) and everything else */
    pointer-events: none;
    transition: transform 0.3s ease-out;
}

#title-ui.show {
    display: flex;
}

#title-ui > * {
    pointer-events: auto;
}

#title-credits-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1vw;
    color: #000;
    text-align: center;
    margin-top: 10px;
    padding: 0px 20px 30px 20px;
    max-width: 500px;
    line-height: 1.2;
    display: none;
    text-shadow:
        -1px -1px 0 #0f0,
        1px -1px 0 #0f0,
        -1px 1px 0 #0f0,
        1px 1px 0 #0f0;
}

#title-credits-display.show {
    display: block;
}

#title-credits-display .credit-title {
    font-family: 'Press Start 2P', cursive;
    color: #0f0;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    font-size: 1vw;
    animation: rainbowShadowNoBlur 3s linear infinite;
}

#title-credits-display .credit-small {
    font-size: 0.8vw;
    text-shadow:
        -1px -1px 0 #0f0,
        1px -1px 0 #0f0,
        -1px 1px 0 #0f0,
        1px 1px 0 #0f0;
}

.rainbow-text {
    animation: rainbow 3s linear infinite;
}

#title-credits-display .collaborators {
    font-family: 'Press Start 2P', cursive;
    color: #000;
    text-shadow:
        -1px -1px 0 #0f0,
        1px -1px 0 #0f0,
        -1px 1px 0 #0f0,
        1px 1px 0 #0f0;
    font-size: 0.8vw;
    text-decoration: underline;
}


#game-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 6.7vw;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 30px 50px 10px 50px; /* Add padding to expand hover area - reduced bottom padding */
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
    opacity: 1;
    position: relative;
}

#game-title.rising {
    animation: titleExit 1s ease-in forwards !important;
    pointer-events: none;
}

@keyframes titleExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-200px);
    }
}

#game-title span {
    display: inline-block;
    background-image: url('assets/ui/backgrounds/background_title_text.jpg');
    background-size: 1000%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0.5px black;
}

.is-safari #game-title span,
.is-firefox #game-title span {
    -webkit-text-stroke: 3px black;
}

#game-title span:nth-child(9) {
    width: 0.7em;
}

/* Simple 1s cascade effect per letter using animation-delay */
/* Normal: 3s total cycle (1s cascade + 2s wait), 11 letters, ~0.09s (90ms) spacing */
/* Background: 10s step-start for slower shifting (2.5s per step) */
/* CASCADE DIRECTION: Left to right (M → U) */
#game-title span:nth-child(1) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0s; background-position-x: 0%; }
#game-title span:nth-child(2) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.09s; background-position-x: 9.09%; }
#game-title span:nth-child(3) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.18s; background-position-x: 18.18%; }
#game-title span:nth-child(4) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.27s; background-position-x: 27.27%; }
#game-title span:nth-child(5) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.36s; background-position-x: 36.36%; }
#game-title span:nth-child(6) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.45s; background-position-x: 45.45%; }
#game-title span:nth-child(7) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.54s; background-position-x: 54.54%; }
#game-title span:nth-child(8) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.63s; background-position-x: 63.63%; }
/* span:nth-child(9) is the space - no animation */
#game-title span:nth-child(10) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.72s; background-position-x: 81.81%; }
#game-title span:nth-child(11) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.81s; background-position-x: 90.9%; }
#game-title span:nth-child(12) { animation: titleBackgroundMove 10s step-start infinite, letterCascade 3s linear infinite; animation-delay: 0s, 0.90s; background-position-x: 100%; }

/* Hover: All letters play letterCascadeHover simultaneously (1s cycle, no staggered delays) */
#game-title:hover span:nth-child(1),
#game-title:hover span:nth-child(2),
#game-title:hover span:nth-child(3),
#game-title:hover span:nth-child(4),
#game-title:hover span:nth-child(5),
#game-title:hover span:nth-child(6),
#game-title:hover span:nth-child(7),
#game-title:hover span:nth-child(8),
#game-title:hover span:nth-child(10),
#game-title:hover span:nth-child(11),
#game-title:hover span:nth-child(12) {
    animation: titleBackgroundMove 10s step-start infinite, letterCascadeHover 1s linear infinite !important;
    animation-delay: 0s, 0s !important; /* All letters start at the same time */
}

/* Normal: 1s cascade effect with 2s delay before repeat */
/* Total cycle: 3s (1s cascade + 2s wait) */
/* 0-33.33%: Cascade happens (1s out of 3s) */
/* 33.33-100%: Wait/stay hidden (2s out of 3s) */

@keyframes letterCascade {
    0% {
        filter: saturate(1.4) brightness(1.4)
                drop-shadow(5px 0 1px rgb(255, 91, 91))
                drop-shadow(-5px 0 1px rgb(255, 199, 93))
                drop-shadow(0 5px 1px rgb(184, 255, 82))
                drop-shadow(0 -5px 1px rgb(145, 247, 255));
        -webkit-text-stroke-color: #4e2e22;
    }
    16.67% {  /* 0.5s into 3s cycle - halfway through cascade */
        filter: saturate(1.2) brightness(1.2)
                drop-shadow(5px 0 3px rgba(255, 91, 91, 0.6))
                drop-shadow(-5px 0 3px rgba(255, 199, 93, 0.6))
                drop-shadow(0 5px 3px rgba(184, 255, 82, 0.6))
                drop-shadow(0 -5px 3px rgba(145, 247, 255, 0.6));
        -webkit-text-stroke-color: #2a1911;
    }
    33.33%, 100% {  /* 1s into 3s cycle - cascade done, stay hidden for remaining 2s */
        filter: saturate(1) brightness(1)
                drop-shadow(0 0 0 transparent);
        -webkit-text-stroke-color: #000;
    }
}

/* Hover: Simple 1s cascade with no delay - continuous loop */
@keyframes letterCascadeHover {
   0% {
        filter: saturate(1.4) brightness(1.4)
                drop-shadow(5px 0 1px rgb(255, 91, 91))
                drop-shadow(-5px 0 1px rgb(255, 199, 93))
                drop-shadow(0 5px 1px rgb(184, 255, 82))
                drop-shadow(0 -5px 1px rgb(145, 247, 255));
        -webkit-text-stroke-color: #4e2e22;
    }
    50% {
        filter: saturate(1.4) brightness(1.4)
                drop-shadow(5px 0 1px rgb(255, 91, 91))
                drop-shadow(-5px 0 1px rgb(255, 199, 93))
                drop-shadow(0 5px 1px rgb(184, 255, 82))
                drop-shadow(0 -5px 1px rgb(145, 247, 255));
        -webkit-text-stroke-color: #4e2e22;
    }
    100% {
        filter: saturate(1.4) brightness(1.4)
                drop-shadow(5px 0 1px rgb(255, 91, 91))
                drop-shadow(-5px 0 1px rgb(255, 199, 93))
                drop-shadow(0 5px 1px rgb(184, 255, 82))
                drop-shadow(0 -5px 1px rgb(145, 247, 255));
        -webkit-text-stroke-color: #4e2e22;
    }
}

@keyframes strokePulse {
    0% { -webkit-text-stroke: 0.5px black; }
    12.5% { -webkit-text-stroke: 1px black; }
    25% { -webkit-text-stroke: 0.5px black; }
    37.5% { -webkit-text-stroke: 1px black; }
    50% { -webkit-text-stroke: 0.5px black; }
    62.5% { -webkit-text-stroke: 1px black; }
    75% { -webkit-text-stroke: 0.5px black; }
    87.5% { -webkit-text-stroke: 1px black; }
    100% { -webkit-text-stroke: 0.5px black; }
}

@keyframes fadeInTitle {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rainbowShadow {
    0% { filter: saturate(1.8) brightness(1.3) drop-shadow(4px 0 2px rgb(255, 91, 91)) drop-shadow(-4px 0 2px rgb(255, 199, 93)) drop-shadow(0 4px 2px rgb(184, 255, 82)) drop-shadow(0 -4px 2px rgb(145, 247, 255)); } /* Right: Coral Red, Left: Peach Orange, Bottom: Lime Green, Top: Sky Cyan */
    12.5% { filter: saturate(1.8) brightness(1.3) drop-shadow(5px 0 4px rgb(255, 91, 91)) drop-shadow(-5px 0 4px rgb(255, 199, 93)) drop-shadow(0 5px 4px rgb(184, 255, 82)) drop-shadow(0 -5px 4px rgb(145, 247, 255)); } /* Increase blur and offset */
    25% { filter: saturate(1.8) brightness(1.3) drop-shadow(4px 0 2px rgb(145, 247, 255)) drop-shadow(-4px 0 2px rgb(255, 91, 91)) drop-shadow(0 4px 2px rgb(255, 199, 93)) drop-shadow(0 -4px 2px rgb(184, 255, 82)); } /* Colors rotate clockwise */
    37.5% { filter: saturate(1.8) brightness(1.3) drop-shadow(5px 0 4px rgb(145, 247, 255)) drop-shadow(-5px 0 4px rgb(255, 91, 91)) drop-shadow(0 5px 4px rgb(255, 199, 93)) drop-shadow(0 -5px 4px rgb(184, 255, 82)); } /* Increase blur and offset */
    50% { filter: saturate(1.8) brightness(1.3) drop-shadow(4px 0 2px rgb(184, 255, 82)) drop-shadow(-4px 0 2px rgb(145, 247, 255)) drop-shadow(0 4px 2px rgb(255, 91, 91)) drop-shadow(0 -4px 2px rgb(255, 199, 93)); } /* Colors rotate clockwise */
    62.5% { filter: saturate(1.8) brightness(1.3) drop-shadow(5px 0 4px rgb(184, 255, 82)) drop-shadow(-5px 0 4px rgb(145, 247, 255)) drop-shadow(0 5px 4px rgb(255, 91, 91)) drop-shadow(0 -5px 4px rgb(255, 199, 93)); } /* Increase blur and offset */
    75% { filter: saturate(1.8) brightness(1.3) drop-shadow(4px 0 2px rgb(255, 199, 93)) drop-shadow(-4px 0 2px rgb(184, 255, 82)) drop-shadow(0 4px 2px rgb(145, 247, 255)) drop-shadow(0 -4px 2px rgb(255, 91, 91)); } /* Colors rotate clockwise */
    87.5% { filter: saturate(1.8) brightness(1.3) drop-shadow(5px 0 4px rgb(255, 199, 93)) drop-shadow(-5px 0 4px rgb(184, 255, 82)) drop-shadow(0 5px 4px rgb(145, 247, 255)) drop-shadow(0 -5px 4px rgb(255, 91, 91)); } /* Increase blur and offset */
    100% { filter: saturate(1.8) brightness(1.3) drop-shadow(4px 0 2px rgb(255, 91, 91)) drop-shadow(-4px 0 2px rgb(255, 199, 93)) drop-shadow(0 4px 2px rgb(184, 255, 82)) drop-shadow(0 -4px 2px rgb(145, 247, 255)); } /* Back to start */
}

/* Enter/Credits Toggle Block */
#enter-credits-toggle {
    position: relative;
    top: -10px;
    padding-top: 10px;
    white-space: nowrap;
}

/* Loading Bar Styles */
#enter-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.3vw;
    font-weight: bold;
    color: #0f0;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    margin-top: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.3s ease-out;
}

#enter-text.hovered {
    animation: fadeInEnter 0.5s ease-in forwards;
}

#credits-text.hovered {
    animation: fadeInEnter 0.5s ease-in forwards;
}

#game-title:hover ~ #enter-credits-toggle #enter-text {
    opacity: 1;
    animation: fadeInEnter 0.5s ease-in forwards;
}

#game-title:hover ~ #enter-credits-toggle #credits-text {
    opacity: 1;
    animation: fadeInEnter 0.5s ease-in forwards;
}

#credits-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.3vw;
    font-weight: bold;
    color: #0f0;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    margin-top: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    animation: fadeInEnter 0.5s ease-in forwards;
    white-space: nowrap;
    transition: opacity 0.3s ease-out;
}

#enter-text.rising,
#enter-credits-toggle.rising {
    display: none;
}

@keyframes fadeInEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rainbowShadowNoBlur {
    0% { filter: drop-shadow(2px 0 0 rgb(255, 91, 91)) drop-shadow(-2px 0 0 rgb(255, 199, 93)) drop-shadow(0 2px 0 rgb(184, 255, 82)) drop-shadow(0 -2px 0 rgb(145, 247, 255)); }
    25% { filter: drop-shadow(2px 0 0 rgb(145, 247, 255)) drop-shadow(-2px 0 0 rgb(255, 91, 91)) drop-shadow(0 2px 0 rgb(255, 199, 93)) drop-shadow(0 -2px 0 rgb(184, 255, 82)); }
    50% { filter: drop-shadow(2px 0 0 rgb(184, 255, 82)) drop-shadow(-2px 0 0 rgb(145, 247, 255)) drop-shadow(0 2px 0 rgb(255, 91, 91)) drop-shadow(0 -2px 0 rgb(255, 199, 93)); }
    75% { filter: drop-shadow(2px 0 0 rgb(255, 199, 93)) drop-shadow(-2px 0 0 rgb(184, 255, 82)) drop-shadow(0 2px 0 rgb(145, 247, 255)) drop-shadow(0 -2px 0 rgb(255, 91, 91)); }
    100% { filter: drop-shadow(2px 0 0 rgb(255, 91, 91)) drop-shadow(-2px 0 0 rgb(255, 199, 93)) drop-shadow(0 2px 0 rgb(184, 255, 82)) drop-shadow(0 -2px 0 rgb(145, 247, 255)); }
}

/* Tick variant: 500ms fade in, 1s cycling, 500ms fade out (total 2s) */
@keyframes rainbowShadowNoBlurFade {
    0%   { filter: drop-shadow(2px 0 0 rgba(255, 91, 91, 0))   drop-shadow(-2px 0 0 rgba(255, 199, 93, 0)) drop-shadow(0 2px 0 rgba(184, 255, 82, 0))  drop-shadow(0 -2px 0 rgba(145, 247, 255, 0)); }
    25%  { filter: drop-shadow(2px 0 0 rgba(255, 91, 91, 1))   drop-shadow(-2px 0 0 rgba(255, 199, 93, 1)) drop-shadow(0 2px 0 rgba(184, 255, 82, 1))  drop-shadow(0 -2px 0 rgba(145, 247, 255, 1)); }
    50%  { filter: drop-shadow(2px 0 0 rgba(145, 247, 255, 1)) drop-shadow(-2px 0 0 rgba(255, 91, 91, 1))  drop-shadow(0 2px 0 rgba(255, 199, 93, 1))  drop-shadow(0 -2px 0 rgba(184, 255, 82, 1)); }
    75%  { filter: drop-shadow(2px 0 0 rgba(184, 255, 82, 1))  drop-shadow(-2px 0 0 rgba(145, 247, 255, 1)) drop-shadow(0 2px 0 rgba(255, 91, 91, 1)) drop-shadow(0 -2px 0 rgba(255, 199, 93, 1)); }
    100% { filter: drop-shadow(2px 0 0 rgba(255, 91, 91, 0))   drop-shadow(-2px 0 0 rgba(255, 199, 93, 0)) drop-shadow(0 2px 0 rgba(184, 255, 82, 0))  drop-shadow(0 -2px 0 rgba(145, 247, 255, 0)); }
}

#game-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('assets/ui/backgrounds/background_title.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Behind everything, including elements with z-index: auto */
    pointer-events: none;
    /* Preserve pixel art crispness */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Brown tint overlay - fades in over intro duration */
#game-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(78, 46, 34, 0) 0%, rgb(78, 46, 34) 30%);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 9s ease-in;
    pointer-events: none;
}

#game-background.brown-tint::after {
    opacity: 1;
}

#game-background.brown-tint-fast::after {
    opacity: 1;
    transition: opacity 3s ease-in;
}

#game-background.brown-tint-immediate::after {
    opacity: 1;
    transition: none;
}

#sky-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(270deg, #E8F8FF, #F7FDFF, #a7e3ff, #E8F8FF);
    background-size: 600% 600%;
    animation: gradientAnimation 30s ease infinite;
    z-index: 2500;
    pointer-events: none;
    mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0) 100%);
}

#gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #E8F8FF;
    background-image: linear-gradient(270deg, #E8F8FF, #F7FDFF, #a7e3ff, #E8F8FF);
    background-size: 600% 600%;
    transition: background-color 2s linear;
    mask-image:
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,1) 5%,
            rgba(0,0,0,0.5) 10%);
    mask-size: 200% 100%;
    mask-position: 0% 0%;
    animation: gradientAnimation 30s ease infinite, opacityBands 20s linear infinite;
    z-index: 3000;
    pointer-events: none; /* No click on curtain - click goes to title */
    clip-path: url(#wave-clip);
    opacity: 1;
}

/* When title is hovered, apply blue gradient with bands via JS */
#gradient-overlay.blue-bands {
    background: linear-gradient(270deg, #E8F8FF, #F7FDFF, #a7e3ff, #E8F8FF);
    background-size: 600% 600%;
    animation: gradientAnimation 30s ease infinite, opacityBands 20s linear infinite;
}

/* Fade from blue to dark over 3s — added by finalizeOverlay() */
#gradient-overlay.fading-to-dark {
    background-image: none;
    mask-image: none;
    -webkit-mask-image: none;
    animation: none;
    background-color: rgba(0, 0, 0, 0.8);
    transition: background-color 3s ease-in;
}

/* Fast variant for modal-entry paths (manual location, new-location choice) */
#gradient-overlay.fading-to-dark-fast {
    background-image: none;
    mask-image: none;
    -webkit-mask-image: none;
    animation: none;
    background-color: rgba(0, 0, 0, 0.8);
    transition: background-color 1.2s ease-in;
}

#gradient-overlay.rising {
    opacity: 0;
    transition: opacity 1s ease-in;
}

#sky-overlay.rising {
    opacity: 0;
    transition: opacity 1s ease-in;
}

@keyframes opacityBands {
    0% {
        mask-position: 100% 0%;
    }
    100% {
        mask-position: 0% 0%;
    }
}




@keyframes titleBackgroundMove {
    0% { background-position-y: 0px; }
    25% { background-position-y: 100%; }
    50% { background-position-y: 50%; }
    75% { background-position-y: calc(50% + 25px); }
    100% { background-position-y: 0px; }
}

.button-with-arrow {
    opacity: 0;
    margin: 5px 0;
}

.button-with-arrow.pop-in {
    animation: popInButton 0.1s ease forwards;
}

.arrow-indicator {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1vw;
    color: lightblue;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    opacity: 0;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.title-button:hover .arrow-indicator {
    opacity: 1;
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 5000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: transparent;
    border: none;
    padding: 30px 40px;
    text-align: center;
}

.modal-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2vw;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.modal-button {
    font-family: 'Press Start 2P', cursive;
    font-size: 1vw;
    font-weight: normal;
    color: #fff;
    text-shadow: none;
    cursor: pointer;
    padding: 10px 20px;
    background: transparent;
    border: none;
    outline: none;
}

.modal-button:hover {
    color: #0f0;
}

.modal-button:active {
    transform: scale(0.95);
}

/* Modal buttons side by side */
#location-modal .modal-buttons,
#game-start-modal .modal-buttons,
#revert-modal .modal-buttons,
#restart-full-modal .modal-buttons {
    flex-direction: row;
    justify-content: center;
}

/* Fade in modal text */
#revert-modal .modal-content,
#restart-full-modal .modal-content {
    animation: modalTextFadeIn 1s ease-out;
}

#location-modal .modal-content,
#game-start-modal .modal-content,
#manual-location-modal .modal-content {
    animation: modalTextFadeIn 1s ease-out 1s backwards;
}

@keyframes modalTextFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.location-why {
    position: relative;
    display: inline-block;
    cursor: default;
    font-family: 'Press Start 2P', cursive;
    font-size: 1vw;
    color: #fff;
}

.location-why-tooltip {
    position: fixed;
    transform: scale(0);
    transform-origin: bottom right;
    max-width: 30vw;
    padding: 12px 18px;
    border-radius: 0;
    background: rgba(0, 0, 0, 1);
    border: 2px dashed #dbf1ff;
    font-family: 'Courier New', monospace;
    font-size: 0.8vw;
    font-style: normal;
    text-decoration: none;
    color: #dbf1ff;
    text-align: justify;
    line-height: 1.6;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s ease-out, visibility 0.3s ease-out;
    z-index: 4600;
    overflow: visible;
}

.location-why-tooltip::before {
    display: none;
}

.location-why-tooltip-content {
    position: relative;
    font-family: 'Courier New', monospace;
    color: #dbf1ff;
    text-shadow: none;
}

.location-why-tooltip.visible {
    transform: scale(1);
    visibility: visible;
}

/* Modal form inputs */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.modal-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7vw;
    color: #a7e3ff;
    text-align: left;
}

.modal-input {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.9vw;
    padding: 10px;
    background: #111;
    border: 2px solid #a7e3ff;
    color: #a7e3ff;
    outline: none;
}

.modal-input:focus {
    border-color: #0f0;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.modal-input::placeholder {
    color: #4a7a8a;
    font-size: 0.7vw;
}

.modal-input-row {
    display: flex;
    gap: 15px;
}

.modal-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-error {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6vw;
    color: #ff6666;
    text-align: center;
    min-height: 1.2em;
    margin-bottom: 10px;
}

/* Manual Location Modal */
#manual-location-modal .modal-label {
    color: #fff;
}

#manual-location-modal .modal-input {
    background: #222;
    border: 2px solid #555;
    color: #fff;
}

#manual-location-modal .modal-input::placeholder {
    color: #888;
}

#manual-location-modal .modal-input:focus {
    border-color: #fff;
    box-shadow: none;
}

/* ============================================
   LIGHTNING STRIKE (intro flash)
   ============================================ */

#lightning-strike {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 5500;
    pointer-events: none;
    opacity: 0;
}

#lightning-strike.flash {
    animation: lightningFlash 2500ms ease-out forwards;
}

@keyframes lightningFlash {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ============================================
   ONBOARDING: INTRO MODAL
   ============================================ */

#intro-modal {
    z-index: 6000;
    background: transparent;
    align-items: center;
    /* Override modal-overlay display to use opacity for fade-out */
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-out;
}

#intro-modal.show {
    opacity: 1;
    pointer-events: auto;
}

#intro-modal .modal-content {
    background: transparent;
    max-width: 90vw;
}

#intro-modal .modal-text {
    font-size: 1.4vw;
    color: #000;
    text-shadow: none;
    line-height: 3;
    text-align: center;
    min-height: 4em;
}

/* Intro line fade animations - staggered entry (3s each), simultaneous exit */
.intro-line {
    opacity: 0;
}

/* Lines 1 & 2 are inline (row 1), lines 3 & 4 are inline (row 2) */
.intro-line-1,
.intro-line-2 {
    display: inline;
}

.intro-line-3,
.intro-line-4 {
    display: inline;
}

/* Staggered intro lines: Line1 at 0s, Line2 at 2s, Line3 at 4s, Line4 at 6s */
/* Each line fades in and stays visible; modal fade-out handles synchronized exit */
.intro-line-1 {
    animation: introLineFadeIn 0.5s ease-out forwards;
    animation-delay: 0s;
}

.intro-line-2 {
    animation: introLineFadeIn 0.5s ease-out forwards;
    animation-delay: 2s;
}

.intro-line-3 {
    animation: introLineFadeIn 0.5s ease-out forwards;
    animation-delay: 4s;
}

.intro-line-4 {
    animation: introLineFadeIn 0.5s ease-out forwards;
    animation-delay: 6s;
}

@keyframes introLineFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ============================================
   ONBOARDING: WELCOME BACK MODAL
   ============================================ */

#welcome-back-modal {
    z-index: 6000;
    background: transparent;
    align-items: center;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

#welcome-back-modal.show {
    opacity: 1;
    pointer-events: auto;
}

#welcome-back-modal .modal-content {
    background: transparent;
    max-width: 90vw;
}

#welcome-back-modal .modal-text {
    font-size: 1.4vw;
    color: #000;
    text-shadow: none;
    text-align: center;
    line-height: 2.2;
}

.welcome-back-line {
    opacity: 0;
    display: block;
}

.welcome-back-line-1 {
    animation: introLineFadeIn 0.5s ease-out forwards;
    animation-delay: 0s;
}

/* ============================================
   ONBOARDING: HELP OVERLAY (H KEY)
   ============================================ */

#help-overlay {
    display: none;
    position: absolute;
    top: var(--ui-padding-y);
    left: var(--ui-padding-x);
    z-index: 4500;
    pointer-events: none;
}

#help-overlay.show {
    display: block;
}

#help-overlay-box {
    text-align: left;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-out;
}

#help-overlay-box.visible {
    opacity: 1;
    transform: translateY(0);
}

#help-overlay-box.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

#help-message {
    font-family: 'Press Start 2P', cursive;
    font-size: 1vw;
    line-height: 2.5;
    text-align: left;
}

#help-message:empty {
    display: none;
}

.help-line {
    display: block;
    opacity: 0;
    background: linear-gradient(135deg,
        rgb(167, 227, 255),
        rgb(255, 255, 255),
        rgb(167, 227, 255)
    );
    background-size: 400% 400%;
    animation: helpLineFadeInOut 9s ease-in-out forwards, helpLineGradientShift 8s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes helpLineFadeInOut {
    0% {
        opacity: 0;
    }
    11% {
        opacity: 1;
    }
    89% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes helpLineGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes helpLineColorCycle {
    0% {
        color: rgb(255, 91, 91);      /* Coral Red */
    }
    25% {
        color: rgb(255, 199, 93);     /* Peach Orange */
    }
    50% {
        color: rgb(184, 255, 82);     /* Lime Green */
    }
    75% {
        color: rgb(145, 247, 255);    /* Sky Cyan */
    }
    100% {
        color: rgb(255, 91, 91);      /* Coral Red */
    }
}

#help-dismiss-hint {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.9vw;
    color: #fff;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    opacity: 0.9;
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
    text-align: center;
}

@keyframes pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

/* Extend hover trigger area for help-mapped elements */
.help-target {
    position: relative;
}

.help-target::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -25px;
    pointer-events: auto;
}

.help-target-bottom {
    position: relative;
}

.help-target-bottom::after {
    content: '';
    position: absolute;
    top: -25px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    pointer-events: auto;
}

/* Help Windows - hidden by default, centered in browser, dynamic size */
.help-window {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    background: rgba(0, 0, 0, 1);
    border: 2px dashed #dbf1ff;
    border-radius: 0;
    padding: 12px 18px;
    font-family: 'Press Start 2P', cursive;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s ease-out, visibility 0.3s ease-out;
    z-index: 4600;
    overflow: visible;
    max-width: 30vw;
    outline: none;
}

.help-window::before {
    display: none;
}

.help-window.visible {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
}

.help-window-title {
    display: none;
}

.help-window-content {
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 0.8vw;
    color: #dbf1ff;
    line-height: 1.6;
    text-align: justify;
}

/* Help windows now follow cursor - positioned via JavaScript */