:root {
    color-scheme: dark;
    --blue: #0033a0;
    --blue-2: #1559cf;
    --night: #03102c;
    --night-2: #08235b;
    --white: #fbfcff;
    --ice: #eaf1ff;
    --ink: #061b4d;
    --danger: #b92e3b;
    --panel: rgba(240, 246, 255, .965);
    --edge: rgba(111, 157, 232, .42);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(12, 56, 145, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 56, 145, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 110%, rgba(31, 90, 205, .52), transparent 40%),
        linear-gradient(145deg, #010612, var(--night) 57%, var(--night-2));
    background-size: 34px 34px, 34px 34px, auto, auto;
    color: var(--white);
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(86, 139, 239, .78); outline-offset: 3px; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#app {
    width: 100%;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

#machine {
    position: relative;
    width: min(95vw, 90svh, 680px);
    min-width: 290px;
    aspect-ratio: 1 / 1.075;
    display: grid;
    grid-template-rows: 62px minmax(0, 1fr) 48px;
    overflow: hidden;
    border: 2px solid rgba(137, 176, 239, .46);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(246,249,255,.985), rgba(222,233,252,.97));
    color: var(--ink);
    box-shadow:
        0 34px 100px rgba(0, 5, 28, .62),
        0 0 0 5px rgba(0, 26, 93, .42),
        inset 0 0 0 1px rgba(255,255,255,.92),
        inset 0 -28px 70px rgba(0,51,160,.08);
    isolation: isolate;
}
#machine::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 60;
    border: 1px solid rgba(0,51,160,.10);
    border-radius: 8px;
    pointer-events: none;
}

#hud {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 3px;
    pointer-events: none;
    border-bottom: 1px solid rgba(0,51,160,.09);
}
.hud-score, .hud-best {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 8px;
}
.hud-score { justify-self: start; }
.hud-best { justify-self: end; text-align: right; }
.hud-code {
    grid-column: 1 / -1;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .17em;
    color: var(--blue);
    opacity: .65;
}
#score, #best-score {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.07em;
    line-height: .9;
    text-shadow: 0 0 9px rgba(0,51,160,.09);
}
#score { font-size: clamp(22px, 4.8vw, 34px); }
#best-score { font-size: clamp(16px, 3.25vw, 23px); opacity: .62; }
#multiplier { font-size: 12px; font-weight: 900; color: var(--blue); opacity: .42; }
#timer { position: relative; width: 46px; height: 46px; display: grid; place-items: center; justify-self: center; }
#timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track, .timer-progress { fill: none; stroke-width: 2.6; }
.timer-track { stroke: rgba(0,51,160,.11); }
.timer-progress { stroke: var(--blue); stroke-linecap: square; stroke-dasharray: 113.1; stroke-dashoffset: 0; transition: stroke .15s linear; }
#level { font-size: 9px; font-weight: 900; opacity: .58; }

#stage-wrap {
    position: relative;
    min-height: 0;
    margin: 8px 12px 4px;
    overflow: hidden;
    border: 2px solid rgba(0,51,160,.20);
    border-radius: 7px;
    background: rgba(236,244,255,.6);
    box-shadow: inset 0 0 35px rgba(0,51,160,.08), 0 1px 0 rgba(255,255,255,.9);
}
#stage-wrap::after {
    content: "";
    position: absolute;
    z-index: 45;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    background: repeating-linear-gradient(to bottom, rgba(0,20,70,.18) 0, rgba(0,20,70,.18) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: multiply;
}
#game {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#app[data-state="playing"] #game { cursor: none; }

#miss-meter {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    pointer-events: none;
}
#miss-meter i {
    width: 19px;
    height: 3px;
    background: var(--blue);
    opacity: .78;
    transition: opacity .22s, transform .22s, background .22s;
}
#miss-meter i.lost { opacity: .13; transform: scaleX(.48); background: var(--danger); }

