:root {
    --ui-ink: #160f0b;
    --ui-ink-2: #24170f;
    --ui-wood: #3b2518;
    --ui-wood-2: #5b3a24;
    --ui-cream: #f7ead1;
    --ui-muted: #cbb89c;
    --ui-gold: #f2c36b;
    --ui-cyan: #8bd4e6;
    --ui-rose: #c96f7b;
    --ui-green: #9eb27a;
    --ui-red: #b96854;
    --ui-line: #6d5944;
    --scanline-opacity: 0.055;
    --scanline-spacing: 3px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}
.studio-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
    background: rgb(54, 59, 65);
    opacity: 1;
    transition: opacity 0.7s ease;
}
.studio-splash.fade-out {
    opacity: 0;
    pointer-events: none;
}
.studio-splash.paused {
    animation-play-state: paused;
}
.studio-splash img {
    width: min(56vw, 560px);
    max-width: 82%;
    height: auto;
    image-rendering: auto;
}
body {
    font-family: 'Press Start 2P', monospace;
    image-rendering: pixelated;
    user-select: none;
    overflow: hidden;
    background-color: var(--ui-ink);
    color: var(--ui-cream);
}
body[data-native-shell="native"] {
    background: #07030f;
}
.retro-font-large {
    font-family: 'Press Start 2P', monospace;
}
.retro-font-tall {
    font-family: 'VT323', monospace;
}
/* Custom pixel-art borders */
.pixel-border {
    border: 3px solid var(--ui-gold);
    box-shadow: 0px 0px 0px 4px #090604, 0px 5px 0px 4px #090604, 0 18px 45px rgba(0,0,0,0.52);
}
.pixel-btn {
    position: relative;
    display: inline-block;
    box-shadow: inset -4px -4px 0px 0px rgba(0,0,0,0.32);
    background: var(--ui-wood-2);
    color: var(--ui-cream);
    border: 3px solid #0b0705;
    transition: all 0.1s ease;
}
.pixel-btn:not(:disabled):hover {
    filter: brightness(1.1) saturate(1.08);
    transform: translateY(-1px);
}
.pixel-btn i {
    margin-right: 0.35rem;
}
.pixel-btn:active {
    box-shadow: inset 4px 4px 0px 0px #4a1d96;
    transform: translate(2px, 2px);
}
.pixel-btn-disabled {
    background: #4b5563 !important;
    box-shadow: inset -4px -4px 0px 0px #374151 !important;
    cursor: not-allowed;
    opacity: 0.6;
}
.hud-panel {
    background:
        linear-gradient(180deg, rgba(42, 27, 18, 0.96), rgba(14, 9, 6, 0.94));
    border-color: rgba(242, 195, 107, 0.54);
    box-shadow: 0 10px 26px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.07);
}
.hud-rack-pill {
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.62);
    background: rgba(88, 28, 135, 0.48);
    padding: 0.15rem 0.35rem;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
}
#score-hud-panel {
    min-width: min(21rem, calc(100vw - 2rem));
    border-color: rgba(242, 195, 107, 0.68);
}
#score-hud-panel > div:first-child {
    align-items: center;
    letter-spacing: 0;
    line-height: 1.35;
}
#score-hud-panel > div:first-child span {
    white-space: nowrap;
}
#score-hud-panel > div:first-child .text-sm {
    font-size: 1.04rem;
    text-shadow: 0 2px 0 #090604, 0 0 8px rgba(242, 195, 107, 0.18);
}
#score-hud-panel > div:nth-child(2) {
    overflow: hidden;
    border-color: rgba(247, 234, 209, 0.84);
    background:
        linear-gradient(180deg, rgba(14, 8, 20, 0.96), rgba(8, 5, 6, 0.98));
    box-shadow: inset 0 0 0 1px rgba(242, 195, 107, 0.12);
}
#score-hud-panel > div:nth-child(2) > div:first-child {
    border-color: rgba(247, 234, 209, 0.76);
    background: linear-gradient(90deg, rgba(49, 20, 91, 0.72), rgba(31, 15, 18, 0.9));
}
#hud-frame-boxes > div {
    border-color: rgba(247, 234, 209, 0.78);
    text-shadow: 0 2px 0 #090604;
}
#hud-frame-boxes > div:last-child {
    border-right: 0;
}
.hud-breathe {
    animation: hudFloat 7.5s ease-in-out infinite;
    transform-origin: center top;
}
.hud-breathe:nth-child(2) {
    animation-delay: -2.8s;
}
.hud-breathe * {
    animation: contentPulse 5.8s ease-in-out infinite;
}
.upgrade-wave {
    display: block;
    transform-origin: left center;
    animation: upgradeWave 5.4s ease-in-out infinite;
}
.upgrade-wave:nth-child(2n) {
    animation-delay: -1.7s;
}
.upgrade-wave:nth-child(3n) {
    animation-delay: -3.1s;
}
.meter-shell {
    background:
        repeating-conic-gradient(from 0deg, rgba(255, 196, 77, 0.18) 0deg 4deg, transparent 4deg 10deg),
        radial-gradient(circle at 50% 38%, rgba(80, 38, 98, 0.28), rgba(16, 8, 18, 0.18) 64%),
        rgba(12, 7, 8, 0.16);
    box-shadow:
        0 0 0 3px rgba(11, 7, 5, 0.5),
        0 0 34px rgba(242, 195, 107, 0.3),
        inset 0 0 20px rgba(0,0,0,0.42);
    backdrop-filter: blur(5px) saturate(1.16);
    -webkit-backdrop-filter: blur(5px) saturate(1.16);
}
.meter-shell::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 999px;
    border: 3px dashed rgba(250, 204, 21, 0.42);
    pointer-events: none;
    animation: meterGlow 3.8s ease-in-out infinite;
}
.meter-shell::after {
    content: "";
    position: absolute;
    inset: 17px;
    border-radius: 999px;
    box-shadow:
        inset 0 0 0 3px rgba(11,7,5,0.44),
        inset 0 0 18px rgba(242,195,107,0.16);
    pointer-events: none;
}
.mobile-gauge-control {
    display: none;
}
.control-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.48), 0 10px 20px rgba(0,0,0,0.18);
    background: #25180f !important;
    border-color: #6d5944 !important;
}
.control-arrow {
    font-size: 1.35em;
    line-height: 0.8;
}
.control-key-label {
    line-height: 1;
}
#game-hud > div:last-child > .hud-panel,
#game-hud > div:last-child > .meter-shell {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035) 38%, rgba(30,18,32,0.34)),
        rgba(18, 12, 9, 0.34) !important;
    border-color: rgba(174, 204, 255, 0.42) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(9px) saturate(1.18);
    -webkit-backdrop-filter: blur(9px) saturate(1.18);
}
#game-hud > div:last-child > .hud-panel {
    border-color: rgba(116, 159, 221, 0.58) !important;
}
#game-hud > div:last-child > .meter-shell {
    background:
        repeating-conic-gradient(from 0deg, rgba(250,204,21,0.18) 0deg 4deg, transparent 4deg 10deg),
        radial-gradient(circle at 50% 38%, rgba(95, 42, 112, 0.24), rgba(9, 6, 15, 0.18) 64%),
        rgba(255,255,255,0.035) !important;
    border-color: rgba(250, 204, 21, 0.86) !important;
}
#game-hud > div:last-child .control-key {
    background: rgba(26, 17, 12, 0.42) !important;
    border-color: rgba(240, 221, 185, 0.34) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.loading-orbit {
    width: 9rem;
    height: 9rem;
    border: 4px solid rgba(250, 204, 21, 0.28);
    border-top-color: #facc15;
    border-right-color: #ec4899;
    border-radius: 999px;
    animation: loadingSpin 1.15s linear infinite;
    box-shadow: 0 0 34px rgba(236,72,153,0.28);
}
.loading-orbit::before {
    content: "";
    position: absolute;
    inset: 1.8rem;
    border-radius: inherit;
    border: 3px dashed rgba(34, 211, 238, 0.55);
    animation: loadingSpin 2.6s linear infinite reverse;
}
/* Retro TV Scanlines */
.scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 64%,
        rgba(0, 0, 0, var(--scanline-opacity)) 100%
    );
    background-size: 100% var(--scanline-spacing);
    z-index: 10;
    pointer-events: none;
}
.scanlines.hidden {
    display: none;
}
#fps-counter {
    position: fixed;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    padding: 7px 10px;
    border: 2px solid #22d3ee;
    background: rgba(3, 7, 18, 0.88);
    color: #a7f3d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
}
#fps-counter.hidden {
    display: none;
}
#mood-overlay {
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,var(--mood-vignette, 0.34)) 100%),
        linear-gradient(90deg, rgba(56,189,248,var(--mood-cyan, 0.035)), rgba(255,255,255,0) 42%, rgba(244,63,94,var(--mood-red, 0.045)));
    opacity: var(--mood-opacity, 0.7);
    mix-blend-mode: multiply;
}
/* CRT Screen curve and flicker */
.crt-bloom {
    animation: textShadow 1.6s infinite alternate;
}
#gauge-canvas {
    touch-action: none;
}
.route-node {
    position: absolute;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    color: #f7ead1;
    background:
        linear-gradient(180deg, rgba(54, 38, 26, 0.98), rgba(24, 16, 11, 0.98));
    border: 3px solid #6d5944;
    border-radius: 50%;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.34), 0 10px 24px rgba(0,0,0,0.34);
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.route-node.locked {
    cursor: default;
    opacity: 0.38;
    filter: grayscale(0.82) brightness(0.72);
}
.route-node.current {
    border-color: #f2c36b;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.32), 0 0 0 4px rgba(242,195,107,0.12), 0 12px 28px rgba(0,0,0,0.42);
    animation: availableNodeBreathe 3.4s ease-in-out infinite;
}
.route-node.current:hover {
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(1.12);
}
.route-node.visited {
    opacity: 0.58;
    border-color: #8fa076;
}
.route-node.boss {
    border-radius: 10px;
    border-color: #b96854;
}
.route-node-label {
    position: absolute;
    right: -9px;
    bottom: -9px;
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #26170d;
    background: #f2c36b;
    border: 2px solid #1a100a;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
}
.route-node-icon {
    font-size: 25px;
    line-height: 1;
    color: #f7ead1;
}
.route-node-name {
    position: absolute;
    top: 86px;
    left: 50%;
    width: 112px;
    transform: translateX(-50%);
    color: #cbb89c;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
}
.route-node.current .route-node-name {
    color: #f7ead1;
}
.route-map-tooltip {
    position: fixed;
    z-index: 120;
    max-width: 390px;
    padding: 15px 16px;
    pointer-events: none;
    color: #f7ead1;
    background: rgba(20, 13, 9, 0.97);
    border: 2px solid rgba(242, 195, 107, 0.72);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
    transform: translate(16px, 16px);
    font-family: 'VT323', monospace;
    font-size: 23px;
    line-height: 1.05;
}
.route-map-tooltip strong,
.route-map-tooltip span {
    display: block;
}
.route-map-tooltip strong {
    color: #f2c36b;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 7px;
}
.route-map-tooltip span {
    white-space: pre-line;
}
.route-detail-panel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    pointer-events: none;
}
.route-choice-detail {
    padding: 14px 16px;
    color: #d7c5a6;
    background: rgba(20, 13, 9, 0.86);
    border: 1px solid rgba(242, 195, 107, 0.24);
    border-radius: 6px;
    font-family: 'VT323', monospace;
    font-size: 22px;
    line-height: 1.05;
    animation: mapChoiceRise 0.32s ease both;
}
.route-choice-detail b {
    display: block;
    color: #f7ead1;
    font-size: 28px;
    margin-bottom: 2px;
}
@media (max-width: 760px) {
    .route-detail-panel {
        grid-template-columns: 1fr;
    }
}
.lounge-overlay {
    background:
        radial-gradient(circle at 50% 10%, rgba(242, 195, 107, 0.10), transparent 32%),
        repeating-linear-gradient(-8deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 12px),
        rgba(16, 10, 7, 0.97) !important;
}
.lounge-panel {
    background:
        linear-gradient(180deg, rgba(36, 23, 15, 0.98), rgba(10, 7, 5, 0.98)) !important;
    border-color: var(--ui-gold) !important;
}
#loading-screen,
#main-menu,
#shop-screen,
#game-over-screen,
#pause-screen {
    background:
        radial-gradient(circle at 50% 10%, rgba(242, 195, 107, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(59, 37, 24, 0.26), rgba(16, 10, 7, 0.96)),
        rgba(16, 10, 7, 0.96) !important;
}
#main-menu.pinfall-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    align-items: stretch !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 72% 16%, rgba(242, 119, 67, 0.32), transparent 25%),
        radial-gradient(circle at 40% 18%, rgba(139, 77, 172, 0.34), transparent 36%),
        radial-gradient(ellipse at 52% 48%, rgba(255, 194, 101, 0.09), transparent 32%),
        radial-gradient(circle at 18% 86%, rgba(242, 195, 107, 0.12), transparent 34%),
        linear-gradient(90deg, rgba(10,5,12,0.74), rgba(26,12,28,0.92) 38%, rgba(16,8,12,0.96)),
        repeating-linear-gradient(90deg, rgba(242,195,107,0.035) 0 1px, transparent 1px 74px),
        linear-gradient(180deg, #2a1631, #130b10 72%, #0b0708),
        #160d16 !important;
    box-shadow: 0 0 0 100vmax #160d16;
}
.pinfall-bg-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.pinfall-bg-scene::before {
    content: "";
    position: absolute;
    inset: auto -8% 0 -8%;
    height: 62%;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(242,195,107,0.28) 18.3% 18.8%, transparent 19.2% 48%, rgba(242,195,107,0.34) 48.4% 49.2%, transparent 49.7% 81%, rgba(242,195,107,0.25) 81.3% 81.8%, transparent 82.2%),
        repeating-linear-gradient(90deg, rgba(247,234,209,0.035) 0 7px, transparent 7px 34px),
        linear-gradient(180deg, rgba(242,157,76,0.08), rgba(91,58,36,0.26));
    clip-path: polygon(24% 0, 66% 0, 104% 100%, -12% 100%);
    opacity: 0.78;
}
.pinfall-bg-scene::after {
    content: "";
    position: absolute;
    left: -12%;
    bottom: -18%;
    width: 70vw;
    height: 62vw;
    max-height: 860px;
    background:
        radial-gradient(circle, rgba(242,195,107,0.16) 0 16%, transparent 17%),
        repeating-conic-gradient(from 12deg, rgba(139,212,230,0.08) 0deg 12deg, transparent 12deg 24deg),
        radial-gradient(circle, rgba(19, 13, 9, 0.5), rgba(10, 7, 5, 0) 66%);
    border-radius: 50%;
    opacity: 0.74;
    animation: titleBallHalo 12s ease-in-out infinite alternate;
}
.pinfall-bg-scene .pinfall-bg-lane {
    animation: menuLaneParallax 13s ease-in-out infinite alternate;
}
.pinfall-bg-scene .pinfall-bg-lane::after,
.pinfall-title-lockup::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.pinfall-bg-lane {
    position: absolute;
    left: -16vw;
    bottom: -11vh;
    width: 82vw;
    height: 62vh;
    background:
        linear-gradient(105deg, rgba(242,195,107,0.18), rgba(242,119,67,0.08) 44%, transparent 72%),
        repeating-linear-gradient(102deg, rgba(247,234,209,0.075) 0 2px, transparent 2px 22px);
    clip-path: polygon(0 64%, 70% 0, 100% 16%, 28% 100%);
    opacity: 0.8;
    transform: skewX(-8deg);
}
.pinfall-bg-lane::after {
    inset: 10% 0 0 0;
    background:
        linear-gradient(105deg, transparent 0 18%, rgba(255, 231, 161, 0.34) 22%, transparent 30% 54%, rgba(139,212,230,0.16) 58%, transparent 66%),
        repeating-linear-gradient(102deg, transparent 0 34px, rgba(255,255,255,0.08) 34px 38px, transparent 38px 74px);
    mix-blend-mode: screen;
    opacity: 0.52;
    animation: titleLaneSweep 5.8s ease-in-out infinite;
}
.pinfall-bg-ball {
    position: absolute;
    left: 7vw;
    bottom: 15vh;
    width: clamp(72px, 13vw, 180px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 26%, rgba(247,234,209,0.42), transparent 0 8%, rgba(247,234,209,0.08) 9% 15%, transparent 16%),
        radial-gradient(circle at 58% 42%, rgba(0,0,0,0.7) 0 5%, transparent 6%),
        radial-gradient(circle at 43% 58%, rgba(0,0,0,0.62) 0 5%, transparent 6%),
        radial-gradient(circle at 68% 65%, rgba(0,0,0,0.62) 0 4%, transparent 5%),
        radial-gradient(circle at 35% 26%, rgba(139,77,172,0.9), rgba(68,32,82,0.94) 54%, rgba(16,10,20,0.88));
    box-shadow: inset -18px -24px 0 rgba(0,0,0,0.22), 0 28px 48px rgba(0,0,0,0.38), 0 0 42px rgba(139,77,172,0.28);
    opacity: 0.76;
    animation: titleBallRoll 8.5s ease-in-out infinite alternate;
}
.pinfall-bg-pin {
    position: absolute;
    width: clamp(86px, 13vw, 190px);
    opacity: 0.78;
    filter: drop-shadow(20px 26px 0 rgba(0,0,0,0.22)) drop-shadow(0 0 28px rgba(242,119,67,0.16));
    transform-origin: 50% 88%;
}
.pinfall-bg-pin svg {
    display: block;
    width: 100%;
    overflow: visible;
}
.pinfall-bg-pin .pin-body {
    fill: rgba(247,234,209,0.88);
    stroke: rgba(20,13,9,0.78);
    stroke-width: 5;
}
.pinfall-bg-pin .pin-band {
    fill: rgba(201,84,83,0.9);
}
.pinfall-bg-pin .pin-shine {
    fill: none;
    stroke: rgba(255,255,255,0.35);
    stroke-width: 7;
    stroke-linecap: round;
}
.pinfall-bg-pin.pin-a {
    left: 23vw;
    bottom: 9vh;
    transform: rotate(64deg);
    animation: titlePinFallA 8.5s ease-in-out infinite alternate;
}
.pinfall-bg-pin.pin-b {
    left: 12vw;
    bottom: 2vh;
    transform: rotate(86deg) scale(1.12);
    opacity: 0.54;
    animation: titlePinFallB 9.5s ease-in-out infinite alternate;
}
.pinfall-bg-pin.pin-c {
    left: 32vw;
    bottom: 3vh;
    transform: rotate(34deg) scale(0.86);
    opacity: 0.46;
    animation: titlePinFallC 10s ease-in-out infinite alternate;
}
.pinfall-menu-inner {
    position: relative;
    isolation: isolate;
    z-index: 1;
    align-self: stretch;
    width: 100%;
    max-width: none !important;
    min-height: calc(100dvh - 3rem);
    margin: 0;
    padding: clamp(1.1rem, 3.2vw, 3.3rem) clamp(1rem, 4vw, 5rem);
    justify-content: center;
    gap: clamp(0.75rem, 1.6vw, 1.35rem) !important;
}
.pinfall-menu-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 5, 10, 0.78), rgba(31, 17, 35, 0.62) 36%, rgba(16, 9, 13, 0.28) 70%, rgba(8, 5, 8, 0.55)),
        radial-gradient(ellipse at 58% 20%, rgba(242,195,107,0.12), transparent 58%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
    clip-path: none;
    pointer-events: none;
}
.pinfall-title-lockup {
    position: relative;
    width: min(100%, 840px);
}
.pinfall-title-lockup::after {
    left: 17%;
    right: 17%;
    top: 42%;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 169, 0.68), transparent);
    filter: blur(4px);
    opacity: 0;
    animation: titleGlint 4.8s ease-in-out infinite;
}
.pinfall-kicker {
    color: var(--ui-cyan);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    opacity: 0.9;
}
.pinfall-title-wrap {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: clamp(0.4rem, 2vw, 1rem);
}
.pinfall-logo {
    position: relative;
    overflow: hidden;
    color: transparent;
    background:
        linear-gradient(180deg, #fff6c7 0 12%, #ffb45f 13% 48%, #f26a4b 49% 70%, #8b5cf6 71% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(2.65rem, 6.6vw, 5.45rem);
    line-height: 0.92;
    text-shadow:
        0 2px 0 #ffcf74,
        0 5px 0 #93314f,
        0 9px 0 #0b0705,
        5px 0 0 rgba(73, 27, 122, 0.64),
        0 0 24px rgba(255, 198, 94, 0.66),
        0 0 54px rgba(190, 96, 255, 0.26);
    animation: logoBreath 5.8s ease-in-out infinite;
}
.pinfall-logo::before {
    content: "";
    position: absolute;
    inset: -18% -28%;
    z-index: 1;
    background:
        linear-gradient(105deg, transparent 32%, rgba(255,255,255,0) 42%, rgba(255,251,214,0.9) 48%, rgba(255,255,255,0.28) 50%, transparent 59%);
    mix-blend-mode: screen;
    transform: translateX(-80%) skewX(-15deg);
    animation: logoPixelGlint 5.4s ease-in-out infinite;
    pointer-events: none;
}
.pinfall-logo::after {
    content: "PINFALL";
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 201, 112, 0.82);
    transform: translate(2px, -2px);
    opacity: 0.82;
    pointer-events: none;
}
.menu-tagline {
    position: relative;
    z-index: 2;
    color: rgba(247,234,209,0.78) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.65);
}
.pinfall-subtitle {
    display: block;
    width: fit-content;
    margin: 0.72rem auto 0;
    padding: 0.4rem 0.72rem;
    color: #ffe0a3;
    background: rgba(93, 45, 83, 0.46);
    border-top: 1px solid rgba(255, 198, 94, 0.35);
    border-bottom: 1px solid rgba(255, 198, 94, 0.35);
    font-family: 'VT323', monospace;
    font-size: clamp(1.35rem, 3.6vw, 2.15rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #0b0705, 0 0 14px rgba(255, 142, 82, 0.38);
}
.pinfall-lane-stripes {
    width: min(88%, 620px);
    height: 38px;
    margin: 0.7rem auto 0;
    background:
        linear-gradient(90deg, transparent 0 13%, rgba(242,195,107,0.72) 13% 14%, transparent 14% 49%, rgba(242,195,107,0.82) 49% 51%, transparent 51% 86%, rgba(242,195,107,0.72) 86% 87%, transparent 87%),
        repeating-linear-gradient(90deg, rgba(247,234,209,0.04) 0 4px, transparent 4px 18px),
        linear-gradient(180deg, rgba(91,58,36,0.22), transparent);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    opacity: 0.9;
}
.pinfall-pin {
    display: block;
    width: 32px;
    height: 58px;
    margin: 0 auto;
    background:
        linear-gradient(180deg, #f7ead1 0 18%, var(--ui-rose) 18% 26%, #f7ead1 26% 100%);
    border: 3px solid #0b0705;
    border-radius: 44% 44% 28% 28% / 18% 18% 12% 12%;
    box-shadow: inset -6px 0 rgba(0,0,0,0.18), 0 8px 0 #0b0705;
}
.pinfall-pin-left {
    transform: rotate(-12deg);
}
.pinfall-pin-right {
    transform: rotate(12deg);
}
.menu-mode-card {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    gap: 0.9rem !important;
    min-height: 212px;
    padding: 1.05rem !important;
    border-radius: 8px;
    background:
        radial-gradient(circle at 86% 18%, var(--mode-glow, rgba(242,195,107,0.2)), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.095), rgba(255,255,255,0.02) 45%),
        rgba(20, 13, 9, 0.68) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -18px 0 rgba(0,0,0,0.12), 0 16px 34px rgba(0,0,0,0.26);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.menu-mode-card:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    border-color: rgba(255, 218, 132, 0.78) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 -18px 0 rgba(0,0,0,0.12), 0 22px 46px rgba(0,0,0,0.34), 0 0 24px var(--mode-glow, rgba(242,195,107,0.18));
}
.menu-mode-rogue {
    --mode-glow: rgba(16, 185, 129, 0.26);
}
.menu-mode-tenpin {
    --mode-glow: rgba(34, 211, 238, 0.24);
}
.menu-mode-grid {
    max-width: 820px;
}
.mode-card-topline {
    width: fit-content;
    color: rgba(247, 234, 209, 0.62);
    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid rgba(242, 195, 107, 0.24);
    background: rgba(0,0,0,0.24);
    padding: 0.35rem 0.45rem;
}
.mode-card-main {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 0.95rem;
    align-items: center;
}
.mode-card-main h3 {
    color: #ffe17b;
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
}
.menu-mode-tenpin .mode-card-main h3 {
    color: #9befff;
}
.mode-card-main p {
    color: rgba(247,234,209,0.66);
    font-size: 10px;
    line-height: 1.45;
    margin-top: 0.45rem;
}
.mode-card-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 78px;
    aspect-ratio: 1;
    background:
        radial-gradient(circle, rgba(255,255,255,0.09), transparent 58%),
        rgba(0,0,0,0.36);
    border: 2px solid rgba(242,195,107,0.34);
    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.22), 0 0 28px rgba(255,183,90,0.08);
}
.mode-card-icon svg {
    width: 62px;
    height: 62px;
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-linejoin: round;
}
.mode-card-icon-route {
    color: #43f3a7;
}
.mode-card-icon-score {
    color: #63e8ff;
}
.mode-card-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.mode-card-options label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 237, 184, 0.84);
    font-size: 8px;
    line-height: 1.25;
    text-transform: uppercase;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(242,195,107,0.2);
    padding: 0.42rem 0.5rem;
}
.menu-mode-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 98px;
    height: 98px;
    border-radius: 999px;
    border: 18px solid rgba(139,212,230,0.08);
    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.18);
    pointer-events: none;
}
.menu-control-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(139,212,230,0.28);
    background:
        linear-gradient(90deg, rgba(242,195,107,0.08), rgba(139,77,172,0.14), rgba(139,212,230,0.08)),
        rgba(8, 6, 8, 0.48);
    color: rgba(247,234,209,0.58) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 26px rgba(0,0,0,0.18);
}
.menu-control-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: rgba(247,234,209,0.7);
}
.menu-control-strip b {
    color: #facc15;
    border: 1px solid rgba(250,204,21,0.36);
    background: rgba(250,204,21,0.08);
    padding: 0.16rem 0.34rem;
    font-weight: 400;
}
.menu-bottom-panel {
    width: min(820px, 100%);
    margin-top: 0.45rem;
    padding: 0.82rem 1.05rem;
    color: rgba(247,234,209,0.86);
    background:
        linear-gradient(90deg, rgba(255,142,82,0.1), rgba(139,77,172,0.14), rgba(255,142,82,0.08)),
        rgba(12, 7, 12, 0.48);
    border-top: 2px solid rgba(242,195,107,0.32);
    border-bottom: 2px solid rgba(139,212,230,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 18px 38px rgba(0,0,0,0.18);
    text-align: center;
}
.menu-bottom-label {
    color: #ffb35f;
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.menu-bottom-copy {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(247,234,209,0.72);
    font-family: 'VT323', monospace;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.05;
    text-transform: uppercase;
}
.arcade-menu-shell {
    width: min(1440px, calc(100vw - 3rem)) !important;
    min-height: min(760px, calc(100dvh - 1.1rem)) !important;
    max-height: calc(100dvh - 1.1rem);
    align-self: center;
    margin: auto !important;
    padding: clamp(0.85rem, 1.6vw, 1.35rem) !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(0.55rem, 1.2vw, 0.95rem) !important;
    border: 4px solid #7c3aed;
    outline: 2px solid #0b0616;
    background:
        radial-gradient(circle at 50% 34%, rgba(249,115,22,0.16), transparent 30%),
        radial-gradient(circle at 36% 54%, rgba(124,58,237,0.18), transparent 34%),
        linear-gradient(180deg, rgba(31,18,52,0.96), rgba(10,7,19,0.96));
    box-shadow:
        inset 0 0 0 2px #1c0d31,
        inset 0 0 44px rgba(124,58,237,0.32),
        0 0 0 2px #d97706,
        0 24px 70px rgba(0,0,0,0.58);
    overflow: hidden;
}
.arcade-menu-shell::before {
    inset: 1.2rem !important;
    background:
        linear-gradient(90deg, rgba(251,191,36,0.04), transparent 16% 84%, rgba(251,191,36,0.04)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 54px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 44px) !important;
    border: 2px solid rgba(168,85,247,0.44);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5), inset 0 0 60px rgba(0,0,0,0.38);
}
.arcade-corner {
    position: absolute;
    z-index: 5;
    width: 52px;
    height: 52px;
    background: #0a0617;
    border: 3px solid #d97706;
    box-shadow: 0 0 0 2px #150923, 0 0 18px rgba(217,119,6,0.26);
    display: grid;
    place-items: center;
}
.arcade-corner svg {
    width: 38px;
    height: 38px;
    fill: rgba(168,85,247,0.35);
    stroke: #f0abfc;
    stroke-width: 3;
}
.corner-tl { left: -2px; top: -2px; }
.corner-tr { right: -2px; top: -2px; }
.corner-bl { left: -2px; bottom: -2px; }
.corner-br { right: -2px; bottom: -2px; }
.arcade-rail {
    position: absolute;
    z-index: 3;
    background: #7c3aed;
    box-shadow: 0 0 0 2px #12061e, 0 0 14px rgba(168,85,247,0.42);
}
.rail-top, .rail-bottom { height: 5px; left: 64px; right: 64px; }
.rail-top { top: 10px; }
.rail-bottom { bottom: 10px; }
.rail-left, .rail-right { width: 5px; top: 64px; bottom: 64px; }
.rail-left { left: 10px; }
.rail-right { right: 10px; }
.arcade-logo-row {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.65rem, 2vw, 1.4rem);
    padding: 0.2rem 3.8rem 0;
}
.arcade-logo-row .pinfall-title-lockup {
    width: min(680px, 64vw);
    padding-left:30px;
}
.arcade-logo-row .pinfall-logo {
    font-size: clamp(2.7rem, 6vw, 5.5rem);
}
.arcade-logo-row .pinfall-subtitle {
    margin-top: 0.38rem;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
}
.logo-pin-svg {
    display: block;
    width: clamp(32px, 4vw, 56px);
    transform: rotate(-13deg);
    filter: drop-shadow(4px 5px 0 #08030d);
}
.logo-pin-svg.right {
    transform: rotate(13deg);
}
.logo-pin-svg path:first-child,
.hero-pins path:first-child {
    fill: #f8fafc;
    stroke: #10051c;
    stroke-width: 5;
    stroke-linejoin: round;
}
.logo-pin-svg path:last-child,
.hero-pins path:last-child {
    fill: none;
    stroke: #ef4444;
    stroke-width: 6;
    stroke-linecap: square;
}
.arcade-main-grid {
    position: relative;
    z-index: 4;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, 0.92fr) minmax(360px, 1.45fr) minmax(245px, 0.92fr);
    gap: clamp(0.85rem, 1.8vw, 1.35rem);
    align-items: stretch;
    padding: 0 2.45rem;
}
.arcade-left-stack {
    display: grid;
    align-content: center;
    gap: 1rem;
    min-width: 0;
}
.arcade-main-grid .menu-mode-card {
    min-height: 0;
    border: 3px solid #9333ea !important;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 26%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 7px, transparent 7px 16px),
        rgba(25, 14, 40, 0.9) !important;
    box-shadow: inset 0 0 0 2px #08030d, 0 14px 30px rgba(0,0,0,0.34), 0 0 18px rgba(147,51,234,0.18);
    animation: panelBreath 7.4s ease-in-out infinite;
}
.arcade-main-grid .mode-card-main {
    grid-template-columns: 74px minmax(0, 1fr);
}
.arcade-main-grid .mode-card-icon {
    width: 66px;
    border-color: #8b5cf6;
    background: #120a1f;
}
.arcade-main-grid .mode-card-main h3 {
    font-size: clamp(1.35rem, 1.8vw, 2rem);
    font-family: 'VT323', monospace;
    line-height: 0.95;
}
.arcade-main-grid .mode-card-main p {
    font-size: clamp(0.82rem, 0.82vw, 1rem);
    line-height: 1.14;
    color: rgba(247,234,209,0.8);
    max-width: 21ch;
}
.arcade-center-stage {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 3px solid #9333ea;
    background:
        radial-gradient(circle at 50% 48%, rgba(249,115,22,0.16), transparent 36%),
        linear-gradient(180deg, rgba(18,8,28,0.2), rgba(10,5,16,0.7));
    box-shadow: inset 0 0 0 2px #090314, 0 14px 36px rgba(0,0,0,0.36);
    overflow: hidden;
}
.central-bowling-graphic {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    padding: 0 0.8rem;
    transform: translateY(-5%);
    animation: heroFloat 6.5s ease-in-out infinite;
    transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}
