@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: clamp(12px, 1.25vw, 16px);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    background-color: #1a1a2e;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 3.125rem; /* Space for fixed header */
}

#game-container {
    border: 2px solid #00d4ff;
    border-radius: 0.5rem;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    max-width: 100vw;
    max-height: calc(100vh - 5rem); /* Account for header + some margin */
}

#game-container.menu-mode {
    width: min(100%, 960px);
    flex: 1;
    min-height: 0;
}
#game-container.menu-mode > #menu-scene {
    width: 100% !important;
    height: 100% !important;
}

#game-container canvas {
    display: block;
    touch-action: none;
}

h1 {
    display: none !important; /* Hidden - replaced by header */
}

.wrapper {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding-top: 0.625rem;
}

.info {
    color: #444;
    margin-top: 0.9375rem;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-family: 'VT323', monospace;
    letter-spacing: 0.0625rem;
}

/* ============================================
   GAME HEADER - Neon Terminal Style
   ============================================ */
#game-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.125rem;
    background: linear-gradient(180deg, #0d0d1a 0%, #1a1a2e 100%);
    border-bottom: 2px solid #00d4ff;
    box-shadow: 0 2px 20px rgba(0, 212, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1.25rem;
    font-family: 'VT323', monospace;
    z-index: 1000;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-link-btn {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (hover: hover) {
    .header-link-btn:hover {
        background: rgba(0, 212, 255, 0.2);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        text-shadow: 0 0 10px #00d4ff;
    }
}

.header-link-btn:active {
    background: rgba(0, 212, 255, 0.4);
    transform: scale(0.98);
}

/* Desktop / mobile text toggle */
.btn-mobile-text {
    display: none;
}

.btn-desktop-text {
    display: inline;
}

.header-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.header-btn {
    font-family: 'VT323', monospace;
    font-size: 1.125rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (hover: hover) {
    .header-btn:hover {
        background: rgba(0, 212, 255, 0.2);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        text-shadow: 0 0 10px #00d4ff;
    }
}

.header-btn:active {
    background: rgba(0, 212, 255, 0.4);
    transform: scale(0.98);
}

/* ============================================
   GAME FOOTER - Mobile-only report/support bar
   ============================================ */
#game-footer {
    display: none; /* Hidden by default; shown via mobile media queries */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    border-top: none;
    box-shadow: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-family: 'VT323', monospace;
    z-index: 1000;
    box-sizing: border-box;
}

body.game-mode #game-footer {
    background: linear-gradient(0deg, #0d0d1a 0%, #1a1a2e 100%);
    border-top: 2px solid #00d4ff;
    box-shadow: 0 -2px 20px rgba(0, 212, 255, 0.3);
}

.footer-buttons {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.footer-copyright {
    font-size: 0.6875rem;
    color: #444;
    letter-spacing: 0.0625rem;
    text-align: center;
}

.footer-link-btn {
    font-family: 'VT323', monospace;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
}

@media (hover: hover) {
    .footer-link-btn:hover {
        background: rgba(0, 212, 255, 0.2);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        text-shadow: 0 0 10px #00d4ff;
    }
}

.footer-link-btn:active {
    background: rgba(0, 212, 255, 0.4);
    transform: scale(0.98);
}

/* ============================================
   OPTIONS PANEL - 8-bit instant popup
   ============================================ */
#options-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 21.25rem;
    height: 100vh;
    background: #0a0a14;
    border-left: 2px solid #00d4ff;
    box-shadow: -4px 0 0 #0088aa;
    z-index: 2500;
    font-family: 'VT323', monospace;
    display: none;
    flex-direction: column;
    overflow: hidden;
    image-rendering: pixelated;
}

#options-panel.open {
    display: flex;
}


.options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid #00d4ff44;
}

.options-title {
    font-size: 1.5rem;
    color: #00d4ff;
    text-shadow: 0 0 10px #00d4ff;
}

.close-btn {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    background: none;
    border: none;
    color: #00d4ff;
    cursor: pointer;
    padding: 0 0.625rem;
}

@media (hover: hover) {
    .close-btn:hover {
        color: #ff4444;
        text-shadow: 0 0 10px #ff4444;
    }
}

.options-content {
    padding: 1.25rem;
    flex: 1;
    overflow-y: auto;
}

.option-group {
    margin-bottom: 1.5625rem;
}

.option-label {
    display: block;
    font-size: 1.125rem;
    color: #88ccff;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}

.option-input {
    font-family: 'VT323', monospace;
    font-size: 1.25rem;
    width: 100%;
    padding: 0.625rem 0.9375rem;
    background: #0a0a14;
    border: 1px solid #00d4ff66;
    color: #00ff88;
    outline: none;
}

.option-input:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.option-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 0.5rem;
    background: #0a0a14;
    border: 1px solid #00d4ff66;
    outline: none;
    cursor: pointer;
}

.option-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: #00d4ff;
    cursor: pointer;
    box-shadow: 0 0 10px #00d4ff;
}