#status-tags { position: absolute; z-index: 8; right: 12px; bottom: 9px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#status-tags span { display: none; color: var(--blue); }
#status-tags span.visible { display: inline-grid; }
#double-tag { place-items: center; min-width: 27px; height: 21px; border: 1px solid rgba(0,51,160,.25); background: rgba(255,255,255,.68); font-size: 10px; font-weight: 900; }
.shield-icon { width: 21px; height: 21px; border: 2px solid var(--blue); border-top-color: transparent; border-radius: 50%; transform: rotate(18deg); opacity: .76; }

#moment {
    position: absolute;
    z-index: 55;
    left: 50%;
    top: 51%;
    width: min(86%, 430px);
    transform: translate(-50%, -50%) scale(.96);
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 4px;
    background: rgba(2, 18, 58, .88);
    color: white;
    text-align: center;
    font: 850 clamp(13px, 3vw, 18px)/1.2 ui-monospace, monospace;
    letter-spacing: .12em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
#moment.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#screens { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; pointer-events: none; }
.screen {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    align-content: center;
    gap: 13px;
    padding: 30px clamp(22px, 7vw, 58px);
    text-align: center;
    background: linear-gradient(180deg, rgba(241,247,255,.94), rgba(224,235,253,.91));
    pointer-events: auto;
}
.screen.active { display: grid; animation: screen-in .2s steps(3, end) both; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
.screen h1, .screen h2, .screen p { margin: 0; }
.screen h1 { font-size: clamp(18px, 4.1vw, 28px); letter-spacing: .20em; padding-left: .20em; }
.micro-title { font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .23em; padding-left: .23em; color: var(--blue); opacity: .72; }

#attract-screen {
    background: radial-gradient(circle at 50% 46%, rgba(248,251,255,.82), rgba(226,237,255,.67) 68%, rgba(211,226,250,.72));
    overflow: hidden;
    cursor: pointer;
}
#attract-core, #attract-ranking {
    position: relative;
    z-index: 3;
    width: min(100%, 460px);
    display: grid;
    justify-items: center;
    gap: 17px;
    transition: opacity .22s steps(3, end), transform .22s steps(3, end);
}
#attract-ranking { position: absolute; width: min(82%, 390px); opacity: 0; transform: translateY(8px); pointer-events: none; }
#attract-screen.ranking-mode #attract-core { opacity: 0; transform: translateY(-8px); }
#attract-screen.ranking-mode #attract-ranking { opacity: 1; transform: translateY(0); }
.mini-v { position: relative; width: 78px; height: 60px; margin-bottom: 1px; filter: drop-shadow(0 0 8px rgba(0,51,160,.12)); }
.mini-v i, .mini-v b { position: absolute; top: 1px; width: 8px; height: 65px; background: var(--blue); transform-origin: top; }
.mini-v i { left: 20px; transform: rotate(-13deg); }
.mini-v b { right: 20px; transform: rotate(13deg); }

.start-control {
    min-width: 152px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid var(--blue);
    border-radius: 2px;
    padding: 0 22px;
    background: var(--blue);
    color: white;
    box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 22px rgba(0,51,160,.16);
    cursor: pointer;
    letter-spacing: .18em;
    transition: transform .08s linear, box-shadow .15s linear;
    animation: start-pulse 1.7s steps(2, end) infinite;
}
.start-control span { font-size: 15px; line-height: 1; transform: translateX(-1px); }
.start-control b { font-size: 12px; line-height: 1; padding-left: .18em; }
.start-control:active { transform: translateY(1px); }
@keyframes start-pulse { 50% { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 31px rgba(0,51,160,.28); } }

