:root {
    /* Core colors from mobile/desktop references */
    --color-primary: #ec5b13;
    --color-primary-dark: #9a3b0c;
    --color-primary-light: #ff8c5a;

    --color-bg: #141316;
    --color-bg-dark: #1e0f24;
    --color-bg-light: #2d1736;
    --color-bg-elevated: #40204b;

    --color-game-green: #172211;
    --color-game-border: #304724;

    --color-border-purple: #5b2e6b;
    --color-accent-purple: #40204b;
    --color-text-muted: #bd8dce;

    --color-text: #e6e1e6;
    --color-text-dim: #948e99;

    --color-success: #22C55E;
    --color-danger: #EF4444;
    --color-hole: #0d0508;

    --color-border: var(--color-border-purple);
    --color-border-light: var(--color-bg-light);

    /* Legacy color mappings */
    --color-action: var(--color-primary);
    --color-action-dark: var(--color-primary-dark);
    --color-action-light: var(--color-primary-light);
    --color-control: #FF8C00;
    --color-control-dark: #CC7000;
    --color-control-light: #FFA940;
    --color-event: #FFD700;
    --color-event-dark: #CCAC00;
    --color-event-light: #FFE44D;

    /* Typography */
    --font-primary: 'Public Sans', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Press Start 2P', cursive;
    --font-mono: 'Consolas', 'Courier New', monospace;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-unit: 4px;
    --spacing-margin: 24px;
    --spacing-gutter: 16px;
    --spacing-panel-padding: 20px;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-action: 0 0 15px rgba(236, 91, 19, 0.4);
    --shadow-glow-control: 0 0 15px rgba(255, 140, 0, 0.4);
    --shadow-glow-event: 0 0 15px rgba(255, 215, 0, 0.4);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Grid */
    --grid-size: 10;
    --cell-size: 48px;
}

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

body {
    font-family: var(--font-primary);
    background: var(--color-bg-dark);
    color: var(--color-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Header */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border-purple);
    gap: var(--spacing-md);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-brand h1 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: white;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.level-badge {
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.header-stats {
    display: flex;
    gap: var(--spacing-md);
}

.stat {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.header-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* Buttons */
.btn {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-play {
    background: var(--color-success);
    color: white;
}

.btn-play:hover:not(:disabled) {
    background: #16A34A;
    box-shadow: var(--shadow-glow-action);
}

.btn-clear {
    background: var(--color-danger);
    color: white;
}

.btn-clear:hover:not(:disabled) {
    background: #DC2626;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-small:hover:not(:disabled) {
    background: var(--color-border-light);
}

/* Fixed run button (mobile) */
.run-button-fixed {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    z-index: 50;
    background: linear-gradient(to top, var(--color-bg), transparent);
}

.run-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: var(--color-primary);
    height: 56px;
    border-radius: var(--radius-xl);
    color: white;
    font-family: var(--font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 0 var(--color-primary-dark);
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
}

.run-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Main layout */
.app-container {
    display: grid;
    grid-template-columns: 2fr 4.5fr 3fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#gameWrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-game-green);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-game-border);
    border-radius: 10px;
}

/* Media queries */
@media (max-width: 1024px) {
    .app-container {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 100px;
    }

    .palette {
        max-height: 50vh;
        overflow-y: auto;
        flex-shrink: 0;
    }

    .workspace-container {
        min-height: 400px;
        max-height: 520px;
        flex-shrink: 0;
    }

    .stage-container {
        min-height: 580px;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .workspace-container {
        min-height: 380px;
        max-height: 500px;
    }

    .stage-container {
        min-height: 540px;
    }
}

@media (max-width: 640px) {
    .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: 4px;
    }

    .header-brand {
        justify-content: center;
    }

    .header-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        margin-left: 0;
    }

    :root {
        --cell-size: 36px;
    }

    .workspace-container {
        min-height: 360px;
        max-height: 480px;
    }

    .stage-container {
        min-height: 520px;
    }
}

@media (max-width: 480px) {
    :root {
        --cell-size: 32px;
    }

    .app-container {
        gap: 12px;
        padding: 8px;
        padding-bottom: 80px;
    }

    .palette {
        max-height: 200px;
        padding: var(--spacing-sm);
    }

    .workspace-container {
        min-height: 340px;
        max-height: 440px;
        padding: var(--spacing-sm);
    }

    .stage-container {
        min-height: 450px;
        padding: var(--spacing-sm);
    }
}

/* ── Light Theme ── */
html.light {
    --color-primary: #3525cd;
    --color-primary-dark: #2a1ea8;
    --color-primary-light: #4f46e5;

    --color-bg: #f3f3f8;
    --color-bg-dark: #f9f9fe;
    --color-bg-light: #ffffff;
    --color-bg-elevated: #ededf2;

    --color-game-green: #e2e2e7;
    --color-game-border: #c7c4d8;

    --color-border-purple: #c7c4d8;
    --color-accent-purple: #ededf2;
    --color-text-muted: #777587;

    --color-text: #1a1c1f;
    --color-text-dim: #777587;

    --color-success: #4edea3;
    --color-danger: #ba1a1a;
    --color-hole: #ffdad6;

    --color-border: var(--color-border-purple);
    --color-border-light: #e2e2e7;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

html.light body {
    background: var(--color-bg-dark);
    color: var(--color-text);
}

html.light .app-header {
    background: var(--color-bg-dark);
    border-bottom-color: var(--color-border-purple);
}

html.light .header-brand h1 {
    color: var(--color-text);
}

html.light .menu-card {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .menu-input {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text);
}

html.light .menu-btn-rankings {
    color: var(--color-text-muted);
    border-color: var(--color-border-purple);
}

html.light .menu-btn-rankings:hover {
    background: var(--color-accent-purple);
    color: var(--color-text);
}

html.light .menu-btn-play {
    background: var(--color-primary);
}

html.light .menu-btn-play:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

html.light .palette {
    background: var(--color-bg-dark);
    border-color: var(--color-border-purple);
}

html.light .workspace-container {
    background: var(--color-bg-dark);
    border-color: var(--color-border-purple);
}

html.light .workspace-header {
    background: var(--color-bg-dark);
    border-bottom-color: var(--color-border-purple);
}

html.light .workspace-header h2 {
    color: var(--color-text);
}

html.light .workspace {
    background: var(--color-bg-dark);
    border-color: var(--color-border-purple);
}

html.light .workspace.syntax-error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
    box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.1);
}

html.light .workspace .block {
    border-color: var(--color-border-purple);
}

html.light .stage-container {
    background: var(--color-bg-dark);
    border-color: var(--color-border-purple);
}

html.light .stage-header {
    border-bottom-color: var(--color-border-purple);
}

html.light .stage-header h2 {
    color: var(--color-text);
}

html.light .cell {
    border-color: rgba(0, 0, 0, 0.15);
}

html.light .cell.path {
    background: rgba(0, 0, 0, 0.02);
}

html.light .cell.wall {
    background: #555568;
}

html.light .cell.hole {
    background: #d0c0c8;
    border-color: #a08090;
}

html.light .cell.start {
    background: rgba(217, 79, 15, 0.15);
}

html.light .stage::before {
    opacity: 0.6;
}

html.light .objective-info {
    background: var(--color-accent-purple);
    border-color: var(--color-border-purple);
}

html.light .legend-item {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
    color: var(--color-text-muted);
}

html.light .stage-legend .legend-item {
    background: var(--color-bg-light);
}

html.light .modal {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .modal h2 {
    color: var(--color-text);
}

html.light .header-player input {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text);
}

html.light .block {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .block-action {
    background: rgba(53, 37, 205, 0.2);
    border-color: rgba(53, 37, 205, 0.2);
}

html.light .block-control {
    background: rgba(255, 140, 0, 0.2);
    border-color: rgba(255, 140, 0, 0.35);
}

html.light .block-expression {
    background: rgba(147, 51, 234, 0.6);
    border-color: rgba(147, 51, 234, 0.25);
}

html.light .block-sensor {
    background: rgba(34, 197, 94, 0.6);
    border-color: rgba(34, 197, 94, 0.25);
}

html.light .repeat-body .block-children > .block {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .repeat-head {
    background: var(--color-control);
    border-color: var(--color-control-dark);
}

html.light .repeat-body::before,
html.light .repeat-body::after {
    background: var(--color-control);
    border-color: var(--color-control-dark);
}

html.light .trash-zone {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.3);
}

html.light .stage .grid {
    background: transparent;
}

html.light .level-badge {
    color: white;
}

html.light .rankings-view-card {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .ranking-item {
    background: var(--color-bg-dark);
    border-color: var(--color-border-purple);
}

html.light .ranking-item:hover {
    background: var(--color-bg-elevated);
}

html.light .ranking-tab {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text-muted);
}

html.light .ranking-tab:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

html.light .rank-mode-btn {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text-muted);
}

html.light .rank-mode-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-primary);
}