.option-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: #00d4ff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px #00d4ff;
}

.slider-value {
    font-size: 1.25rem;
    color: #00ff88;
    min-width: 3.125rem;
    text-align: right;
}

/* Dev Mode Toggle */
.dev-mode-container {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 3.75rem;
    height: 1.875rem;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0a14;
    border: 1px solid #00d4ff66;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 1.375rem;
    width: 1.375rem;
    left: 0.1875rem;
    bottom: 0.1875rem;
    background: #444;
}

input:checked + .toggle-slider {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
}

input:checked + .toggle-slider:before {
    transform: translateX(1.875rem);
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
}

input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-switch.flash .toggle-slider {
    animation: flash-glow 0.5s ease;
}

@keyframes flash-glow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 20px #00ff88; }
}

.dev-code-input {
    font-family: 'VT323', monospace;
    font-size: 1.125rem;
    padding: 0.5rem 0.75rem;
    background: #0a0a14;
    border: 1px solid #ff4444aa;
    color: #ff4444;
    outline: none;
    width: 8.75rem;
    text-transform: uppercase;
}

.dev-code-input:focus {
    border-color: #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

.dev-code-input::placeholder {
    color: #ff444488;
    text-transform: none;
}

/* ============================================
   DEV MODE OVERLAY - Log Box
   ============================================ */
#dev-overlay {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    width: 25rem;
    max-height: 18.75rem;
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid #00d4ff66;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
    z-index: 1500;
    font-family: 'VT323', monospace;
    display: flex;
    flex-direction: column;
}

.dev-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #0d0d1a;
    border-bottom: 1px solid #00d4ff44;
    color: #00d4ff;
    font-size: 1rem;
}

.clear-log-btn {
    font-family: 'VT323', monospace;
    font-size: 0.875rem;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid #ff4444aa;
    color: #ff4444;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-log-btn:hover {
    background: rgba(255, 68, 68, 0.2);
}

.dev-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.log-entry {
    padding: 0.125rem 0;
    border-bottom: 1px solid #ffffff11;
}

.log-time {
    color: #666;
}

.log-info {
    color: #88ccff;
}

.log-success {
    color: #00ff88;
}

.log-warning {
    color: #ffaa00;
}

.log-error {
    color: #ff4444;
}

/* Dev log scrollbar */
.dev-log::-webkit-scrollbar {
    width: 0.5rem;
}

.dev-log::-webkit-scrollbar-track {
    background: #0a0a14;
}

.dev-log::-webkit-scrollbar-thumb {
    background: #00d4ff44;
}

.dev-log::-webkit-scrollbar-thumb:hover {
    background: #00d4ff88;
}

/* ============================================
   MOBILE STYLES
   ============================================ */