#visual-guide {
    width: min(100%, 410px);
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 15px;
    border-top: 1px solid rgba(0,51,160,.13);
    border-bottom: 1px solid rgba(0,51,160,.13);
    background: rgba(248,251,255,.64);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.46);
}
.guide-controls { display: flex; align-items: center; gap: 7px; min-width: 76px; }
.guide-or { color: var(--blue); opacity: .34; font-size: 10px; font-weight: 900; }
.mouse-cue {
    position: relative;
    width: 20px;
    height: 29px;
    border: 2px solid var(--blue);
    border-radius: 10px 10px 9px 9px;
    opacity: .78;
}
.mouse-cue::before { content: ""; position: absolute; left: 50%; top: -2px; width: 2px; height: 10px; background: var(--blue); transform: translateX(-50%); }
.mouse-cue::after { content: ""; position: absolute; left: -7px; top: -7px; width: 30px; height: 30px; border: 1px solid rgba(0,51,160,.34); border-radius: 50%; animation: click-ring 1.35s steps(4, end) infinite; }
.mouse-cue i { position: absolute; left: 50%; top: 4px; width: 3px; height: 5px; border: 1px solid var(--blue); border-radius: 2px; transform: translateX(-50%); }
@keyframes click-ring { 0% { transform: scale(.45); opacity: .8; } 100% { transform: scale(1.15); opacity: 0; } }
.key-cluster { width: 34px; display: grid; grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(2, 10px); gap: 2px; }
.key-cluster i { display: grid; place-items: center; border: 1px solid rgba(0,51,160,.25); font-style: normal; font-size: 7px; font-weight: 900; }
.key-cluster i:nth-child(1) { grid-column: 2; }
.key-cluster i:nth-child(2) { grid-column: 1; grid-row: 2; }
.key-cluster i:nth-child(3) { grid-column: 2; grid-row: 2; }
.key-cluster i:nth-child(4) { grid-column: 3; grid-row: 2; }
.touch-cue { display: none; position: relative; width: 38px; height: 38px; flex: 0 0 38px; }
.touch-cue i { position: absolute; left: 15px; top: 7px; width: 9px; height: 22px; border: 2px solid var(--blue); border-radius: 8px 8px 5px 5px; }
.touch-cue b { position: absolute; left: 5px; top: 0; width: 28px; height: 28px; border: 1px solid rgba(0,51,160,.30); border-radius: 50%; animation: touch-ring 1.35s steps(4, end) infinite; }
.guide-arrow { font-size: 18px; font-weight: 900; color: var(--blue); animation: nudge 1.2s steps(4, end) infinite; }
.guide-ball { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0,51,160,.08); animation: ball-guide 1.5s steps(5, end) infinite; }
.guide-target { width: 24px; height: 24px; flex: 0 0 24px; border: 3px solid var(--blue); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(255,255,255,.72); animation: target-guide 1.5s steps(3, end) infinite; }
.guide-score { min-width: 38px; color: var(--blue); font-size: 11px; letter-spacing: -.03em; opacity: .72; animation: score-guide 1.5s steps(2, end) infinite; }
@keyframes nudge { 50% { transform: translateX(3px); } }
@keyframes touch-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes ball-guide { 0%, 20% { transform: translateX(-3px); } 65%, 100% { transform: translateX(3px); } }
@keyframes target-guide { 0%, 58% { transform: scale(1); } 70% { transform: scale(.72); opacity: .25; } 82%, 100% { transform: scale(1); opacity: 1; } }
@keyframes score-guide { 0%, 58% { opacity: .15; transform: translateY(2px); } 70%, 92% { opacity: .95; transform: translateY(0); } 100% { opacity: .15; } }

.symbol-screen { gap: 22px; }
.pause-mark { font-size: clamp(45px, 11vw, 74px); line-height: 1; font-weight: 900; color: var(--blue); letter-spacing: -.17em; padding-right: .17em; }
.symbol-actions { display: flex; justify-content: center; gap: 10px; }
.symbol-button {
    width: 50px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,51,160,.28);
    border-radius: 3px;
    background: rgba(255,255,255,.45);
    color: var(--blue);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.primary-symbol { border-color: var(--blue); background: var(--blue); color: white; box-shadow: 0 0 18px rgba(0,51,160,.15); }