.arcade-center-stage.is-panel-mode .central-bowling-graphic {
    display: none;
}
.central-bowling-graphic svg {
    width: 100%;
    max-height: 440px;
    overflow: visible;
    filter: drop-shadow(0 20px 20px rgba(0,0,0,0.36));
}
.menu-center-content {
    grid-row: 1;
    grid-column: 1;
    align-self: stretch;
    z-index: 4;
    overflow: auto;
    padding: clamp(1rem, 2vw, 1.45rem);
    border: 0;
    background:
        radial-gradient(circle at 50% 24%, rgba(249,115,22,0.12), transparent 40%),
        linear-gradient(180deg, rgba(13,7,24,0.22), rgba(13,7,24,0.78));
    box-shadow: none;
    font-family: 'VT323', monospace;
}
.menu-center-content.hidden {
    display: none;
}
.menu-center-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid rgba(242,195,107,0.28);
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
}
.menu-center-header span {
    color: #67e8f9;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    text-transform: uppercase;
}
.menu-center-header h2 {
    color: #f7d572;
    font-size: clamp(1.2rem, 2.3vw, 1.85rem);
    line-height: 0.95;
    text-transform: uppercase;
    text-align: right;
}
.menu-detail-card {
    position: relative;
    min-height: 100%;
    border: 0;
    background: transparent;
    padding: clamp(0.4rem, 1vw, 0.8rem);
}
.daily-detail-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    column-gap: clamp(0.85rem, 1.5vw, 1.2rem);
    row-gap: 0.5rem;
    max-width: 520px;
    margin: 0 auto;
}
.menu-detail-card p {
    max-width: 31ch;
    color: rgba(247,234,209,0.84);
    font-family: 'VT323', monospace;
    font-size: clamp(1.2rem, 1.55vw, 1.55rem);
    line-height: 0.95;
    margin: 0;
}
.daily-detail-card p {
    grid-column: 2;
}
.daily-detail-actions {
    grid-column: 2;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.2rem;
}
.daily-detail-actions span {
    color: #67e8f9;
    font-family: 'VT323', monospace;
    font-size: clamp(1rem, 1.25vw, 1.3rem);
    line-height: 0.95;
    text-transform: uppercase;
}
.daily-overview-card .daily-detail-actions,
.daily-overview-card .daily-overview-list,
.daily-overview-card .daily-leaderboard {
    grid-column: 2;
}
.daily-overview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}
.daily-overview-list span,
.daily-leaderboard li {
    color: rgba(247,234,209,0.82);
    font-family: 'VT323', monospace;
    font-size: clamp(0.98rem, 1.15vw, 1.25rem);
    line-height: 0.9;
}
.daily-leaderboard {
    border-top: 2px solid rgba(242,195,107,0.25);
    padding-top: 0.55rem;
}
.daily-leaderboard b {
    display: block;
    margin-bottom: 0.35rem;
}
.daily-leaderboard ol {
    margin: 0;
    padding-left: 1.2rem;
}
.daily-review-header {
    margin-bottom: 0.55rem;
}
.daily-review-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}
.daily-review-toolbar span {
    color: #f7d572;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.5rem, 0.65vw, 0.68rem);
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}
.daily-review-toolbar .pixel-btn {
    min-height: 34px;
    padding: 0.45rem 0.55rem !important;
    font-size: clamp(0.46rem, 0.58vw, 0.62rem) !important;
}
.daily-review-grid {
    max-height: min(54vh, 520px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.55rem;
    padding-right: 0.25rem;
}
.daily-review-card {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-height: 210px;
    padding: 0.7rem;
    border: 2px solid rgba(109,89,68,0.9);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.055), transparent 34%),
        rgba(12,6,20,0.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.daily-review-card.today {
    border-color: #f7d572;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 22px rgba(250,204,21,0.14);
}
.daily-review-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    color: #67e8f9;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    line-height: 1.2;
    text-transform: uppercase;
}
.daily-review-card-head b {
    color: rgba(247,234,209,0.78);
    font-weight: 400;
}
.daily-review-card h3 {
    color: #f7d572;
    font-family: 'VT323', monospace;
    font-size: clamp(1.35rem, 1.7vw, 1.7rem);
    line-height: 0.86;
    text-transform: uppercase;
}
.daily-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}
.daily-review-tags span {
    color: #f7ead1;
    border: 1px solid rgba(103,232,249,0.35);
    background: rgba(103,232,249,0.08);
    padding: 0.22rem 0.3rem;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    line-height: 0.86;
    text-transform: uppercase;
}
.daily-review-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}
.daily-review-card p {
    max-width: none;
    color: rgba(247,234,209,0.72);
    font-size: 1rem;
    line-height: 0.92;
}
.daily-review-card p b {
    display: block;
    color: #facc15;
    margin-bottom: 0.2rem;
}
.daily-review-note {
    color: #c4b5fd !important;
    border-top: 1px solid rgba(242,195,107,0.18);
    padding-top: 0.35rem;
}
.menu-detail-card b {
    color: #facc15;
    font-family: 'VT323', monospace;
    font-size: 1em;
    text-transform: uppercase;
}
.menu-detail-icon {
    grid-row: 1 / span 3;
    width: clamp(58px, 6vw, 82px);
    height: clamp(58px, 6vw, 82px);
    display: grid;
    place-items: center;
    margin: 0;
    color: #67e8f9;
    background: #221137;
    border: 3px solid #8b5cf6;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.28);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.menu-detail-kicker {
    display: block;
    color: #67e8f9;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.56rem, 0.68vw, 0.72rem);
    line-height: 0.95;
    text-transform: uppercase;
}
.menu-detail-card h2 {
    max-width: 14ch;
    color: #f7d572;
    font-family: 'VT323', monospace;
    font-size: clamp(2.05rem, 3.45vw, 3.7rem);
    line-height: 0.8;
    text-transform: uppercase;
    word-break: normal;
    overflow-wrap: normal;
    letter-spacing: 0;
    text-shadow: 2px 3px 0 rgba(0,0,0,0.55);
}
.menu-center-grid {
    display: grid;
    gap: 0.7rem;
}
.compact-relic-grid,
.compact-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.howto-card {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(178px, 1fr) auto auto;
    gap: clamp(0.7rem, 1.5vw, 1rem);
    align-content: stretch;
    isolation: isolate;
}
.howto-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.42rem 0.62rem;
    border: 2px solid rgba(242,195,107,0.42);
    background:
        linear-gradient(90deg, rgba(250,204,21,0.12), rgba(103,232,249,0.08)),
        rgba(8,4,14,0.62);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.howto-badge span,
