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

        :root {
            --ui-bg: rgba(14, 24, 40, 0.82);
            --ui-border: #8bb0d8;
            --ui-text: #eaf4ff;
            --ui-accent: #ffd27a;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: "VT323", monospace;
            background: #5a8ec4;
            touch-action: none;
        }

        #game-wrap {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }

        #hud {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            pointer-events: none;
            z-index: 10;
        }

        .hud-panel {
            background: var(--ui-bg);
            border: 2px solid var(--ui-border);
            color: var(--ui-text);
            border-radius: 8px;
            padding: 8px 12px;
            min-width: 180px;
            font-size: 30px;
            line-height: 1;
        }

        .hud-panel strong {
            color: var(--ui-accent);
        }

        #center-panel {
            text-align: center;
            min-width: 420px;
        }

        #overlay,
        #modal,
        #ending {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 30;
        }

        #overlay,
        #ending {
            background: rgba(8, 16, 28, 0.74);
        }

        #modal {
            background: rgba(8, 16, 28, 0.55);
            display: none;
        }

        .card {
            width: min(920px, 92vw);
            border: 4px solid #243e5c;
            border-radius: 10px;
            background: #f1f8ff;
            color: #163148;
            padding: 18px;
            box-shadow: 0 14px 0 #1d344d;
            text-align: center;
        }

        .card h1,
        .card h2 {
            margin: 0 0 8px;
            font-size: clamp(38px, 4vw, 54px);
            line-height: 1;
        }

        .card p {
            margin: 6px 0;
            font-size: clamp(28px, 2.8vw, 34px);
            line-height: 1.12;
        }

        .btn {
            margin-top: 10px;
            padding: 8px 22px;
            border: 3px solid #2b425c;
            border-radius: 8px;
            color: #0e2b46;
            font-family: inherit;
            font-size: 32px;
            background: #ffcf70;
            cursor: pointer;
            box-shadow: 0 6px 0 #b88c39;
        }

        .btn:active {
            transform: translateY(3px);
            box-shadow: 0 3px 0 #b88c39;
        }

        #ending {
            display: none;
        }

        #touch {
            position: absolute;
            bottom: 14px;
            left: 14px;
            right: 14px;
            display: none;
            justify-content: space-between;
            pointer-events: none;
            z-index: 12;
        }

        .touch-group {
            display: flex;
            gap: 10px;
            pointer-events: auto;
        }

        .touch-btn {
            width: 68px;
            height: 68px;
            border: 2px solid #e6f3ff;
            border-radius: 8px;
            background: rgba(12, 24, 40, 0.78);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            user-select: none;
        }

        @media (max-width: 980px) {
            #hud {
                flex-wrap: wrap;
            }

            #center-panel {
                min-width: 0;
                width: 100%;
                order: 3;
            }

            #touch {
                display: flex;
            }
        }