.symbol-button:active { transform: translateY(1px); }

.final-score { font-size: clamp(40px, 10vw, 68px) !important; letter-spacing: -.08em !important; color: var(--blue); font-variant-numeric: tabular-nums; }
.name-entry { position: relative; width: min(100%, 360px); height: 57px; }
#name-slots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; align-items: end; }
#name-slots span { height: 48px; display: grid; place-items: center; border-bottom: 3px solid rgba(0,51,160,.48); color: var(--ink); font-size: clamp(20px, 5.6vw, 36px); font-weight: 900; text-transform: uppercase; }
#name-slots span.filled { border-bottom-color: var(--blue); }
#player-name { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; opacity: .01; text-transform: uppercase; cursor: text; }
.confirm-button { width: 58px; }
.confirm-button.busy { animation: busy .7s steps(4, end) infinite; }
@keyframes busy { 50% { opacity: .35; } }

#rank-badge { min-height: 22px; color: var(--blue); font-size: 18px; font-weight: 900; letter-spacing: .08em; opacity: 0; }
#rank-badge.visible { opacity: 1; animation: rank-pop .5s steps(4, end) 2 alternate; }
@keyframes rank-pop { to { transform: scale(1.08); } }
#leaderboard, #attract-leaderboard { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; }
#leaderboard { max-width: 390px; gap: 3px; }
#attract-leaderboard { gap: 1px; }
#leaderboard li, #attract-leaderboard li {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 27px;
    padding: 5px 7px;
    border-left: 2px solid rgba(0,51,160,.10);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}
#attract-leaderboard li { min-height: 22px; padding: 3px 6px; font-size: 9px; }
.score-bar { position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: var(--score-ratio); background: linear-gradient(90deg, rgba(0,51,160,.12), rgba(0,51,160,.025)); }
.rank, .player, .points { position: relative; z-index: 1; }
.rank { opacity: .48; text-align: right; }
.player { text-align: left; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points { color: var(--blue); font-variant-numeric: tabular-nums; }
.placeholder { opacity: .26; }
#leaderboard li.fresh { border-left-color: var(--blue); animation: fresh-row .55s steps(2, end) 4 alternate; }
@keyframes fresh-row { to { background: rgba(0,51,160,.14); } }
.leaderboard-actions { margin-top: 3px; }

#machine-footer {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 3px 14px 7px;
    border-top: 1px solid rgba(0,51,160,.08);
}
.footer-v { position: relative; justify-self: center; width: 25px; height: 18px; opacity: .34; }
.footer-v i, .footer-v b { position: absolute; top: 1px; width: 3px; height: 20px; background: var(--blue); transform-origin: top; }
.footer-v i { left: 5px; transform: rotate(-18deg); }
.footer-v b { right: 5px; transform: rotate(18deg); }
.footer-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.icon-button {
    position: relative;
    width: 31px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,51,160,.16);
    border-radius: 3px;
    background: rgba(255,255,255,.34);
    color: var(--blue);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.pause-button:not(.active) { opacity: .28; }
.music-button { width: 37px; font-size: 10px; }
.sound-button { display: flex; align-items: center; justify-content: center; gap: 2px; width: 35px; }
.speaker { width: 7px; height: 8px; border: 2px solid var(--blue); border-right: 0; position: relative; }
.speaker::after { content: ""; position: absolute; left: 4px; top: -4px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 7px solid var(--blue); }
.sound-wave { background: transparent; border-right: 2px solid var(--blue); border-radius: 0 50% 50% 0; opacity: .72; }
.sound-wave.one { width: 5px; height: 9px; margin-left: 6px; }
.sound-wave.two { width: 6px; height: 13px; margin-left: -3px; }
.sound-button[data-mode="low"] .sound-wave.two { opacity: .12; }
.sound-button[data-mode="off"] .sound-wave { opacity: .12; }
.sound-button[data-mode="off"]::after { content: ""; position: absolute; width: 20px; height: 2px; background: var(--danger); transform: rotate(-45deg); }

