@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

        :root {
            --cheese: #feca57;
            --cheese-dim: #c9963a;
            --sub: #ff4757;
            --add: #2ed573;
            --bg: #0a0a0f;
            --glass: rgba(8, 8, 18, 0.72);
            --glass-border: rgba(254, 202, 87, 0.18);
            --text: #e8e8f0;
            --text-dim: rgba(232, 232, 240, 0.45);
        }

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

        body {
            overflow: hidden; background: var(--bg);
            font-family: 'Syne', sans-serif;
            touch-action: none; user-select: none; -webkit-user-select: none;
        }

        #game-container { position: absolute; inset: 0; }

        /* ── UI Overlay ── */
        #ui-layer {
            position: absolute; inset: 0; pointer-events: none;
            display: flex; flex-direction: column;
        }

        /* ── Crosshair ── */
        #crosshair {
            position: absolute; top: 50%; left: 50%;
            width: 22px; height: 22px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        #crosshair::before, #crosshair::after {
            content: ''; position: absolute;
            background: rgba(255,255,255,0.88);
            box-shadow: 0 0 4px rgba(0,0,0,0.9);
        }
        #crosshair::before { top: 10px; left: 0; width: 22px; height: 2px; }
        #crosshair::after  { top: 0; left: 10px; width: 2px; height: 22px; }
        #crosshair-dot {
            position: absolute; top: 50%; left: 50%;
            width: 3px; height: 3px;
            background: white; border-radius: 50%;
            transform: translate(-50%,-50%);
        }

        /* ── Top HUD ── */
        #hud-top {
            display: flex; align-items: flex-start; gap: 8px;
            padding: 12px 14px; flex-wrap: wrap;
        }

        .hud-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 12px; padding: 9px 12px;
            pointer-events: auto; backdrop-filter: blur(12px);
            color: var(--text);
        }

        .card-label {
            font-family: 'Space Mono', monospace;
            font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
            color: var(--text-dim); margin-bottom: 6px;
        }

        .btn-row { display: flex; gap: 5px; }

        .tool-btn {
            width: 36px; height: 36px;
            border: 1.5px solid rgba(255,255,255,0.15);
            border-radius: 8px; display: flex; align-items: center;
            justify-content: center; font-size: 17px; cursor: pointer;
            background: rgba(0,0,0,0.35);
            transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
        }
        .tool-btn:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.07); }
        .tool-btn.active {
            border-color: var(--cheese);
            box-shadow: 0 0 10px rgba(254,202,87,0.35), inset 0 0 6px rgba(254,202,87,0.1);
            transform: scale(1.08);
        }
        .tool-btn.active-sub { border-color: var(--sub); box-shadow: 0 0 10px rgba(255,71,87,0.35); }
        .tool-btn.active-add { border-color: var(--add); box-shadow: 0 0 10px rgba(46,213,115,0.35); }
        .tool-btn.active-drill { border-color: #ff9f43; box-shadow: 0 0 10px rgba(255,159,67,0.35); }
        .tool-btn.active-chain { border-color: #00d2d3; box-shadow: 0 0 10px rgba(0,210,211,0.35); }

        #mode-pill {
            margin-top: 5px; text-align: center;
            font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
            letter-spacing: 0.08em; padding: 2px 10px; border-radius: 20px;
            background: rgba(255,71,87,0.15); color: var(--sub);
            border: 1px solid rgba(255,71,87,0.3);
            transition: all 0.2s;
        }
        #mode-pill.add { background: rgba(46,213,115,0.15); color: var(--add); border-color: rgba(46,213,115,0.3); }
        #mode-pill.drill { background: rgba(255,159,67,0.15); color: #ff9f43; border-color: rgba(255,159,67,0.3); }
        #mode-pill.chain { background: rgba(0,210,211,0.15); color: #00d2d3; border-color: rgba(0,210,211,0.3); }

        #hud-spacer { flex: 1; }

        #btn-settings {
            background: var(--glass); border: 1px solid var(--glass-border);
            color: var(--text); padding: 9px 14px;
            border-radius: 12px; cursor: pointer; pointer-events: auto;
            font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
            backdrop-filter: blur(12px); white-space: nowrap;
            transition: background 0.2s, border-color 0.2s;
        }
        #btn-settings:hover { background: rgba(254,202,87,0.12); border-color: var(--cheese); }

        /* ── Instructions ── */
        #instructions {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: var(--glass); border: 1px solid var(--glass-border);
            border-radius: 18px; padding: 32px 38px;
            text-align: center; pointer-events: auto; cursor: pointer;
            box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(254,202,87,0.08);
            max-width: 480px; width: 92%;
            backdrop-filter: blur(16px);
        }
        #instructions h1 {
            font-size: 28px; font-weight: 800; color: var(--cheese);
            margin-bottom: 10px; letter-spacing: -0.02em;
        }
        #instructions .tagline {
            font-size: 13px; color: var(--text-dim); margin-bottom: 20px;
            font-family: 'Space Mono', monospace;
        }
        .key-row { margin: 8px 0; font-size: 13px; color: rgba(255,255,255,0.75); }
        .key {
            display: inline-block;
            background: rgba(255,255,255,0.08); padding: 1px 7px;
            border-radius: 5px; border: 1px solid rgba(255,255,255,0.2);
            color: var(--cheese); font-family: 'Space Mono', monospace;
            font-size: 11px;
        }
        #start-hint {
            margin-top: 22px; padding: 11px 24px;
            background: rgba(254,202,87,0.12); border-radius: 10px;
            border: 1px solid rgba(254,202,87,0.3);
            color: var(--cheese); font-weight: 700; font-size: 14px;
            animation: pulse-hint 2s ease-in-out infinite;
        }
        @keyframes pulse-hint {
            0%,100% { opacity: 1; } 50% { opacity: 0.65; }
        }

        /* ── Settings Modal ── */
        #settings-modal {
            display: none; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: var(--glass); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px 28px;
            width: min(400px, 96vw); pointer-events: auto;
            max-height: 88vh; overflow-y: auto;
            box-shadow: 0 24px 80px rgba(0,0,0,0.9);
            backdrop-filter: blur(16px);
        }
        #settings-modal h2 {
            font-size: 17px; font-weight: 800; color: var(--cheese);
            margin-bottom: 16px; padding-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            letter-spacing: -0.01em;
        }
        .setting-row {
            display: flex; justify-content: space-between; align-items: center;
            gap: 12px; margin-bottom: 9px;
        }
        .setting-row label {
            font-family: 'Space Mono', monospace; font-size: 11px;
            color: rgba(255,255,255,0.75); letter-spacing: 0.02em;
        }
        .setting-row input {
            width: 110px; background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14); color: white;
            padding: 5px 9px; border-radius: 7px; font-size: 12px;
            font-family: 'Space Mono', monospace;
            transition: border-color 0.15s;
        }
        .setting-row input:focus { outline: none; border-color: var(--cheese); }
        .settings-actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
        .settings-actions button {
            flex: 1; padding: 9px 12px; border-radius: 9px;
            font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
            cursor: pointer; border: 1px solid; transition: background 0.15s;
        }
        #btn-save    { background: rgba(254,202,87,0.15); color: var(--cheese); border-color: rgba(254,202,87,0.35); }
        #btn-save:hover { background: rgba(254,202,87,0.28); }
        #btn-export  { background: rgba(255,255,255,0.06); color: var(--text); border-color: rgba(255,255,255,0.15); }
        #btn-export:hover { background: rgba(255,255,255,0.12); }
        #btn-close-s { background: rgba(255,71,87,0.12); color: var(--sub); border-color: rgba(255,71,87,0.3); }
        #btn-close-s:hover { background: rgba(255,71,87,0.25); }

        /* ── Mobile Controls ── */
        #mobile-controls { display: none; position: absolute; inset: 0; pointer-events: none; }

        .joy-zone {
            position: absolute; bottom: 0; width: 50%; height: 56%;
            pointer-events: auto;
        }
        #lz { left: 0; } #rz { right: 0; }

        .joy-base {
            position: absolute; width: 108px; height: 108px;
            background: rgba(255,255,255,0.06);
            border: 1.5px solid rgba(255,255,255,0.22);
            border-radius: 50%; transform: translate(-50%,-50%);
            display: none; pointer-events: none;
        }
        .joy-stick {
            position: absolute; width: 42px; height: 42px;
            background: rgba(255,255,255,0.55); border-radius: 50%;
            top: 50%; left: 50%; transform: translate(-50%,-50%);
            box-shadow: 0 0 14px rgba(255,255,255,0.15);
        }

        #mob-actions {
            position: absolute; bottom: 18px; right: 16px;
            display: flex; gap: 11px; pointer-events: auto;
        }
        .act-btn {
            width: 58px; height: 58px;
            background: rgba(255,255,255,0.1);
            border: 1.5px solid rgba(255,255,255,0.25);
            border-radius: 50%; color: white;
            font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background 0.08s, transform 0.08s;
        }
        .act-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.93); }
        #btn-fire { background: rgba(255,71,87,0.25); border-color: rgba(255,71,87,0.55); }
        #btn-fire:active { background: rgba(255,71,87,0.55); }

        #mob-toolbar {
            position: absolute; bottom: 90px; right: 14px;
            display: flex; flex-direction: column; gap: 8px;
            pointer-events: auto;
        }
        .mob-tb { display: flex; gap: 7px; }
        .mob-btn {
            width: 44px; height: 44px;
            background: rgba(8,8,18,0.7); border: 1.5px solid rgba(255,255,255,0.18);
            border-radius: 10px; font-size: 19px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
        }
        .mob-btn.active { border-color: var(--cheese); box-shadow: 0 0 8px rgba(254,202,87,0.4); }
        .mob-btn.active-sub { border-color: var(--sub); box-shadow: 0 0 8px rgba(255,71,87,0.4); }
        .mob-btn.active-add { border-color: var(--add); box-shadow: 0 0 8px rgba(46,213,115,0.4); }
        .mob-btn.active-drill { border-color: #ff9f43; box-shadow: 0 0 8px rgba(255,159,67,0.4); }

        /* ── Loading ── */
        #loading {
            position: absolute; inset: 0; background: var(--bg);
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; z-index: 200; transition: opacity 0.5s;
        }
        #loading h2 { font-size: 26px; font-weight: 800; color: var(--cheese); margin-bottom: 6px; }
        #loading p  { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--text-dim); }
        .spin {
            width: 46px; height: 46px;
            border: 3px solid rgba(254,202,87,0.12);
            border-top-color: var(--cheese); border-radius: 50%;
            animation: spin 0.85s linear infinite; margin-bottom: 22px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── Responsive ── */
        @media (max-width: 580px) {
            #hud-top { padding: 8px 10px; gap: 6px; }
            .hud-card { padding: 7px 9px; }
            .card-label { font-size: 8px; }
            .tool-btn { width: 32px; height: 32px; font-size: 15px; }
            #btn-settings { padding: 7px 10px; font-size: 12px; }
            #instructions { padding: 22px 20px; }
            #instructions h1 { font-size: 22px; }
        }