body {
            margin: 0;
            font-family: monospace;
            background: #1a1a1a;
            height: 100vh;
        }

        * {
            image-rendering: pixelated;
        }

        #game::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 10;
            background: repeating-linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.05),
                    rgba(0, 0, 0, 0.05) 1px,
                    transparent 1px,
                    transparent 2px);
        }

        #top-screen {
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
            background: linear-gradient(#8fd3ff 0%,
                    #7ec8ff 40%,
                    #6fb8e6 100%);
        }

        #game {
            width: 360px;
            height: 640px;
            display: flex;
            flex-direction: column;
            background: #0d0d0d;
            border: 6px solid #333;
            box-shadow: inset 0 0 0 2px #000;
            border-bottom: 15px solid #333;
        }

        #top-screen {
            flex: 1;
            position: relative;
            background: linear-gradient(#7ec8ff, #a8d8ff);
            border-bottom: 4px solid #222;
            image-rendering: pixelated;
        }

        #bottom-screen {
            flex: 1;
            background: linear-gradient(#1a1a1a, #0f0f0f);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 8px;
            box-shadow: inset 0 0 0 2px #000;
        }

        #battlefield {
            position: relative;
            width: 100%;
            height: 350px;
        }

        .pokemon-container {
            position: absolute;
        }

        .nameplate {
            background: #111;
            border: 2px solid #fff;
            padding: 6px;
            color: #fff;
            font-size: 11px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.5),
                0 2px 0 #000;
        }

        .name-row {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
        }

        .hp-bar {
            width: 100%;
            height: 6px;
            background: #333;
            margin-top: 4px;
            border: 1px solid #000;
        }

        .hp-fill {
            height: 100%;
            background: limegreen;
            transition: width 0.3s linear;
        }

        .hp-text {
            font-size: 10px;
            margin-top: 2px;
            text-align: right;
        }

        .info {
            color: #fff;
            padding: 4px 6px;
            font-size: 11px;
        }

        #dialog {
            background: #000;
            color: #fff;
            padding: 8px;
            border: 3px solid #333;
            max-height: 60px;
            font-size: 13px;
        }

        #menu button,
        #choices button {
            width: 100%;
            padding: 10px;
            margin: 3px 0;
            background: #2b2b2b;
            color: #fff;
            border: 2px solid #000;
            font-family: monospace;
            font-size: 13px;
            text-align: left;
            cursor: pointer;
        }

        #menu button:hover,
        #choices button:hover {
            background: #444;
        }

        #menu button:active,
        #choices button:active {
            transform: translateY(1px);
        }

        .sprite-wrapper {
            display: inline-block;
        }

        .sprite {
            height: 120px;
        }

        .sprite.hit {
            animation: shake 0.3s, flash 0.3s;
        }

        @keyframes flash {
            0% {
                filter: brightness(1);
            }

            50% {
                filter: brightness(3) grayscale(1);
            }

            100% {
                filter: brightness(1);
            }
        }

        @keyframes shake {
            0% {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(-4px, 0);
            }

            40% {
                transform: translate(4px, 0);
            }

            60% {
                transform: translate(-3px, 0);
            }

            80% {
                transform: translate(3px, 0);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        #log {
            height: 45px;
            overflow-y: scroll;
        }