#app[data-state="playing"] .screen, #app[data-state="game_over"] .screen { display: none; }
#app[data-state="playing"] #hud { opacity: 1; }
#app:not([data-state="playing"]) #hud { opacity: .72; }

@media (pointer: coarse) {
    .desktop-cue { display: none; }
    .touch-cue { display: block; }
    #app[data-state="playing"] #game { cursor: default; }
}
#app[data-input="touch"] .desktop-cue { display: none; }
#app[data-input="touch"] .touch-cue { display: block; }

@media (max-height: 660px), (max-width: 430px) {
    #machine { width: min(97vw, 97svh, 610px); grid-template-rows: 54px minmax(0,1fr) 41px; border-radius: 9px; }
    #hud { padding: 7px 13px 1px; }
    #stage-wrap { margin: 5px 7px 2px; }
    #machine-footer { padding: 1px 9px 4px; }
    .screen { padding: 20px 17px; gap: 9px; }
    #visual-guide { width: min(100%, 360px); min-height: 60px; gap: 6px; padding: 9px 10px; }
    .start-control { min-width: 136px; height: 41px; padding: 0 17px; }
    .guide-score { min-width: 32px; font-size: 10px; }
    #leaderboard-screen { padding: 7px 12px 6px; gap: 4px; }
    #leaderboard-screen #leaderboard { gap: 0; }
    #leaderboard-screen #leaderboard li { min-height: 18px; padding: 2px 5px; font-size: 9px; }
    #leaderboard-screen .symbol-button { width: 44px; height: 31px; font-size: 15px; }
    #rank-badge { min-height: 14px; font-size: 13px; }
    #rank-badge:not(.visible) { display: none; }
}

@media (orientation: landscape) and (max-height: 540px) {
    #app { padding: 5px; }
    #machine { width: min(94vw, 98svh, 590px); aspect-ratio: 1.14 / 1; grid-template-rows: 46px minmax(0,1fr) 34px; }
    .screen { padding: 10px 28px; gap: 6px; }
    .mini-v { display: none; }
    #visual-guide { width: min(100%, 360px); min-height: 53px; padding: 7px 10px; gap: 6px; }
    .start-control { height: 38px; }
    #leaderboard { gap: 0; }
    #leaderboard li { min-height: 19px; padding: 2px 5px; font-size: 9px; }
    .symbol-button { height: 35px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    #stage-wrap::after { opacity: .045; }
}

/* 3.2: arcade cabinet, resilient viewport sizing, touch zoom and compact scoreboards */
html, body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}
body {
    min-height: 100%;
    display: block;
    touch-action: pan-x pan-y pinch-zoom;
    background:
        linear-gradient(rgba(18, 67, 160, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 67, 160, .065) 1px, transparent 1px),
        radial-gradient(circle at 50% 118%, rgba(35, 95, 212, .55), transparent 43%),
        radial-gradient(circle at 50% 18%, rgba(0, 51, 160, .10), transparent 34%),
        linear-gradient(155deg, #01040d, #03102c 58%, #08245f);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

#app {
    position: fixed;
    left: var(--rp-vx, 0px);
    top: var(--rp-vy, 0px);
    width: var(--rp-vw, 100vw);
    height: var(--rp-vh, 100svh);
    min-height: 0;
    padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    overflow: hidden;
}

#machine {
    width: var(--rp-machine-size, min(95vw, 680px));
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 1 / 1.075;
    grid-template-rows: clamp(42px, 9vw, 62px) minmax(0, 1fr) clamp(34px, 7vw, 48px);
    border: 3px solid rgba(247, 250, 255, .96);
    border-radius: 7px;
    background: linear-gradient(180deg, #f6f9ff 0%, #e8f0fd 64%, #dbe8fb 100%);
    box-shadow:
        0 24px 70px rgba(0, 4, 24, .70),
        0 0 0 3px #0033a0,
        0 0 0 6px rgba(218, 232, 255, .68),
        0 0 32px rgba(12, 74, 190, .30),
        inset 0 0 0 1px rgba(0, 51, 160, .16),
        inset 0 -18px 38px rgba(0, 51, 160, .07);
}
#machine::before {
    inset: 5px;
    border: 1px solid rgba(0, 51, 160, .19);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.74);
}

