@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Press Start 2P', cursive;
            background: #1a1a2e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* 防止滚动 */
            touch-action: none; /* 禁用默认触摸行为 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            min-height: 100vh;
            overflow: hidden;
        }
        
        /* 像素风格文本类 */
        .pixel-text {
            font-family: 'Press Start 2P', 'Noto Sans Symbols', sans-serif;
            -webkit-font-smoothing: none;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeSpeed;
            image-rendering: pixelated;
        }
        
        #gameContainer {
            position: relative;
            width: 960px;
            height: 480px;
            min-width: 960px;
            min-height: 480px;
            max-width: 100vw;
            max-height: 100vh;
        }
        
        #gameCanvas {
            display: block;
            width: 100%;
            height: 100%;
            background: #2a4a6a;
            image-rendering: pixelated;
        }
        
        #startScreen {
            display: flex;
            background: rgba(42, 74, 106, 0.85);
        }
        
        #gameOverScreen, #winScreen, #pauseScreen {
            display: none;
            background: rgba(42, 74, 106, 0.75);
        }
        
        #startScreen, #gameOverScreen, #winScreen, #pauseScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-height: 480px;
            min-width: 960px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        h1 {
            font-size: 24px;
            color: #fff;
            margin-bottom: 25px;
            text-align: center;
            line-height: 1.8;
            text-shadow: 4px 4px 0 #000;
        }
        
        .subtitle {
            font-size: 12px;
            color: #b8e5f5;
            margin-bottom: 25px;
            text-align: center;
            max-width: 80%;
            line-height: 2;
        }
        
        .instructions {
            font-size: 10px;
            color: #7ec8e3;
            margin-bottom: 35px;
            text-align: center;
            line-height: 2.2;
            max-width: 75%;
        }
        
        #gameOverDistance {
            color: #00ffff;
            font-weight: bold;
        }
        
        #winDistance {
            color: #00ffff;
            font-weight: bold;
        }
        
        .fact-box {
            background: rgba(0, 68, 102, 0.8);
            border: 2px solid #00ffff;
            padding: 15px 20px;
            margin-bottom: 30px;
            max-width: 85%;
            text-align: center;
        }
        
        .fact-label {
            font-size: 11px;
            color: #ffff00;
            margin-bottom: 10px;
            text-shadow: 2px 2px 0 #000;
        }
        
        .fact-text {
            font-size: 9px;
            color: #b8e5f5;
            line-height: 1.8;
            text-shadow: 1px 1px 0 #000;
        }
        
        button {
            padding: 15px 40px;
            font-size: 14px;
            font-family: 'Press Start 2P', cursive;
            background: #00aacc;
            color: #fff;
            border: 4px solid #fff;
            cursor: pointer;
            box-shadow: 6px 6px 0 #000;
            transition: none;
            text-transform: uppercase;
        }
        
        button:hover {
            background: #00ccff;
            transform: translate(-2px, -2px);
            box-shadow: 8px 8px 0 #000;
        }
        
        button:active {
            transform: translate(4px, 4px);
            box-shadow: 2px 2px 0 #000;
        }
        
        .mobile-toggle {
            position: fixed;
            bottom: 10px;
            left: 10px;
            padding: 10px 15px;
            font-size: 10px;
            background: #ffaa00;
            border-color: #ffaa00;
            z-index: 2000;
        }
        
        .mobile-toggle:hover {
            background: #ffcc00;
        }
        
        .highlight {
            color: #00ffff;
            padding: 3px 6px;
            background: #004466;
            border: 2px solid #00ffff;
        }
        
        #gameOverScreen h1 {
            color: #ff4444;
        }
        
        #gameOverScreen button {
            background: #ff6666;
        }
        
        #gameOverScreen button:hover {
            background: #ff8888;
        }
        
        #winScreen h1 {
            color: #ffcc00;
        }
        
        #winScreen button {
            background: #ffcc00;
            color: #000;
        }
        
        #winScreen button:hover {
            background: #ffe066;
        }
        
        .decorative-line {
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, transparent, #00ffff, transparent);
            margin: 20px auto;
        }
        
        #speedIndicator {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 102, 0, 0.9);
            color: #fff;
            padding: 10px 15px;
            font-size: 10px;
            text-align: center;
            border: 3px solid #fff;
            box-shadow: 4px 4px 0 #000;
            z-index: 500;
            display: none;
            min-width: 200px;
        }
        
        #slowDownProgress {
            width: 100%;
            height: 16px;
            background: #222;
            border: 2px solid #fff;
            margin-top: 8px;
            position: relative;
            image-rendering: pixelated;
            box-shadow: 4px 4px 0 #000;
        }
        
        #slowDownProgressBar {
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                #ff0000 0px,
                #ff0000 4px,
                #ff2200 4px,
                #ff2200 8px
            );
            width: 0%;
            transition: none;
            image-rendering: pixelated;
        }
        
        #tailwindIndicator {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(100, 200, 255, 0.9);
            color: #fff;
            padding: 10px 15px;
            font-size: 10px;
            text-align: center;
            border: 3px solid #fff;
            box-shadow: 4px 4px 0 #000;
            z-index: 500;
            display: none;
            min-width: 200px;
        }
        
        #tailwindProgress {
            width: 100%;
            height: 16px;
            background: #222;
            border: 2px solid #fff;
            margin-top: 8px;
            position: relative;
            image-rendering: pixelated;
            box-shadow: 4px 4px 0 #000;
        }
        
        #tailwindProgressBar {
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                #00aaff 0px,
                #00aaff 4px,
                #00ccff 4px,
                #00ccff 8px
            );
            width: 0%;
            transition: none;
            image-rendering: pixelated;
        }
        
        #timer {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 14px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 15px;
            border: 2px solid #fff;
            z-index: 100;
            display: none; /* 默认隐藏，只在游戏进行时显示 */
        }

        #pauseButton {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #fff;
            width: 40px;
            height: 40px;
            cursor: pointer;
            z-index: 100;
            box-shadow: 3px 3px 0 #000;
            padding: 0;
            display: none; /* 默认隐藏，只在游戏进行时显示 */
            align-items: center;
            justify-content: center;
        }

        .pause-icon {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .pause-bar {
            width: 6px;
            height: 16px;
            background: #fff;
            box-shadow: 1px 1px 0 #000;
        }

        #pauseButton:hover {
            background: rgba(0, 170, 204, 0.8);
        }

        #pauseButton:hover .pause-bar {
            background: #00ffff;
        }

        #pauseButton:active {
            transform: translate(1px, 1px);
            box-shadow: 2px 2px 0 #000;
        }

        .solution-info {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 10px;
            color: #ffcc00;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 15px;
            border: 2px solid #ffcc00;
            z-index: 100;
        }

        /* 碰撞箱编辑器样式 */
        #editorButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            font-size: 12px;
            font-family: 'Press Start 2P', cursive;
            background: #ff6600;
            color: #fff;
            border: 3px solid #fff;
            cursor: pointer;
            box-shadow: 4px 4px 0 #000;
            z-index: 100;
            display: none; /* 默认隐藏，只有在Editor模式才显示 */
        }

        #editorButton:hover {
            background: #ff8800;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #000;
        }
        
        #settingsButton {
            background: #ff9900;
            border-color: #ff9900;
            box-shadow: 4px 4px 0 #000;
            display: none; /* 默认隐藏，只有在Editor模式才显示 */
        }
        
        #settingsButton:hover {
            background: #ffaa33;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #000;
        }
        
        #artSettingsButton {
            background: #00ccff;
            border-color: #00ccff;
            box-shadow: 4px 4px 0 #000;
            display: none; /* 默认隐藏，只有在Editor模式才显示 */
        }
        
        #artSettingsButton:hover {
            background: #33ddff;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #000;
        }

        #collisionEditor {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .editor-container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            padding: 20px;
            background: #1a1a2e;
            border: 4px solid #00ffff;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
            max-width: 1200px;
            max-height: 80vh;
        }

        .editor-sidebar {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 200px;
        }

        .editor-canvas-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        #editorCanvas {
            border: 2px solid #00ffff;
            background: #0a0a1a;
            cursor: crosshair;
        }

        .editor-button {
            padding: 10px 15px;
            font-size: 10px;
            font-family: 'Press Start 2P', cursive;
            background: #00aacc;
            color: #fff;
            border: 3px solid #fff;
            cursor: pointer;
            box-shadow: 4px 4px 0 #000;
        }

        .editor-button:hover {
            background: #00ccff;
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #000;
        }

        .editor-button.active {
            background: #ff6600;
        }

        .editor-button.danger {
            background: #ff4444;
        }

        .editor-button.danger:hover {
            background: #ff6666;
        }

        .editor-panel {
            background: #0a0a1a;
            border: 2px solid #00ffff;
            padding: 15px;
            margin-top: 10px;
        }

        .editor-panel h3 {
            font-size: 12px;
            color: #00ffff;
            margin-bottom: 10px;
        }

        .editor-row {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
        }

        .editor-row label {
            font-size: 8px;
            color: #7ec8e3;
            min-width: 60px;
        }
        
        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 5px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        .editor-row input {
            flex: 1;
            padding: 5px;
            font-size: 10px;
            font-family: 'Press Start 2P', cursive;
            background: #1a1a2e;
            color: #fff;
            border: 2px solid #00ffff;
        }

        .shape-list {
            max-height: 200px;
            overflow-y: auto;
            font-size: 8px;
            color: #7ec8e3;
        }

        .shape-item {
            padding: 5px;
            border-bottom: 1px solid #333;
            cursor: pointer;
        }

        .shape-item:hover {
            background: #1a1a2e;
        }

        .shape-item.selected {
            background: #00aacc;
            color: #fff;
        }
        
        /* 移动端虚拟按键样式 - 16bit风格 */
        .mobile-controls {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: none; /* 默认隐藏，只在移动端显示 */
            justify-content: space-between;
            padding: 0 30px;
            pointer-events: none;
            z-index: 1000;
        }
        
        .touch-button {
            pointer-events: auto;
            width: 80px;
            height: 80px;
            background: linear-gradient(145deg, #3a4a5a, #2a3a4a);
            border: 4px solid #1a2a3a;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            box-shadow: 
                0 4px 0 #1a2a3a,
                0 6px 10px rgba(0, 0, 0, 0.4);
            transition: transform 0.1s, box-shadow 0.1s;
        }
        
        .touch-button:active {
            transform: translateY(4px);
            box-shadow: 
                0 0 0 #1a2a3a,
                0 2px 5px rgba(0, 0, 0, 0.4);
        }
        
        .touch-button.pressed {
            background: linear-gradient(145deg, #4a5a6a, #3a4a5a);
            transform: translateY(4px);
            box-shadow: 
                0 0 0 #1a2a3a,
                0 2px 5px rgba(0, 0, 0, 0.4);
        }
        
        .button-face {
            font-size: 32px;
            color: #aaddff;
            text-shadow: 2px 2px 0 #1a2a3a;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .button-label {
            font-size: 10px;
            color: #8899aa;
            text-shadow: 1px 1px 0 #1a2a3a;
            font-weight: bold;
            letter-spacing: 1px;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .mobile-controls {
                display: flex;
            }
            
            #gameContainer {
                position: relative;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            #gameCanvas {
                max-width: 100%;
                max-height: calc(100vh - 150px);
                width: auto;
                height: auto;
            }
        }
        
        /* iPad适配 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .mobile-controls {
                display: flex;
            }
            
            #gameCanvas {
                max-width: 100%;
                max-height: calc(100vh - 150px);
                width: auto;
                height: auto;
            }
        }

/* ============================================================
   COLLISION EDITOR — 重排样式 (v2, 贴合游戏冷青蓝调)
   追加在文件末尾,覆盖上方旧的霓虹配色规则。
   ============================================================ */
#collisionEditor {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 18, 24, 0.94);
    z-index: 2000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.editor-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0e2530;
    border: 3px solid #3a6b82;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    max-width: 940px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace, sans-serif;
}

