:root {
    color-scheme: dark;
    --cyan: #62f6ff;
    --cyan-strong: #00eaff;
    --mint: #76ffd5;
    --violet: #cf69ff;
    --danger: #ff4b78;
    --panel: rgba(3, 10, 24, 0.92);
    --game-viewport-height: 100dvh;
}

html,
body {
    width: 100%;
    height: var(--game-viewport-height);
    min-height: 0;
    overflow: hidden;
}

body {
    align-items: center;
    align-items: safe center;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 119, 155, 0.17), transparent 42%),
        linear-gradient(135deg, #01030a 0%, #000 58%, #04000b 100%);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

#gameContainer {
    width: min(100vw, calc(var(--game-viewport-height) * 0.5625));
    height: min(var(--game-viewport-height), 177.78vw);
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    isolation: isolate;
    background: #020611;
    box-shadow:
        0 0 0 1px rgba(83, 241, 255, 0.32),
        0 0 42px rgba(0, 219, 255, 0.2),
        0 0 110px rgba(93, 34, 255, 0.1);
}

#gameCanvas {
    width: 100% !important;
    height: 100% !important;
    background: #020611;
}

#gameContainer::before,
#gameContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#gameContainer::before {
    z-index: 240;
    opacity: 0.18;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.045) 0,
        rgba(255, 255, 255, 0.045) 1px,
        transparent 1px,
        transparent 4px
    );
    mix-blend-mode: soft-light;
}

#gameContainer::after {
    z-index: 239;
    box-shadow:
        inset 0 0 55px rgba(0, 0, 0, 0.8),
        inset 0 0 9px rgba(83, 241, 255, 0.25);
}

#ui {
    top: calc(12px + env(safe-area-inset-top));
    left: 14px;
    right: 126px;
    z-index: 120;
    font-size: 19px;
    transition: opacity 180ms ease, transform 180ms ease;
}

.hud-line {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-width: 0;
}

.hud-stat {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.hud-stat small,
.meter-label {
    color: rgba(159, 224, 255, 0.72);
    font-family: 'DotGothic16', Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 0.16em;
    text-shadow: none;
}

.hud-stat span {
    display: block;
    line-height: 0.9;
    white-space: nowrap;
}

#healthBar,
#stageProgressBar,
#slamMeter {
    position: relative;
    width: min(220px, 62vw);
    height: 7px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid rgba(98, 246, 255, 0.66);
    border-radius: 99px;
    background: rgba(0, 28, 54, 0.72);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.65);
}

#healthFill,
#stageProgressFill,
#slamMeterFill {
    height: 100%;
    transform-origin: left;
}

#stageProgressBar {
    height: 3px;
    margin-top: 5px;
    border-color: rgba(132, 108, 255, 0.48);
}

#stageProgressFill {
    width: 0;
    background: linear-gradient(90deg, #8167ff, #ff5fd2);
    box-shadow: 0 0 8px #ad6fff;
    transition: width 180ms linear;
}

#slamMeter {
    display: none;
    height: 5px;
    border-color: rgba(255, 214, 75, 0.62);
}

#slamMeter.is-visible {
    display: block;
}

#slamMeterFill {
    width: 0;
    background: linear-gradient(90deg, #ff7b38, #fff35c);
    box-shadow: 0 0 9px #fff15a;
    transition: width 80ms linear;
}

#slamMeter.is-ready {
    border-color: #fff36a;
    box-shadow: 0 0 10px rgba(255, 237, 60, 0.52);
}

#bossHealthBar {
    top: calc(86px + env(safe-area-inset-top));
    left: 14px;
    right: 126px;
    height: 7px;
    z-index: 121;
}

.utility-btn {
    position: absolute;
    right: 12px;
    z-index: 320;
    min-width: 98px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(98, 246, 255, 0.75);
    border-radius: 8px;
    background: rgba(2, 14, 29, 0.84);
    color: var(--cyan);
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 6px rgba(98, 246, 255, 0.85);
    box-shadow: inset 0 0 12px rgba(0, 224, 255, 0.08);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.utility-btn:hover,
.utility-btn:focus-visible {
    border-color: #fff;
    background: rgba(13, 44, 61, 0.94);
    outline: none;
}

.utility-btn:active {
    transform: scale(0.96);
}

#pauseBtn {
    top: calc(12px + env(safe-area-inset-top));
}

#soundBtn {
    top: calc(60px + env(safe-area-inset-top));
}

