:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    --text: #e8f8ff;
    --panel: #10283bdf;
    --border: #699ab3;
    --button: #15364d;
    --button-hover: #235a76;
    --field: #02060c;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; height: 100dvh; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { color: var(--text); background: var(--field); }
button, select, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, #dpad:focus-visible {
    outline: 3px solid #9be9ff; outline-offset: 2px;
}
button:disabled { cursor: default; }
body[data-theme="day"] {
    color-scheme: light;
    --text: #143750;
    --panel: #e6f3f9ed;
    --border: #739ab0;
    --button: #dceef7;
    --button-hover: #c3e1f0;
    --field: #e8f3ff;
}

/* The stage rotates inside portrait webviews that cannot lock device orientation. */
#landscape-stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; background: var(--field); }
#game-shell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#gameCanvas { display: block; flex: none; max-width: none; max-height: none; border: 0; background: var(--field); touch-action: none; }
@media (pointer: coarse) and (orientation: portrait) {
    #landscape-stage {
        inset: auto; top: 0; left: 100vw;
        width: 100dvh; height: 100vw;
        transform-origin: 0 0; transform: rotate(90deg);
    }
}

/* Intro is a single clear call to action. */
#instructions-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 10px; background: #030b14ed; }
#instructions-content {
    width: min(500px, 100%); max-height: 100%; overflow: auto;
    padding: clamp(16px, 3.4vw, 28px); border: 1px solid #719fb6;
    border-radius: 20px; background: linear-gradient(150deg, #17384f, #0d2032);
    box-shadow: 0 18px 55px #000a; text-align: center;
}
#instructions-content h2 { margin: 0 0 10px; color: #ffbd77; font-size: clamp(22px, 4.4vw, 34px); letter-spacing: .08em; }
#instructions-content p { margin: 0 0 13px; color: #e0f3fa; line-height: 1.5; font-size: clamp(12px, 2.3vw, 16px); }
#instructions-content h3 { margin: 13px 0 8px; font-size: 15px; }
#instructions-content ul { display: grid; gap: 5px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; }
#instructions-content code { padding: 2px 5px; border-radius: 4px; background: #2c5870; color: #fff; }
#startButton {
    min-width: 146px; min-height: 44px; padding: 8px 22px; border: 1px solid #ffe4ad; border-radius: 11px;
    background: linear-gradient(145deg, #ffd07d, #ed8f4f); color: #3d220e; font-size: 17px; font-weight: 800;
    box-shadow: 0 6px 20px #ffab5350; cursor: pointer;
}
#startButton:hover { filter: brightness(1.07); }
#startButton:active { transform: scale(.97); }
.mobile-help { display: none; }
@media (pointer: coarse), (max-height: 460px) {
    #instructions-content { width: min(460px, 100%); padding: 15px 20px; }
    #instructions-content h3, #instructions-content ul { display: none; }
    #instructions-content p { margin-bottom: 10px; font-size: 12px; }
    .mobile-help { display: block; }
}
body.intro #game-brand, body.intro #quickActions, body.intro #settingsPanel,
body.intro #cornerActions, body.intro #battleHud, body.intro #shopBar,
body.intro #touch-controls, body.intro #uiToast, body.intro #pauseOverlay { visibility: hidden; }

/* Top row and compact battle data. */
#game-brand {
    position: absolute; z-index: 11; top: max(8px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
    color: var(--text); font-size: clamp(14px, 2.3vw, 18px); font-weight: 800; letter-spacing: .04em;
    text-shadow: 0 1px 6px #0009; pointer-events: none; white-space: nowrap;
}
body[data-theme="day"] #game-brand { text-shadow: none; }
#quickActions {
    position: absolute; z-index: 12; top: max(7px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
#quickActions button, #cornerActions button, #shopBar button, .settings-heading button {
    min-height: 38px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--button); color: var(--text); font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 9px #0003; cursor: pointer;
}
#quickActions button { min-width: 35px; padding: 0 8px; }
#quickActions button:not(:disabled):hover, #cornerActions button:not(:disabled):hover,
#shopBar button:not(:disabled):hover { background: var(--button-hover); }
#quickActions button:not(:disabled):active, #cornerActions button:not(:disabled):active,
#shopBar button:not(:disabled):active { transform: scale(.95); }
#quickActions button:disabled { opacity: .48; }
#zoomValue { min-width: 36px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text); }
#battleHud {
    position: absolute; z-index: 4; top: 54px; left: 12px; right: 12px;
    display: flex; align-items: center; gap: 5px; pointer-events: none;
    color: var(--text); font-size: clamp(10px, 1.9dvh, 13px); font-weight: 700;
}
#battleHud > span:not(#energyTrack) {
    padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); white-space: nowrap;
}
#energyTrack { display: block; width: clamp(44px, 10vw, 112px); height: 12px; border: 1px solid var(--border); border-radius: 8px; background: #102d40; overflow: hidden; }
#energyFill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #1eafd0, #b8f8ff); }