@media (max-width: 768px), (max-height: 600px) {
    body {
        padding-top: 2.5rem; /* Smaller header on mobile */
        -webkit-tap-highlight-color: transparent;
    }

    .wrapper {
        justify-content: flex-start;
        padding-top: 0.625rem;
    }

    #game-header {
        height: 2.5rem;
        padding: 0 0.5rem;
        gap: clamp(0.625rem, 3vw, 1.25rem);
    }

    .header-left {
        gap: clamp(0.25rem, 1vw, 0.375rem);
    }

    .header-link-btn {
        font-size: clamp(0.625rem, 2.8vw, 0.875rem);
        padding: clamp(0.25rem, 1.2vw, 0.5rem) clamp(0.375rem, 1.5vw, 0.625rem);
        letter-spacing: 0;
    }

    .btn-desktop-text {
        display: none;
    }

    .btn-mobile-text {
        display: inline;
    }

    .header-right {
        gap: clamp(0.25rem, 1vw, 0.5rem);
    }

    .header-btn {
        font-size: clamp(0.625rem, 2.8vw, 0.875rem);
        padding: clamp(0.25rem, 1.2vw, 0.5rem) clamp(0.5rem, 2vw, 0.75rem);
        letter-spacing: 0;
    }

    .info {
        display: none;
    }

    #game-container {
        border-width: 1px;
        border-radius: 0.25rem;
        max-height: calc(100vh - 7.25rem);
        max-height: calc(100dvh - 7.25rem);
    }

    #game-container.menu-mode {
        max-height: none;
    }

    #options-panel {
        width: 100%;
    }

    #dev-overlay {
        width: calc(100% - 2.5rem);
        left: 1.25rem;
        bottom: 0.625rem;
        max-height: 12.5rem;
    }

    /* In game mode on mobile: move report/support to footer, center header */
    body.game-mode .header-left {
        display: none;
    }

    body.game-mode #game-header {
        justify-content: center;
    }

    #game-footer {
        display: flex;
        position: static;
    }

    body.game-mode #game-container {
        max-height: calc(100vh - 8.25rem);
        max-height: calc(100dvh - 8.25rem);
    }

    #game-footer .footer-buttons {
        display: none;
    }

    body.game-mode #game-footer .footer-buttons {
        display: flex;
    }

    .footer-link-btn {
        font-size: 1.25rem;
        padding: 0.5rem 1.125rem;
    }

    .footer-copyright {
        font-size: 1.125rem;
        color: #888;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .footer-copyright a {
        color: #66e0ff;
        text-decoration: none;
    }

    .footer-copyright a:active {
        color: #0099bb;
    }

    #game-footer {
        padding: 1rem 0.75rem;
    }

    /* ── Achievements panel header: stack title below on mobile ── */
    .achievements-header {
        flex-wrap: wrap !important;
        padding: 0.5em 0.75em !important;
        gap: 0.2em !important;
    }

    .achievements-back-btn {
        order: 1 !important;
        font-size: 1em !important;
        padding: 0.4em 0.6em !important;
    }

    .achievements-progress {
        order: 2 !important;
    }

    .achievements-title {
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1.35em !important;
        padding-top: 0.2em !important;
        letter-spacing: 0.15em !important;
    }

    /* Remove hover/active/focus glow effects on mobile */
    .header-link-btn:hover,
    .header-btn:hover,
    .footer-link-btn:hover,
    .close-btn:hover,
    .clear-log-btn:hover,
    .header-link-btn:active,
    .header-btn:active,
    .footer-link-btn:active,
    .header-link-btn:focus,
    .header-btn:focus,
    .footer-link-btn:focus,
    .close-btn:focus,
    .clear-log-btn:focus {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        outline: none !important;
        color: inherit;
    }

    .close-btn:hover,
    .close-btn:active {
        color: #00d4ff;
        text-shadow: none !important;
    }

    .clear-log-btn:hover,
    .clear-log-btn:active {
        color: #ff4444;
        text-shadow: none !important;
    }
}