.howto-badge b {
    color: #f7d572;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.5rem, 0.62vw, 0.66rem);
    line-height: 1;
    text-transform: uppercase;
}
.howto-badge b {
    color: #67e8f9;
}
.howto-close {
    position: absolute;
    top: clamp(0.45rem, 1vw, 0.8rem);
    right: clamp(0.45rem, 1vw, 0.8rem);
    z-index: 6;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #f7ead1;
    border: 2px solid rgba(248,113,113,0.8);
    background: rgba(127,29,29,0.82);
    box-shadow: inset -3px -3px 0 rgba(0,0,0,0.28), 0 8px 0 rgba(0,0,0,0.28);
    cursor: pointer;
}
.howto-close:hover,
.howto-close:focus-visible {
    outline: none;
    filter: brightness(1.16);
    transform: translateY(-1px);
}
.howto-art {
    position: relative;
    min-height: clamp(178px, 28vh, 280px);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(139,92,246,0.58);
    background:
        radial-gradient(circle at 50% 48%, rgba(249,115,22,0.12), transparent 42%),
        linear-gradient(135deg, rgba(139,92,246,0.08), rgba(8,4,14,0.5));
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.28),
        inset 0 -30px 60px rgba(0,0,0,0.25),
        0 16px 32px rgba(0,0,0,0.2);
}
.howto-art::after {
    content: "";
    position: absolute;
    inset: 12% -18%;
    z-index: 0;
    background: linear-gradient(100deg, transparent 22%, rgba(247,213,114,0.1) 42%, rgba(103,232,249,0.08) 50%, transparent 70%);
    transform: translateX(-45%) skewX(-15deg);
    animation: howtoLightSweep 4.8s ease-in-out infinite;
    pointer-events: none;
}
.howto-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(103,232,249,0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(247,213,114,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.3;
    animation: howtoGridDrift 9s linear infinite;
}
.howto-svg {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    height: min(100%, 280px);
    overflow: visible;
}
.howto-svg path,
.howto-svg rect,
.howto-svg circle {
    vector-effect: non-scaling-stroke;
}
.howto-lane,
.howto-lane-perspective {
    fill: rgba(242,195,107,0.22);
    stroke: rgba(247,234,209,0.62);
    stroke-width: 3;
}
.howto-lane-center,
.howto-pocket,
.howto-aim-rail,
.howto-aim-arrow,
.howto-impact,
.howto-spark {
    fill: none;
    stroke: #f7d572;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-linejoin: round;
}
.howto-pocket {
    stroke: rgba(103,232,249,0.72);
    animation: howtoPocketGlow 2.8s ease-in-out infinite;
}
.howto-aim-ball,
.howto-roll-ball {
    fill: #6d28d9;
    stroke: #170726;
    stroke-width: 7;
    filter: drop-shadow(0 12px 0 rgba(0,0,0,0.26));
}
.howto-aim-ball {
    animation: howtoAimSlide 3.1s ease-in-out infinite;
}
.howto-aim-arrow.left {
    animation: howtoArrowLeft 3.1s ease-in-out infinite;
}
.howto-aim-arrow.right {
    animation: howtoArrowRight 3.1s ease-in-out infinite;
}
.howto-meter-track {
    fill: rgba(12,6,20,0.8);
    stroke: rgba(247,213,114,0.9);
    stroke-width: 4;
}
.howto-meter-fill {
    fill: url(#howtoMeterGradient);
    opacity: 0.78;
}
.howto-meter-hit {
    fill: rgba(247,213,114,0.85);
    filter: drop-shadow(0 0 12px rgba(250,204,21,0.45));
}
.howto-meter-ball {
    fill: rgba(239,68,68,0.62);
    stroke: rgba(23,7,38,0.95);
    stroke-width: 5;
}
.howto-meter-ball.bottom {
    fill: rgba(20,184,166,0.66);
}
.howto-meter-marker {
    fill: #facc15;
    filter: drop-shadow(0 0 12px rgba(250,204,21,0.48));
    animation: howtoMeterTick 2.25s cubic-bezier(.54,.04,.29,.99) infinite;
}
.howto-spark {
    stroke: #67e8f9;
    opacity: 0.85;
    animation: howtoSpark 1.9s ease-in-out infinite;
}
.howto-spark.two {
    animation-delay: -0.7s;
}
.howto-pin {
    fill: #f8fafc;
    stroke: #170726;
    stroke-width: 6;
    transform-box: fill-box;
    transform-origin: 50% 80%;
}
.howto-pin::selection {
    background: transparent;
}
.howto-pin-rack {
    animation: howtoRackNudge 2.8s ease-in-out infinite;
}
.howto-pin.pin-two {
    animation-delay: -0.2s;
}
.howto-pin.pin-three {
    animation-delay: -0.35s;
}
.howto-roll-ball {
    animation: howtoBallRoll 2.8s ease-in-out infinite;
}
.howto-impact {
    stroke: #fb923c;
    opacity: 0;
    animation: howtoImpactFlash 2.8s ease-in-out infinite;
}
.howto-route-board {
    fill: rgba(36,17,45,0.84);
    stroke: rgba(139,92,246,0.8);
    stroke-width: 4;
}
.howto-route-path {
    fill: none;
    stroke-linecap: square;
    stroke-linejoin: round;
    stroke-width: 8;
}
.howto-route-path.base {
    stroke: rgba(247,213,114,0.42);
}
.howto-route-path.pulse {
    stroke: #67e8f9;
    stroke-dasharray: 34 150;
    animation: howtoRoutePulse 2.6s linear infinite;
}
.howto-route-nodes circle {
    fill: #2e1065;
    stroke: #f7d572;
    stroke-width: 5;
}
.howto-route-icons {
    fill: none;
    stroke: #f7ead1;
    stroke-width: 4;
    stroke-linecap: square;
    stroke-linejoin: round;
}
.howto-copy {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
}
.howto-copy .menu-detail-kicker {
    color: #67e8f9;
}
.howto-copy h2 {
    max-width: none;
    font-size: clamp(2.4rem, 4.4vw, 4.4rem);
    line-height: 0.82;
    color: transparent;
    background: linear-gradient(180deg, #fff6c7 0%, #f7d572 36%, #fb923c 70%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.55));
}
.howto-copy p {
    max-width: 38ch;
    font-size: clamp(1.25rem, 1.55vw, 1.65rem);
    line-height: 1;
}
.howto-controls {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.3rem;
}
.howto-nav-btn {
    min-height: 44px;
    font-size: clamp(0.58rem, 0.72vw, 0.74rem) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.howto-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
}
.howto-dot {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(247,213,114,0.72);
    background: rgba(12,6,20,0.84);
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.32);
    cursor: pointer;
}
.howto-dot.active,
.howto-dot:focus-visible,
.howto-dot:hover {
    outline: none;
    background: #67e8f9;
    border-color: #f7d572;
    box-shadow: 0 0 14px rgba(103,232,249,0.45);
}
.burst.back { fill: #7c2d12; opacity: 0.72; }
.burst.front { fill: url(#pinfallFlame); stroke: #2e1065; stroke-width: 8; animation: burstPulse 4.8s ease-in-out infinite; transform-origin: 260px 220px; }
.hero-ball { fill: url(#pinfallBall); stroke: #170726; stroke-width: 8; animation: ballBreath 5.2s ease-in-out infinite; transform-origin: 260px 224px; }
.ball-shine { fill: rgba(255,255,255,0.25); }
.ball-hole { fill: #170726; }
.player-hub-panel {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 1.55rem 0.8rem 0.8rem;
    background: rgba(16, 8, 26, 0.94);
    border-top: 3px solid #9333ea;
}
.hub-label {
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 1rem;
    color: #f7d572;
    background: #24112d;
    border: 3px solid #8b5cf6;
    box-shadow: 0 0 0 2px #08030d;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    text-transform: uppercase;
    white-space: nowrap;
}
.hub-btn {
    min-height: 46px;
    padding: 0.62rem !important;
    font-size: clamp(0.58rem, 0.75vw, 0.75rem) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.34), inset 3px 3px 0 rgba(255,255,255,0.16), 0 8px 0 rgba(0,0,0,0.36);
    transition: transform 0.16s ease, filter 0.16s ease;
}
.hub-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}
.primary-hub-btn {
    grid-column: 1 / -1;
    min-height: 58px;
    font-size: clamp(0.7rem, 0.95vw, 0.9rem) !important;
    background:
        linear-gradient(90deg, rgba(103,232,249,0.14), rgba(250,204,21,0.1)),
        #4b4b4b !important;
    border-color: #f2c36b !important;
    box-shadow:
        inset -5px -5px 0 rgba(0,0,0,0.34),
        inset 4px 4px 0 rgba(255,255,255,0.16),
        0 8px 0 rgba(0,0,0,0.36),
        0 0 22px rgba(250,204,21,0.12);
}
.gray-cell { background: #4b4b4b !important; border-color: #a3a3a3 !important; }
.amber-cell { background: #5b3a24 !important; border-color: #f2c36b !important; }
.teal-cell { background: #0f7f8d !important; border-color: #67e8f9 !important; }
.red-cell { background: #7f1d1d !important; border-color: #f87171 !important; }
.daily-panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 3px solid #9333ea;
    background: rgba(25, 14, 40, 0.9);
    box-shadow: inset 0 0 0 2px #090314, 0 14px 30px rgba(0,0,0,0.34);
    padding: clamp(0.9rem, 1.2vw, 1.2rem);
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    animation: panelBreath 8.2s ease-in-out infinite reverse;
}
.daily-title {
    width: fit-content;
    margin: 0 auto 0.65rem;
    padding: 0.34rem 0.72rem;
    color: #f7d572;
    border: 2px solid #8b5cf6;
    background: #24112d;
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
}
.daily-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    text-align: center;
    color: #f7ead1;
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    line-height: 1.3;
    margin-bottom: 0.45rem;
}
.daily-summary-title {
    color: #f7ead1;
}
.daily-date-chip {
    display: inline-grid;
    place-items: center;
    padding: 0.18rem 0.46rem;
    border: 1px solid rgba(247, 213, 114, 0.7);
    background: rgba(90, 50, 24, 0.88);
    color: #f7d572;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
    font-size: 0.74em;
    line-height: 1;
    white-space: nowrap;
}
.seed-entry {
    display: grid;
    gap: 0.45rem;
    margin: 0.65rem 0 0.85rem;
    color: #f7d572;
    font-size: 0.78rem;
    text-transform: uppercase;
}
.seed-entry input {
    width: 100%;
    border: 2px solid #8b5cf6;
    background: rgba(8, 4, 15, 0.76);
    color: #f7ead1;
    padding: 0.7rem 0.8rem;
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
}
.seed-entry input:focus {
    border-color: #f7d572;
    box-shadow: 0 0 0 3px rgba(247, 213, 114, 0.16), inset 0 0 0 2px rgba(0,0,0,0.35);
}
.seed-entry small {
    color: rgba(247,234,209,0.62);
    font-size: 0.74rem;
    line-height: 1.2;
    text-transform: none;
}
.seed-chip {
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 2px solid rgba(247, 213, 114, 0.72);
    background: rgba(36, 17, 45, 0.9);
    color: #c7f9ff;
    padding: 0.42rem 0.68rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.32);
}
.seed-chip span {
    color: #f7d572;
}
.pause-seed-chip {
    align-self: stretch;
    justify-content: center;
    font-size: 0.68rem;
}
.daily-score-card {
    appearance: none;
    width: 100%;
    margin: 0 0 0.45rem;
    padding: 0.42rem 0.5rem;
    border: 2px solid rgba(242,195,107,0.52);
    background: rgba(8,4,14,0.6);
    color: #facc15;
    font-family: 'VT323', monospace;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 0.95;
    text-transform: uppercase;
    cursor: pointer;
}
.daily-score-card:hover,
.daily-score-card:focus-visible {
    outline: none;
    border-color: #f7d572;
    filter: brightness(1.12);
}
.debug-only {
    display: none !important;
}
body.debug-mode .debug-only {
    display: inline-grid !important;
}
.daily-review-btn {
    width: 100%;
    margin: 0 0 0.45rem;
    min-height: 34px;
    place-items: center;
    border: 2px solid rgba(103,232,249,0.55);
    background: rgba(14,116,144,0.28);
    color: #67e8f9;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.46rem, 0.6vw, 0.62rem);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}
.daily-review-btn:hover,
.daily-review-btn:focus-visible {
    outline: none;
    filter: brightness(1.15);
    border-color: #f7d572;
}
.daily-start-btn {
    width: 100%;
    padding: 0.58rem 0.7rem;
    background: #0f766e !important;
    border-color: #5eead4 !important;
    color: #f7ead1;
    font-size: clamp(0.56rem, 0.68vw, 0.72rem);
    text-align: center;
}
.daily-panel h3 {
    color: #f7d572;
    font-family: 'VT323', monospace;
    font-size: clamp(1.15rem, 1.45vw, 1.55rem);
    line-height: 1;
    margin: clamp(0.75rem, 1.3vh, 1.1rem) 0 0.38rem;
    text-transform: uppercase;
}
.daily-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
}
.daily-icon-grid.map-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.daily-icon-card {
    aspect-ratio: 1;
    appearance: none;
    padding: 0;
    cursor: pointer;
    border: 2px solid #6d5944;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 45%), #24112d;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);
    animation: iconDrift 7s ease-in-out infinite;
    transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.daily-icon-card:hover,
.daily-icon-card:focus-visible,
.daily-icon-card.active {
    outline: none;
    border-color: #f7d572;
    filter: brightness(1.18);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3), 0 0 20px rgba(250,204,21,0.18);
}
.daily-icon-card svg {
    width: 76%;
    height: 76%;
    fill: none;
    stroke: #f7ead1;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-linejoin: round;
}
.daily-icon-card:nth-child(2) { animation-delay: -1.2s; }
.daily-icon-card:nth-child(3) { animation-delay: -2.4s; }
.daily-icon-card:nth-child(4) { animation-delay: -3.1s; }
.daily-icon-card.route { background-color: #3b2352; }
.daily-icon-card.oil { background-color: #173f48; }
.daily-icon-card.split { background-color: #6b3d21; }
.daily-icon-card.boss { background-color: #102d44; }
.daily-icon-card.shop { background-color: #0f766e; }
.daily-icon-card.bag { background-color: #b7791f; }
.daily-icon-card.pins svg,
.daily-icon-card.eventpin svg,
.daily-icon-card.pair svg { stroke: #f8fafc; }
.daily-icon-card.medal svg { stroke: #facc15; }
.arcade-menu-shell .menu-control-strip {
    position: relative;
    z-index: 4;
    width: fit-content;
    max-width: calc(100% - 4rem);
    justify-self: center;
    margin-bottom: -0.1rem;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.48rem, 0.72vw, 0.65rem) !important;
    background: rgba(17, 9, 28, 0.96);
    border: 3px solid #8b5cf6;
    box-shadow: 0 0 0 2px #08030d;
}
.arcade-menu-shell .menu-control-strip span {
    font-family: 'VT323', monospace;
    color: rgba(247,234,209,0.64);
    letter-spacing: 0.02em;
}
.arcade-menu-shell .menu-control-strip b {
    color: #facc15;
    text-transform: uppercase;
}
/* The arcade frame must remain usable at laptop-height desktop viewports. */
@media (min-width: 1001px) and (max-height: 1050px) {
    .arcade-menu-shell {
        gap: 0.55rem !important;
    }
    .arcade-logo-row {
        padding-top: 0;
    }
    .arcade-logo-row .pinfall-logo {
        font-size: clamp(2.7rem, 4.4vw, 4.2rem);
    }
    .arcade-logo-row .pinfall-subtitle {
        margin-top: 0.12rem;
        font-size: clamp(1rem, 1.65vw, 1.4rem);
    }
    .arcade-left-stack {
        gap: 0.65rem;
    }
    .arcade-main-grid .menu-mode-card {
        padding: 0.72rem !important;
        gap: 0.55rem !important;
    }
    .arcade-main-grid .mode-card-main {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 0.65rem;
    }
    .arcade-main-grid .mode-card-icon {
        width: 54px;
    }
    .practice-menu-button {
        gap: 0.2rem;
        padding: 0.65rem 0.8rem;
        margin-bottom: 0;
    }
    .arcade-left-stack .run-slots {
        display: none;
    }
    .daily-panel {
        justify-content: flex-start;
        gap: 0.28rem;
        overflow-y: auto;
    }
    .daily-panel h3 {
        margin: 0.35rem 0 0.12rem;
    }
    .daily-summary {
        font-size: 0.95rem;
        line-height: 1.1;
        margin-bottom: 0.15rem;
    }
    .daily-title, .daily-score-card {
        margin-bottom: 0.1rem;
    }
    .daily-icon-card {
        aspect-ratio: auto;
        height: clamp(52px, 6.8vh, 70px);
    }
}
.menu-extra-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }
.run-slots { display: grid; gap: 0.45rem; margin-top: 0.85rem; }
.run-slot { width: 100%; border: 1px solid rgba(242,195,107,0.35); background: rgba(18,9,8,0.72); color: #f7ead1; padding: 0.65rem; text-align: left; font-family: 'VT323', monospace; font-size: clamp(1rem, 1.12vw, 1.2rem); line-height: 0.95; text-transform: uppercase; cursor: pointer; }
.run-slot:hover, .run-slot:focus-visible { outline: none; border-color: #f7d572; filter: brightness(1.12); }
.run-slot b { color: #facc15; display: block; font-size: clamp(1.08rem, 1.25vw, 1.35rem); }
.run-slot.empty { color: rgba(247,234,209,0.66); border-style: dashed; }
.meta-screen { background: radial-gradient(circle at 18% 12%, rgba(245,158,11,0.16), transparent 28%), radial-gradient(circle at 84% 8%, rgba(168,85,247,0.16), transparent 32%), rgba(8,3,14,0.97); }
.meta-panel { border: 3px solid #f2c36b; background: linear-gradient(180deg, rgba(38,20,24,0.96), rgba(10,6,10,0.98)); box-shadow: 0 28px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.07); padding: clamp(1rem, 3vw, 2rem); }
.meta-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(242,195,107,0.28); padding-bottom: 1rem; margin-bottom: 1rem; }
.meta-header h2 { color: #facc15; font-size: clamp(1.2rem, 3vw, 2rem); margin: 0; }
.meta-header p { color: rgba(247,234,209,0.68); font-size: 12px; margin-top: 0.35rem; }
.tutorial-grid, .relic-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.roguelike-hub-grid { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(260px, 1fr); gap: 1rem; align-items: stretch; }
.roguelike-hub-primary, .roguelike-hub-grid section { border: 2px solid rgba(109,89,68,0.9); background: rgba(0,0,0,0.32); padding: 1rem; }
.roguelike-hub-primary span, .roguelike-hub-grid h3 { color: #c4b5fd; font-size: 10px; text-transform: uppercase; }
.roguelike-hub-primary strong { display: block; color: #facc15; font-size: clamp(1.2rem, 3vw, 2rem); margin-top: 0.45rem; }
.roguelike-hub-primary p { color: rgba(247,234,209,0.72); font-size: 12px; line-height: 1.5; margin: 0.65rem 0 1rem; }
.roguelike-hub-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; }
.roguelike-start-actions { display: grid; gap: 0.65rem; }
.roguelike-hub-detail {
    grid-column: 1 / -1;
    border-color: #8b5cf6 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
        rgba(18,8,28,0.78) !important;
}
#roguelike-run-screen .meta-panel {
    border: 4px solid #8b5cf6;
    outline: 2px solid #f2c36b;
    background:
        linear-gradient(90deg, rgba(147,51,234,0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(35,16,50,0.97), rgba(12,5,18,0.98));
    background-size: 28px 28px, auto;
}
#roguelike-run-screen .meta-header h2 {
    color: transparent;
    background: linear-gradient(180deg, #ffe08a 0%, #fb923c 52%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 3px 4px 0 rgba(0,0,0,0.45);
}
.tutorial-grid article, .relic-card, .stat-card { border: 2px solid rgba(109,89,68,0.9); background: rgba(0,0,0,0.32); padding: clamp(0.9rem, 1.2vw, 1.15rem); min-height: 132px; }
.tutorial-grid b, .relic-card b, .stat-card b { color: #facc15; font-family: 'VT323', monospace; font-size: clamp(1.18rem, 1.55vw, 1.55rem); line-height: 0.9; text-transform: uppercase; }
.tutorial-grid p, .relic-card p, .stat-card p { margin-top: 0.65rem; color: rgba(247,234,209,0.82); font-family: 'VT323', monospace; font-size: clamp(1.12rem, 1.35vw, 1.35rem); line-height: 1.02; }
.relic-card { cursor: pointer; }
.relic-card.selected { border-color: #34d399; box-shadow: 0 0 28px rgba(52,211,153,0.18); }
.relic-icon { float: right; color: #c084fc; font-size: clamp(30px, 3vw, 42px); margin-left: 0.6rem; }
.boss-intro-screen { display: grid; place-items: center; background: radial-gradient(circle at 50% 25%, rgba(239,68,68,0.24), transparent 30%), rgba(6,2,8,0.94); }
.boss-intro-screen.hidden { display: none; }
.boss-intro-panel { max-width: 620px; width: min(100%, 620px); border: 4px solid #facc15; background: linear-gradient(180deg, rgba(44,11,18,0.98), rgba(7,4,7,0.98)); padding: clamp(1.25rem, 4vw, 2.5rem); text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.72), 0 0 48px rgba(239,68,68,0.24); }
.boss-intro-sigil { width: 74px; height: 74px; margin: 0 auto 1rem; display: grid; place-items: center; color: #facc15; border: 3px solid #facc15; background: rgba(0,0,0,0.45); font-size: 30px; }
.boss-intro-panel > span { color: #fb7185; font-size: 11px; text-transform: uppercase; }
.boss-intro-panel h2 { color: #fff7c2; font-size: clamp(1.8rem, 6vw, 3.6rem); margin: 0.35rem 0; }
.boss-intro-panel p { color: rgba(247,234,209,0.78); font-size: 13px; line-height: 1.55; }
.boss-intro-rule { border: 2px solid rgba(248,113,113,0.55); color: #fecaca; background: rgba(127,29,29,0.32); padding: 0.85rem; margin: 1.2rem 0; font-size: 11px; text-transform: uppercase; }
.save-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; border-top: 1px solid rgba(167,139,250,0.35); padding-top: 0.85rem; }
.save-slots span { grid-column: 1 / -1; color: #c4b5fd; font-size: 9px; text-transform: uppercase; }
@media (max-width: 760px) {
    .roguelike-hub-grid { grid-template-columns: 1fr; }
}
#shop-screen > div,
#pause-screen > div,
#game-over-screen > div {
    background:
        linear-gradient(180deg, rgba(36, 23, 15, 0.98), rgba(10, 7, 5, 0.98)) !important;
    border-color: var(--ui-gold) !important;
}
#shop-screen > div {
    max-height: calc(100vh - 2rem);
}
.shop-shell {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 0%, rgba(242, 119, 67, 0.18), transparent 34%),
        radial-gradient(circle at 18% 20%, rgba(139, 77, 172, 0.22), transparent 38%),
        linear-gradient(180deg, rgba(36, 23, 15, 0.98), rgba(10, 7, 5, 0.98)) !important;
}
.shop-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 226, 161, 0.12), transparent),
        repeating-linear-gradient(90deg, rgba(242,195,107,0.025) 0 1px, transparent 1px 54px);
    opacity: 0.58;
    transform: translateX(-38%);
    animation: shopLightSweep 6.2s ease-in-out infinite;
}
.shop-header,
.shop-footer,
#shop-items-container {
    position: relative;
    z-index: 1;
}
.shop-cash-bank {
    background:
        linear-gradient(135deg, rgba(255, 226, 121, 0.12), rgba(0,0,0,0.32)),
        rgba(72, 37, 12, 0.72) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.28);
}
#shop-items-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(430px, calc(100vh - 320px), 680px);
}
#shop-items-container > div {
    background: rgba(31, 20, 13, 0.9) !important;
    border-color: rgba(109, 89, 68, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 12px 24px rgba(0,0,0,0.22);
}
#shop-items-container > div:has(button:not(:disabled)) {
    border-color: rgba(242, 195, 107, 0.7) !important;
}
.shop-card {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 1rem;
    min-height: 214px;
    padding: 1.05rem;
    overflow: hidden;
    border: 3px solid rgba(109, 89, 68, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(90deg, var(--shop-accent, #f2c36b) 0 8px, transparent 8px),
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--shop-accent, #f2c36b) 30%, transparent), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%),
        linear-gradient(180deg, rgba(44, 28, 18, 0.96), rgba(18, 11, 8, 0.98)) !important;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.shop-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 38%, color-mix(in srgb, var(--shop-accent, #f2c36b) 14%, transparent) 45%, transparent 54%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 7px);
    opacity: 0.78;
}
.shop-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 96px;
    aspect-ratio: 1;
    border: 16px solid color-mix(in srgb, var(--shop-accent, #f2c36b) 24%, transparent);
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
}
.shop-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}
.shop-card-affordable {
    border-color: color-mix(in srgb, var(--shop-accent, #f2c36b) 72%, #f2c36b) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 16px 30px rgba(0,0,0,0.28), 0 0 24px color-mix(in srgb, var(--shop-accent, #f2c36b) 15%, transparent) !important;
}
.shop-card-locked {
    filter: saturate(0.72);
    opacity: 0.74;
}
.shop-card-sold-out {
    opacity: 0.58;
    filter: saturate(0.62);
}
.shop-card-main {
    position: relative;
    z-index: 1;
}
.shop-card-sold-out .shop-card-main::after {
    content: "SOLD";
    position: absolute;
    right: 0.35rem;
    bottom: 0.25rem;
    color: rgba(250, 204, 21, 0.28);
    font-size: 24px;
    letter-spacing: 0.08em;
    transform: rotate(-9deg);
    pointer-events: none;
}
.shop-card-head {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 0.7rem;
    align-items: start;
    margin-bottom: 0.75rem;
}
.shop-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    aspect-ratio: 1;
    color: var(--shop-accent, #f2c36b);
    border: 2px solid color-mix(in srgb, var(--shop-accent, #f2c36b) 55%, #0b0705);
    background: rgba(0,0,0,0.28);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.24), 0 0 18px color-mix(in srgb, var(--shop-accent, #f2c36b) 18%, transparent);
}
.shop-card-title {
    color: #ffe37d;
    font-size: 12px;
    line-height: 1.25;
    text-transform: uppercase;
}
.shop-card-price {
    color: #ffe37d;
    background:
        linear-gradient(180deg, rgba(255, 226, 121, 0.12), rgba(0,0,0,0.34)),
        rgba(0,0,0,0.5);
    border: 2px solid color-mix(in srgb, var(--shop-accent, #f2c36b) 54%, #facc15);
    padding: 0.45rem 0.55rem;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.28);
}
.shop-card p {
    color: rgba(247,234,209,0.72);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 0.7rem;
}
.shop-card-action {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0.85rem 0.75rem !important;
    font-size: 10px !important;
}
.shop-footer {
    margin: 0 -0.6rem -0.6rem;
    padding: 1rem 0.6rem 0.6rem !important;
    background:
        linear-gradient(180deg, rgba(139,77,172,0.12), rgba(0,0,0,0.28));
    border-top-color: rgba(242,195,107,0.26) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 300px) minmax(230px, 320px);
    align-items: center !important;
}
#shop-next-goal-row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
    overflow: hidden;
}
#shop-next-target {
    min-width: 0;
    font-size: clamp(0.95rem, 1.08vw, 1.08rem) !important;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
#btn-next-frame,
#btn-shop-reroll,
#btn-tenpin-reroll-shop {
    min-width: min(100%, 300px);
    white-space: nowrap;
    box-shadow: inset -4px -4px 0 rgba(0,0,0,0.28), 0 12px 28px rgba(0,0,0,0.32), 0 0 22px rgba(52,211,153,0.16);
}
#btn-next-frame {
    margin-left: 0;
}
.shop-card-ball { --shop-accent: #38d9ff; }
.shop-card-pins { --shop-accent: #facc15; }
.shop-card-control { --shop-accent: #a78bfa; }
.shop-card-consistency { --shop-accent: #34d399; }
.shop-card-one-throw { --shop-accent: #fb7185; }
.shop-card-economy { --shop-accent: #f59e0b; }
.shop-category-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.24rem 0.38rem;
    border: 1px solid rgba(242, 195, 107, 0.34);
    background: rgba(242, 195, 107, 0.08);
    color: #d7c5a6;
    font-size: 10px;
    line-height: 1;
}
.event-choice {
    border: 2px solid rgba(242, 195, 107, 0.42);
    background: rgba(20, 13, 9, 0.86);
    color: var(--ui-cream);
    padding: 1.15rem;
    min-height: 142px;
    transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}
.event-choice:hover {
    transform: translateY(-2px);
    border-color: var(--ui-gold);
    filter: brightness(1.08);
}
.event-choice strong {
    display: block;
    color: var(--ui-gold);
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}
.event-choice span {
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.45;
}
.vocab-keyword {
    position: relative;
    display: inline;
    padding: 0 0.12em;
    border-bottom: 1px dotted currentColor;
    text-shadow: 0 0 8px color-mix(in srgb, currentColor 45%, transparent);
    cursor: help;
}
.vocab-keyword::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 0.12em;
    background: currentColor;
    opacity: 0.18;
    pointer-events: none;
}
.vocab-tooltip {
    position: fixed;
    z-index: 160;
    max-width: 310px;
    padding: 10px 12px;
    color: #f7ead1;
    background: rgba(20, 13, 9, 0.98);
    border: 2px solid rgba(242, 195, 107, 0.72);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
    pointer-events: none;
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.08;
}
.vocab-tooltip strong,
.vocab-tooltip span {
    display: block;
}
.vocab-tooltip strong {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.35;
    margin-bottom: 7px;
}
.vocab-tooltip span {
    color: #d7c5a6;
}

.legend-tab {
    border: 2px solid rgba(242, 195, 107, 0.35);
    background: rgba(20, 13, 9, 0.78);
    color: var(--ui-muted);
    padding: 0.75rem 0.9rem;
    font-size: 11px;
    text-transform: uppercase;
}
.legend-tab.active {
    border-color: var(--ui-gold);
    color: var(--ui-cream);
    background: rgba(91, 58, 36, 0.9);
}
.legend-card {
    min-height: 138px;
    padding: 1rem;
    border: 2px solid rgba(242, 195, 107, 0.28);
    background: rgba(20, 13, 9, 0.86);
    overflow-wrap: anywhere;
}
.legend-card h3 {
    color: var(--ui-gold);
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 0.55rem;
}
.legend-card p {
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.55;
}
.legend-card .legend-meta {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.65rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid rgba(242, 195, 107, 0.34);
    color: #d7c5a6;
    font-size: 9px;
    text-transform: uppercase;
}
.legend-unknown {
    display: grid;
    place-items: center;
}
.legend-unknown-text {
    display: inline-block;
    color: rgba(247, 234, 209, 0.56);
    letter-spacing: 0.08em;
    font-size: 13px;
    transform-origin: left center;
}
.item-char {
    display: inline-block;
}
.legend-unknown-text .item-char {
    animation: selectedTextWiggle 1.9s calc(var(--char-index) * 0.035s) ease-in-out infinite;
}
.info-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.info-tooltip-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(242, 195, 107, 0.72);
    border-radius: 999px;
    color: #f2c36b;
    font-size: 10px;
    line-height: 1;
    background: rgba(20, 13, 9, 0.92);
    cursor: help;
}
.info-tooltip-text {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 120;
    width: min(310px, calc(100vw - 48px));
    transform: translateX(-50%);
    padding: 12px 13px;
    color: #f7ead1;
    background: rgba(20, 13, 9, 0.98);
    border: 2px solid rgba(242, 195, 107, 0.72);
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.12;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.info-tooltip-wrap:hover .info-tooltip-text,
.info-tooltip-wrap:focus-within .info-tooltip-text {
    opacity: 1;
}
.legend-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.gain-float {
    position: absolute;
    left: 50%;
    top: 28%;
    z-index: 48;
    transform: translate(-50%, 0);
    color: #facc15;
    text-shadow: 0 2px 0 #140c06, 0 0 16px rgba(250, 204, 21, 0.5);
    font-size: 13px;
    pointer-events: none;
    animation: gainFloat 1.15s ease-out forwards;
}
.pin-payout-fx {
    position: absolute;
    z-index: 49;
    transform: translate(-50%, -100%);
    min-width: 70px;
    max-width: 180px;
    padding: 8px 9px;
    color: #facc15;
    background: rgba(20, 13, 9, 0.92);
    border: 2px solid rgba(242, 195, 107, 0.72);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 18px rgba(250, 204, 21, 0.28);
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
    animation: pinPayoutPop 1.05s cubic-bezier(.2, 1.4, .35, 1) forwards;
}
.pin-payout-fx span {
    display: block;
    color: #d7c5a6;
    font-size: 8px;
    margin-top: 3px;
    white-space: normal;
}
.special-use-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: specialOverlayIn 0.22s steps(4, end) both;
}
.special-use-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(247, 213, 114, 0.13), transparent 34%),
        rgba(6, 3, 12, 0.42);
    animation: specialOverlayPulse 1.4s ease-in-out infinite;
}
.special-use-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: min(92vw, 620px);
    border: 4px solid #f7d572;
    background:
        linear-gradient(135deg, rgba(50, 20, 70, 0.96), rgba(18, 9, 8, 0.98)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8px);
    box-shadow: inset 0 0 0 3px #090314, 0 22px 54px rgba(0,0,0,0.55), 0 0 42px rgba(247, 213, 114, 0.24);
    padding: clamp(1rem, 2.6vw, 1.55rem);
    transform: translateY(-4vh);
}
.special-use-icon {
    display: grid;
    place-items: center;
    width: clamp(54px, 9vw, 76px);
    aspect-ratio: 1;
    border: 3px solid #8b5cf6;
    background: rgba(10, 4, 18, 0.82);
    color: #c084fc;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.36);
}
.special-use-kicker {
    display: inline-block;
    color: #7dd3fc;
    font-size: clamp(0.72rem, 1.6vw, 0.9rem);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.special-use-card h2 {
    color: #f7d572;
    font-size: clamp(1.55rem, 5vw, 3.05rem);
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #4b1d13;
}
.special-use-card p {
    color: #f7ead1;
    font-size: clamp(1rem, 2.2vw, 1.28rem);
    line-height: 1.2;
    margin-top: 0.45rem;
}
.special-use-overlay.is-leaving {
    animation: specialOverlayOut 0.42s steps(5, end) both;
}
.strike-spark {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(11, 7, 5, 0.7);
    background: #facc15;
    box-shadow: 0 0 14px rgba(250,204,21,0.78), 0 0 28px rgba(34,211,238,0.32);
    pointer-events: none;
    animation: strikeSparkFly 1s cubic-bezier(.14, .82, .24, 1) forwards;
}
.strike-spark:nth-child(3n) {
    background: #8bd4e6;
}
.strike-spark:nth-child(4n) {
    background: #f7ead1;
}
@keyframes gainFloat {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(0.82); }
    16% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
    100% { opacity: 0; transform: translate(-50%, -72px) scale(1); }
}
@keyframes strikeSparkFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    }
    14% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-x, 0px)), calc(-50% + var(--spark-y, -90px))) scale(0.12) rotate(var(--spark-rot, 180deg));
    }
}
@keyframes titlePinFallA {
    0% { transform: translate(0, 0) rotate(52deg) scale(1); }
    48% { transform: translate(1.6vw, -1.2vh) rotate(72deg) scale(1.02); }
    100% { transform: translate(2.4vw, 0.6vh) rotate(82deg) scale(1.01); }
}
@keyframes titlePinFallB {
    0% { transform: translate(0, 0) rotate(76deg) scale(1.12); }
    52% { transform: translate(-0.8vw, -0.8vh) rotate(94deg) scale(1.14); }
    100% { transform: translate(-1.4vw, 0.4vh) rotate(104deg) scale(1.12); }
}
@keyframes titlePinFallC {
    0% { transform: translate(0, 0) rotate(28deg) scale(0.86); }
    54% { transform: translate(1vw, -1.4vh) rotate(42deg) scale(0.9); }
    100% { transform: translate(1.8vw, 0.2vh) rotate(50deg) scale(0.88); }
}
@keyframes titleBallRoll {
    0% { transform: translate(-1vw, 0.3vh) rotate(-8deg); }
    100% { transform: translate(3.5vw, -1.4vh) rotate(18deg); }
}
@keyframes titleBallHalo {
    0% { transform: translate(-1.5vw, 1vh) scale(0.98); opacity: 0.48; }
    100% { transform: translate(2vw, -1vh) scale(1.04); opacity: 0.68; }
}
@keyframes menuLaneParallax {
    0% { transform: translate(-0.8vw, 0.4vh) skewX(-8deg); opacity: 0.72; }
    100% { transform: translate(1.1vw, -0.6vh) skewX(-8deg); opacity: 0.86; }
}
@keyframes titleLaneSweep {
    0%, 100% { transform: translateX(-5%); opacity: 0.32; }
    48% { transform: translateX(6%); opacity: 0.62; }
}
@keyframes logoPixelGlint {
    0%, 52%, 100% { transform: translateX(-85%) skewX(-15deg); opacity: 0; }
    62% { opacity: 0.58; }
    74% { transform: translateX(85%) skewX(-15deg); opacity: 0; }
}
@keyframes titleGlint {
    0%, 58%, 100% { opacity: 0; transform: translateX(-18%) scaleX(0.4); }
    68% { opacity: 0.82; transform: translateX(0) scaleX(1); }
    78% { opacity: 0; transform: translateX(18%) scaleX(0.5); }
}
@keyframes shopLightSweep {
    0%, 100% { transform: translateX(-42%); opacity: 0.26; }
    48% { transform: translateX(42%); opacity: 0.66; }
}
@keyframes pinPayoutPop {
    0% { opacity: 0; transform: translate(-50%, -70%) scale(0.72); }
    16% { opacity: 1; transform: translate(-50%, -110%) scale(1.12); }
    64% { opacity: 1; transform: translate(-50%, -136%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -168%) scale(0.86); }
}
@keyframes specialOverlayIn {
    from { opacity: 0; transform: scale(1.04); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes specialOverlayOut {
    to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}
@keyframes specialOverlayPulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@media (max-height: 760px) and (min-width: 800px) {
    .pinfall-menu-inner {
        justify-content: flex-start;
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 0.72rem !important;
    }

    .pinfall-logo {
        font-size: clamp(2.3rem, 5vw, 4.05rem);
    }

    .pinfall-subtitle {
        margin-top: 0.45rem;
        font-size: clamp(1.1rem, 2.4vw, 1.55rem);
    }

    .pinfall-lane-stripes {
        height: 26px;
        margin-top: 0.42rem;
    }

    .menu-mode-card {
        min-height: 184px;
    }

    .menu-bottom-panel {
        display: none;
    }

    .arcade-menu-shell {
        min-height: calc(100dvh - 0.7rem) !important;
        max-height: calc(100dvh - 0.7rem);
        padding: 0.55rem 0.8rem !important;
        gap: 0.4rem !important;
    }

    .arcade-logo-row {
        padding-top: 0;
    }

    .arcade-logo-row .pinfall-logo {
        font-size: clamp(2.35rem, 5.2vw, 4.1rem);
    }

    .arcade-logo-row .pinfall-subtitle {
        margin-top: 0.18rem;
        font-size: clamp(1rem, 2vw, 1.45rem);
    }

    .logo-pin-svg {
        width: clamp(28px, 3vw, 42px);
    }

    .arcade-main-grid {
        gap: 0.8rem;
        padding: 0 2rem;
    }

    .arcade-left-stack {
        gap: 0.65rem;
    }

    .arcade-main-grid .menu-mode-card {
        padding: 0.72rem !important;
    }

    .arcade-main-grid .mode-card-main {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 0.65rem;
    }

    .arcade-main-grid .mode-card-icon {
        width: 52px;
    }

    .arcade-main-grid .mode-card-main h3 {
        font-size: clamp(1.1rem, 1.55vw, 1.45rem);
    }

    .arcade-main-grid .mode-card-main p {
        font-size: clamp(0.72rem, 0.7vw, 0.82rem);
        line-height: 1.05;
    }

    .run-slots {
        display: none;
    }

    .run-slot {
        padding: 0.48rem;
    }

    .central-bowling-graphic svg {
        max-height: 270px;
    }

    .player-hub-panel {
        padding: 1.25rem 0.65rem 0.65rem;
        gap: 0.45rem;
    }

    .hub-btn {
        min-height: 38px;
        padding: 0.45rem !important;
    }

    .daily-panel {
        padding: 0.72rem;
    }

    .daily-panel h3 {
        margin-top: 0.55rem;
        font-size: clamp(0.95rem, 1.25vw, 1.22rem);
    }

    .daily-summary,
    .daily-title {
        font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    }
}
#loading-bar {
    background: linear-gradient(90deg, #9eb27a, #f2c36b) !important;
}
#loading-screen .bg-clip-text,
#main-menu .bg-clip-text {
    color: var(--ui-gold) !important;
    background-image: none !important;
}
.debug-action-menu {
    position: absolute;
    right: 20px;
    top: 70px;
    width: min(380px, calc(100vw - 32px));
    padding: 18px;
    color: var(--ui-cream);
    background:
        linear-gradient(180deg, rgba(36, 23, 15, 0.98), rgba(10, 7, 5, 0.98));
    border: 2px solid var(--ui-gold);
    border-radius: 6px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.debug-action-key {
    display: inline-flex;
    padding: 7px 9px;
    color: var(--ui-gold);
    border: 1px solid rgba(242, 195, 107, 0.5);
    background: rgba(242, 195, 107, 0.08);
    font-size: 8px;
    white-space: nowrap;
}
.debug-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.debug-action-grid button {
    min-height: 42px;
    padding: 9px 8px;
    color: #f7ead1;
    background: rgba(20, 13, 9, 0.86);
    border: 1px solid rgba(242, 195, 107, 0.42);
    border-radius: 4px;
    font-size: 8px;
    line-height: 1.35;
    transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}
.debug-action-grid button:hover {
    transform: translateY(-1px);
    border-color: var(--ui-gold);
    filter: brightness(1.1);
}

#debug-panel {
    border-color: #8ab3bd;
}
.route-map-board {
    position: relative;
    min-height: 460px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 2px solid rgba(242, 195, 107, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(242,195,107,0.06) 1px, transparent 1px),
        linear-gradient(rgba(242,195,107,0.045) 1px, transparent 1px),
        #130d09;
    background-size: 8.333% 100%, 100% 33.333%, auto;
}
.route-map-board::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0,0,0,0.18) 100%);
}
#route-options-container {
    position: relative;
    min-width: 1500px;
    min-height: 430px;
}
#route-map-lines {
    position: absolute;
    inset: 0;
    min-width: 1500px;
    height: 100%;
    overflow: visible;
}

@media (max-width: 760px) and (orientation: portrait) {
    body {
        background: #07030f;
    }

    #loading-screen,
    #main-menu,
    #shop-screen,
    #route-screen,
    #event-screen,
    #game-over-screen,
    #pause-screen,
    #legend-screen,
    #tenpin-scoreboard-screen,
    #tenpin-rack-screen {
        padding-top: max(1rem, calc(var(--safe-top) + 0.75rem)) !important;
        padding-right: max(0.75rem, calc(var(--safe-right) + 0.75rem)) !important;
        padding-bottom: max(1rem, calc(var(--safe-bottom) + 0.75rem)) !important;
        padding-left: max(0.75rem, calc(var(--safe-left) + 0.75rem)) !important;
        justify-content: flex-start !important;
    }

    #loading-screen {
        justify-content: center !important;
        align-items: center !important;
    }

    .studio-splash img {
        width: min(72vw, 420px);
    }

    #game-hud {
        padding-top: max(0.55rem, calc(var(--safe-top) + 0.38rem)) !important;
        padding-right: max(0.55rem, calc(var(--safe-right) + 0.38rem)) !important;
        padding-bottom: max(0.55rem, calc(var(--safe-bottom) + 0.38rem)) !important;
        padding-left: max(0.55rem, calc(var(--safe-left) + 0.38rem)) !important;
    }

    #btn-debug-mode {
        display: none;
    }

    #game-hud > div:first-child {
        align-items: flex-start;
        gap: 0.4rem;
        pointer-events: none;
    }

    #score-hud-panel {
        max-width: calc(100vw - 7.2rem);
        min-width: min(16.2rem, calc(100vw - 7.2rem));
        padding: 0.5rem 0.55rem !important;
        border-width: 2px !important;
        border-radius: 6px !important;
        gap: 0.38rem !important;
        opacity: 0.94;
        pointer-events: auto;
    }

    #score-hud-panel .text-\[10px\] {
        font-size: 8.5px !important;
        line-height: 1.35 !important;
    }

    #score-hud-panel .text-sm {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    #score-hud-panel .hud-rack-pill {
        font-size: 8px;
        padding: 0.18rem 0.28rem;
    }

    #score-hud-panel > div:first-child {
        gap: 0.46rem !important;
        flex-wrap: wrap;
    }

    #score-hud-panel > div:nth-child(2) {
        display: block;
        border-width: 1px !important;
        max-width: 100%;
    }

    #score-hud-panel > div:nth-child(2) > div:first-child {
        grid-template-columns: 1fr 38px !important;
        border-bottom-width: 1px !important;
    }

    #score-hud-panel > div:nth-child(2) > div:first-child > div {
        padding: 0.2rem 0.28rem !important;
        border-width: 0 !important;
        font-size: 7px !important;
        line-height: 1.15 !important;
    }

    #score-hud-panel > div:nth-child(2) > div:first-child > div:last-child {
        border-left: 1px solid rgba(247, 234, 209, 0.75) !important;
    }

    #score-hud-panel #hud-frame-boxes {
        min-height: 30px;
        overflow: hidden;
    }

    #score-hud-panel #hud-frame-boxes > div {
        min-width: 0;
        border-right-width: 1px !important;
        line-height: 1.05;
        padding: 0 0.08rem;
    }

    #game-hud > div:first-child > .hud-panel:last-child {
        max-width: 5.7rem;
        padding: 0.46rem 0.5rem !important;
        border-width: 2px !important;
        border-radius: 6px !important;
        opacity: 0.92;
        pointer-events: auto;
    }

    #game-hud > div:first-child > .hud-panel:last-child .text-\[9px\] {
        font-size: 7.5px !important;
        line-height: 1.25 !important;
    }

    #game-hud > div:first-child > .hud-panel:last-child .text-base {
        font-size: 0.92rem !important;
    }

    #game-hud > div:last-child {
        position: absolute;
        top: 50%;
        right: max(0.42rem, calc(var(--safe-right) + 0.42rem));
        bottom: auto;
        left: auto;
        width: 5.8rem;
        gap: 0.46rem !important;
        margin-bottom: 0 !important;
        transform: translateY(-43%);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.22s ease, transform 0.22s ease;
    }

    #game-hud > div:last-child.mobile-controls-hidden {
        opacity: 0;
        transform: translate(120%, -43%);
        pointer-events: none;
    }

    #game-hud > div:last-child > .hud-panel {
        max-height: none;
        padding: 0 !important;
    }

    #game-hud > div:last-child > .hud-panel:first-child {
        display: none;
    }

    #game-hud > div:last-child > .meter-shell {
        order: 1;
    }

    #game-hud > div:last-child > .hud-panel:last-child {
        order: 2;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .meter-shell {
        width: 100% !important;
        height: min(42vh, 19.5rem) !important;
        min-height: 15.5rem;
        padding: 0.48rem !important;
        border-width: 2px !important;
        border-radius: 10px !important;
        pointer-events: auto;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
            rgba(18, 12, 9, 0.58) !important;
        backdrop-filter: blur(8px) saturate(1.15);
        -webkit-backdrop-filter: blur(8px) saturate(1.15);
    }

    #gauge-canvas {
        display: none;
    }

    .meter-shell::before,
    .meter-shell::after,
    .meter-shell > .absolute {
        display: none;
    }

    .mobile-gauge-control {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 0.5rem;
        width: 100%;
        height: 100%;
        color: var(--ui-cream);
        touch-action: manipulation;
        outline: none;
    }

    .mobile-gauge-readout {
        display: grid;
        gap: 0.18rem;
        text-align: center;
    }

    .mobile-gauge-readout span {
        color: rgba(247,234,209,0.62);
        font-size: 6px;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .mobile-gauge-readout b {
        color: var(--ui-gold);
        font-size: 10px;
        line-height: 1.15;
        text-transform: uppercase;
    }

    .mobile-gauge-bar {
        position: relative;
        width: 2.15rem;
        height: 100%;
        justify-self: center;
        overflow: hidden;
        border: 2px solid rgba(247,234,209,0.62);
        border-radius: 999px;
        background:
            linear-gradient(180deg, rgba(239,68,68,0.3), rgba(251,191,36,0.32) 27%, rgba(34,197,94,0.26) 50%, rgba(251,191,36,0.32) 73%, rgba(239,68,68,0.3)),
            rgba(8,6,8,0.72);
        box-shadow: inset 0 0 16px rgba(0,0,0,0.74), 0 8px 18px rgba(0,0,0,0.24);
    }

    .mobile-gauge-zone {
        position: absolute;
        left: 0.25rem;
        right: 0.25rem;
        border-radius: 999px;
        pointer-events: none;
    }

    .mobile-gauge-zone-red-top {
        top: 0.35rem;
        height: 1.45rem;
        background: rgba(239,68,68,0.28);
    }

    .mobile-gauge-zone-red-bottom {
        bottom: 0.35rem;
        height: 1.45rem;
        background: rgba(239,68,68,0.28);
    }

    .mobile-gauge-zone-true {
        bottom: 24%;
        height: 0.85rem;
        background: rgba(250,204,21,0.42);
        box-shadow: 0 0 13px rgba(250,204,21,0.35);
    }

    .mobile-gauge-fill {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        background: linear-gradient(180deg, rgba(239,68,68,0.9), rgba(250,204,21,0.82));
        opacity: 0.18;
        transition: opacity 0.12s ease;
    }

    .mobile-gauge-sweep {
        position: absolute;
        left: -0.18rem;
        right: -0.18rem;
        bottom: 50%;
        height: 0.38rem;
        border: 2px solid #0b0705;
        background: var(--ui-cyan);
        box-shadow: 0 0 12px rgba(139,212,230,0.56);
        opacity: 0;
        transform: translateY(50%);
    }

    .mobile-gauge-target {
        position: absolute;
        left: -0.28rem;
        right: -0.28rem;
        bottom: 25%;
        height: 0.2rem;
        background: #facc15;
        box-shadow: 0 0 10px rgba(250,204,21,0.64);
        transform: translateY(50%);
    }

    .mobile-gauge-hint {
        display: grid;
        place-items: center;
        min-height: 2.4rem;
        color: #130d09;
        background: var(--ui-gold);
        border: 2px solid #0b0705;
        border-radius: 7px;
        box-shadow: inset -3px -3px 0 rgba(0,0,0,0.24);
        font-size: 9px;
        line-height: 1;
        text-transform: uppercase;
    }

    #mobile-steer-label {
        display: none;
    }

    #game-hud > div:last-child > .hud-panel:last-child > .flex {
        flex-direction: column;
        gap: 0.42rem !important;
        width: 100%;
    }

    #game-hud > div:last-child .control-key {
        width: 100%;
        min-height: 2.55rem;
        padding: 0.35rem !important;
        border-width: 2px !important;
        border-radius: 7px !important;
        color: var(--ui-cream);
        font-size: 9px !important;
        line-height: 1 !important;
        pointer-events: auto;
        background: rgba(18,12,9,0.72) !important;
    }

    #game-hud > div:last-child.mobile-controls-hidden .control-key,
    #game-hud > div:last-child.mobile-controls-hidden .meter-shell {
        pointer-events: none;
    }

    #game-hud > div:last-child .control-arrow {
        font-size: 1.7rem;
        line-height: 0.78;
    }

    #game-hud > div:last-child .control-key-label {
        font-size: 0.48rem;
        opacity: 0.62;
    }

    #btn-roll-action {
        display: none;
    }

    #main-menu > div,
    #shop-screen > div,
    #route-screen > div,
    #event-screen > div,
    #pause-screen > div,
    #legend-screen > div,
    #tenpin-scoreboard-screen > div,
    #tenpin-rack-screen > div {
        width: 100%;
        max-width: none;
    }

    .pinfall-bg-scene::before {
        left: -38%;
        right: -20%;
        height: 43%;
        opacity: 0.34;
    }

    .pinfall-bg-scene::after {
        left: -46%;
        bottom: -12%;
        width: 96vw;
        height: 96vw;
        opacity: 0.32;
    }

    .pinfall-bg-lane {
        left: -34vw;
        bottom: -8vh;
        width: 108vw;
        height: 38vh;
        opacity: 0.38;
    }

    .pinfall-bg-ball {
        left: 3vw;
        bottom: 10vh;
        width: clamp(70px, 24vw, 112px);
        opacity: 0.46;
    }

    .pinfall-bg-pin {
        width: clamp(84px, 27vw, 128px);
        opacity: 0.42;
    }

    .pinfall-bg-pin.pin-a {
        left: 19vw;
        bottom: 5vh;
    }

    .pinfall-bg-pin.pin-b {
        left: -2vw;
        bottom: -1vh;
    }

    .pinfall-bg-pin.pin-c {
        left: 40vw;
        bottom: 1vh;
        opacity: 0.34;
    }

    #main-menu > div {
        gap: 1rem;
    }

    #main-menu .crt-bloom {
        margin-bottom: 0.25rem;
    }

    .pinfall-menu-inner::before {
        inset: 0;
        clip-path: none;
    }

    .pinfall-menu-inner {
        align-self: stretch;
        margin-right: 0;
        min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
        padding: 0.9rem 0.75rem;
        justify-content: flex-start;
    }

    .pinfall-title-wrap {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 0.35rem;
    }

    .pinfall-logo {
        font-size: clamp(1.8rem, 10.5vw, 2.8rem) !important;
        line-height: 0.95 !important;
        text-shadow: 0 3px 0 #4d2d1c, 0 6px 0 #0b0705, 0 0 16px rgba(242,195,107,0.28);
    }

    .pinfall-pin {
        width: 23px;
        height: 42px;
        border-width: 2px;
    }

    .pinfall-subtitle {
        font-size: clamp(1rem, 6vw, 1.35rem);
        padding: 0.34rem 0.48rem;
    }

    .pinfall-lane-stripes {
        height: 34px;
        margin-top: 0.65rem;
    }

    .menu-mode-card {
        min-height: 0;
        padding: 0.72rem !important;
        gap: 0.5rem !important;
    }

    .mode-card-topline {
        font-size: 6px;
        padding: 0.24rem 0.34rem;
    }

    .mode-card-main {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0.58rem;
    }

    .mode-card-icon {
        width: 46px;
    }

    .mode-card-icon svg {
        width: 36px;
        height: 36px;
        stroke-width: 6;
    }

    .mode-card-main h3 {
        font-size: 10px;
    }

    .mode-card-main p {
        font-size: 7px;
        line-height: 1.32;
        margin-top: 0.25rem;
    }

    .mode-card-options {
        gap: 0.32rem;
    }

    .mode-card-options label {
        font-size: 6px;
        padding: 0.32rem 0.35rem;
    }

    .menu-control-strip {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.52rem;
    }

    .menu-bottom-panel {
        margin-top: 0.5rem;
        padding: 0.75rem;
    }

    .menu-bottom-label {
        font-size: 7px;
        margin-bottom: 0.35rem;
    }

    .menu-bottom-copy {
        font-size: 1rem;
        line-height: 1.05;
    }

    #shop-screen > div {
        height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
        max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
        overflow: hidden;
        padding: 0.82rem !important;
        gap: 0.58rem !important;
    }

    #shop-screen h2 {
        font-size: clamp(1.1rem, 7vw, 1.55rem) !important;
        line-height: 1.15 !important;
    }

    #shop-screen p {
        font-size: 8px !important;
        line-height: 1.3 !important;
    }

    #shop-screen > div > div:first-child {
        flex: 0 0 auto;
        gap: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    #shop-screen > div > div:first-child > div:last-child {
        width: 100%;
        padding: 0.42rem 0.62rem !important;
    }

    #shop-screen > div > div:first-child > div:last-child .text-2xl {
        font-size: 1.2rem !important;
    }

    #shop-items-container {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
        gap: 0.5rem !important;
    }

    #shop-items-container > div {
        padding: 0.52rem !important;
        min-height: 0;
        gap: 0.38rem !important;
        justify-content: flex-start !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    #shop-items-container .shop-card {
        grid-template-rows: auto auto;
        padding: 0.58rem !important;
        border-width: 2px;
        border-radius: 7px;
    }

    #shop-items-container .shop-card-head {
        grid-template-columns: 28px 1fr auto;
        gap: 0.42rem;
        margin-bottom: 0.42rem;
    }

    #shop-items-container .shop-card-icon {
        width: 27px;
        border-width: 1px;
    }

    #shop-items-container .shop-card-title {
        font-size: 8px !important;
        line-height: 1.22 !important;
    }

    #shop-items-container .shop-card-price {
        font-size: 8px;
        padding: 0.32rem 0.38rem;
    }

    #shop-items-container h3 {
        font-size: 9px !important;
        line-height: 1.18 !important;
        max-width: 62%;
    }

    #shop-items-container p {
        font-size: 8px !important;
        line-height: 1.25 !important;
        margin-bottom: 0 !important;
    }

    #shop-items-container .shop-category-tag {
        font-size: 7px;
        margin-bottom: 0.28rem !important;
        padding: 0.18rem 0.3rem;
    }

    #shop-items-container > div > div:first-child {
        flex: 0 0 auto !important;
    }

    #shop-items-container > div > button {
        position: static !important;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-top: 0.12rem;
        padding: 0.42rem 0.45rem !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        min-height: 32px;
        display: grid;
        place-items: center;
        white-space: normal;
    }

    #shop-screen > div > div:last-child {
        flex: 0 0 auto;
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: stretch !important;
        gap: 0.48rem !important;
        padding-top: 0.5rem !important;
    }

    #shop-next-goal-row {
        display: flex;
        font-size: 10px !important;
        line-height: 1.35 !important;
        text-align: left;
        justify-content: center;
        white-space: normal;
    }

    #shop-next-target {
        display: inline;
        margin-top: 0;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    #btn-next-frame,
    #btn-shop-reroll,
    #btn-tenpin-reroll-shop {
        width: 100%;
        padding: 0.68rem !important;
        font-size: 9px !important;
    }

    #route-screen > div {
        height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
        max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1.5rem);
        overflow: hidden;
        padding: 0.85rem !important;
        gap: 0.75rem !important;
    }

    #route-screen h2 {
        font-size: clamp(0.95rem, 5.6vw, 1.3rem) !important;
        line-height: 1.25 !important;
    }

    #route-subtitle {
        font-size: 10px !important;
        line-height: 1.38 !important;
        margin-top: 0.4rem !important;
    }

    #route-screen > div > div:first-child {
        flex: 0 0 auto;
        gap: 0.65rem !important;
        padding-bottom: 0.7rem !important;
    }

    #route-screen > div > div:first-child > div:last-child {
        font-size: 9px !important;
        padding: 0.75rem !important;
    }

    .route-map-board {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
        border-radius: 7px;
        background-size: 33.333% 100%, 100% 8.333%, auto;
    }

    #route-options-container,
    #route-map-lines {
        min-width: 100%;
        width: 100%;
        min-height: 900px;
        height: 900px;
    }

    .route-node {
        width: 64px;
        height: 64px;
    }

    .route-node.current:hover {
        transform: translate(-50%, -50%) scale(1.04);
    }

    .route-node-icon {
        font-size: 20px;
    }

    .route-node-label {
        right: -7px;
        bottom: -7px;
        min-width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .route-node-name {
        top: 70px;
        width: 90px;
        font-size: 8px;
        line-height: 1.15;
    }

    .route-detail-panel {
        flex: 0 0 auto;
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .route-choice-detail {
        padding: 0.62rem;
        font-size: 14px;
    }

    .route-choice-detail b {
        font-size: 17px;
    }
}
@keyframes availableNodeBreathe {
    0%, 100% { box-shadow: inset 0 -5px 0 rgba(0,0,0,0.32), 0 0 0 4px rgba(242,195,107,0.10), 0 12px 28px rgba(0,0,0,0.42); }
    50% { box-shadow: inset 0 -5px 0 rgba(0,0,0,0.32), 0 0 0 7px rgba(242,195,107,0.18), 0 16px 34px rgba(0,0,0,0.48); }
}
@keyframes mapChoiceRise {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
#debug-panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 80;
    width: min(440px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: rgba(2, 2, 8, 0.94);
    border: 3px solid #22d3ee;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
    padding: 0.9rem;
    font-size: 8px;
    line-height: 1.45;
}
#debug-panel.hidden {
    display: none;
}
#debug-panel button,
#debug-panel label {
    font-family: 'Press Start 2P', monospace;
}
.debug-grid {
    display: grid;
    grid-template-columns: 52px 1fr 1fr 76px;
    gap: 0.35rem;
    align-items: center;
}
.debug-mini-btn {
    border: 2px solid rgba(34, 211, 238, 0.7);
    background: rgba(15, 23, 42, 0.94);
    color: #e0f2fe;
    padding: 0.35rem 0.25rem;
}
.debug-value-input,
.debug-color-input,
.debug-select {
    width: 100%;
    min-width: 0;
    border: 2px solid rgba(34, 211, 238, 0.7);
    background: rgba(2, 6, 23, 0.96);
    color: #e0f2fe;
    padding: 0.33rem 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}