.editor-title {
    font-family: 'Press Start 2P', monospace, sans-serif;
    font-size: 13px;
    color: #7ec8e3;
    letter-spacing: 1px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #17394a, #0e2530);
    border-bottom: 2px solid #3a6b82;
    text-shadow: 2px 2px 0 #061319;
}

.editor-body {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
    overflow-y: auto;
}

.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 250px;
    flex-shrink: 0;
}

/* 分区卡片 */
.editor-section {
    background: rgba(126, 200, 227, 0.05);
    border: 1px solid rgba(126, 200, 227, 0.18);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.editor-section__title {
    font-size: 8px;
    color: #8fb8ca;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.editor-section.danger-zone {
    border-color: rgba(194, 82, 100, 0.4);
    background: rgba(194, 82, 100, 0.06);
}
.editor-section.danger-zone .editor-section__title { color: #d98a97; }

/* 裂缝选择:2列网格 chip */
.crack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.btn-row {
    display: flex;
    gap: 6px;
}
.btn-row .editor-button { flex: 1; }

/* 统一按钮 */
.editor-button {
    padding: 9px 8px;
    font-size: 8px;
    line-height: 1.35;
    font-family: 'Press Start 2P', monospace, sans-serif;
    background: #24566b;
    color: #e6f4fa;
    border: 2px solid #4a8199;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 0 #0a1c24;
    transition: transform 0.05s ease, background 0.12s ease, box-shadow 0.05s ease;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
.editor-button:hover {
    background: #2f6d87;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #0a1c24;
}
.editor-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #0a1c24; }

.editor-button.active {
    background: #e8a13c;
    border-color: #ffc877;
    color: #2a1a05;
    box-shadow: 0 2px 0 #7a5210;
}
.editor-button.primary {
    background: #2f9e6f;
    border-color: #5fd3a3;
    color: #04211a;
}
.editor-button.primary:hover { background: #37b681; }
.editor-button.danger {
    background: #b34a5a;
    border-color: #e0798a;
    color: #fff0f2;
}
.editor-button.danger:hover { background: #c85667; }
.editor-button.ghost {
    background: transparent;
    border-color: #4a8199;
    color: #9fc4d4;
    box-shadow: none;
}
.editor-button.ghost:hover { background: rgba(126, 200, 227, 0.1); }

/* 画布区 */
.editor-canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#editorCanvas {
    border: 2px solid #3a6b82;
    border-radius: 4px;
    background: #0a1a22;
    cursor: crosshair;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    image-rendering: pixelated;
}
.editor-hint {
    color: #8fb8ca;
    font-size: 8px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* 属性面板 */
.editor-panel {
    background: rgba(126, 200, 227, 0.05);
    border: 1px solid rgba(126, 200, 227, 0.18);
    border-radius: 6px;
    padding: 14px 16px;
    width: 400px;
    max-width: 100%;
    box-sizing: border-box;
}
.editor-panel h3 {
    font-size: 10px;
    color: #7ec8e3;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}
.editor-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.editor-row:last-child { margin-bottom: 0; }
.editor-row label {
    font-size: 8px;
    color: #8fb8ca;
    min-width: 64px;
}
.editor-row input {
    flex: 1;
    padding: 7px 8px;
    font-size: 10px;
    font-family: 'Press Start 2P', monospace, sans-serif;
    background: #0a1a22;
    color: #e6f4fa;
    border: 2px solid #3a6b82;
    border-radius: 4px;
    box-sizing: border-box;
}
.editor-row input:focus { outline: none; border-color: #7ec8e3; }
.prop-type { color: #e8a13c; font-size: 10px; }

/* 形状列表 */
.shape-list {
    width: 400px;
    max-width: 100%;
    max-height: 160px;
    overflow-y: auto;
    font-size: 8px;
    color: #8fb8ca;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(126, 200, 227, 0.14);
    border-radius: 6px;
    box-sizing: border-box;
}
.shape-list:empty { display: none; }
.shape-item {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(126, 200, 227, 0.1);
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.1s ease;
}
.shape-item:last-child { border-bottom: none; }
.shape-item:hover { background: rgba(126, 200, 227, 0.08); }
.shape-item.selected {
    background: rgba(232, 161, 60, 0.18);
    color: #ffd79a;
}

/* ============================================================
   统一 16-bit 主题 (Antarctic Ice) —— 追加在最末,覆盖全局配色
   保留硬阴影/粗边/像素处理,只统一调色板。
   Tokens: ink #071319 | ice #7ec8e3 | teal #2f7391 | amber #f0b23c
           navy panel rgba(12,34,48,*) | danger #c94f61
   ============================================================ */

/* ---- 屏幕遮罩:统一冰川深蓝 ---- */
#startScreen { background: rgba(16, 44, 60, 0.9) !important; }
#gameOverScreen, #winScreen, #pauseScreen { background: rgba(12, 34, 48, 0.82) !important; }

/* ---- 标题 / 文字 ---- */
h1 { color: #eaf6fb; text-shadow: 4px 4px 0 #071319; }
#gameOverScreen h1 { color: #e5788a; }
#winScreen h1 { color: #f0b23c; }
.subtitle { color: #b8e5f5; }
.instructions { color: #7ec8e3; }
#gameOverDistance, #winDistance { color: #7ec8e3; }
.highlight { color: #0c2230; background: #7ec8e3; border: 2px solid #a9d6e8; }
.decorative-line { background: linear-gradient(90deg, transparent, #7ec8e3, transparent); }

/* ---- fact box ---- */
.fact-box { background: rgba(10, 34, 48, 0.85); border: 3px solid #3a6b82; }
.fact-label { color: #f0b23c; text-shadow: 2px 2px 0 #071319; }
.fact-text { color: #cfe8f2; text-shadow: 1px 1px 0 #071319; }

/* ---- 主按钮:冰蓝 teal,保留硬阴影粗边 ---- */
button {
    background: #2f7391;
    color: #eaf6fb;
    border: 4px solid #a9d6e8;
    box-shadow: 6px 6px 0 #071319;
}
button:hover { background: #3a8aad; box-shadow: 8px 8px 0 #071319; }
button:active { box-shadow: 2px 2px 0 #071319; }
#gameOverScreen button { background: #c94f61; border-color: #efa2ad; color: #fff0f2; }
#gameOverScreen button:hover { background: #d76575; }
#winScreen button { background: #f0b23c; border-color: #ffd884; color: #2a1a05; }
#winScreen button:hover { background: #f7c463; }

/* ---- HUD:计时器 / 暂停键 ---- */
#timer {
    color: #eaf6fb;
    background: rgba(7, 19, 25, 0.78);
    border: 3px solid #7ec8e3;
    box-shadow: 3px 3px 0 #071319;
}
#pauseButton {
    color: #eaf6fb;
    background: rgba(7, 19, 25, 0.78);
    border: 3px solid #7ec8e3;
    box-shadow: 3px 3px 0 #071319;
}
#pauseButton:hover { background: rgba(47, 115, 145, 0.9); }
.pause-bar { background: #eaf6fb; box-shadow: 1px 1px 0 #071319; }
#pauseButton:hover .pause-bar { background: #7ec8e3; }

/* ---- HUD:减速 / 顺风指示器 + 进度条 ---- */
#speedIndicator {
    background: rgba(201, 122, 51, 0.92);
    border: 3px solid #ffd27a;
    box-shadow: 4px 4px 0 #071319;
}
#tailwindIndicator {
    background: rgba(47, 115, 145, 0.92);
    border: 3px solid #a9d6e8;
    box-shadow: 4px 4px 0 #071319;
}
#slowDownProgress, #tailwindProgress { background: #0a1a22; border: 2px solid #a9d6e8; box-shadow: 4px 4px 0 #071319; }
#slowDownProgressBar {
    background: repeating-linear-gradient(90deg, #c94f61 0px, #c94f61 4px, #d76575 4px, #d76575 8px);
}
#tailwindProgressBar {
    background: repeating-linear-gradient(90deg, #2f9ec2 0px, #2f9ec2 4px, #5fbde0 4px, #5fbde0 8px);
}
.solution-info { color: #f0b23c; background: rgba(7, 19, 25, 0.78); border: 2px solid #f0b23c; }

/* ---- 顶部工具按钮(editor模式)统一 ---- */
#editorButton { background: #f0b23c; border: 3px solid #ffd884; color: #2a1a05; box-shadow: 4px 4px 0 #071319; }
#editorButton:hover { background: #f7c463; box-shadow: 6px 6px 0 #071319; }
#settingsButton { background: #2f7391; border: 3px solid #a9d6e8; color: #eaf6fb; box-shadow: 4px 4px 0 #071319; }
#settingsButton:hover { background: #3a8aad; }
#artSettingsButton { background: #4a8199; border: 3px solid #a9d6e8; color: #eaf6fb; box-shadow: 4px 4px 0 #071319; }
#artSettingsButton:hover { background: #5a97b0; }
.mobile-toggle { background: #f0b23c !important; border-color: #ffd884 !important; color: #2a1a05; }
.mobile-toggle:hover { background: #f7c463 !important; }

/* ---- 让 editor 也回归硬派 16-bit:去圆角、硬阴影,和游戏统一 ---- */
.editor-container { border-radius: 0; border: 4px solid #3a6b82; box-shadow: 8px 8px 0 #071319; }
.editor-title { border-bottom: 3px solid #3a6b82; }
.editor-section { border-radius: 0; border: 2px solid rgba(126, 200, 227, 0.22); }
.editor-section.danger-zone { border-color: rgba(201, 79, 97, 0.5); }
.editor-button { border-radius: 0; box-shadow: 3px 3px 0 #071319; border-width: 2px; }
.editor-button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #071319; }
.editor-button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #071319; }
.editor-button.active { background: #f0b23c; border-color: #ffd884; color: #2a1a05; }
.editor-button.primary { background: #2f9e6f; border-color: #6ee0ad; color: #04211a; }
.editor-button.danger { background: #c94f61; border-color: #efa2ad; color: #fff0f2; }
#editorCanvas { border-radius: 0; border: 3px solid #3a6b82; box-shadow: 4px 4px 0 #071319; }
.editor-panel { border-radius: 0; border: 2px solid rgba(126, 200, 227, 0.22); }
.editor-row input { border-radius: 0; }
.shape-list { border-radius: 0; }
.prop-type { color: #f0b23c; }

/* ============================================================
   启动页 + editor 工具条 + 音频面板  (追加,统一 16-bit 冰川风)
   ============================================================ */

/* ---- CLICK TO START 启动页 ---- */
#splashScreen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 960px; min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(12, 34, 48, 0.97);
    z-index: 1500;
    cursor: pointer;
}
.splash-prompt {
    font-size: 14px;
    color: #f0b23c;
    margin-top: 24px;
    text-shadow: 2px 2px 0 #071319;
    animation: splashBlink 1.1s steps(1) infinite;
}
@keyframes splashBlink {
    0%, 55% { opacity: 1; }
    55.01%, 100% { opacity: 0.25; }
}

/* ---- editor 模式工具条:三个工具按钮统一成一排次级按钮 ---- */
.editor-tools {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
/* 取消 editorButton 原本的绝对定位(右下角),回到工具条里排队 */
#editorButton {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}
/* 三个工具按钮:统一的"次级"外观,明显区别于主 CTA */
.tool-button {
    padding: 10px 14px !important;
    font-size: 9px !important;
    background: #1c3f50 !important;
    color: #cfe8f2 !important;
    border: 3px solid #4a8199 !important;
    box-shadow: 3px 3px 0 #071319 !important;
    text-transform: none !important;
}
.tool-button:hover {
    background: #27546a !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 #071319 !important;
}

/* 主行动按钮更醒目(琥珀) */
.cta-button {
    background: #f0b23c !important;
    border: 4px solid #ffd884 !important;
    color: #2a1a05 !important;
    box-shadow: 6px 6px 0 #071319 !important;
    margin-bottom: 4px;
}
.cta-button:hover { background: #f7c463 !important; box-shadow: 8px 8px 0 #071319 !important; }

/* ---- 音频面板:把音乐/音效控件框成一块 ---- */
.audio-panel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-bottom: 20px;
    background: rgba(10, 34, 48, 0.55);
    border: 2px solid #3a6b82;
    box-shadow: 3px 3px 0 #071319;
}
.audio-panel__label {
    font-size: 8px;
    color: #8fb8ca;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ============================================================
   启动页资源加载读条 (v3) —— 16-bit 像素风
   ============================================================ */
#splashLoadWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
#splashBarTrack {
    width: 320px;
    height: 20px;
    background: #0a1a22;
    border: 3px solid #3a6b82;
    box-shadow: 3px 3px 0 #071319;
    image-rendering: pixelated;
    overflow: hidden;
}
#splashBarFill {
    width: 0%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #2f9ec2 0px, #2f9ec2 6px, #5fbde0 6px, #5fbde0 12px);
    transition: width 0.15s steps(4);
    image-rendering: pixelated;
}
#splashStatus {
    font-size: 9px;
    color: #8fb8ca;
    letter-spacing: 1px;
}