#wireActionBtn {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 330;
    display: grid;
    width: 78px;
    height: 78px;
    place-content: center;
    gap: 2px;
    padding: 0;
    overflow: visible;
    border: 2px solid rgba(104, 250, 255, 0.9);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 30%, rgba(127, 255, 236, 0.3), transparent 34%),
        rgba(2, 19, 34, 0.88);
    color: #baffff;
    font-family: 'Tiny5', Arial, sans-serif;
    text-align: center;
    text-shadow: 0 0 8px rgba(94, 247, 255, 0.9);
    box-shadow:
        inset 0 0 17px rgba(0, 229, 255, 0.18),
        0 0 0 5px rgba(29, 227, 255, 0.07),
        0 0 22px rgba(0, 218, 255, 0.28);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    transition: opacity 160ms ease, transform 120ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#gameContainer.wire-control-left #wireActionBtn {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
}

#wireActionBtn::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed rgba(170, 255, 255, 0.44);
    border-radius: 50%;
    pointer-events: none;
    animation: wire-control-spin 7s linear infinite;
}

#wireActionBtn span,
#wireActionBtn small {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

#wireActionBtn span {
    font-size: 18px;
    letter-spacing: 0.09em;
    line-height: 1;
}

#wireActionBtn small {
    color: rgba(183, 234, 255, 0.78);
    font-family: 'DotGothic16', Arial, sans-serif;
    font-size: 7px;
    letter-spacing: 0.08em;
}

#wireActionBtn:hover,
#wireActionBtn:focus-visible {
    border-color: #fff;
    outline: none;
    box-shadow:
        inset 0 0 18px rgba(0, 229, 255, 0.25),
        0 0 0 5px rgba(29, 227, 255, 0.1),
        0 0 28px rgba(0, 230, 255, 0.43);
}

#wireActionBtn:active {
    transform: scale(0.93);
    background: rgba(8, 42, 57, 0.96);
}

#wireActionBtn.did-fire {
    animation: wire-control-fire 360ms ease-out;
}

#wireActionBtn.is-throw {
    border-color: rgba(215, 119, 255, 0.82);
    background:
        radial-gradient(circle at 38% 30%, rgba(236, 137, 255, 0.24), transparent 34%),
        rgba(27, 5, 37, 0.84);
    color: #f1c2ff;
    text-shadow: 0 0 8px rgba(222, 108, 255, 0.86);
    box-shadow:
        inset 0 0 17px rgba(213, 88, 255, 0.14),
        0 0 0 4px rgba(205, 91, 255, 0.055),
        0 0 18px rgba(204, 67, 255, 0.2);
}

#wireActionBtn.is-throw::before {
    border-color: rgba(239, 188, 255, 0.34);
}

#wireActionBtn.is-release {
    border-color: rgba(117, 194, 231, 0.68);
    background:
        radial-gradient(circle at 38% 30%, rgba(121, 207, 244, 0.16), transparent 34%),
        rgba(8, 24, 38, 0.86);
    color: #b9dceb;
    text-shadow: 0 0 7px rgba(94, 178, 218, 0.58);
    box-shadow:
        inset 0 0 15px rgba(79, 159, 201, 0.1),
        0 0 0 4px rgba(88, 177, 218, 0.04),
        0 0 14px rgba(68, 158, 202, 0.14);
}

#wireActionBtn.is-release::before {
    border-color: rgba(172, 220, 239, 0.26);
}

#wireActionBtn.is-cooldown {
    opacity: 0.58;
    cursor: wait;
    filter: saturate(0.55);
}

#wireActionBtn:disabled {
    opacity: 0;
    pointer-events: none;
}

@keyframes wire-control-spin {
    to { transform: rotate(360deg); }
}

@keyframes wire-control-fire {
    0% { box-shadow: inset 0 0 17px rgba(0, 229, 255, 0.18), 0 0 0 0 rgba(99, 255, 235, 0.7), 0 0 22px rgba(0, 218, 255, 0.28); }
    100% { box-shadow: inset 0 0 17px rgba(0, 229, 255, 0.08), 0 0 0 18px rgba(99, 255, 235, 0), 0 0 30px rgba(0, 218, 255, 0.08); }
}

body.menu-open #ui,
body.menu-open #bossHealthBar,
body.menu-open #pauseBtn,
body.menu-open #soundBtn,
body.menu-open #wireActionBtn,
body.menu-open #statusPrompt {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
}

#startScreen,
#pauseScreen {
    box-sizing: border-box;
    z-index: 300;
    width: 100%;
    height: 100%;
    padding:
        calc(18px + env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        calc(18px + env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
}

#startScreen {
    overflow: hidden auto;
    background:
        radial-gradient(circle at 50% 42%, rgba(26, 74, 118, 0.2), transparent 42%),
        linear-gradient(180deg, rgba(1, 5, 15, 0.62), rgba(0, 2, 10, 0.68));
}