/* Purchase and special ability stay between the touch controls. */
#shopBar {
    position: absolute; z-index: 8; left: 50%; bottom: max(9px, env(safe-area-inset-bottom));
    display: flex; gap: 6px; transform: translateX(-50%);
}
#shopBar button { min-width: 100px; padding: 0 10px; white-space: nowrap; font-size: clamp(11px, 1.9dvh, 13px); }
#shopBar button:not(:disabled) { box-shadow: 0 0 12px #40c8ec55; }
#shopBar button:disabled { opacity: .62; }
#shopBar #burstButton:not(:disabled) { border-color: #8feaff; background: #166687; color: #fff; }
#cornerActions {
    position: absolute; z-index: 8; right: max(9px, env(safe-area-inset-right)); bottom: max(9px, env(safe-area-inset-bottom));
    display: flex; align-items: end; gap: 5px;
}
#cornerActions #pauseButton, #cornerActions #restartButton { width: 36px; min-width: 36px; height: 38px; padding: 0; font-size: 21px; }
#cornerActions .fire-button,
body[data-theme="day"] #cornerActions .fire-button {
    width: clamp(68px, 16dvh, 78px); height: clamp(68px, 16dvh, 78px);
    padding: 0; border: 2px solid #ffe09a; border-radius: 17px;
    background: linear-gradient(145deg, #ffd37f, #ef8c4b); color: #46250e;
    font-size: 24px; box-shadow: 0 0 18px #ffab5275; touch-action: none; user-select: none;
}
#cornerActions .fire-button span { display: block; font-size: 12px; letter-spacing: .07em; }
#cornerActions .fire-button.is-pressed { filter: brightness(1.13); transform: scale(.94); }
#pauseOverlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: #03101cb8; color: white; font-size: clamp(28px, 7vw, 55px); font-weight: 800; pointer-events: none; }
#pauseOverlay[hidden] { display: none; }
#uiToast {
    position: absolute; z-index: 15; top: 96px; left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(85%, 460px); padding: 8px 13px;
    border: 1px solid #76b7cf; border-radius: 10px; background: #102d42ef;
    color: #fff; text-align: center; font-size: 12px; line-height: 1.3;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
#uiToast.visible { opacity: 1; }

/* The entire large circle accepts pointer input. The five inner pieces move together. */
#touch-controls { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#dpad {
    position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom));
    width: clamp(92px, 16dvh, 108px); height: clamp(92px, 16dvh, 108px);
    border: 2px solid #9bc9d9; border-radius: 50%;
    background: radial-gradient(circle at 35% 26%, #527484dc, #162e43e9 73%);
    box-shadow: inset 0 0 15px #e1f8ff36, 0 5px 19px #0009;
    pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
}
#dpad.is-active { border-color: #a6efff; box-shadow: inset 0 0 16px #b4f5ff50, 0 0 17px #6bdafa75; }
#dpad .dpad-stick {
    position: absolute; top: 17%; left: 17%; width: 66%; height: 66%;
    pointer-events: none; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
    transition: transform 55ms ease-out;
}
#dpad .dpad-key {
    position: absolute; display: grid; place-items: center;
    width: 29%; height: 29%; border-radius: 6px;
    background: #cdeaf2; color: #187b9f;
    font-size: clamp(15px, 3dvh, 20px); font-weight: 900; line-height: 1;
    box-shadow: 0 1px 3px #0018246a;
}
#dpad .up { top: 0; left: 35.5%; }
#dpad .down { bottom: 0; left: 35.5%; }
#dpad .left { top: 35.5%; left: 0; }
#dpad .right { top: 35.5%; right: 0; }
#dpad .dpad-core {
    position: absolute; top: 35.5%; left: 35.5%; width: 29%; height: 29%;
    border: 2px solid #b9f5ff; border-radius: 50%; background: #268cad;
    box-shadow: 0 0 8px #6ae7ff8c;
}
body[data-theme="day"] #dpad { border-color: #407f9f; background: radial-gradient(circle at 35% 26%, #e6f7fa, #83aabd); }
body[data-theme="day"] #dpad .dpad-key { background: #f3fcff; }
@media (pointer: coarse) { #touch-controls { display: block; } }

/* Settings stay within the logical landscape stage, including rotated phones. */
#settingsPanel {
    position: absolute; z-index: 18; top: 52px; right: max(8px, env(safe-area-inset-right));
    width: min(300px, calc(100% - 16px)); max-height: calc(100% - 60px); overflow: auto;
    padding: 12px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--panel); color: var(--text); box-shadow: 0 12px 30px #0009;
    font-size: 14px;
}
#settingsPanel[hidden] { display: none; }
.settings-heading, .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-heading { margin-bottom: 8px; font-size: 17px; }
.settings-heading button { width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 20px; }
.setting-row { min-height: 42px; border-top: 1px solid #7aaec347; }
#themeSelect { min-height: 30px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--button); color: var(--text); }
#soundToggle { width: 19px; height: 19px; accent-color: #30badd; }
#volumeSlider { width: 115px; accent-color: #30badd; }

@media (max-width: 620px) {
    #game-brand { font-size: 13px; }
    #quickActions { gap: 3px; }
    #quickActions button { min-width: 30px; min-height: 34px; padding: 0 5px; font-size: 11px; }
    #zoomValue { min-width: 30px; font-size: 11px; }
    #battleHud { top: 48px; gap: 3px; font-size: 10px; }
    #battleHud > span:not(#energyTrack) { padding: 4px 5px; }
    #energyTrack { min-width: 35px; width: 8vw; }
    #shopBar { bottom: 90px; }
    #shopBar button { min-height: 34px; min-width: 92px; padding: 0 7px; font-size: 11px; }
    #uiToast { top: 81px; }
}
@media (max-height: 360px) {
    #battleHud { top: 47px; }
    #cornerActions .fire-button { width: 66px; height: 66px; }
    #dpad { width: 90px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    #dpad .dpad-stick, #uiToast { transition: none; }
}

#cornerActions .fire-button:not(:disabled):hover {
    background: linear-gradient(145deg, #ffdc94, #f59956);
    filter: brightness(1.05);
}