/* High-DPI mobile devices (smartphones with high pixel density) */
@media (hover: none) and (pointer: coarse) {
    /* ── Achievements panel header: stack title below on touch devices ── */
    .achievements-header {
        flex-wrap: wrap !important;
        padding: 0.5em 0.75em !important;
        gap: 0.2em !important;
    }

    .achievements-back-btn {
        order: 1 !important;
        font-size: 1em !important;
        padding: 0.4em 0.6em !important;
    }

    .achievements-progress {
        order: 2 !important;
    }

    .achievements-title {
        order: 3 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1.35em !important;
        padding-top: 0.2em !important;
        letter-spacing: 0.15em !important;
    }

    body {
        padding-top: 2.5rem;
    }

    .wrapper {
        justify-content: flex-start;
        padding-top: 0.625rem;
    }

    #game-header {
        height: 2.5rem;
        padding: 0 0.5rem;
        gap: clamp(0.625rem, 3vw, 1.25rem);
    }

    .header-left {
        gap: clamp(0.25rem, 1vw, 0.375rem);
    }

    .header-link-btn {
        font-size: clamp(0.625rem, 2.8vw, 0.875rem);
        padding: clamp(0.25rem, 1.2vw, 0.5rem) clamp(0.375rem, 1.5vw, 0.625rem);
        letter-spacing: 0;
        min-height: 1.75rem;
    }

    .btn-desktop-text {
        display: none;
    }

    .btn-mobile-text {
        display: inline;
    }

    .header-right {
        gap: clamp(0.25rem, 1vw, 0.5rem);
    }

    .header-btn {
        font-size: clamp(0.625rem, 2.8vw, 0.875rem);
        padding: clamp(0.25rem, 1.2vw, 0.5rem) clamp(0.5rem, 2vw, 0.75rem);
        letter-spacing: 0;
        /* Larger touch targets */
        min-height: 1.75rem;
    }

    .info {
        display: none;
    }

    #game-container {
        border-width: 1px;
        border-radius: 0.25rem;
        max-height: calc(100vh - 7.25rem);
        max-height: calc(100dvh - 7.25rem);
    }

    /* Ensure touch-friendly sizes for options panel */
    .option-label {
        font-size: 1.25rem;
    }

    .option-input {
        font-size: 1.375rem;
        padding: 0.75rem 1rem;
        min-height: 2.75rem;
    }

    .toggle-switch {
        width: 4.375rem;
        height: 2.25rem;
    }

    .toggle-slider:before {
        height: 1.75rem;
        width: 1.75rem;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(2.125rem);
    }

    /* In game mode on touch devices: move report/support to footer, center header */
    body.game-mode .header-left {
        display: none;
    }

    body.game-mode #game-header {
        justify-content: center;
    }

    #game-footer {
        display: flex;
    }

    #game-footer .footer-buttons {
        display: none;
    }

    body.game-mode #game-footer .footer-buttons {
        display: flex;
    }

    /* Remove sticky hover glow on touch devices — glow only while actively pressed */
    .header-link-btn:hover,
    .header-btn:hover,
    .footer-link-btn:hover,
    .close-btn:hover,
    .clear-log-btn:hover {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: inherit;
    }

    .close-btn:hover {
        color: #00d4ff;
    }

    .clear-log-btn:hover {
        color: #ff4444;
    }

    .header-link-btn:active,
    .header-btn:active {
        background: rgba(0, 212, 255, 0.2);
        box-shadow: none !important;
        text-shadow: none !important;
        transform: scale(0.98);
    }

    .footer-link-btn:active {
        background: rgba(0, 212, 255, 0.2);
        box-shadow: none !important;
        text-shadow: none !important;
        transform: scale(0.98);
    }

    .close-btn:active {
        color: #ff4444;
        text-shadow: none !important;
    }

    .clear-log-btn:active {
        background: rgba(255, 68, 68, 0.2);
    }
}

/* Landscape mobile - compact header */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding-top: 2.1875rem; /* Even smaller header in landscape */
    }

    #game-header {
        height: 2.1875rem;
        gap: clamp(0.5rem, 2vw, 0.9375rem);
    }

    .header-left {
        gap: clamp(0.1875rem, 0.8vw, 0.3125rem);
    }

    .header-link-btn {
        font-size: clamp(0.625rem, 2vw, 0.75rem);
        padding: clamp(0.1875rem, 0.8vw, 0.3125rem) clamp(0.375rem, 1.2vw, 0.625rem);
        letter-spacing: 0;
    }

    .btn-desktop-text {
        display: none;
    }

    .btn-mobile-text {
        display: inline;
    }

    .header-right {
        gap: clamp(0.25rem, 1vw, 0.375rem);
    }

    .header-btn {
        font-size: clamp(0.625rem, 2vw, 0.75rem);
        padding: clamp(0.1875rem, 0.8vw, 0.3125rem) clamp(0.375rem, 1.2vw, 0.625rem);
        letter-spacing: 0;
    }

    .info {
        display: none;
    }

    .wrapper {
        justify-content: flex-start;
        padding-top: 0.125rem;
    }

    #game-container {
        max-height: calc(100vh - 2.8125rem);
        max-height: calc(100dvh - 2.8125rem);
    }

    #dev-overlay {
        max-height: 9.375rem;
        bottom: 0.3125rem;
        left: 0.625rem;
        width: 18.75rem;
    }

    /* In game mode on landscape mobile: move report/support to footer, center header */
    body.game-mode .header-left {
        display: none;
    }

    body.game-mode #game-header {
        justify-content: center;
    }

    body.game-mode #game-container {
        max-height: calc(100vh - 7.9375rem);
        max-height: calc(100dvh - 7.9375rem);
    }

    #game-footer {
        display: flex;
    }

    #game-footer .footer-buttons {
        display: none;
    }

    body.game-mode #game-footer .footer-buttons {
        display: flex;
    }
}

