html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
                overflow-x: hidden;
                background: linear-gradient(135deg, #bde3ff 0%, #e5f7fe 100%);
                font-family: "Segoe UI", "Pretendard", "Malgun Gothic", Arial, sans-serif;
            }

            #gameWrapper {
                width: 100vw;
                min-height: 10vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
            }

            .game-header {
                width: 100%;
                padding: 2.1rem 0 0.4rem 0;
                text-align: center;
            }

            .game-title {
                font-size: 2rem;
                font-weight: 800;
                color: #2186ee;
                letter-spacing: 0.5px;
                text-shadow:
                    0 4px 18px #4db8ff38,
                    0 1px 0 #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.3em;
                margin-bottom: 0.18em;
            }

            .game-title-emoji {
                font-size: 1.4em;
                margin-left: 0.13em;
                vertical-align: middle;
                filter: drop-shadow(0 1px 1px #6fb9f8b0);
            }

            .game-desc {
                font-size: 1rem;
                color: #3062a3;
                opacity: 0.93;
                margin-bottom: 1.25rem;
                font-weight: 500;
                text-shadow: 0 1px 0 #fff;
            }

            .statbar {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1.2rem;
                margin-bottom: 0.6rem;
                font-size: 1.1rem;
                color: #265790;
                font-weight: 700;
                background: #e8f3ff;
                padding: 0.5em 1.4em;
                border-radius: 14px;
                box-shadow: 0 1px 8px #b7dbfc28;
                width: fit-content;
                margin: 0 auto 1.2rem auto;
            }

            canvas {
                background: #fff;
                margin: 1rem auto 0.7rem auto;
                border-radius: 18px;
                box-shadow: 0 4px 28px #6dc3fb25;
                max-width: 97vw;
                width: 97vw;
                height: auto;
                max-height: 54vw;
                touch-action: none;
                border: 2.5px solid #86b6ec99;
                display: block;
            }

            #dpad {
                display: grid;
                grid-template-columns: repeat(3, 54px);
                grid-template-rows: repeat(3, 54px);
                gap: 10px;
                margin: 1.3rem auto 1.3rem auto;
                width: 174px;
                justify-content: center;
                align-items: center;
            }

            .arrowBtn {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                font-size: 2em;
                background: linear-gradient(135deg, #d6f1fe 60%, #e2ecfb 100%);
                border: 2.3px solid #87bbf6;
                color: #2383ea;
                font-weight: 700;
                box-shadow: 0 2px 9px #bfe5ff34;
                display: flex;
                align-items: center;
                justify-content: center;
                user-select: none;
                -webkit-user-select: none;
                transition:
                    background 0.12s,
                    box-shadow 0.12s;
                text-decoration: none;
                cursor: pointer;
            }

            .arrowBtn:active {
                background: linear-gradient(135deg, #aad6f7 60%, #a8d3f7 100%);
            }

            .arrowBtn:focus {
                outline: none;
            }

            .arrowBtn span {
                text-decoration: none;
            }

            .emptyBtn {
                opacity: 0;
                pointer-events: none;
            }

            .ui.btn-row {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 0.8rem;
                margin-bottom: 1.5rem;
            }

            .btn {
                margin: 0;
                display: inline-block;
                padding: 0.7em 2.1em;
                border: none;
                background: linear-gradient(90deg, #19aaff 0%, #55d6fa 100%);
                color: #fff;
                font-weight: bold;
                border-radius: 2.2em;
                font-size: 1.1rem;
                cursor: pointer;
                text-decoration: none;
                box-shadow: 0 3px 12px #2db6fa2a;
                letter-spacing: 0.5px;
                transition: background 0.13s;
            }

            .btn:active {
                background: linear-gradient(90deg, #0b7fc2 0%, #30b9ec 100%);
            }

            #gameover {
                color: #d11;
                font-size: 1.2em;
                margin: 1.7em 0 0.4em 0;
                display: none;
                font-weight: 700;
                text-shadow: 0 1px 0 #fff;
            }

            @media (max-width: 600px) {
                .game-header {
                    padding: 1.1rem 0 0.1rem 0;
                }
                .game-title {
                    font-size: 1.15rem;
                }
                .game-title-emoji {
                    font-size: 1.1em;
                }
                .game-desc {
                    font-size: 0.92rem;
                    margin-bottom: 0.9rem;
                }
                .statbar {
                    font-size: 0.98rem;
                    border-radius: 10px;
                    padding: 0.32em 0.7em;
                }
                canvas {
                    border-radius: 11px;
                }
                #dpad {
                    width: 117px;
                    grid-template-columns: repeat(3, 33px);
                    grid-template-rows: repeat(3, 33px);
                    gap: 5px;
                }
                .arrowBtn {
                    width: 33px;
                    height: 33px;
                    font-size: 1.12em;
                }
                .ui.btn-row {
                    gap: 0.38rem;
                    margin-bottom: 1.1rem;
                }
                .btn {
                    font-size: 0.97rem;
                    padding: 0.63em 1.35em;
                }
            }