.menu-panel {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 480px);
    min-height: min-content;
    flex-direction: column;
    align-items: center;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--mint);
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-shadow: 0 0 9px rgba(118, 255, 213, 0.75);
}

#startScreen h1 {
    margin: 0 0 16px;
    color: #9bf9ff;
    font-size: clamp(30px, min(8vw, 5.8vh), 48px);
    line-height: 0.9;
    letter-spacing: 0.045em;
    text-shadow:
        0 0 3px #fff,
        0 0 14px rgba(0, 235, 255, 0.9),
        0 0 34px rgba(0, 130, 255, 0.45);
}

.best-score {
    min-height: 18px;
    margin-bottom: 15px;
    color: rgba(191, 222, 255, 0.85);
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.09em;
}

.menu-actions {
    display: grid;
    width: min(100%, 300px);
    gap: 10px;
}

.control-side-setting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    color: rgba(174, 218, 242, 0.78);
    font-size: 9px;
    letter-spacing: 0.08em;
}

.control-side-setting legend {
    float: left;
    padding: 0;
}

.control-side-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    overflow: hidden;
    border: 1px solid rgba(105, 224, 255, 0.32);
    border-radius: 99px;
    background: rgba(2, 17, 31, 0.66);
}

.control-side-option {
    position: relative;
    cursor: pointer;
}

.control-side-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.control-side-option span {
    display: block;
    min-width: 48px;
    padding: 5px 10px;
    color: rgba(178, 222, 243, 0.7);
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.control-side-option input:checked + span {
    background: rgba(79, 232, 224, 0.2);
    color: #aaffed;
    box-shadow: inset 0 0 10px rgba(82, 255, 230, 0.12);
}

.control-side-option input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

#startScreen button,
#pauseScreen button,
#shareBtn {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 13px 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;
    font-size: 20px;
    letter-spacing: 0.04em;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

#startScreen button:hover,
#startScreen button:focus-visible,
#pauseScreen button:hover,
#pauseScreen button:focus-visible,
#shareBtn:hover,
#shareBtn:focus-visible {
    filter: brightness(1.14);
    outline: none;
    transform: translateY(-1px);
}

#startBtn,
#retryBtn {
    background: linear-gradient(135deg, #73ffd8, #31bfa9) !important;
    box-shadow: 0 0 18px rgba(74, 255, 210, 0.38), inset 0 0 9px rgba(255, 255, 255, 0.25) !important;
}

#howBtn {
    background: linear-gradient(135deg, #358ad2, #5568d7) !important;
    box-shadow: 0 0 16px rgba(66, 152, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.17) !important;
}

#instructions {
    margin-top: 17px;
    padding: 0 12px;
}

.game-instruction {
    margin: 3px 0;
    font-size: 12px;
    line-height: 1.45;
}

.quick-control {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(99, 242, 255, 0.18);
    border-radius: 99px;
    background: rgba(3, 20, 38, 0.56);
    color: rgba(184, 228, 255, 0.8);
    font-size: 10px;
    letter-spacing: 0.06em;
}

.pc-control-hint {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .pc-control-hint {
        display: block;
        margin: 7px 0 0;
        color: rgba(131, 205, 255, 0.72);
        font-size: 9px;
        line-height: 1.4;
        letter-spacing: 0.05em;
    }
}

#copyright {
    bottom: calc(9px + env(safe-area-inset-bottom));
    z-index: 330;
    font-size: 12px;
}

#resultPanel {
    display: none;
    width: min(100%, 310px);
}

#resultPanel.is-visible {
    display: block;
}

.result-score {
    margin: 4px 0 18px;
    color: #ff7b9a;
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.35;
    text-shadow: 0 0 12px rgba(255, 61, 111, 0.55);
}

.new-best {
    min-height: 18px;
    margin: -8px 0 14px;
    color: #fff06b;
    font-size: 12px;
    text-shadow: 0 0 9px rgba(255, 229, 69, 0.8);
}

#shareBtn {
    display: block;
    margin-top: 10px;
    border-radius: 9px;
    background: linear-gradient(135deg, #293849, #10171f);
    color: #fff;
    text-decoration: none;
}

#pauseScreen {
    z-index: 360;
    background: rgba(0, 4, 15, 0.88);
    backdrop-filter: blur(7px);
}

#pauseScreen h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 8vw, 44px);
}

.pause-subtitle {
    margin: 0 0 24px;
    color: rgba(184, 228, 255, 0.75);
    font-size: 12px;
}

.pause-actions {
    display: grid;
    width: min(100%, 280px);
    gap: 10px;
}

