html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: #1b2838;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        #game {
            display: block;
            image-rendering: pixelated;
        }
        #hud {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.55);
            color: #f0f0f0;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1.5;
            user-select: none;
            -webkit-user-select: none;
            max-width: calc(100vw - 24px);
        }
        #hud .hint { opacity: 0.7; font-size: 11px; margin-top: 4px; }
        #hud b { color: #e8c547; }
        /* Collapsible header — the only always-tappable part of the HUD. */
        #hudToggle {
            display: none; /* only shown when collapsing is enabled (touch) */
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-weight: 700;
            color: #e8c547;
        }
        #hudChevron { display: inline-block; font-size: 10px; transition: transform 0.15s ease; }
        /* When collapsing is enabled, the toggle shows and the body can be hidden. */
        #hud.collapsible #hudToggle { display: flex; }
        #hud.collapsible.collapsed #hudBody { display: none; }
        #hud.collapsible #hudBody { margin-top: 6px; }
        #hud.collapsible.collapsed #hudChevron { transform: rotate(-90deg); }
        #hud .bar-row { display: flex; align-items: center; gap: 6px; }
        #hud .bar {
            display: inline-block;
            width: 90px;
            height: 8px;
            background: rgba(255, 255, 255, 0.18);
            border-radius: 4px;
            overflow: hidden;
        }
        #hud .bar > span {
            display: block;
            height: 100%;
            width: 100%;
            background: #6fcf6f;
            transition: width 0.2s linear, background 0.2s linear;
        }

        /* ---- Start screen: blurred world behind a liquid-glass panel ---- */
        #startScreen, #deathScreen {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Blur the live game canvas rendering behind this overlay. */
            -webkit-backdrop-filter: blur(14px) saturate(120%);
            backdrop-filter: blur(14px) saturate(120%);
            background: rgba(12, 22, 36, 0.35); /* graceful dim if blur unsupported */
            z-index: 10;
        }
        /* The death overlay tints red so it reads as a loss, and sits above everything. */
        #deathScreen { background: rgba(48, 12, 12, 0.45); z-index: 12; }
        #startScreen.hidden, #deathScreen.hidden { display: none; }
        #deathScreen .glass-panel h1 { color: #ff8a7a; }
        #restartBtn {
            padding: 10px 18px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            background: rgba(232, 197, 71, 0.30);
            border: 1px solid rgba(232, 197, 71, 0.7);
            color: #f4f7fb;
        }

        .glass-panel {
            padding: 28px 32px 32px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.25);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
            box-shadow:
                    0 8px 40px rgba(0, 0, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.35);
            color: #f4f7fb;
            text-align: center;
            max-width: 520px;
        }
        .glass-panel h1 {
            margin: 0 0 4px;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .glass-panel p {
            margin: 0 0 22px;
            font-size: 13px;
            opacity: 0.8;
        }
        .class-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .class-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 10px;
            border-radius: 14px;
            cursor: pointer;
            color: #f4f7fb;
            font-size: 13px;
            font-weight: 600;
            /* Liquid-glass look. */
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.28);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
            backdrop-filter: blur(10px) saturate(150%);
            box-shadow:
                    0 4px 18px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.40);
            transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
            user-select: none;
        }
        .class-btn:hover {
            background: rgba(255, 255, 255, 0.22);
            transform: translateY(-2px);
            box-shadow:
                    0 8px 26px rgba(0, 0, 0, 0.38),
                    inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }
        .class-btn:active { transform: translateY(0); }
        .class-btn .swatch {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        }
        .class-btn .resource {
            font-size: 11px;
            font-weight: 500;
            opacity: 0.7;
        }

        /* ---- Shared liquid-glass control styling ---- */
        .glass-control {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.28);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
            backdrop-filter: blur(10px) saturate(150%);
            box-shadow:
                    0 4px 18px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.40);
            color: #f4f7fb;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }

        /* Minimap reopen button (top-right corner). Hidden while the map is
           open — you collapse the map by clicking it — and shown only once
           the map is collapsed, so it never covers the minimap. */
        #minimapToggle {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            border-radius: 9px;
            display: none; /* shown only while the minimap is collapsed */
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            z-index: 8;
        }
        #minimapToggle.enabled { display: flex; }

        /* Settings gear (top-right, just below the canvas-drawn minimap).
           The minimap is drawn at top:12px with size = min(200px, 32vw)
           (see app.js), so its bottom edge sits at 12px + min(200px, 32vw).
           Anchor the gear 12px below that at every viewport width. */
        #settingsBtn {
            position: absolute;
            top: calc(24px + min(200px, 32vw));
            right: 12px;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            z-index: 8;
        }
        #settingsBtn.hidden { display: none; }

        /* Settings popover: mode toggle. */
        #settingsMenu {
            position: absolute;
            top: calc(72px + min(200px, 32vw)); /* 48px below the gear */
            right: 12px;
            padding: 8px;
            border-radius: 12px;
            display: none;
            flex-direction: column;
            gap: 6px;
            z-index: 9;
            min-width: 150px;
        }
        #settingsMenu.open { display: flex; }
        #settingsMenu .mode-btn {
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: #f4f7fb;
            text-align: left;
        }
        #settingsMenu .mode-btn.active {
            background: rgba(232, 197, 71, 0.30);
            border-color: rgba(232, 197, 71, 0.7);
        }

        /* ---- Touch controls ---- */
        #touchControls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
        #touchControls.hidden { display: none; }

        /* Joystick (bottom-left). */
        #joystick {
            position: absolute;
            left: 24px;
            bottom: 24px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            pointer-events: auto;
        }
        #joyThumb {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 56px;
            height: 56px;
            margin-left: -28px;
            margin-top: -28px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
            will-change: transform;
        }

        /* Action buttons (bottom-right). */
        #actionBtns {
            position: absolute;
            right: 24px;
            bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 14px;
            max-width: 160px;
            pointer-events: auto;
        }
        #actionBtns .action-btn {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        #actionBtns .action-btn .icon { font-size: 20px; line-height: 1; }
        #actionBtns .action-btn:active { background: rgba(255, 255, 255, 0.26); }

        /* Build-tool palette: a centered strip of tool chips along the bottom.
           In keyboard mode the strip shows inline. In touch mode the strip is hidden
           behind a toggle button (#paletteToggle) and slides open only when tapped, so
           it never overlaps the joystick (bottom-left) or action buttons (bottom-right). */
        /* Full-width, bottom-anchored, centered via flex (no transform — a transform here
           would trap the open strip's position:fixed to this box instead of the viewport). */
        #toolPalette {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20px;
            z-index: 8;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            pointer-events: none; /* children re-enable; empty gaps stay click-through */
        }
        #toolPalette.hidden { display: none; }

        /* The chip strip: a horizontally scrollable row of chips. */
        #paletteStrip {
            max-width: 94vw;
            display: flex;
            gap: 8px;
            padding: 6px;
            overflow-x: auto;
            pointer-events: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* The collapse toggle is only shown in touch mode (see .touch-mode below). */
        #paletteToggle {
            display: none;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            pointer-events: auto;
        }

        /* --- Touch mode: collapse the strip behind the toggle. --- */
        /* Sit centered along the bottom, in the gap between joystick and action buttons. */
        #toolPalette.touch-mode { bottom: 28px; }
        #toolPalette.touch-mode #paletteToggle { display: flex; }
        /* Hide the strip until the tray is opened. When open, pull it out of the
           bottom-anchored flow and float it as a fixed panel pinned to the upper-center
           of the screen — clear of the joystick and action buttons at the bottom. It
           scrolls internally rather than growing down into the controls. */
        #toolPalette.touch-mode #paletteStrip { display: none; }
        #toolPalette.touch-mode.open #paletteStrip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: fixed;
            left: 50%;
            top: 64px;
            transform: translateX(-50%);
            width: min(90vw, 340px);
            max-height: calc(100vh - 220px); /* leave room for the bottom controls */
            overflow-y: auto;
            padding: 8px;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 14px;
        }
        #toolPalette .tool-chip {
            position: relative;
            flex: 0 0 auto;
            min-width: 62px;
            padding: 8px 8px 6px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.15;
            cursor: pointer;
        }
        /* The 1-9 shortcut badge in the chip's top-left corner. */
        #toolPalette .tool-chip .tk {
            position: absolute;
            top: -6px;
            left: -6px;
            min-width: 16px;
            height: 16px;
            padding: 0 3px;
            box-sizing: border-box;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            font-size: 10px;
            line-height: 16px;
            text-align: center;
            font-weight: 700;
        }
        #toolPalette .tool-chip .tg { font-size: 18px; line-height: 1; }
        #toolPalette .tool-chip .tc { font-size: 9px; opacity: 0.75; font-weight: 500; }
        #toolPalette .tool-chip.active {
            background: rgba(232, 197, 71, 0.34);
            box-shadow: inset 0 0 0 2px rgba(232, 197, 71, 0.95);
        }
        #toolPalette .tool-chip.active .tk { background: #e8c547; color: #1b1b1b; }

        /* Top-left build table. It sits beneath the stats HUD instead of occupying
           the bottom play area, and remains a table in both input modes. */
        #toolPalette,
        #toolPalette.touch-mode {
            left: 12px;
            right: auto;
            top: 255px;
            bottom: auto;
            width: min(430px, calc(100vw - 24px));
            display: block;
            padding: 9px;
            box-sizing: border-box;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.58);
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: auto;
        }
        #toolPalette .tool-chip.build-success {
            background: rgba(70, 210, 120, 0.45);
            box-shadow: inset 0 0 0 2px #55ee91;
        }
        #toolPalette .tool-chip.build-failed {
            background: rgba(230, 70, 70, 0.5);
            box-shadow: inset 0 0 0 2px #ff6262;
            animation: build-shake 0.22s linear 1;
        }
        @keyframes build-shake {
            25% { transform: translateX(-2px); }
            75% { transform: translateX(2px); }
        }
        #toolPalette.hidden { display: none; }
        #paletteTitle {
            margin: 0 0 7px;
            color: #e8c547;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        #paletteToggle,
        #toolPalette.touch-mode #paletteToggle { display: none; }
        #paletteStrip,
        #toolPalette.touch-mode #paletteStrip,
        #toolPalette.touch-mode.open #paletteStrip {
            position: static;
            transform: none;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
            max-width: none;
            max-height: min(48vh, 410px);
            padding: 0;
            gap: 5px;
            overflow-y: auto;
            overflow-x: hidden;
            background: transparent;
        }
        #toolPalette .tool-chip {
            min-width: 0;
            padding: 7px 4px 5px;
            border-radius: 7px;
        }

        @media (max-width: 600px) {
            #toolPalette,
            #toolPalette.touch-mode {
                top: 62px;
                width: min(330px, calc(100vw - 76px));
            }
            #paletteStrip,
            #toolPalette.touch-mode #paletteStrip,
            #toolPalette.touch-mode.open #paletteStrip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                max-height: 42vh;
            }
        }

        #workshopPrompt {
            position: absolute;
            left: 50%;
            bottom: 28px;
            transform: translateX(-50%);
            z-index: 9;
            padding: 9px 14px;
            border-radius: 9px;
            color: #fff;
            background: rgba(13, 20, 28, 0.88);
            border: 1px solid rgba(243, 207, 120, 0.75);
            box-shadow: 0 5px 20px rgba(0,0,0,0.4);
            font-size: 13px;
            pointer-events: none;
        }
        #workshopPrompt b { color: #f3cf78; }
        #workshopPrompt.hidden, #workshopPanel.hidden { display: none; }
        #workshopPanel {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            background: rgba(5, 10, 16, 0.62);
            backdrop-filter: blur(7px);
        }
        .workshop-card {
            position: relative;
            width: min(680px, 94vw);
            padding: 24px;
            box-sizing: border-box;
            color: #f4f7fb;
            border-radius: 18px;
            background: linear-gradient(145deg, rgba(49,61,70,0.98), rgba(21,28,34,0.98));
            border: 1px solid rgba(243,207,120,0.55);
            box-shadow: 0 18px 60px rgba(0,0,0,0.58), inset 0 1px rgba(255,255,255,0.12);
        }
        .workshop-card h2 { margin: 0 0 4px; color: #f3cf78; }
        .workshop-card p { margin: 0 0 18px; color: #c8d0d6; font-size: 13px; }
        #workshopClose {
            position: absolute; right: 14px; top: 12px;
            border: 0; background: transparent; color: #fff; font-size: 28px; cursor: pointer;
        }
        #robotShopGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .robot-shop-item {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            padding: 16px 10px; min-height: 150px; cursor: pointer;
            border-radius: 13px; color: #f4f7fb;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
        }
        .robot-shop-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
        .robot-shop-icon { font-size: 38px; }
        .robot-shop-name { font-weight: 800; }
        .robot-shop-description { color: #bac4ca; font-size: 11px; min-height: 28px; }
        .robot-shop-cost { margin-top: auto; color: #f3cf78; font-size: 11px; font-weight: 700; }
        .robot-shop-item.purchase-success { box-shadow: inset 0 0 0 2px #55ee91; }
        .robot-shop-item.purchase-failed { box-shadow: inset 0 0 0 2px #ff6262; }
        @media (max-width: 600px) {
            #robotShopGrid { grid-template-columns: 1fr; max-height: 65vh; overflow-y: auto; }
            .robot-shop-item { min-height: 110px; }
        }