/* High-DPI landscape touch devices (modern smartphones in landscape) */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    body {
        padding-top: 2.25rem;
    }

    #game-header {
        height: 2.25rem;
        padding: 0 0.5rem;
        gap: clamp(0.5rem, 2vw, 0.9375rem);
    }

    .header-left {
        gap: clamp(0.1875rem, 0.8vw, 0.3125rem);
    }

    .header-link-btn {
        font-size: clamp(0.625rem, 2vw, 0.75rem);
        padding: clamp(0.25rem, 1vw, 0.375rem) clamp(0.375rem, 1.5vw, 0.625rem);
        min-height: 1.625rem;
        letter-spacing: 0;
    }

    .btn-desktop-text {
        display: none;
    }

    .btn-mobile-text {
        display: inline;
    }

    .header-right {
        gap: clamp(0.25rem, 1vw, 0.375rem);
    }

    .header-btn {
        font-size: clamp(0.625rem, 2vw, 0.75rem);
        padding: clamp(0.25rem, 1vw, 0.375rem) clamp(0.375rem, 1.5vw, 0.625rem);
        min-height: 1.625rem;
        letter-spacing: 0;
    }

    .wrapper {
        justify-content: flex-start;
        padding-top: 0.125rem;
    }

    #game-container {
        max-height: calc(100vh - 2.625rem);
        max-height: calc(100dvh - 2.625rem);
    }

    /* In game mode on landscape touch: move report/support to footer, center header */
    body.game-mode .header-left {
        display: none;
    }

    body.game-mode #game-header {
        justify-content: center;
    }

    body.game-mode #game-container {
        max-height: calc(100vh - 8rem);
        max-height: calc(100dvh - 8rem);
    }

    #game-footer {
        display: flex;
    }

    #game-footer .footer-buttons {
        display: none;
    }

    body.game-mode #game-footer .footer-buttons {
        display: flex;
    }
}

/* ============================================
   CRT & PIXELIZATION EFFECT
   ============================================ */

/* Main overlay — pixel grid + container for pseudo-elements */
#crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    /* Pixel grid pattern */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    animation: crt-flicker 6s infinite;
}

/* Scanlines — with slow vertical roll */
#crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 4px);
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.12) 1px,
        rgba(0, 0, 0, 0.12) 2px
    );
    animation: crt-scanline-roll 8s linear infinite;
    z-index: 1;
}

/* Vignette + RGB color fringe */
#crt-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.45) 100%
    );
    /* Subtle chromatic aberration via colored inset shadows */
    box-shadow:
        inset 2px 0 8px rgba(255, 0, 0, 0.04),
        inset -2px 0 8px rgba(0, 0, 255, 0.04),
        inset 0 2px 8px rgba(0, 255, 0, 0.03),
        inset 0 -2px 8px rgba(0, 255, 0, 0.03);
    z-index: 2;
}

/* Subtle screen flicker */
@keyframes crt-flicker {
    0%   { opacity: 1; }
    3%   { opacity: 0.97; }
    6%   { opacity: 1; }
    42%  { opacity: 1; }
    44%  { opacity: 0.98; }
    46%  { opacity: 1; }
    85%  { opacity: 1; }
    87%  { opacity: 0.96; }
    89%  { opacity: 1; }
    100% { opacity: 1; }
}