#hud {
    padding: clamp(6px, 1.7vw, 10px) clamp(10px, 3vw, 18px) 3px;
    border-bottom: 2px solid rgba(0, 51, 160, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(222,234,253,.20));
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.85);
}
.hud-code { font-size: clamp(7px, 1.8vw, 9px); }
#score { font-size: clamp(21px, 6.4vw, 34px); }
#best-score { font-size: clamp(15px, 4.4vw, 23px); }
#multiplier { font-size: clamp(9px, 2.4vw, 12px); }
#timer { width: clamp(35px, 8.6vw, 46px); height: clamp(35px, 8.6vw, 46px); }
#level { font-size: clamp(7px, 1.8vw, 9px); }

#stage-wrap {
    min-height: 0;
    margin: clamp(4px, 1.4vw, 8px) clamp(5px, 2.1vw, 12px) clamp(2px, .9vw, 4px);
    border: 3px solid rgba(0, 51, 160, .32);
    border-radius: 3px;
    background: rgba(235, 243, 255, .66);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.72),
        inset 0 0 46px rgba(0, 51, 160, .095),
        0 1px 0 rgba(255,255,255,.95);
}
#stage-wrap::before {
    content: "";
    position: absolute;
    z-index: 44;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 28px rgba(2, 20, 65, .13), inset 0 0 0 1px rgba(0,51,160,.08);
}
#stage-wrap::after {
    opacity: .12;
    background: repeating-linear-gradient(to bottom, rgba(0, 18, 62, .22) 0, rgba(0, 18, 62, .22) 1px, transparent 1px, transparent 4px);
}
#game { touch-action: pinch-zoom; }

.screen {
    min-width: 0;
    min-height: 0;
    gap: clamp(6px, 2vw, 13px);
    padding: clamp(12px, 4.5vw, 30px) clamp(12px, 7vw, 58px);
    background:
        linear-gradient(rgba(0,51,160,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,51,160,.014) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242,247,255,.91), rgba(220,233,253,.87));
    background-size: 22px 22px, 22px 22px, auto;
}
.screen h1 { font-size: clamp(15px, 4.3vw, 28px); }
.micro-title { font-size: clamp(8px, 2.1vw, 10px); }

#attract-screen {
    background:
        radial-gradient(circle at 50% 45%, rgba(250,252,255,.72), rgba(229,239,255,.74) 64%, rgba(211,226,250,.80)),
        repeating-linear-gradient(to bottom, rgba(0,51,160,.025) 0, rgba(0,51,160,.025) 1px, transparent 1px, transparent 5px);
}
#attract-core {
    width: min(100%, 460px);
    gap: clamp(9px, 3.2vw, 17px);
}
#attract-ranking {
    width: min(88%, 390px);
    height: min(86%, 355px);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: clamp(4px, 1.5vw, 9px);
}
.mini-v {
    width: clamp(50px, 15vw, 78px);
    height: clamp(39px, 11.6vw, 60px);
    filter: drop-shadow(0 0 7px rgba(0,51,160,.22));
}
.mini-v i, .mini-v b {
    width: clamp(5px, 1.6vw, 8px);
    height: 108%;
}