.debug-color-input {
    height: 27px;
    padding: 0.1rem;
}
.debug-light-card {
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(15, 23, 42, 0.52);
    padding: 0.45rem;
    margin-bottom: 0.5rem;
}
.debug-light-card .debug-grid {
    grid-template-columns: 44px 1fr 1fr 76px;
}
.debug-action {
    border: 2px solid rgba(250, 204, 21, 0.76);
    background: rgba(113, 63, 18, 0.82);
    color: #fef3c7;
    padding: 0.5rem;
}
#debug-export,
#debug-object-source {
    width: 100%;
    background: #05020a;
    border: 2px solid #475569;
    color: #bae6fd;
    padding: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    user-select: text;
}
#debug-export {
    min-height: 104px;
}
@keyframes textShadow {
    0% { text-shadow: 2px 0 0 rgba(255,0,0,0.5), -2px 0 0 rgba(0,255,255,0.5); }
    100% { text-shadow: -1px 0 0 rgba(255,0,0,0.5), 1px 0 0 rgba(0,255,255,0.5); }
}
@keyframes hudFloat {
    0%, 100% { transform: translateY(0) rotate(-0.15deg); }
    50% { transform: translateY(3px) rotate(0.15deg); }
}
@keyframes contentPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}
@keyframes upgradeWave {
    0%, 100% { transform: translateX(0) skewX(0deg); letter-spacing: 0; }
    35% { transform: translateX(1px) skewX(-1.1deg); letter-spacing: 0.015em; }
    70% { transform: translateX(-1px) skewX(0.9deg); letter-spacing: 0; }
}
@keyframes selectedTextWiggle {
    0%, 100% { transform: translate(0, 0); }
    35% { transform: translate(0, -1px); }
    70% { transform: translate(1px, 0); }
}
@keyframes meterGlow {
    0%, 100% { opacity: 0.45; transform: rotate(0deg) scale(1); }
    50% { opacity: 0.82; transform: rotate(1deg) scale(1.015); }
}
.score-celebration {
    position: relative;
    padding: 0.28em 0.42em;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20,13,9,0.24), rgba(20,13,9,0.52)),
        linear-gradient(90deg, transparent, rgba(242,195,107,0.1), transparent);
    animation: scoreEntrance 0.62s cubic-bezier(.2, 1.5, .35, 1), scoreboardBreath 1.1s ease-in-out infinite alternate;
    transform-style: preserve-3d;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-shadow:
        0 2px 0 #5b3a24,
        0 5px 0 #0b0705,
        2px 0 0 rgba(139,212,230,0.55),
        -2px 0 0 rgba(201,111,123,0.46),
        0 0 18px rgba(250, 204, 21, 0.9),
        0 0 46px rgba(139, 212, 230, 0.34);
}
.score-celebration::before,
.score-celebration::after {
    content: "◆  ◆  ◆";
    display: block;
    font-size: 0.3em;
    color: #facc15;
    opacity: 0.85;
    animation: marqueeBlink 0.72s steps(2, end) infinite;
}
.score-celebration::after {
    color: #22d3ee;
    animation-delay: 0.36s;
}
.score-celebration.score-strike {
    color: #facc15 !important;
    background:
        radial-gradient(circle at 50% 46%, rgba(250,204,21,0.28), transparent 56%),
        linear-gradient(180deg, rgba(20,13,9,0.18), rgba(20,13,9,0.56));
    animation: scoreStrikeEntrance 0.72s cubic-bezier(.18, 1.55, .24, 1), strikeGlow 0.82s ease-in-out infinite alternate;
    text-shadow:
        0 3px 0 #7c2d12,
        0 7px 0 #0b0705,
        3px 0 0 rgba(139,212,230,0.68),
        -3px 0 0 rgba(201,111,123,0.58),
        0 0 24px rgba(250,204,21,1),
        0 0 60px rgba(250,204,21,0.48),
        0 0 86px rgba(139,212,230,0.28);
}
.score-celebration.score-spare {
    color: #8bd4e6 !important;
}
.score-celebration.score-big {
    color: #f2c36b !important;
    text-shadow:
        0 2px 0 #5b3a24,
        0 5px 0 #0b0705,
        2px 0 0 rgba(139,212,230,0.48),
        -2px 0 0 rgba(201,111,123,0.42),
        0 0 22px rgba(242,195,107,0.82);
}
.score-celebration.score-gutter {
    color: #ef4444 !important;
    filter: grayscale(0.18);
}
@keyframes scoreEntrance {
    0% { opacity: 0; transform: perspective(620px) translateY(42px) rotateX(74deg) scale(0.72); filter: blur(2px); }
    100% { opacity: 1; transform: perspective(620px) translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
@keyframes scoreStrikeEntrance {
    0% { opacity: 0; transform: perspective(680px) translateY(48px) rotateX(78deg) scale(0.58); filter: blur(3px) brightness(1.4); }
    58% { opacity: 1; transform: perspective(680px) translateY(-7px) rotateX(-5deg) scale(1.12); filter: blur(0) brightness(1.25); }
    100% { opacity: 1; transform: perspective(680px) translateY(0) rotateX(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes scoreboardBreath {
    0% { transform: perspective(620px) translateY(0) rotateX(0) scale(1); }
    100% { transform: perspective(620px) translateY(-4px) rotateX(4deg) scale(1.035); }
}
@keyframes strikeGlow {
    0% { transform: perspective(680px) translateY(0) rotateX(0) scale(1); filter: brightness(1); }
    100% { transform: perspective(680px) translateY(-5px) rotateX(5deg) scale(1.055); filter: brightness(1.18); }
}
@keyframes marqueeBlink {
    0%, 100% { opacity: 0.35; letter-spacing: 0.04em; }
    50% { opacity: 1; letter-spacing: 0.22em; }
}
@keyframes loadingSpin {
    to { transform: rotate(360deg); }
}
@keyframes logoBreath {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12) saturate(1.08); }
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(-5%) scale(1); }
    50% { transform: translateY(-7%) scale(1.018); }
}
@keyframes burstPulse {
    0%, 100% { opacity: 0.92; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.035); }
}
@keyframes ballBreath {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.025); filter: brightness(1.1); }
}
@keyframes panelBreath {
    0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 2px #08030d, 0 14px 30px rgba(0,0,0,0.34), 0 0 18px rgba(147,51,234,0.18); }
    50% { filter: brightness(1.045); box-shadow: inset 0 0 0 2px #08030d, 0 16px 34px rgba(0,0,0,0.36), 0 0 24px rgba(147,51,234,0.28); }
}
@keyframes iconDrift {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-2px); filter: brightness(1.12); }
}
@keyframes howtoGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 56px 28px, 28px 56px; }
}
@keyframes howtoLightSweep {
    0%, 18% { transform: translateX(-55%) skewX(-15deg); opacity: 0; }
    45% { opacity: 1; }
    82%, 100% { transform: translateX(55%) skewX(-15deg); opacity: 0; }
}
@keyframes howtoPocketGlow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}
@keyframes howtoAimSlide {
    0%, 100% { transform: translateX(-34px); }
    50% { transform: translateX(34px); }
}
@keyframes howtoArrowLeft {
    0%, 100% { opacity: 0.45; transform: translateX(5px); }
    50% { opacity: 1; transform: translateX(-4px); }
}
@keyframes howtoArrowRight {
    0%, 100% { opacity: 1; transform: translateX(4px); }
    50% { opacity: 0.45; transform: translateX(-5px); }
}
@keyframes howtoMeterTick {
    0% { transform: translateY(24px); }
    48% { transform: translateY(-40px); }
    54% { transform: translateY(-40px); filter: brightness(1.4); }
    100% { transform: translateY(24px); }
}
@keyframes howtoSpark {
    0%, 100% { opacity: 0.2; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes howtoBallRoll {
    0% { transform: translateY(22px) scale(0.92); opacity: 0.62; }
    48% { transform: translateY(-64px) scale(0.7); opacity: 1; }
    100% { transform: translateY(22px) scale(0.92); opacity: 0.62; }
}
@keyframes howtoRackNudge {
    0%, 42%, 100% { transform: translateY(0); }
    52% { transform: translateY(-5px); }
    64% { transform: translateY(3px); }
}
@keyframes howtoImpactFlash {
    0%, 42%, 100% { opacity: 0; transform: scale(0.9); }
    52% { opacity: 1; transform: scale(1.04); }
    70% { opacity: 0; transform: scale(1.18); }
}
@keyframes howtoRoutePulse {
    from { stroke-dashoffset: 190; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 1000px) {
    .arcade-menu-shell {
        grid-template-rows: max-content max-content max-content;
        max-height: calc(100dvh - 0.5rem);
        overflow-y: auto;
    }
    .arcade-main-grid {
        grid-template-columns: 1fr;
        min-height: max-content;
        padding: 0 2rem;
    }
    .arcade-center-stage {
        order: -1;
    }
    .daily-panel {
        align-self: stretch;
    }
    .daily-icon-grid span {
        min-height: 58px;
    }
}

@media (max-width: 1000px) {
    .arcade-menu-shell {
        width: calc(100vw - 1rem) !important;
        min-height: calc(100dvh - 0.5rem) !important;
        padding: 1rem 0.72rem 0.72rem !important;
        gap: 0.65rem !important;
    }
    .arcade-corner {
        width: 38px;
        height: 38px;
    }
    .arcade-corner svg {
        width: 28px;
        height: 28px;
    }
    .rail-top, .rail-bottom {
        left: 46px;
        right: 46px;
    }
    .rail-left, .rail-right {
        top: 46px;
        bottom: 46px;
    }
    .arcade-logo-row {
        padding: 0.65rem 2.4rem 0.15rem;
        gap: 0.4rem;
    }
    .arcade-logo-row .pinfall-title-lockup {
        width: min(100%, 420px);
    }
    .arcade-logo-row .pinfall-logo {
        font-size: clamp(2rem, 11vw, 3.05rem);
        line-height: 1;
        text-shadow:
            0 2px 0 #ffcf74,
            0 4px 0 #93314f,
            0 7px 0 #0b0705,
            3px 0 0 rgba(73, 27, 122, 0.64),
            0 0 18px rgba(255, 198, 94, 0.62),
            0 0 36px rgba(190, 96, 255, 0.24);
    }
    .arcade-logo-row .pinfall-subtitle {
        font-size: clamp(0.95rem, 5.4vw, 1.28rem);
        margin-top: 0.05rem;
    }
    .logo-pin-svg {
        display: none;
    }
    .arcade-main-grid {
        padding: 0 0.45rem;
        gap: 0.7rem;
    }
    .arcade-left-stack {
        order: -2;
        gap: 0.7rem;
    }
    .arcade-center-stage {
        order: 0;
        min-height: 430px;
    }
    .arcade-center-stage.is-panel-mode {
        min-height: min(72dvh, 620px);
    }
    .menu-center-content {
        padding: 0.8rem;
        overflow: hidden;
    }
    .central-bowling-graphic svg {
        max-height: 210px;
    }
    .central-bowling-graphic {
        transform: translateY(-2%);
    }
    .player-hub-panel {
        grid-template-columns: 1fr 1fr;
        padding: 1.3rem 0.55rem 0.55rem;
        gap: 0.45rem;
        position: relative;
        z-index: 5;
    }
    .hub-btn {
        min-height: 40px;
        font-size: 0.56rem !important;
    }
    .primary-hub-btn {
        min-height: 50px;
        font-size: 0.68rem !important;
    }
    .arcade-main-grid .menu-mode-card {
        padding: 0.8rem !important;
    }
    .arcade-main-grid .mode-card-main {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 0.7rem;
    }
    .arcade-main-grid .mode-card-icon {
        width: 54px;
    }
    .mode-card-options {
        grid-template-columns: 1fr;
        gap: 0.48rem;
    }
    .mode-card-options label {
        min-height: 44px;
        padding: 0.55rem 0.65rem;
        font-size: 0.68rem;
        line-height: 1.25;
        color: rgba(255, 237, 184, 0.95);
    }
    .mode-card-options input {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }
    .run-slots {
        gap: 0.5rem;
        margin-top: 0.7rem;
    }
    .run-slot.mobile-extra-empty {
        display: none;
    }
    .run-slot {
        padding: 0.72rem;
        font-size: 1.12rem;
    }
    .run-slot b {
        font-size: 1.28rem;
    }
    .daily-panel {
        display: flex;
        max-height: none;
        padding: 0.8rem;
    }
    .daily-title { font-size: 0.96rem; }
    .daily-panel h3 { font-size: 1.12rem; margin-top: 0.7rem; }
    .daily-icon-card { aspect-ratio: auto; height: 64px; min-height: 58px; }
    .howto-card {
        min-height: 100%;
        grid-template-rows: auto minmax(210px, 1fr) auto auto;
        gap: 0.75rem;
        padding: 0;
    }
    .howto-close {
        width: 34px;
        height: 34px;
    }
    .howto-art {
        min-height: 210px;
    }
    .howto-svg {
        width: min(100%, 340px);
        height: 230px;
    }
    .howto-copy h2 {
        font-size: clamp(2.1rem, 9vw, 3.25rem);
    }
    .howto-copy p {
        font-size: clamp(1.22rem, 5.2vw, 1.55rem);
        max-width: 28ch;
    }
    .howto-controls {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
        padding-top: 0;
    }
    .howto-dots {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .howto-nav-btn {
        min-height: 46px;
        font-size: 0.6rem !important;
    }
    .daily-review-toolbar {
        grid-template-columns: 1fr 1fr;
    }
    .daily-review-toolbar span {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .daily-review-grid {
        max-height: min(62vh, 560px);
        grid-template-columns: 1fr;
    }
    .daily-review-columns {
        grid-template-columns: 1fr;
    }
    .arcade-menu-shell .menu-control-strip {
        display: flex;
        flex-wrap: wrap;
        max-width: calc(100% - 2rem);
        margin-top: 0.35rem;
        padding-bottom: 0.35rem;
        font-size: 0.76rem !important;
    }
}