/* Scanline roll — slow vertical creep of scanline pattern */
@keyframes crt-scanline-roll {
    0%   { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

/* Transition jitter — horizontal sync loss on scene change */
@keyframes crt-jitter {
    0%   { transform: translate(0, 0) skewX(0deg); }
    8%   { transform: translate(-6px, 1px) skewX(-0.4deg); }
    16%  { transform: translate(4px, -1px) skewX(0.3deg); }
    24%  { transform: translate(-3px, 2px) skewX(-0.2deg); }
    32%  { transform: translate(7px, 0px) skewX(0.5deg); }
    40%  { transform: translate(-2px, -1px) skewX(-0.15deg); }
    52%  { transform: translate(3px, 1px) skewX(0.2deg); }
    64%  { transform: translate(-4px, 0px) skewX(-0.3deg); }
    76%  { transform: translate(2px, -1px) skewX(0.1deg); }
    88%  { transform: translate(-1px, 0px) skewX(-0.05deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}

/* Jitter class — added/removed by JS on scene transitions */
#game-container.crt-jitter {
    animation: crt-jitter 300ms ease-out 1 !important;
}

/* Horizontal glitch scan bands — spawned by JS during jitter */
.crt-glitch-line {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 212, 255, 0.08) 10%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(0, 212, 255, 0.08) 90%,
        transparent 100%);
    backdrop-filter: brightness(1.6) contrast(1.2);
}

/* Phosphor glow on text — makes all text feel like CRT output */
body {
    text-shadow: 0 0 2px rgba(0, 212, 255, 0.15);
}

/* ============================================
   GPU COMPOSITING & CONTAINMENT
   ============================================ */
#board-area { contain: layout style; }
#piece-container { contain: layout style; }
.piece { contain: layout style paint; }
#board-canvas, #glow-canvas { contain: strict; }

/* ============================================
   8-BIT PIXEL ART STYLES
   ============================================ */

/* Pixelated canvas rendering */
#board-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Pixel art piece containers */
.piece-circle {
    image-rendering: pixelated;
}

/* Disable font smoothing on piece symbols for pixel look */
.piece-symbol {
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

/* Chunky pixel health bars */
.piece-healthbar-bg {
    border-radius: 0 !important;
    border-width: 2px !important;
}

.piece-healthbar-fill {
    image-rendering: pixelated;
}

/* Pixel-style production indicator */
.piece-production {
    border-radius: 0 !important;
}

/* ============================================
   GRAPHICS SETTINGS TOGGLE CLASSES
   ============================================ */

/* CRT Effects disabled — hide overlay and remove phosphor text glow */
body.crt-disabled #crt-overlay {
    display: none !important;
}
body.crt-disabled {
    text-shadow: none !important;
}

/* Pre-rendered CRT overlay for mobile — pseudo-elements baked into bitmap */
body.crt-prerendered #crt-overlay {
    animation: none !important;
    will-change: auto;
}
body.crt-prerendered #crt-overlay::before,
body.crt-prerendered #crt-overlay::after {
    display: none !important;
}
body.crt-prerendered {
    text-shadow: none !important;
}

/* Pre-rendered jitter flash overlay for mobile —
   aberration, brightness flash, and glitch bands baked into one bitmap */
#crt-jitter-prerender {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    background-size: 100% 100%;
}
#crt-jitter-prerender.active {
    animation: crt-jitter-flash 350ms ease-out forwards;
}
@keyframes crt-jitter-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
body.crt-disabled #crt-jitter-prerender {
    display: none !important;
}

/* Reduced Shadows — lighter box-shadows for mobile performance */
body.reduced-shadows #game-container {
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.2) !important;
}
body.reduced-shadows #game-header {
    box-shadow: 0 1px 6px rgba(0, 212, 255, 0.15) !important;
}
body.reduced-shadows .header-btn:hover,
body.reduced-shadows .header-link-btn:hover {
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.3) !important;
}
body.reduced-shadows .crt-glitch-line {
    backdrop-filter: none !important;
}

.neon-share-section {
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 10;
}

.neon-share-label {
    font-family: 'VT323', monospace; 
    color: #00d4ff;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
    opacity: 0.8;
}

.neon-share-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.neon-share-btn {
    font-family: 'VT323', monospace;
    font-size: 1rem; 
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    white-space: nowrap;
    text-decoration: none; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.1);
}

.neon-share-btn svg {
    width: 1.1em;
    height: 1.1em;
}

.neon-share-btn:hover {
    background: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
    text-shadow: 0 0 10px #00d4ff;
    transform: translateY(-2px); /* Tiny lift effect */
}

.neon-share-btn:active {
    background: rgba(0, 212, 255, 0.4);
    transform: scale(0.98) translateY(0);
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

@media (max-width: 500px) {
    .neon-share-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
    .neon-share-btn span {
        display: none; /* Hide text on very small screens, keep icons */
    }
}