#comboDisplay {
    top: 17%;
    padding: 4px 12px;
    border: 1px solid rgba(255, 96, 239, 0.4);
    border-radius: 99px;
    background: rgba(24, 0, 39, 0.52);
    font-size: clamp(20px, 5vw, 28px);
    letter-spacing: 0.05em;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}

#bossAlert {
    max-width: 90%;
    color: #ff4d72;
    font-size: clamp(35px, 12vw, 62px);
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
}

#missionBanner {
    position: absolute;
    top: calc(118px + env(safe-area-inset-top));
    right: 18px;
    left: 18px;
    z-index: 170;
    display: grid;
    justify-items: center;
    gap: 3px;
    opacity: 0;
    color: #b8fbff;
    font-family: 'Tiny5', Arial, sans-serif;
    text-align: center;
    text-shadow: 0 0 10px rgba(54, 232, 255, 0.85);
    pointer-events: none;
    transform: translateY(-9px) scale(0.97);
    transition: opacity 160ms ease, transform 180ms ease;
}

#missionBanner::before {
    content: "";
    position: absolute;
    inset: -9px max(0px, calc(50% - 170px));
    z-index: -1;
    border: 1px solid rgba(91, 237, 255, 0.24);
    border-radius: 8px;
    background: linear-gradient(90deg, transparent, rgba(2, 16, 34, 0.88) 18%, rgba(2, 16, 34, 0.88) 82%, transparent);
}

#missionBanner strong {
    color: #fff;
    font-size: clamp(18px, 5.4vw, 27px);
    font-weight: normal;
    letter-spacing: 0.09em;
}

#missionBanner span {
    color: rgba(181, 230, 255, 0.8);
    font-family: 'DotGothic16', Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.07em;
}

#missionBanner.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#missionBanner.is-overdrive strong {
    color: #fff16d;
    text-shadow: 0 0 14px rgba(255, 103, 63, 0.92);
}

#statusPrompt {
    position: absolute;
    right: 108px;
    bottom: calc(22px + env(safe-area-inset-bottom));
    left: 18px;
    z-index: 130;
    color: rgba(168, 225, 255, 0.78);
    font-family: 'Tiny5', Arial, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-align: center;
    text-shadow: 0 0 7px rgba(0, 221, 255, 0.72);
    pointer-events: none;
    transition: color 120ms ease, opacity 180ms ease;
}

#statusPrompt.is-ready {
    color: #fff172;
    text-shadow: 0 0 10px rgba(255, 229, 63, 0.88);
}

#gameContainer.wire-control-left #statusPrompt {
    right: 18px;
    left: 108px;
}

#screenFlash {
    position: absolute;
    inset: 0;
    z-index: 230;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

@media (max-width: 520px) {
    #gameContainer {
        border-radius: 0;
    }

    #ui {
        right: 104px;
    }

    .utility-btn {
        right: 9px;
        min-width: 86px;
        min-height: 40px;
        font-size: 13px;
    }

    #bossHealthBar {
        right: 104px;
    }

    #wireActionBtn {
        right: max(11px, env(safe-area-inset-right));
        width: 72px;
        height: 72px;
    }

    #gameContainer.wire-control-left #wireActionBtn {
        right: auto;
        left: max(11px, env(safe-area-inset-left));
    }

    #statusPrompt {
        right: 94px;
        left: 12px;
    }

    #gameContainer.wire-control-left #statusPrompt {
        right: 12px;
        left: 94px;
    }
}

@media (max-height: 650px) {
    #startScreen {
        justify-content: flex-start;
    }

    .menu-panel {
        margin: auto 0;
    }

    .eyebrow {
        margin-bottom: 6px;
    }

    #startScreen h1 {
        margin-bottom: 10px;
    }

    .best-score {
        margin-bottom: 10px;
    }

    .menu-actions {
        gap: 7px;
    }

    .control-side-setting {
        margin-top: 8px;
    }

    #startScreen button,
    #pauseScreen button,
    #shareBtn {
        min-height: 44px;
        padding: 10px 18px;
    }

    #instructions {
        margin-top: 10px;
    }

    .quick-control {
        margin-top: 7px;
    }

    .pc-control-hint {
        margin-top: 4px;
    }

    #wireActionBtn {
        width: 66px;
        height: 66px;
    }

    #wireActionBtn span {
        font-size: 16px;
    }

    #statusPrompt {
        right: 87px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        font-size: 10px;
    }

    #gameContainer.wire-control-left #statusPrompt {
        right: 12px;
        left: 87px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #gameContainer::before {
        opacity: 0.08;
    }
}