.start-control {
    min-width: clamp(122px, 38vw, 152px);
    height: clamp(37px, 10.5vw, 46px);
    border-radius: 1px;
    border-width: 2px;
    box-shadow:
        0 4px 0 #001e66,
        0 5px 0 rgba(255,255,255,.76),
        0 9px 20px rgba(0,51,160,.22),
        inset 0 1px 0 rgba(255,255,255,.22);
}
.start-control:active { transform: translateY(3px); box-shadow: 0 1px 0 #001e66, 0 2px 0 rgba(255,255,255,.72), 0 5px 12px rgba(0,51,160,.18); }
@keyframes start-pulse {
    50% { box-shadow: 0 4px 0 #001e66, 0 5px 0 rgba(255,255,255,.76), 0 9px 27px rgba(0,51,160,.38), inset 0 1px 0 rgba(255,255,255,.22); }
}
#visual-guide {
    min-height: clamp(50px, 14vw, 72px);
    padding: clamp(7px, 2.5vw, 12px) clamp(8px, 3vw, 15px);
    border-top: 2px solid rgba(0,51,160,.14);
    border-bottom: 2px solid rgba(0,51,160,.14);
    background: rgba(248,251,255,.48);
}
.guide-ball {
    background: #f8fbff;
    border: 2px solid var(--blue);
    box-shadow: inset 0 0 0 3px rgba(0,51,160,.12), 0 0 0 3px rgba(0,51,160,.06);
}

.symbol-button, .icon-button {
    border-radius: 2px;
    box-shadow:
        inset 0 -3px 0 rgba(0,51,160,.09),
        inset 0 1px 0 rgba(255,255,255,.78),
        0 2px 0 rgba(0,38,121,.20);
}
.primary-symbol {
    box-shadow: inset 0 -3px 0 rgba(0,20,72,.32), inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #001c61, 0 0 15px rgba(0,51,160,.16);
}
.symbol-button:active, .icon-button:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,51,160,.08); }

#name-screen {
    grid-template-rows: auto auto auto;
    align-content: center;
}
.final-score { font-size: clamp(31px, 10vw, 68px) !important; }
.name-entry { width: min(100%, 360px); height: clamp(42px, 12vw, 57px); }
#name-slots { gap: clamp(2px, 1.2vw, 5px); }
#name-slots span {
    height: 100%;
    font-size: clamp(15px, 5.4vw, 36px);
    border-bottom-width: clamp(2px, .7vw, 3px);
}

#leaderboard-screen {
    width: 100%;
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    place-items: stretch center;
    align-content: stretch;
    gap: clamp(2px, 1vw, 6px);
    padding: clamp(6px, 2.2vw, 14px) clamp(8px, 3vw, 22px);
}
#leaderboard-title { align-self: end; }
#rank-badge {
    width: 100%;
    min-height: 0;
    height: clamp(11px, 3.3vw, 22px);
    display: grid;
    place-items: center;
    font-size: clamp(10px, 3vw, 18px);
    line-height: 1;
}
#rank-badge:not(.visible) { opacity: 0; }
#leaderboard, #attract-leaderboard {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
#leaderboard {
    width: min(100%, 390px);
    height: 100%;
    max-width: 390px;
    grid-template-rows: repeat(10, minmax(0, 1fr));
    gap: 1px;
}
#attract-leaderboard {
    height: 100%;
    grid-template-rows: repeat(10, minmax(0, 1fr));
    gap: 1px;
}
#leaderboard li, #attract-leaderboard li {
    min-width: 0;
    min-height: 0;
    height: 100%;
    grid-template-columns: clamp(20px, 6vw, 29px) minmax(0, 1fr) auto;
    gap: clamp(5px, 2vw, 10px);
    padding: 0 clamp(3px, 1.3vw, 7px);
    font-size: clamp(8px, 2.4vw, 11px);
    line-height: 1;
    border-left-width: 2px;
}
#attract-leaderboard li {
    min-height: 0;
    padding: 0 clamp(3px, 1vw, 6px);
    font-size: clamp(7px, 2vw, 9px);
}
.score-bar { top: 1px; bottom: 1px; }
.leaderboard-actions {
    min-height: 0;
    margin-top: 0;
    align-self: end;
}
#leaderboard-screen .symbol-button {
    width: clamp(38px, 11vw, 50px);
    height: clamp(29px, 9vw, 43px);
    font-size: clamp(13px, 4vw, 18px);
}