html.light .rank-nav-btn {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text-muted);
}

html.light .rank-nav-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
    border-color: var(--color-primary);
}

html.light .rank-level-display {
    background: var(--color-bg);
    border-color: var(--color-border-purple);
    color: var(--color-text);
}

html.light .star-tooltip {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .star-tooltip::before {
    background: var(--color-bg-light);
    border-color: var(--color-border-purple);
}

html.light .btn-back {
    color: var(--color-text-muted);
    border-color: var(--color-border-purple);
}

html.light .btn-back:hover {
    background: var(--color-accent-purple);
    color: var(--color-text);
}

html.light .workspace-placeholder {
    border-color: var(--color-border-purple);
    color: var(--color-text-dim);
}

html.light .cell.door {
    background: rgba(139, 69, 19, 0.2);
    border-color: #8B4513;
}

html.light .cell.boss {
    background: linear-gradient(135deg, #e8d0d0, #d8d0e8);
    border-color: #cc6666;
}

html.light .cell.boss-octopus {
    background: linear-gradient(135deg, #d0e0e8, #d0d8e8);
    border-color: #6688cc;
}

html.light .cell.boss-devil {
    background: linear-gradient(135deg, #e8d8d0, #e8d0d0);
    border-color: #cc8866;
}

html.light .grid-pattern {
    background-image: radial-gradient(circle, #c7c4d8 1.5px, transparent 1.5px);
    opacity: 0.8;
}

html.light .rankings-view-title {
    color: var(--color-text);
}

html.light .actor-emoji {
    color: #ec5b13;
}

html.light .block-children:empty {
    border-color: rgba(255, 140, 0, 0.8);
    background: var(--color-control-light);
}

html.light .block-children:empty::after {
    color: black;
}

html.light .menu-title {
    color: var(--color-text);
}

@media (max-width: 1024px) {
    html.light .block .block-label {
        color: var(--color-text);
    }
}

@media (min-width: 1025px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
}