#machine-footer {
    padding: 2px clamp(7px, 2.4vw, 14px) clamp(3px, 1vw, 7px);
    border-top: 2px solid rgba(0,51,160,.10);
    background: linear-gradient(180deg, rgba(232,240,253,.20), rgba(202,219,246,.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.icon-button {
    width: clamp(27px, 7.5vw, 31px);
    height: clamp(25px, 7vw, 29px);
    font-size: clamp(11px, 3.2vw, 13px);
}
.music-button { width: clamp(33px, 9vw, 37px); font-size: clamp(8px, 2.6vw, 10px); }
.sound-button { width: clamp(31px, 8.6vw, 35px); }
.footer-actions { gap: clamp(3px, 1.4vw, 6px); }

#app[data-state="playing"][data-fever="true"] #machine {
    box-shadow:
        0 24px 70px rgba(0, 4, 24, .70),
        0 0 0 3px #0033a0,
        0 0 0 6px rgba(229, 239, 255, .82),
        0 0 38px rgba(31, 94, 215, .48),
        inset 0 0 0 1px rgba(0, 51, 160, .16),
        inset 0 -18px 38px rgba(0, 51, 160, .07);
}
#app[data-state="playing"][data-fever="true"] #multiplier {
    animation: fever-multiplier .42s steps(2, end) infinite alternate;
}
#app[data-state="playing"][data-fever="true"] #stage-wrap::after { opacity: .18; }
@keyframes fever-multiplier { to { transform: scale(1.16); text-shadow: 0 0 7px rgba(0,51,160,.35); } }

#app[data-compact="true"] #hud {
    grid-template-columns: 1fr clamp(34px, 10vw, 44px) 1fr;
    gap: 4px;
    padding-left: 9px;
    padding-right: 9px;
}
#app[data-compact="true"] #stage-wrap { margin-left: 5px; margin-right: 5px; }
#app[data-compact="true"] .screen { padding-left: 10px; padding-right: 10px; }
#app[data-compact="true"] #leaderboard-screen { padding: 5px 7px; gap: 1px; }
#app[data-compact="true"] #leaderboard-screen .symbol-actions { gap: 7px; }
#app[data-compact="true"] #attract-ranking { height: 90%; width: 91%; }
#app[data-compact="true"] #visual-guide { gap: 5px; }

@media (orientation: landscape) and (max-height: 540px) {
    #app { padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
    #machine { aspect-ratio: 1 / 1.075; }
    #attract-core { gap: 5px; }
    .mini-v { display: none; }
    #visual-guide { min-height: 42px; padding-top: 4px; padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    #app[data-state="playing"][data-fever="true"] #multiplier { animation: none !important; }
}

/* Compact scoreboard guard: override the legacy mobile row minimums. */
#hud, #stage-wrap, #machine-footer { min-width: 0; }
#leaderboard-screen #leaderboard { gap: 1px; }
#leaderboard-screen #leaderboard li {
    min-height: 0;
    height: 100%;
    padding: 0 clamp(2px, 1.2vw, 5px);
    font-size: clamp(7px, 2.4vw, 11px);
    line-height: 1;
}
#leaderboard-title { grid-row: 1; }
#rank-badge { grid-row: 2; }
#leaderboard-screen #leaderboard { grid-row: 3; }
#leaderboard-screen .leaderboard-actions { grid-row: 4; }

/* Keep the compact V readable at every responsive size. */
.mini-v i { left: 25%; }
.mini-v b { right: 25%; }