@font-face {
    font-family: 'Valley Sans';
    src: url('fonts/ValleySans-Variable.woff2?v=1') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --top-controls-inset-y: max(10px, env(safe-area-inset-top));
    --top-controls-inset-x: max(10px, env(safe-area-inset-right));
    --top-controls-gap: 6px;
    --mooney-art-moon-cutout: radial-gradient(25.38% 40.59% at 32.76% 50.4%, transparent 98%, #000 100%);
    --space-950: #070b2d;
    --space-900: #10134a;
    --space-700: #29105f;
    --electric-cyan: #52e5ff;
    --ultraviolet: #8c5bff;
    --accent-magenta: #ff5bc8;
    --mooney-ivory: #fff7de;
    --cargo-gold: #ffc83d;
    --cargo-orange: #ff8a24;
    --danger-coral: #ff647c;
    --ink: #02051b;
    --text-primary: #f8fbff;
    --text-muted: #b9c4e9;
    --panel-fill: rgba(7, 11, 45, 0.94);
    --panel-fill-soft: rgba(16, 19, 74, 0.82);
    --panel-line: rgba(82, 229, 255, 0.72);
    --panel-line-muted: rgba(140, 91, 255, 0.48);
    --focus-cyan: 0 0 0 3px rgba(82, 229, 255, 0.42), 0 0 0 6px rgba(7, 11, 45, 0.92);
    --focus-magenta: 0 0 0 3px rgba(255, 91, 200, 0.46), 0 0 0 6px rgba(7, 11, 45, 0.92);
    --menu-sky-image: url('images/menu-night-sky.png');
    --cyan-glow: 0 0 9px rgba(82, 229, 255, 0.54), 0 0 26px rgba(82, 229, 255, 0.22);
    --glow-tight: 0 0 12px rgba(82, 229, 255, 0.34);
    --glow-bloom: 0 18px 58px rgba(3, 2, 27, 0.72), 0 0 42px rgba(140, 91, 255, 0.18);
    --control-height: 48px;
    --panel-clip: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    --control-clip: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    --panel-inner-clip: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
    --control-inner-clip: polygon(11.41px 0, calc(100% - 11.41px) 0, 100% 11.41px, 100% calc(100% - 11.41px), calc(100% - 11.41px) 100%, 11.41px 100%, 0 calc(100% - 11.41px), 0 11.41px);
    --font-display: 'Valley Sans', sans-serif;
    --font-body: 'Valley Sans', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--space-950);
    color: var(--text-primary);
    font-family: var(--font-body);
}

body {
    min-width: 0;
    overscroll-behavior: none;
}

[hidden] {
    display: none !important;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
input[type="button"],
input[type="submit"] {
    min-height: var(--control-height);
}

button {
    color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
    box-shadow: var(--focus-cyan);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Shared angular console primitive. The pseudo-element is the crisp border layer. */
.console-panel {
    position: relative;
    isolation: isolate;
    border: 0;
    clip-path: var(--panel-clip);
    background: transparent;
    box-shadow: var(--glow-bloom);
}

.console-panel::before,
.console-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    clip-path: var(--panel-clip);
}

.console-panel::before {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(105deg, var(--electric-cyan), transparent 13% 30%, var(--ultraviolet) 48%, transparent 67% 84%, var(--accent-magenta)),
        linear-gradient(180deg, #91f4ff, #27106c 42%, #ff78d1 82%, #160835);
    filter: drop-shadow(0 0 12px rgba(82, 229, 255, 0.34)) drop-shadow(0 18px 32px rgba(1, 1, 18, 0.72));
}

.console-panel::after {
    inset: 3px;
    z-index: -1;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 12%, rgba(82, 229, 255, 0.07) 12% 13%, transparent 13% 72%, rgba(255, 91, 200, 0.1) 72% 73%, transparent 73%),
        linear-gradient(135deg, rgba(82, 229, 255, 0.12), transparent 28%, rgba(255, 91, 200, 0.1) 76%, transparent),
        radial-gradient(ellipse at 50% 0, rgba(50, 110, 196, 0.22), transparent 56%),
        var(--panel-fill);
    box-shadow: inset 0 0 0 2px rgba(4, 7, 34, 0.9), inset 0 20px 42px rgba(44, 75, 170, 0.11), inset 0 -22px 38px rgba(3, 2, 24, 0.6);
}

.console-panel > * {
    position: relative;
    z-index: 1;
}

/* Reusable authored night sky. Characters, rocks, and menus remain independent layers. */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: clip;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    text-align: center;
    background-color: var(--space-950);
}

#startScreen,
#gameOverScreen {
    color: var(--text-primary);
    background-image:
        radial-gradient(ellipse at 50% 52%, rgba(7, 11, 45, 0.06) 18%, rgba(7, 11, 45, 0.3) 68%, rgba(2, 3, 22, 0.72) 100%),
        var(--menu-sky-image);
    background-position: center;
    background-size: cover;
}

.space-rock-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.space-rock {
    --rock-rotation: 0deg;
    position: absolute;
    display: block;
    width: clamp(74px, 10vw, 168px);
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 0 20px rgba(140, 91, 255, 0.35)) drop-shadow(0 24px 26px rgba(0, 0, 18, 0.72));
    will-change: transform;
    user-select: none;
}

.space-rock--01 { --rock-rotation: 18deg; top: -10%; left: -5%; width: clamp(180px, 25vw, 430px); animation: rock-drift-near 22s ease-in-out -7s infinite alternate; }
.space-rock--02 { --rock-rotation: -24deg; right: -7%; top: 7%; width: clamp(150px, 21vw, 350px); animation: rock-drift-mid 31s ease-in-out -17s infinite alternate; }
.space-rock--03 { --rock-rotation: 42deg; left: -16%; top: 48%; width: clamp(110px, 16vw, 280px); animation: rock-flyby 24s linear -15s infinite; }
.space-rock--04 { --rock-rotation: -13deg; right: 3%; bottom: 4%; width: clamp(70px, 9vw, 148px); opacity: 0.72; animation: rock-drift-mid 26s ease-in-out -5s infinite alternate-reverse; }
.space-rock--05 { --rock-rotation: 66deg; left: 17%; bottom: -8%; width: clamp(94px, 13vw, 220px); animation: rock-drift-mid 34s ease-in-out -23s infinite alternate; }
.space-rock--06 { --rock-rotation: -38deg; right: 29%; top: 8%; width: clamp(42px, 5vw, 82px); opacity: 0.62; animation: rock-drift-near 18s ease-in-out -11s infinite alternate-reverse; }

.space-rock-field.is-reversed .space-rock--01 { left: auto; right: -6%; top: -11%; }
.space-rock-field.is-reversed .space-rock--02 { left: -8%; right: auto; top: 17%; }
.space-rock-field.is-reversed .space-rock--03 { left: auto; right: -16%; top: 55%; animation-direction: reverse; }
.space-rock-field.is-reversed .space-rock--04 { right: auto; left: 4%; bottom: 2%; }
.space-rock-field.is-reversed .space-rock--05 { left: auto; right: 18%; bottom: -10%; }
.space-rock-field.is-reversed .space-rock--06 { left: 28%; right: auto; top: 5%; }

@keyframes rock-drift-near {
    0% { transform: translate3d(-2vw, -1vh, 0) rotate(var(--rock-rotation)) scale(0.96); }
    50% { transform: translate3d(3vw, 2.5vh, 0) rotate(calc(var(--rock-rotation) + 20deg)) scale(1.04); }
    100% { transform: translate3d(-1vw, 5vh, 0) rotate(calc(var(--rock-rotation) + 42deg)) scale(0.99); }
}

@keyframes rock-drift-mid {
    0% { transform: translate3d(1vw, 2vh, 0) rotate(var(--rock-rotation)) scale(0.92); }
    50% { transform: translate3d(-3vw, -2vh, 0) rotate(calc(var(--rock-rotation) + 16deg)) scale(1); }
    100% { transform: translate3d(2vw, 3vh, 0) rotate(calc(var(--rock-rotation) + 34deg)) scale(0.95); }
}

@keyframes rock-flyby {
    0% { transform: translate3d(-14vw, -4vh, 0) rotate(var(--rock-rotation)) scale(0.72); }
    48% { transform: translate3d(52vw, 8vh, 0) rotate(calc(var(--rock-rotation) + 142deg)) scale(1); }
    100% { transform: translate3d(118vw, 22vh, 0) rotate(calc(var(--rock-rotation) + 308deg)) scale(1.15); }
}

.overlay h1,
.overlay h2,
.overlay h3,
.pause-card h2,
.spectator-card h2 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.overlay p {
    color: var(--text-muted);
    line-height: 1.45;
}

.screen-container,
.screen_container {
    position: relative;
    z-index: 2;
    width: min(840px, calc(100vw - 32px));
    max-width: 100%;
    max-height: calc(100svh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    min-width: 0;
    padding: clamp(22px, 3.4vw, 38px);
    overflow: hidden;
}

/* Branded intro */
.intro-screen {
    z-index: 20;
    isolation: isolate;
    background-color: var(--space-950);
    background-image: var(--menu-sky-image);
    background-position: center;
    background-size: cover;
}

.intro-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--mooney-ivory);
    animation: intro-sky-reveal 2300ms ease-in-out both;
}

.intro-skip {
    position: relative;
    z-index: 1;
    display: block;
    width: min(420px, calc(100vw - 40px));
    min-width: 0;
    min-height: min(420px, calc(100vw - 40px));
    padding: 0;
    border: 0;
    color: var(--space-900);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.intro-choreography,
.intro-publisher-mark,
.intro-mooney-reveal {
    position: absolute;
    inset: 0;
}

.intro-publisher-mark,
.intro-mooney-reveal {
    display: grid;
    place-items: center;
}

.intro-publisher-mark {
    align-content: center;
    gap: 14px;
    animation: intro-publisher-transform 2300ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

.intro-icon {
    width: clamp(78px, 15vw, 132px);
    height: auto;
}

.intro-wordmark {
    width: clamp(190px, 38vw, 320px);
    height: auto;
}

.intro-mooney-reveal {
    opacity: 0;
    transform: scale(0.48);
    animation: intro-mooney-transform 2300ms cubic-bezier(0.16, 0.8, 0.2, 1) both;
}

.intro-mooney-crop {
    position: relative;
    display: block;
    width: clamp(190px, 50vw, 300px);
    aspect-ratio: 1;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.intro-mooney-portrait {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 22px rgba(1, 2, 20, 0.38));
}

.intro-mooney-face {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    transform: scale(0.88);
    transform-origin: center;
}

.intro-mooney-gaze {
    display: block;
    width: 100%;
    height: auto;
    transform: translate(0, 0);
    transform-origin: center;
    animation: intro-mooney-gaze 2300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes intro-sky-reveal {
    0%, 34% { opacity: 1; }
    68%, 100% { opacity: 0; }
}

@keyframes intro-publisher-transform {
    0% { opacity: 0; transform: scale(0.9); }
    12%, 36% { opacity: 1; transform: scale(1); }
    54%, 100% { opacity: 0; transform: scale(0.72); }
}

@keyframes intro-mooney-transform {
    0%, 32% { opacity: 0; transform: scale(0.48); }
    54% { opacity: 1; transform: scale(1.04); }
    70%, 90% { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.06); }
}

@keyframes intro-mooney-gaze {
    0%, 43% { transform: translate(-4.5%, 0.8%); }
    58% { transform: translate(-4.5%, 0.8%); }
    70% { transform: translate(4.5%, 0.5%); }
    84%, 100% { transform: translate(0, 0); }
}

@keyframes intro-sky-crossfade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes intro-publisher-crossfade {
    0%, 38% { opacity: 1; }
    62%, 100% { opacity: 0; }
}

@keyframes intro-mooney-crossfade {
    0%, 38% { opacity: 0; transform: none; }
    62%, 100% { opacity: 1; transform: none; }
}

/* Main hub */
.hub-console {
    --hub-frame-top: clamp(250px, 36vh, 350px);
    --hub-art-shift-y: 18px;
    display: grid;
    grid-template-rows: var(--hub-frame-top) auto auto;
    gap: 0;
    width: min(820px, calc(100vw - 32px));
    padding: 0 clamp(18px, 3vw, 34px) clamp(20px, 2.8vw, 32px);
    clip-path: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.hub-console::before {
    inset: var(--hub-frame-top) 0 0;
    z-index: -2;
    clip-path: var(--panel-clip);
}

.hub-console::after {
    inset: calc(var(--hub-frame-top) + 3px) 3px 3px;
    z-index: -1;
    clip-path: var(--panel-clip);
}

.hub-title-logo {
    position: absolute;
    top: calc(var(--hub-frame-top) + var(--hub-art-shift-y));
    left: 50%;
    z-index: 4;
    display: block;
    width: min(650px, calc(100vw - 36px));
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 8px rgba(82, 229, 255, 0.42)) drop-shadow(0 0 24px rgba(140, 91, 255, 0.28));
    pointer-events: none;
    user-select: none;
}

.hub-publisher {
    position: absolute;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0.8;
    transform: translateX(-50%);
    pointer-events: none;
}

#startScreen.has-open-subview .hub-publisher {
    opacity: 0;
    visibility: hidden;
}

/* The logo links to userinterface.be (the footer itself lets clicks through to the hub). */
.hub-publisher-link {
    display: block;
    padding: 6px;
    border-radius: 8px;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.hub-publisher-link:hover,
.hub-publisher-link:focus-visible {
    opacity: 1;
}

.hub-publisher:has(.hub-publisher-link:hover) { opacity: 1; }

.hub-publisher-link:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 2px;
}

.hub-publisher-wordmark {
    width: clamp(118px, 13vw, 150px);
    height: auto;
    filter: brightness(0) invert(1);
}

/* Authored menu art. The intro body/face continue into the hub above the original cannon. */
.hub-character-stage,
.gameover-character-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

/*
 * Hub and post-run share one Mooney + cannon composition. The cannon is sized and placed from the
 * moon's box so the layered moon always sits exactly where the authored art painted it, and the
 * cutout mask removes only that painted moon (never the cannon base behind it).
 * Ratios come from mooney-hub-hero-ivory-alpha.png (moon disc centre 32.76%/50.4%, radius 26.2% of
 * width) and mooney-gameplay-body.png (disc radius 38.1% of its box, centre at 48.6% height).
 */
.hub-character-stage,
.gameover-character-stage {
    --hub-moon-w: clamp(230px, 28vw, 330px);
    --hub-moon-x: calc(50% - var(--hub-moon-w) * 0.259);
}

.hub-character-stage {
    --hub-moon-bottom: calc(46px - var(--hub-art-shift-y));
    z-index: 2;
    height: var(--hub-frame-top);
}

.gameover-character-stage {
    --hub-moon-bottom: 28px;
}

.hub-cannon-art,
.gameover-cannon-art {
    position: absolute;
    left: calc(var(--hub-moon-x) - var(--hub-moon-w) * 0.4586);
    bottom: calc(var(--hub-moon-bottom) + var(--hub-moon-w) * 0.0797);
    z-index: 1;
    display: block;
    width: calc(var(--hub-moon-w) * 1.4);
    height: auto;
    aspect-ratio: 793 / 496;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: var(--mooney-art-moon-cutout);
    mask-image: var(--mooney-art-moon-cutout);
    filter: drop-shadow(0 18px 26px rgba(1, 2, 20, 0.7)) drop-shadow(0 0 18px rgba(82, 229, 255, 0.16));
    pointer-events: none;
    user-select: none;
}

.gameover-mooney {
    position: absolute;
    left: var(--hub-moon-x);
    bottom: var(--hub-moon-bottom);
    z-index: 3;
    display: block;
    width: var(--hub-moon-w);
    aspect-ratio: 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.gameover-mooney-float,
.gameover-mooney-body,
.gameover-mooney-face,
.gameover-mooney-gaze {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.gameover-mooney-float {
    animation: hub-mooney-float 3.8s ease-in-out infinite;
    transform-origin: center;
}

.gameover-mooney-body,
.gameover-mooney-gaze {
    object-fit: contain;
}

.gameover-mooney-body {
    filter: drop-shadow(0 18px 24px rgba(1, 2, 20, 0.58));
}

.gameover-mooney[data-outcome="defeat"] .gameover-mooney-body {
    filter: drop-shadow(0 18px 24px rgba(1, 2, 20, 0.58)) brightness(0.92) saturate(0.85);
}

.gameover-mooney-face {
    transform: scale(0.88);
    transform-origin: center;
}

.hub-mooney-actor {
    position: absolute;
    left: var(--hub-moon-x);
    bottom: var(--hub-moon-bottom);
    z-index: 3;
    display: block;
    width: var(--hub-moon-w);
    aspect-ratio: 1;
    transform: translateX(-50%);
    transform-origin: center;
    animation: hub-mooney-arrive 920ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
    pointer-events: none;
    will-change: left, opacity, transform;
}

.hub-mooney-float-shell,
.hub-mooney-portrait,
.hub-mooney-face,
.hub-mooney-gaze,
.hub-mooney-expression {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hub-mooney-float-shell {
    animation: hub-mooney-float 3.8s ease-in-out 920ms infinite;
    transform-origin: center;
}

.hub-mooney-portrait,
.hub-mooney-gaze,
.hub-mooney-expression {
    object-fit: contain;
}

.hub-mooney-expression {
    opacity: 0;
}

.hub-mooney-actor[data-expression="blink"] .hub-mooney-gaze,
.hub-mooney-actor[data-expression="wink"] .hub-mooney-gaze {
    opacity: 0;
}

.hub-mooney-actor[data-expression="blink"] .hub-mooney-blink,
.hub-mooney-actor[data-expression="wink"] .hub-mooney-wink {
    opacity: 1;
}

.hub-mooney-portrait {
    filter: drop-shadow(0 18px 24px rgba(1, 2, 20, 0.58));
}

.hub-mooney-face {
    transform: scale(0.88);
    transform-origin: center;
}

@keyframes hub-mooney-arrive {
    0% {
        left: 50%;
        opacity: 1;
        transform: translate(-50%, calc(24vh - var(--hub-art-shift-y))) scale(0.86);
    }
    22% { opacity: 1; }
    72% {
        left: calc(var(--hub-moon-x) - 0.8%);
        transform: translate(-50%, -7px) scale(1.025);
    }
    100% {
        left: var(--hub-moon-x);
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes hub-mooney-float {
    0%, 100% { transform: translateY(0) rotate(-0.45deg); }
    50% { transform: translateY(-8px) rotate(0.55deg); }
}

.hub-actions {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 10px;
    padding: clamp(58px, 7vw, 72px) clamp(10px, 2vw, 22px) 0;
}

.console-action,
.subview-actions button,
.hubBackButtons,
.homecoming-panel button, .pause-card button,
.spectator-actions button,
#restartButton,
#upgradeShopButton,
#backToLobbyButton,
.shop-buy-button {
    --control-frame: rgba(140, 91, 255, 0.76);
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 12px 22px;
    border: 0;
    border-radius: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-weight: 850;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
    background: var(--control-frame);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.13),
        inset 0 -4px 0 rgba(4, 5, 34, 0.62),
        inset 0 0 20px rgba(140, 91, 255, 0.1),
        0 5px 0 rgba(4, 4, 29, 0.72),
        0 0 12px rgba(140, 91, 255, 0.16);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.console-action::after,
.subview-actions button::after,
.hubBackButtons::after,
.homecoming-panel button::after,
.pause-card button::after,
.spectator-actions button::after,
#restartButton::after,
#upgradeShopButton::after,
#backToLobbyButton::after,
.shop-buy-button::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border: 0;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    pointer-events: none;
}

.console-action::after {
    inset: 1px;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    box-shadow: var(--cyan-glow), inset 0 0 12px rgba(82, 229, 255, 0.12);
}

.console-action:hover,
.subview-actions button:hover,
.hubBackButtons:hover,
.homecoming-panel button:hover,
.pause-card button:hover,
.spectator-actions button:hover,
#restartButton:hover,
#upgradeShopButton:hover,
#backToLobbyButton:hover,
.shop-buy-button:hover:not(:disabled) {
    --control-frame: var(--electric-cyan);
    color: var(--mooney-ivory);
    box-shadow: var(--glow-tight), inset 0 0 24px rgba(82, 229, 255, 0.1);
    transform: translateY(-1px);
}

.console-action:focus-visible,
.subview-actions button:focus-visible,
.hubBackButtons:focus-visible,
.pause-card button:focus-visible,
.spectator-actions button:focus-visible,
#restartButton:focus-visible,
#upgradeShopButton:focus-visible,
#backToLobbyButton:focus-visible,
.shop-buy-button:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
    box-shadow: var(--focus-cyan);
    filter: drop-shadow(0 0 7px rgba(82, 229, 255, 0.72));
}

.hub-actions .console-action {
    justify-content: flex-start;
    min-height: clamp(58px, 8vh, 74px);
    padding-inline: clamp(66px, 10vw, 94px) 24px;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.8vw, 1.6rem);
}

.hub-actions .console-action::before {
    position: absolute;
    left: clamp(22px, 4.2vw, 38px);
    color: var(--accent-magenta);
    font-family: var(--font-body);
    font-size: 1.35em;
    line-height: 1;
    text-shadow: 0 0 12px currentColor;
}

#playClassicButton::before { content: "▶"; color: var(--electric-cyan); }
#arenaButton::before { content: "◎"; }
#progressButton::before { content: "⌃"; }

.console-action.is-primary,
#arenaLaunchButton,
#resumeButton,
#restartButton {
    --control-frame: var(--electric-cyan);
    --control-fill: linear-gradient(135deg, rgba(3, 82, 128, 0.84), rgba(12, 20, 74, 0.96));
    color: var(--text-primary);
    background: var(--control-frame);
    box-shadow: var(--glow-tight), inset 0 0 26px rgba(82, 229, 255, 0.14);
}

.hub-meta {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px 2px;
    border-top: 1px solid rgba(82, 229, 255, 0.22);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-meta strong {
    color: var(--electric-cyan);
}

/* The daily drop, challenges and account chips sit side by side, wrapping only when there is no room. */
.hub-meta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Hub subviews: Arena setup and read-only progress */
.subview {
    display: grid;
    gap: 18px;
    width: min(720px, calc(100vw - 32px));
    text-align: left;
}

.subview > h2,
.shop-header h2 {
    color: var(--mooney-ivory);
    font-size: clamp(1.7rem, 5vw, 2.7rem);
    line-height: 1;
    text-shadow: 0 0 18px rgba(140, 91, 255, 0.46);
}

.mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mode-option {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: var(--control-height);
    cursor: pointer;
}

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

/*
 * Chamfered frames: clip-path cuts a plain CSS border off at the corners, so these elements paint the
 * four diagonal corner strokes as background layers in their own --frame colour. State rules change
 * --frame (not border-color) so straight edges and corners stay in sync.
 */
.mode-option span,
.callsign-input,
.shop-item,
.control-hint,
#miniMap,
#arenaStatus,
.player-preview-card,
#gameOverScoreline,
.result-row,
.result-status {
    --chamfer: 12px;
}

.results-panel,
.gameover-shop {
    --chamfer: 18px;
}

.mode-option span,
.callsign-input,
.shop-item,
.control-hint,
#miniMap,
#arenaStatus,
.player-preview-card,
#gameOverScoreline,
.result-row,
.result-status,
.results-panel,
.gameover-shop {
    --chamfer-corners:
        linear-gradient(to bottom right, transparent calc(50% - 1px), var(--frame) 0 calc(50% + 1px), transparent 0) top left / var(--chamfer) var(--chamfer) no-repeat border-box,
        linear-gradient(to bottom left, transparent calc(50% - 1px), var(--frame) 0 calc(50% + 1px), transparent 0) top right / var(--chamfer) var(--chamfer) no-repeat border-box,
        linear-gradient(to top right, transparent calc(50% - 1px), var(--frame) 0 calc(50% + 1px), transparent 0) bottom left / var(--chamfer) var(--chamfer) no-repeat border-box,
        linear-gradient(to top left, transparent calc(50% - 1px), var(--frame) 0 calc(50% + 1px), transparent 0) bottom right / var(--chamfer) var(--chamfer) no-repeat border-box;
}

.mode-option span {
    display: grid;
    place-items: center;
    min-height: var(--control-height);
    padding: 10px 14px;
    --frame: rgba(140, 91, 255, 0.62);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    color: var(--text-muted);
    font-weight: 800;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
    background: var(--chamfer-corners), rgba(16, 19, 74, 0.72);
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.mode-option input:hover + span {
    --frame: var(--electric-cyan);
}

.mode-option input:focus-visible + span {
    --frame: var(--electric-cyan);
    box-shadow: var(--focus-cyan);
}

.mode-option input:checked + span {
    --frame: var(--electric-cyan);
    color: var(--space-950);
    background: var(--chamfer-corners), linear-gradient(135deg, var(--electric-cyan), #a7f5ff);
    box-shadow: var(--glow-tight);
}

.mode-helper {
    min-height: 42px;
    padding: 10px 12px;
    border-left: 3px solid var(--ultraviolet);
    color: var(--text-muted) !important;
    font-size: 0.9rem;
}

.lobby-size-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lobby-size-label {
    color: var(--mooney-ivory);
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lobby-size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(54px, 76px));
    gap: 8px;
}

.lobby-size-group.is-disabled {
    opacity: 0.42;
}

.lobby-size-group.is-disabled .mode-option {
    cursor: default;
}

.callsign-input {
    width: 100%;
    min-height: var(--control-height);
    padding: 11px 14px;
    --frame: rgba(82, 229, 255, 0.42);
    border: 1px solid var(--frame);
    border-radius: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    background: var(--chamfer-corners), rgba(2, 5, 27, 0.72);
}

.callsign-input::selection {
    color: var(--space-950);
    background: var(--electric-cyan);
}

.subview-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
    gap: 10px;
}

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shop-credits {
    color: var(--cargo-gold);
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.armory-scroll {
    display: grid;
    gap: 20px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 3px;
    padding-bottom: 8px;
}

.armory-section {
    display: grid;
    gap: 10px;
}

.armory-section > h3 {
    color: var(--electric-cyan);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.armory-section > p {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Compact cards, two (or more) per row when there is room, one per row on phones. */
.armory-section .shop-items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 8px;
}

#progressPanel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100svh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow: hidden;
}

.shop-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    --frame: rgba(140, 91, 255, 0.42);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    background: var(--chamfer-corners), linear-gradient(120deg, rgba(16, 19, 74, 0.84), rgba(41, 16, 95, 0.5));
}

.shop-item h3 {
    margin-bottom: 4px;
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.shop-item p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.shop-meta {
    margin-top: 7px;
    color: var(--electric-cyan);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.35;
}

/* One Armory card everywhere (main menu and results): icon · details · buy button. The icons reuse
   the live pickup-dock language so licences read as power-ups at a glance. */
.shop-item.armory-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    border-left: 3px solid var(--ultraviolet);
}

.shop-item.armory-card.is-unlocked {
    border-left-color: var(--electric-cyan);
}

.armory-card .supply-license-icon {
    width: 44px;
}

.armory-card .supply-license-icon::after {
    font-size: 1.15rem;
}

.armory-card h3 {
    margin-bottom: 2px;
    font-size: 0.86rem;
}

.armory-card p {
    font-size: 0.76rem;
    line-height: 1.3;
}

.armory-card .shop-meta {
    margin-top: 4px;
    font-size: 0.68rem;
}

.armory-card .shop-buy-button {
    width: auto;
    min-width: 84px;
    padding-inline: 12px;
}

.supply-license-icon {
    --supply-license-color: var(--electric-cyan);
    --supply-license-symbol: "✦";
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--supply-license-color) 86%, white);
    border-radius: 50%;
    color: var(--supply-license-color);
    background:
        radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--supply-license-color) 34%, white), transparent 22%),
        radial-gradient(circle at center, rgba(20, 58, 112, 0.56), rgba(7, 11, 45, 0.68) 72%);
    box-shadow:
        0 0 0 3px rgba(7, 11, 45, 0.68),
        0 0 0 4px color-mix(in srgb, var(--supply-license-color) 34%, transparent),
        inset 0 0 13px color-mix(in srgb, var(--supply-license-color) 24%, transparent),
        0 0 14px color-mix(in srgb, var(--supply-license-color) 30%, transparent);
}

.supply-license-icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--supply-license-color) 42%, transparent);
    border-radius: inherit;
}

.supply-license-icon::after {
    content: var(--supply-license-symbol);
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 9px var(--supply-license-color);
}

.supply-license-icon[data-pickup-type="shield"] { --supply-license-color: #54e9ff; --supply-license-symbol: "○"; }
.supply-license-icon[data-pickup-type="machineGun"] { --supply-license-color: #83f58b; --supply-license-symbol: "»"; }
.supply-license-icon[data-pickup-type="shockwave"] { --supply-license-color: var(--danger-coral); --supply-license-symbol: "✦"; }
.supply-license-icon[data-pickup-type="health"] { --supply-license-color: var(--accent-magenta); --supply-license-symbol: "+"; }
.supply-license-icon[data-pickup-type="bigBullet"] { --supply-license-color: #ffe680; --supply-license-symbol: "●"; }
.supply-license-icon[data-pickup-type="buddyShip"] { --supply-license-color: var(--ultraviolet); --supply-license-symbol: "△"; }
.supply-license-icon[data-pickup-type="repulsionMagnet"] { --supply-license-color: #ffb45c; --supply-license-symbol: "↔"; }
.supply-license-icon[data-pickup-type="repulsorLaser"] { --supply-license-color: var(--electric-cyan); --supply-license-symbol: "⌁"; }
.supply-license-icon[data-pickup-type="shotgun"] { --supply-license-color: #ff9d5c; --supply-license-symbol: "Ψ"; }
.supply-license-icon[data-pickup-type="lightning"] { --supply-license-color: #d9b8ff; --supply-license-symbol: "ϟ"; }
/* Permanent systems. \FE0E keeps the heart a text glyph instead of an emoji. */
.supply-license-icon[data-pickup-type="reinforcedCore"] { --supply-license-color: #ff7ab8; --supply-license-symbol: "\2665\FE0E"; }
.supply-license-icon[data-pickup-type="shieldBattery"] { --supply-license-color: #54e9ff; --supply-license-symbol: "◎"; }
.supply-license-icon[data-pickup-type="buddyBay"] { --supply-license-color: #a98bff; --supply-license-symbol: "▲"; }
.supply-license-icon[data-pickup-type="chargeFocus"] { --supply-license-color: #ffe680; --supply-license-symbol: "◉"; }
.supply-license-icon[data-pickup-type="supplyBeacon"] { --supply-license-color: #7dffcf; --supply-license-symbol: "◈"; }

.shop-buy-button {
    min-width: 118px;
    min-height: 48px;
    padding-inline: 14px;
}

.shop-buy-button:disabled {
    border-color: rgba(185, 196, 233, 0.18);
    color: rgba(185, 196, 233, 0.52);
    background: rgba(16, 19, 74, 0.38);
    box-shadow: none;
    cursor: not-allowed;
}

/* Gameplay and angular HUD */
#gameContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--space-950);
}

#gameCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(155deg, var(--space-950), var(--space-900));
}

.power-up-dock {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 4vw, 38px);
    transform: translateX(-50%);
    pointer-events: none;
}

.power-up-dock[hidden] {
    display: none;
}

.power-up-chip {
    --power-up-color: var(--electric-cyan);
    --power-up-progress: 1;
    display: grid;
    gap: 5px;
    width: clamp(42px, 7vw, 52px);
    opacity: 1;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--power-up-color) 38%, transparent));
    transform-origin: center top;
    transition: width 220ms ease, opacity 180ms ease, transform 220ms ease, margin 220ms ease;
    animation: power-up-arrive 220ms cubic-bezier(0.2, 0.85, 0.3, 1.25) both;
}

.power-up-placeholder {
    --power-up-color: rgba(82, 229, 255, 0.58);
    display: grid;
    gap: 5px;
    width: clamp(42px, 7vw, 52px);
    opacity: 0.42;
    filter: drop-shadow(0 0 8px rgba(82, 229, 255, 0.18));
}

.power-up-placeholder[hidden] {
    display: none;
}

.power-up-placeholder .power-up-icon {
    border-color: rgba(82, 229, 255, 0.58);
    background: radial-gradient(circle at center, rgba(26, 50, 104, 0.44), rgba(7, 11, 45, 0.68) 72%);
    box-shadow:
        0 0 0 3px rgba(7, 11, 45, 0.42),
        0 0 0 4px rgba(82, 229, 255, 0.16),
        inset 0 0 11px rgba(82, 229, 255, 0.12);
}

.power-up-placeholder .power-up-meter {
    background: rgba(82, 229, 255, 0.26);
    box-shadow: 0 0 6px rgba(82, 229, 255, 0.14);
}

.power-up-chip.is-leaving {
    width: 0;
    margin-inline: -4px;
    opacity: 0;
    transform: translateY(9px) scale(0.7);
}

.power-up-chip.is-expiring {
    animation: power-up-warning 680ms ease-in-out infinite alternate;
}

.power-up-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--power-up-color) 86%, white);
    border-radius: 50%;
    color: var(--power-up-color);
    background:
        radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--power-up-color) 34%, white), transparent 22%),
        radial-gradient(circle at center, rgba(20, 58, 112, 0.56), rgba(7, 11, 45, 0.68) 72%);
    box-shadow:
        0 0 0 3px rgba(7, 11, 45, 0.68),
        0 0 0 4px color-mix(in srgb, var(--power-up-color) 34%, transparent),
        inset 0 0 13px color-mix(in srgb, var(--power-up-color) 24%, transparent),
        0 0 14px color-mix(in srgb, var(--power-up-color) 30%, transparent);
}

.power-up-icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--power-up-color) 42%, transparent);
    border-radius: inherit;
}

.power-up-symbol {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(0.84rem, 2.3vw, 1.15rem);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 9px var(--power-up-color);
}

.power-up-meter {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(185, 196, 233, 0.18);
    box-shadow: 0 0 0 1px rgba(7, 11, 45, 0.64);
}

.power-up-meter-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--power-up-color) 70%, white), var(--power-up-color));
    box-shadow: 0 0 8px var(--power-up-color);
    transform: scaleX(var(--power-up-progress));
    transform-origin: left center;
    transition: transform 90ms linear;
}

@keyframes power-up-arrive {
    from { opacity: 0; transform: translateY(10px) scale(0.7); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes power-up-warning {
    from { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--power-up-color) 28%, transparent)); }
    to { filter: drop-shadow(0 0 17px color-mix(in srgb, var(--power-up-color) 78%, transparent)); }
}

#hud {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: min(720px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    font-size: 0.78rem;
}

#hud div:not(.sr-only) {
    --hud-frame: rgba(82, 229, 255, 0.25);
    --hud-fill: rgba(7, 11, 45, 0.78);
    position: relative;
    isolation: isolate;
    min-height: 36px;
    padding: 9px 12px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-weight: 750;
    background: var(--hud-frame);
    box-shadow: 0 8px 24px rgba(2, 5, 27, 0.28);
    backdrop-filter: blur(7px);
}

#viewModeButton,
.hud-button {
    display: none;
}

.hud-controls {
    position: absolute;
    top: var(--top-controls-inset-y);
    right: calc(var(--top-controls-inset-x) + var(--control-height) + var(--top-controls-gap));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--top-controls-gap);
    font-size: 0.78rem;
}

#pauseButton,
#leaveBattleButton,
#soundButton {
    --hud-frame: rgba(82, 229, 255, 0.35);
    --hud-fill: rgba(7, 11, 45, 0.8);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 800;
    background: var(--hud-frame);
    cursor: pointer;
}

#hud div:not(.sr-only)::after,
#pauseButton::after,
#leaveBattleButton::after,
#soundButton::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border: 0;
    clip-path: var(--control-inner-clip);
    background: var(--hud-fill);
    pointer-events: none;
}

#pauseButton:hover,
#leaveBattleButton:hover,
#soundButton:hover {
    --hud-frame: var(--electric-cyan);
    box-shadow: var(--glow-tight);
}

/* Global music toggle: fixed above every screen (intro, hub, run, pause, post-run). */
.music-toggle {
    --hud-frame: rgba(82, 229, 255, 0.35);
    --hud-fill: rgba(7, 11, 45, 0.8);
    position: fixed;
    top: var(--top-controls-inset-y);
    right: var(--top-controls-inset-x);
    z-index: 30;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    background: var(--hud-frame);
    cursor: pointer;
    touch-action: manipulation;
}

.music-toggle::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--control-inner-clip);
    background: var(--hud-fill);
    pointer-events: none;
}

.music-toggle:hover,
.music-toggle:focus-visible {
    --hud-frame: var(--electric-cyan);
    box-shadow: var(--glow-tight);
}

.music-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.music-toggle-slash {
    display: none;
}

.music-toggle[aria-pressed="true"] {
    color: var(--text-muted);
}

.music-toggle[aria-pressed="true"] .music-toggle-slash {
    display: inline;
}

.control-hint {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 3;
    width: min(520px, calc(100vw - 32px));
    padding: 12px 18px;
    --frame: rgba(82, 229, 255, 0.48);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    background: var(--chamfer-corners), rgba(7, 11, 45, 0.86);
    box-shadow: var(--glow-tight);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Pause and confirmed quit */
.pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    background: rgba(2, 5, 27, 0.78);
    backdrop-filter: blur(9px);
}

/* Finish Run: a compact results card over the homecoming scene, so Mooney's orbit stays the star. */
.homecoming-panel {
    position: absolute;
    z-index: 8;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    gap: 6px;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    padding: 12px 16px;
    text-align: center;
    animation: homecoming-panel-in 700ms ease-out both;
}

.homecoming-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.homecoming-panel h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.homecoming-panel p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.35;
}

.homecoming-score {
    white-space: nowrap;
}

.homecoming-score strong {
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    line-height: 1;
}

.homecoming-score span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.homecoming-credits-banked {
    color: var(--cargo-gold) !important;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
}

.homecoming-panel .leaderboard-rank {
    font-size: 0.85rem;
    text-align: left;
}

.signup-details {
    text-align: left;
}

.signup-details[hidden] {
    display: none;
}

.signup-details summary {
    color: var(--electric-cyan);
    font-size: 0.85rem;
    cursor: pointer;
}

.homecoming-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.homecoming-panel button {
    min-height: 40px;
    border: 0;
    isolation: isolate;
    background: transparent;
    font-size: 0.78rem;
}

@keyframes homecoming-panel-in {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Landscape: a narrow card on the left so Earth's face and Mooney stay in view. */
@media (min-aspect-ratio: 5/4) {
    .homecoming-panel {
        left: max(12px, 2vw);
        width: min(360px, 36vw);
        transform: none;
        animation-name: homecoming-panel-in-side;
    }
}

@keyframes homecoming-panel-in-side {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

/* Portrait phones: clear the music button in the top-right corner. */
@media (max-aspect-ratio: 5/4) and (max-width: 640px) {
    .homecoming-panel { top: max(64px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
    .homecoming-panel { animation: none; }
}

/* During the homecoming the in-run HUD steps aside. */
#gameContainer.is-homecoming #hud,
#gameContainer.is-homecoming #hudControls,
#gameContainer.is-homecoming .power-up-dock {
    visibility: hidden;
}

/* The ending choice keeps the giant visible behind it. */
.ending-choice-overlay {
    background: rgba(2, 5, 27, 0.4);
    backdrop-filter: blur(2px);
}

/* "Spotted on this trip" on the ending choice: round icons, tap one for its fact. */
.trip-log {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.trip-log h3 {
    margin: 0;
    color: var(--electric-cyan);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.trip-log-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pause-card .trip-log-item {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 4px;
    border: 1px solid rgba(82, 229, 255, 0.35);
    border-radius: 50%;
    clip-path: none;
    background: radial-gradient(circle, rgba(82, 229, 255, 0.16), rgba(7, 11, 45, 0.85) 70%);
    cursor: pointer;
    animation: trip-log-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
    animation-delay: calc(650ms + var(--i, 0) * 70ms);
}

.pause-card .trip-log-item::before,
.pause-card .trip-log-item::after {
    content: none;
}

.trip-log-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.pause-card .trip-log-item:hover,
.pause-card .trip-log-item[aria-pressed="true"] {
    border-color: var(--electric-cyan);
    box-shadow: 0 0 12px rgba(82, 229, 255, 0.45);
}

.trip-log-item:focus-visible {
    outline: 2px solid var(--mooney-ivory);
    outline-offset: 2px;
}

.trip-log-detail {
    min-height: 2.6em;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.trip-log-detail strong {
    color: var(--text-primary);
}

/* The ending choice arrives in steps: backdrop, card, kicker, title, text, icons, buttons. */
.ending-choice-overlay:not([hidden]) {
    animation: ending-overlay-in 500ms ease-out both;
}

.ending-choice-overlay:not([hidden]) .pause-card {
    animation: ending-card-in 700ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.ending-choice-overlay:not([hidden]) .pause-kicker {
    animation: ending-kicker-in 700ms ease-out 250ms both;
}

.ending-choice-overlay:not([hidden]) h2 {
    animation: ending-rise-in 600ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 350ms both;
}

.ending-choice-overlay:not([hidden]) #endingChoiceMessage,
.ending-choice-overlay:not([hidden]) .trip-log h3,
.ending-choice-overlay:not([hidden]) .trip-log-detail {
    animation: ending-fade-in 500ms ease-out 500ms both;
}

.ending-choice-overlay:not([hidden]) #playEndlessButton {
    animation: ending-rise-in 500ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 850ms both;
}

.ending-choice-overlay:not([hidden]) #finishRunButton {
    animation: ending-rise-in 500ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 950ms both;
}

@keyframes ending-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ending-card-in {
    0% { opacity: 0; transform: translateY(40px) scale(0.84); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ending-kicker-in {
    from { opacity: 0; letter-spacing: 0.6em; }
    to { opacity: 1; }
}

@keyframes ending-rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ending-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes trip-log-pop {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ending-choice-overlay:not([hidden]),
    .ending-choice-overlay:not([hidden]) *,
    .pause-card .trip-log-item {
        animation: none !important;
    }
}

/* Same title style as the in-game event banners (weight 700), not the extra-heavy menu titles. */
.ending-choice-overlay h2 {
    font-weight: 700;
    font-size: clamp(1.4rem, 3.6vw, 2.1rem);
    line-height: 1;
    letter-spacing: 0.05em;
}

.pause-card {
    display: grid;
    gap: 12px;
    width: min(470px, 100%);
    max-height: calc(100svh - 32px);
    padding: clamp(24px, 5vw, 38px);
    overflow-y: auto;
    text-align: center;
}

.pause-card button {
    border: 0;
    isolation: isolate;
    background: transparent;
}

.pause-card button::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    clip-path: var(--control-clip);
    background: var(--electric-cyan);
    pointer-events: none;
}

.pause-card button::after {
    display: block;
    z-index: -1;
    inset: 1px;
    border: 0;
    clip-path: var(--control-clip);
    background: linear-gradient(135deg, rgba(3, 82, 128, 0.96), rgba(12, 20, 74, 0.98));
}

#quitToMainButton::before {
    background: var(--danger-coral);
}

#quitToMainButton::after {
    background: linear-gradient(135deg, rgba(91, 24, 73, 0.96), rgba(31, 18, 66, 0.98));
}

.pause-kicker,
.spectator-kicker {
    color: var(--electric-cyan);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pause-card h2 {
    color: var(--mooney-ivory);
    font-size: clamp(2.2rem, 8vw, 4rem);
    line-height: 0.95;
}

.pause-card p:not(.pause-kicker) {
    margin-bottom: 6px;
    color: var(--text-muted);
    line-height: 1.45;
}

#quitToMainButton,
#confirmQuitButton {
    border-color: var(--danger-coral);
}

#quitToMainButton:focus-visible,
#confirmQuitButton:focus-visible,
#upgradeShopButton:focus-visible {
    outline-color: var(--accent-magenta);
    box-shadow: var(--focus-magenta);
    filter: drop-shadow(0 0 7px rgba(255, 91, 200, 0.72));
}

#confirmQuitButton {
    color: var(--space-950);
    box-shadow: 0 0 16px rgba(255, 100, 124, 0.28);
}

#confirmQuitButton::before {
    background: var(--danger-coral);
}

#confirmQuitButton::after {
    background: linear-gradient(135deg, #ffb2bd, #ff647c);
}

#pauseMenu button,
#quitConfirmation button {
    background: transparent;
}

#quitConfirmation .pause-kicker {
    color: var(--danger-coral);
}

.encounter-hud {
    position: absolute;
    z-index: 5;
    top: calc(max(8px, env(safe-area-inset-top)) + var(--control-height) + 10px);
    left: 50%;
    width: min(430px, calc(100% - 32px));
    padding: 11px 14px 12px;
    transform: translateX(-50%);
    isolation: isolate;
    border: 0;
    clip-path: var(--panel-clip);
    /* Frame colour + inset inner fill, so the chamfered corners keep their outline. */
    background: rgba(255, 100, 124, 0.84);
    color: var(--mooney-ivory);
    pointer-events: none;
}

.encounter-hud::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--panel-inner-clip);
    background: linear-gradient(135deg, rgba(36, 10, 52, 0.94), rgba(7, 11, 45, 0.96));
    box-shadow: inset 0 0 22px rgba(255, 100, 124, 0.2);
    pointer-events: none;
}

.pressure-event-banner {
    position: absolute;
    z-index: 6;
    top: clamp(76px, 12vh, 118px);
    left: 50%;
    display: grid;
    gap: 2px;
    width: min(520px, calc(100% - 32px));
    padding: 14px 22px 16px;
    isolation: isolate;
    border: 0;
    clip-path: var(--panel-clip);
    color: var(--mooney-ivory);
    text-align: center;
    text-transform: uppercase;
    /* Frame colour + inset inner fill, so the chamfered corners keep their outline. */
    background: rgba(255, 200, 61, 0.86);
    transform: translateX(-50%);
    animation: pressure-event-arrive 420ms cubic-bezier(0.18, 0.85, 0.24, 1.1) both;
    pointer-events: none;
}

/* Story calls from Star Base Kuiper, styled as a Metal Gear Solid-like codec. */
.codec {
    --codec-line: rgba(82, 229, 255, 0.8);
    --codec-portrait: clamp(72px, 11vw, 108px);
    position: absolute;
    z-index: 6;
    /* Read at the bottom, like a codec call, clear of the HUD at the top. */
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px);
    left: 50%;
    display: grid;
    gap: 10px;
    width: min(620px, calc(100% - 24px));
    padding: 12px 14px 14px;
    isolation: isolate;
    clip-path: var(--panel-clip);
    color: var(--mooney-ivory);
    background: var(--codec-line);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: codec-open 360ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
    /* Tappable to skip ahead (it sits below the play area, so it does not steal aiming). */
    cursor: pointer;
}

/* While a call is open, lift the control hint above the codec so they never overlap. */
.codec:not([hidden]) ~ .control-hint {
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + clamp(170px, 24vw, 210px));
}

.codec::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--panel-inner-clip);
    background:
        repeating-linear-gradient(0deg, rgba(82, 229, 255, 0.05) 0 1px, transparent 1px 3px),
        linear-gradient(135deg, rgba(4, 22, 44, 0.97), rgba(5, 9, 34, 0.97));
}

.codec-screen {
    display: grid;
    grid-template-columns: var(--codec-portrait) 1fr var(--codec-portrait);
    align-items: center;
    gap: 12px;
}

.codec-portrait {
    position: relative;
    width: var(--codec-portrait);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--codec-line);
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
        radial-gradient(circle at 50% 40%, rgba(40, 90, 140, 0.55), rgba(3, 10, 28, 0.95));
    box-shadow: inset 0 0 14px rgba(82, 229, 255, 0.25);
    animation: codec-portrait-on 420ms steps(6) both;
    transition: filter 160ms ease;
}

/* Scanlines over the portrait art itself. */
.codec-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(4, 14, 30, 0.32) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

.codec:not([data-speaker="mooney"]) .codec-portrait--mooney,
.codec[data-speaker="mooney"] .codec-portrait--caller {
    filter: brightness(0.45) saturate(0.4);
}

.codec-astronaut {
    position: absolute;
    inset: 4% 0 0;
    background-image: url('images/kuiper-astronaut-sheet.png');
    background-size: 200% 200%;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.codec-astronaut[data-frame="talking"] { background-position: 100% 0; }
.codec-astronaut[data-frame="blink"] { background-position: 0 100%; }
.codec-astronaut[data-frame="urgent"] { background-position: 100% 100%; }

.codec-mooney {
    position: absolute;
    inset: 10%;
}

/* The unknown caller: a silhouette full of stars with glowing eyes. */
.codec-shadow {
    position: absolute;
    inset: 0;
    background: #04020c;
}

.codec-shadow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.codec-shadow[hidden] { display: none; }

/* Live crop of the boss itself, drawn over the fallback silhouette while it is on screen. */
.codec-shadow-live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Pluto and Earth call in too: their planet art with the planet face layer on top. */
.codec-planet {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background-position: center;
    background-size: 114%;
    background-repeat: no-repeat;
}

.codec-planet[data-body="pluto"] { background-image: url('images/celestial/pluto.png'); }
.codec-planet[data-body="earth"] { background-image: url('images/celestial/earth.png?v=3'); }

.codec-planet-face {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 14%;
    height: 62%;
    background-image: url('images/planet-face-sheet.png');
    background-size: 300% 200%;
    background-repeat: no-repeat;
    background-position: 50% 0;
}

.codec-planet-face[data-frame="talking"] { background-position: 50% 100%; }
.codec-planet-face[data-frame="blink"] { background-position: 0 100%; }
.codec-planet-face[data-frame="worried"] { background-position: 100% 100%; }

.codec-mooney img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.codec-mooney-face {
    transform: scale(0.88);
}

.codec[data-speaker="mooney"] .codec-mooney {
    animation: codec-mooney-talk 260ms ease-in-out infinite alternate;
}

.codec-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1px 0;
    color: var(--electric-cyan);
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
    background: rgba(3, 10, 28, 0.78);
}

.codec-frequency {
    display: grid;
    justify-items: center;
    gap: 4px;
    color: var(--electric-cyan);
    font-weight: 850;
    text-transform: uppercase;
}

.codec-ptt,
.codec-memory {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    opacity: 0.8;
}

.codec-freq {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    letter-spacing: 0.08em;
    text-shadow: 0 0 12px rgba(82, 229, 255, 0.6);
}

.codec-signal {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.codec-signal i {
    width: 5px;
    height: 100%;
    background: var(--electric-cyan);
    opacity: 0.85;
    transform-origin: bottom;
    animation: codec-signal 520ms ease-in-out infinite alternate;
}

.codec-signal i:nth-child(2n) { animation-delay: -180ms; }
.codec-signal i:nth-child(3n) { animation-delay: -340ms; }

.codec-text {
    min-height: 2.7em;
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid rgba(82, 229, 255, 0.35);
    font-size: clamp(0.86rem, 1.6vw, 1rem);
    line-height: 1.35;
}

.codec-text::before {
    content: attr(data-speaker-label) ": ";
    color: var(--electric-cyan);
    font-weight: 850;
}

@keyframes codec-open {
    from { opacity: 0; transform: translateX(-50%) scaleY(0.05); }
    to { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

@keyframes codec-portrait-on {
    0% { opacity: 0; }
    30% { opacity: 0.8; }
    45% { opacity: 0.2; }
    100% { opacity: 1; }
}

@keyframes codec-signal {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}

@keyframes codec-mooney-talk {
    from { transform: translateY(0); }
    to { transform: translateY(-3%); }
}

@media (max-width: 520px) {
    .codec-ptt,
    .codec-memory {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .codec,
    .codec-portrait,
    .codec-signal i,
    .codec[data-speaker="mooney"] .codec-mooney {
        animation: none;
    }
}

.pressure-event-banner::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--panel-inner-clip);
    background: linear-gradient(135deg, rgba(54, 18, 68, 0.94), rgba(7, 11, 45, 0.96));
    box-shadow: inset 0 0 20px rgba(82, 229, 255, 0.09), inset 0 0 28px rgba(255, 91, 200, 0.14);
    pointer-events: none;
}

.pressure-event-banner span {
    color: var(--electric-cyan);
    font-size: clamp(0.68rem, 1.3vw, 0.82rem);
    font-weight: 850;
    letter-spacing: 0.14em;
}

.pressure-event-banner strong {
    color: var(--cargo-gold);
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 4.2vw, 3rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: 0 0 18px rgba(255, 200, 61, 0.48);
}

#pressureEventMessage {
    color: var(--mooney-ivory);
    letter-spacing: 0.04em;
    text-transform: none;
}

@keyframes pressure-event-arrive {
    from { opacity: 0; transform: translate(-50%, -16px) scale(0.92); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pressure-event-banner { animation: none; }
}

.encounter-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-transform: uppercase;
}

.encounter-heading strong {
    color: var(--danger-coral);
    letter-spacing: 0.08em;
}

.encounter-heading span {
    color: var(--electric-cyan);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.encounter-hud p {
    margin: 5px 0 8px;
    color: var(--mooney-ivory);
    font-size: 0.88rem;
    line-height: 1.3;
}

.encounter-hud progress {
    display: block;
    width: 100%;
    height: 7px;
    accent-color: var(--danger-coral);
}

@media (max-width: 760px) {
    .encounter-hud {
        top: calc(max(8px, env(safe-area-inset-top)) + var(--control-height) + 6px);
        width: calc(100% - 24px);
        padding: 9px 11px 10px;
    }

    .encounter-hud p {
        font-size: 0.78rem;
    }
}

/* Required mid-run choice */
.run-upgrade-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    overflow: clip;
    background: rgba(2, 5, 27, 0.82);
    backdrop-filter: blur(9px);
}

.run-upgrade-overlay.is-entering {
    animation: run-upgrade-enter 360ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.run-upgrade-overlay.is-exiting {
    pointer-events: none;
    animation: run-upgrade-exit 260ms ease-in both;
}

.run-upgrade-overlay.is-entering .run-upgrade-dialog {
    animation: run-upgrade-dialog-enter 440ms cubic-bezier(0.16, 0.9, 0.22, 1.15) both;
}

.run-upgrade-overlay.is-entering .run-upgrade-mooney {
    animation: run-upgrade-mooney-enter 520ms cubic-bezier(0.16, 0.9, 0.22, 1.1) 80ms both;
}

.run-upgrade-choice {
    animation: run-upgrade-card-enter 420ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.run-upgrade-choice:nth-child(2) { animation-delay: 70ms; }
.run-upgrade-choice:nth-child(3) { animation-delay: 140ms; }
.run-upgrade-choice:nth-child(4) { animation-delay: 210ms; }

@keyframes run-upgrade-enter {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(9px); }
}

@keyframes run-upgrade-exit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.025); }
}

@keyframes run-upgrade-dialog-enter {
    from { opacity: 0; transform: translateY(30px) scale(0.88); }
    70% { opacity: 1; transform: translateY(-4px) scale(1.015); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes run-upgrade-card-enter {
    from { opacity: 0; transform: translateY(22px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes run-upgrade-mooney-enter {
    from { opacity: 0; transform: translate(-50%, 44px) scale(0.76); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.run-upgrade-overlay[hidden] {
    display: none;
}

.run-upgrade-stage {
    position: relative;
    display: grid;
    align-items: end;
    width: min(860px, 100%);
    max-height: calc(100svh - 24px);
    padding-top: clamp(104px, 19vh, 170px);
}

.run-upgrade-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: calc(100svh - clamp(120px, 22vh, 190px));
    padding: clamp(22px, 4vw, 36px);
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

.run-upgrade-mooney {
    --upgrade-gaze-x: 0px;
    --upgrade-gaze-y: 0px;
    position: absolute;
    top: clamp(-42px, -3.5vh, -24px);
    left: 50%;
    z-index: 1;
    width: clamp(188px, 23vw, 258px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    transform-origin: 50% 78%;
    pointer-events: none;
    user-select: none;
}

.run-upgrade-mooney-float,
.run-upgrade-mooney-body,
.run-upgrade-mooney-face,
.run-upgrade-mooney-gaze,
.run-upgrade-mooney-expression {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.run-upgrade-mooney-float {
    animation: run-upgrade-mooney-float 3.6s ease-in-out 600ms infinite;
}

.run-upgrade-mooney-body,
.run-upgrade-mooney-gaze,
.run-upgrade-mooney-expression {
    object-fit: contain;
}

.run-upgrade-mooney-body {
    filter: drop-shadow(0 16px 24px rgba(1, 2, 20, 0.62)) drop-shadow(0 0 14px rgba(82, 229, 255, 0.13));
}

.run-upgrade-mooney-face {
    transform: translate(var(--upgrade-gaze-x), var(--upgrade-gaze-y)) scale(0.88);
    transform-origin: center;
    transition: transform 120ms ease-out;
}

.run-upgrade-mooney-expression {
    opacity: 0;
}

.run-upgrade-mooney[data-expression="blink"] .run-upgrade-mooney-gaze,
.run-upgrade-mooney[data-expression="wink"] .run-upgrade-mooney-gaze {
    opacity: 0;
}

.run-upgrade-mooney[data-expression="blink"] .run-upgrade-mooney-blink,
.run-upgrade-mooney[data-expression="wink"] .run-upgrade-mooney-wink {
    opacity: 1;
}

@keyframes run-upgrade-mooney-float {
    0%, 100% { transform: translateY(0) rotate(-0.4deg); }
    50% { transform: translateY(-7px) rotate(0.5deg); }
}

.run-upgrade-kicker {
    color: var(--electric-cyan);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.run-upgrade-dialog h2 {
    margin-block: 6px;
    color: var(--mooney-ivory);
    font-size: clamp(2rem, 6vw, 3.8rem);
}

.run-upgrade-dialog > p:not(.run-upgrade-kicker) {
    color: var(--text-muted);
}

.run-upgrade-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.run-upgrade-choice {
    position: relative;
    isolation: isolate;
    min-height: 48px;
    padding: 18px 16px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    background: var(--electric-cyan);
    cursor: pointer;
}

.run-upgrade-choice::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    clip-path: var(--control-inner-clip);
    background: linear-gradient(145deg, rgba(3, 82, 128, 0.96), rgba(41, 16, 95, 0.99));
    pointer-events: none;
}

.run-upgrade-choice strong,
.run-upgrade-choice span {
    position: relative;
    z-index: 1;
    display: block;
}

.run-upgrade-choice strong {
    color: var(--mooney-ivory);
    font-size: 1rem;
}

.run-upgrade-choice span {
    margin-top: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
}

.run-upgrade-tradeoff {
    color: var(--cargo-gold);
}

/* Cash the upgrade in for Armory credits: a full-width gold option under the three cards. */
.run-upgrade-credits {
    grid-column: 1 / -1;
    padding: 12px 16px;
    background: var(--cargo-gold);
}

.run-upgrade-credits::before {
    background: linear-gradient(145deg, rgba(92, 58, 6, 0.96), rgba(41, 16, 95, 0.99));
}

.run-upgrade-credits strong {
    color: var(--cargo-gold);
}

.run-upgrade-credits .run-upgrade-tradeoff {
    color: var(--text-muted);
}

.run-upgrade-choice:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
    box-shadow: var(--focus-cyan);
}

/* Arena minimap and spectator surfaces */
#arenaPanel {
    position: absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + var(--control-height) + 8px);
    right: max(14px, env(safe-area-inset-right));
    z-index: 2;
    display: none;
    width: min(190px, calc(100vw - 28px));
    color: var(--text-primary);
    font-size: 0.74rem;
    text-align: center;
    pointer-events: none;
}

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

#miniMap,
#arenaStatus,
.player-preview-card {
    --frame: rgba(82, 229, 255, 0.34);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    background: var(--chamfer-corners), rgba(7, 11, 45, 0.78);
    box-shadow: 0 9px 28px rgba(2, 5, 27, 0.35);
}

#miniMap {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 7px;
}

#arenaStatus {
    min-height: 34px;
    padding: 8px 9px;
    line-height: 1.3;
}

#playerPreviewList {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

#playerPreviewList.is-dense {
    gap: 6px;
}

.player-preview-card {
    padding: 7px;
}

.player-preview-name {
    margin-bottom: 6px;
    color: var(--cargo-gold);
    font-weight: 800;
}

.player-preview-canvas {
    display: block;
    width: 100%;
    height: 96px;
    background: var(--space-950);
}

.player-preview-card.is-compact .player-preview-canvas {
    height: 72px;
}

#spectatorOverlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding:
        20px
        max(16px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    pointer-events: none;
}

#spectatorOverlay.is-visible {
    display: flex;
}

.spectator-card {
    display: grid;
    gap: 8px;
    width: min(620px, calc(100vw - 32px));
    padding: 20px 22px;
    pointer-events: auto;
}

.spectator-card h2 {
    font-size: clamp(1.45rem, 5vw, 2rem);
}

.spectator-card p {
    color: var(--text-muted);
    line-height: 1.4;
}

.spectator-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 8px;
}

#spectatorGridButton {
    display: none;
}

/* Game over, Arena results, and interactive post-run upgrades */
#gameOverScreen {
    display: none;
    align-items: flex-start;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#gameOverScreen[aria-hidden="false"] {
    display: flex;
}

.gameover-screen-container {
    --gameover-frame-top: clamp(280px, 39vh, 330px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(16px, 2.4vh, 24px);
    width: min(980px, calc(100vw - 32px));
    padding: clamp(20px, 3vw, 34px);
    max-height: none;
    margin-block: 0 auto;
    overflow: visible;
    clip-path: none;
    background: transparent;
    box-shadow: none;
}

.gameover-screen-container::before {
    inset: var(--gameover-frame-top) 0 0;
    z-index: -2;
    clip-path: var(--panel-clip);
}

.gameover-screen-container::after {
    inset: calc(var(--gameover-frame-top) + 3px) 3px 3px;
    z-index: -1;
    clip-path: var(--panel-clip);
}

.gameover-screen-container:not(.shop-open) {
    margin-block: auto;
}

.gameover-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    justify-items: center;
}

.gameover-character-stage {
    height: var(--gameover-frame-top);
}

.gameover-copy {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 8px;
    justify-items: center;
    width: min(860px, calc(100% - 24px));
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-top: -34px;
    padding: 18px 18px 4px;
}

#gameOverTitle {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    color: #ff9fe3;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.9;
    text-shadow: 0 0 2px var(--mooney-ivory), 0 0 14px rgba(255, 91, 200, 0.7), 0 0 34px rgba(140, 91, 255, 0.52);
}

#gameOverMessage {
    max-width: 760px;
    color: var(--text-muted);
    font-size: clamp(0.9rem, 2vw, 1.08rem);
}

#gameOverScoreline {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-height);
    margin-top: 3px;
    padding: 10px 18px;
    --frame: var(--electric-cyan);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    color: var(--mooney-ivory);
    font-size: clamp(0.88rem, 2vw, 1.08rem);
    font-weight: 750;
    background: var(--chamfer-corners), rgba(7, 11, 45, 0.78);
    box-shadow: var(--glow-tight);
}

#finalScore {
    color: var(--electric-cyan);
    font-family: var(--font-display);
    font-size: 1.45em;
    font-weight: 900;
}

.run-summary {
    max-width: 760px;
    color: var(--cargo-gold) !important;
    font-size: 0.82rem;
    font-weight: 750;
}

.gameover-main,
.gameover-side {
    min-width: 0;
    min-height: 0;
}

.gameover-main {
    display: grid;
    gap: 14px;
    overflow: visible;
}

.results-panel {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 16px;
    --frame: rgba(82, 229, 255, 0.38);
    border: 1px solid var(--frame);
    clip-path: var(--panel-clip);
    background: var(--chamfer-corners), rgba(7, 11, 45, 0.68);
    text-align: left;
}

.results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.results-header h2 {
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.results-caption {
    color: var(--electric-cyan);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.results-list {
    display: grid;
    gap: 7px;
}

.result-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    --frame: rgba(140, 91, 255, 0.34);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    background: var(--chamfer-corners), rgba(16, 19, 74, 0.68);
}

.result-row.is-winner {
    --frame: rgba(255, 200, 61, 0.78);
    background: var(--chamfer-corners), linear-gradient(100deg, rgba(255, 138, 36, 0.15), rgba(16, 19, 74, 0.82));
}

.result-rank,
.result-score {
    color: var(--electric-cyan);
    font-weight: 900;
    white-space: nowrap;
}

.result-rank {
    min-width: 34px;
    color: var(--cargo-gold);
}

.result-name {
    color: var(--mooney-ivory);
    font-weight: 800;
}

.result-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.result-status {
    min-width: 92px;
    padding: 7px 10px;
    --frame: rgba(185, 196, 233, 0.34);
    border: 1px solid var(--frame);
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
    background: var(--chamfer-corners), rgba(16, 19, 74, 0.82);
}

.result-status.is-winner { --frame: var(--cargo-gold); color: var(--cargo-gold); }
.result-status.is-alive { --frame: var(--electric-cyan); color: var(--electric-cyan); }
.result-status.is-defeated { --frame: var(--danger-coral); color: var(--danger-coral); }

.gameover-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gameover-shop {
    display: none;
    grid-column: 1 / -1;
    padding: 16px;
    --frame: rgba(255, 91, 200, 0.42);
    border: 1px solid var(--frame);
    clip-path: var(--panel-clip);
    background: var(--chamfer-corners), rgba(7, 11, 45, 0.7);
    text-align: left;
}

.gameover-screen-container.shop-open .gameover-shop {
    display: block;
}

.gameover-shop .armory-scroll {
    max-height: min(54vh, 560px);
    margin-top: 10px;
}

#restartButton,
#upgradeShopButton,
#backToLobbyButton {
    width: 100%;
    min-width: 0;
    min-height: 56px;
}

#upgradeShopButton {
    border-color: var(--accent-magenta);
}

#arenaResultsPanel[hidden] {
    display: none;
}

/* Post-run angular surfaces use nested polygons so diagonal corners keep a complete line. */
.post-run-control {
    --post-run-frame: rgba(140, 91, 255, 0.76);
    --post-run-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.96), rgba(16, 19, 74, 0.96));
    position: relative;
    isolation: isolate;
    border: 0;
    clip-path: var(--control-clip);
    background: var(--post-run-frame);
}

.post-run-control::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border: 0;
    clip-path: var(--control-inner-clip);
    background: var(--post-run-fill);
    pointer-events: none;
}

.post-run-panel {
    --post-run-frame: rgba(82, 229, 255, 0.38);
    --post-run-fill: rgba(7, 11, 45, 0.82);
    position: relative;
    isolation: isolate;
    border: 0;
    clip-path: var(--panel-clip);
    background: var(--post-run-frame);
}

.post-run-panel::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border: 0;
    clip-path: var(--panel-inner-clip);
    background: var(--post-run-fill);
    pointer-events: none;
}

#restartButton.post-run-control,
#upgradeShopButton.post-run-control,
#backToLobbyButton.post-run-control {
    border: 0;
    background: var(--post-run-frame);
}

#restartButton.post-run-control::after,
#upgradeShopButton.post-run-control::after,
#backToLobbyButton.post-run-control::after {
    inset: 1px;
    border: 0;
    clip-path: var(--control-inner-clip);
    background: var(--post-run-fill);
}

#gameOverScoreline {
    --post-run-frame: var(--electric-cyan);
    --post-run-fill: rgba(7, 11, 45, 0.88);
}

.result-row {
    --post-run-frame: rgba(140, 91, 255, 0.44);
    --post-run-fill: rgba(16, 19, 74, 0.84);
}

.result-row.is-winner {
    --post-run-frame: rgba(255, 200, 61, 0.88);
    --post-run-fill: linear-gradient(100deg, rgba(91, 49, 48, 0.96), rgba(16, 19, 74, 0.94));
}

.result-status {
    --post-run-frame: rgba(185, 196, 233, 0.48);
    --post-run-fill: rgba(16, 19, 74, 0.96);
}

.result-status.is-winner { --post-run-frame: var(--cargo-gold); }
.result-status.is-alive { --post-run-frame: var(--electric-cyan); }
.result-status.is-defeated { --post-run-frame: var(--danger-coral); }

#restartButton {
    --post-run-frame: var(--electric-cyan);
    --post-run-fill: linear-gradient(135deg, rgba(3, 82, 128, 0.96), rgba(12, 20, 74, 0.98));
}

#upgradeShopButton {
    --post-run-frame: var(--accent-magenta);
}

#backToLobbyButton {
    --post-run-frame: rgba(140, 91, 255, 0.9);
}

/* Compact and touch layouts */
@media (max-width: 760px) {
    .overlay {
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .screen-container,
    .screen_container,
    .hub-console,
    .subview,
    .gameover-screen-container {
        width: calc(100vw - 20px);
        padding: 20px 16px;
    }

    .hub-console {
        --hub-frame-top: clamp(220px, 33vh, 285px);
        padding-inline: 10px;
    }

    .gameover-screen-container {
        --gameover-frame-top: clamp(220px, 33vh, 285px);
    }

    .hub-character-stage,
    .gameover-character-stage {
        --hub-moon-w: clamp(218px, 58vw, 278px);
    }

    .hub-character-stage {
        --hub-moon-bottom: calc(42px - var(--hub-art-shift-y));
    }

    .gameover-character-stage {
        --hub-moon-bottom: 24px;
    }

    .hub-actions .console-action {
        padding-left: 62px;
        font-size: 1.1rem;
    }

    .hub-actions .console-action::before {
        left: 24px;
    }

    .gameover-hero {
        grid-template-columns: 1fr;
    }

    .run-upgrade-choices {
        grid-template-columns: 1fr;
    }

    .run-upgrade-stage {
        padding-top: clamp(82px, 13vh, 112px);
    }

    .run-upgrade-dialog {
        max-height: calc(100svh - clamp(100px, 16vh, 132px));
    }

    .run-upgrade-mooney {
        top: -18px;
        width: clamp(150px, 42vw, 196px);
    }

    .hub-meta,
    .shop-header,
    .results-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .hub-meta {
        padding-inline: 8px;
    }

    .mode-options {
        grid-template-columns: 1fr;
    }

    .lobby-size-group {
        align-items: stretch;
        flex-direction: column;
    }

    .lobby-size-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-items,
    #startShopItems {
        grid-template-columns: 1fr;
    }

    .shop-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-buy-button {
        width: 100%;
        min-width: 0;
    }

    #hud {
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
        gap: 4px;
        font-size: 0.7rem;
    }

    #hud div:not(.sr-only) {
        min-height: 32px;
        padding: 7px 8px;
    }

    #placement {
        display: none;
    }

    :root {
        --top-controls-inset-y: max(8px, env(safe-area-inset-top));
        --top-controls-inset-x: max(8px, env(safe-area-inset-right));
        --top-controls-gap: 4px;
    }

    #pauseButton,
    #leaveBattleButton,
    #soundButton {
        min-width: var(--control-height);
        min-height: var(--control-height);
        padding: 7px 9px;
    }

    #arenaPanel {
        top: calc(max(8px, env(safe-area-inset-top)) + var(--control-height) + 8px);
        right: max(6px, env(safe-area-inset-right));
        width: min(118px, calc(100vw - 14px));
        font-size: 0.65rem;
    }

    #miniMap {
        width: 104px;
    }

    #playerPreviewList {
        display: none;
    }

    .spectator-card {
        width: calc(100vw - 24px);
        padding: 16px;
    }

    .spectator-actions,
    .gameover-side {
        grid-template-columns: 1fr;
    }

    .result-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .result-score,
    .result-status {
        justify-self: start;
    }

    #gameOverTitle {
        font-size: clamp(2.6rem, 15vw, 4.4rem);
    }
}

@media (max-width: 430px) {
    .subview-actions {
        grid-template-columns: 1fr;
    }

    .result-meta {
        display: none;
    }
}

/* Short landscape: only the active console scrolls; the viewport remains fixed. */
@media (max-height: 560px) and (orientation: landscape) {
    .overlay {
        align-items: center;
        padding:
            max(8px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .screen-container,
    .screen_container,
    .pause-card {
        max-height: calc(100svh - 16px);
        padding: 16px 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .hub-console {
        --hub-frame-top: 0px;
        gap: 8px;
        grid-template-rows: auto auto;
    }

    .hub-title-logo {
        position: relative;
        top: auto;
        left: auto;
        width: min(360px, 60vw);
        margin: 0 auto -4px;
        transform: none;
    }

    .hub-publisher {
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%) scale(0.82);
        transform-origin: center bottom;
    }

    .gameover-screen-container {
        --gameover-frame-top: 0px;
    }

    .hub-character-stage,
    .gameover-character-stage {
        display: none;
    }

    .gameover-hero {
        grid-template-columns: 1fr;
    }

    .hub-brand img {
        width: 26px;
        height: 26px;
    }

    .hub-actions {
        gap: 7px;
    }

    .hub-actions .console-action {
        min-height: var(--control-height);
        font-size: 1rem;
    }

    .hub-meta {
        padding-top: 8px;
        font-size: 0.7rem;
    }

    .subview {
        gap: 10px;
    }

    .subview > h2,
    .shop-header h2 {
        font-size: 1.55rem;
    }

    .mode-helper {
        min-height: 0;
        padding-block: 6px;
    }

    .gameover-screen-container {
        gap: 10px;
    }

    #gameOverTitle {
        font-size: 2.7rem;
    }

    #gameOverMessage,
    .run-summary {
        display: none;
    }

    #gameOverScoreline {
        min-height: var(--control-height);
        margin: 0;
    }

    .shop-item p,
    .result-meta {
        display: none;
    }

}

@media (hover: none) and (pointer: coarse) {
    .console-action:hover,
    .subview-actions button:hover,
    .hubBackButtons:hover,
    .pause-card button:hover,
    .spectator-actions button:hover,
    #restartButton:hover,
    #upgradeShopButton:hover,
    #backToLobbyButton:hover,
    .shop-buy-button:hover:not(:disabled) {
        transform: none;
    }
}

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

    .intro-skip::before,
    .intro-skip::after {
        transform: none;
    }

    .intro-screen::after {
        animation: intro-sky-crossfade 500ms linear both !important;
    }

    .intro-publisher-mark {
        animation: intro-publisher-crossfade 500ms linear both !important;
    }

    .intro-mooney-reveal {
        animation: intro-mooney-crossfade 500ms linear both !important;
    }

    .intro-mooney-gaze {
        animation: none !important;
        transform: translate(0, 0);
    }

    .hub-mooney-actor {
        animation: none !important;
        will-change: auto;
    }

    .run-upgrade-mooney-float {
        animation: none !important;
    }

    .run-upgrade-mooney-face {
        transition: none !important;
    }

    .hub-mooney-float-shell,
    .gameover-mooney-float {
        animation: none !important;
    }

    .space-rock {
        animation: none !important;
        transform: rotate(var(--rock-rotation));
        will-change: auto;
    }
}

/* Leaderboard and "Stay in the loop" sign-up. */
.hub-link-button {
    position: relative;
    z-index: 3;
    padding: 4px 6px;
    border: 0;
    color: var(--electric-cyan);
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hub-link-button:hover,
.hub-link-button:focus-visible {
    color: var(--mooney-ivory);
    outline: 2px solid var(--electric-cyan);
    outline-offset: 2px;
}

/* These panels are capped at the screen height and clip what does not fit. Their long part (the score
   list, the achievements, the battle tab) gives up height first and scrolls, so the Back button always
   stays on screen, also on small phones. */
#leaderboardPanel:not([hidden]),
#achievementsPanel:not([hidden]),
#challengesPanel:not([hidden]),
#duelPanel:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#leaderboardPanel > *,
#achievementsPanel > *,
#challengesPanel > *,
#duelPanel > * { flex-shrink: 0; }

#challengesPanel > .challenge-list { flex-shrink: 1; min-height: 120px; }

#leaderboardPanel > .leaderboard-list { flex-shrink: 1; min-height: 120px; }
#achievementsPanel > .achievements-scroll { flex-shrink: 1; min-height: 120px; }

#duelPanel > .duel-tab {
    flex-shrink: 1;
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

.leaderboard-list {
    display: grid;
    gap: 6px;
    max-height: min(46vh, 420px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    counter-reset: rank;
}

.leaderboard-list li {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(82, 229, 255, 0.22);
    background: rgba(2, 5, 27, 0.55);
    counter-increment: rank;
}

.leaderboard-list li::before {
    content: counter(rank);
    color: var(--cargo-gold);
    font-family: var(--font-display);
    font-weight: 700;
}

/* Friends without a score yet: no rank number, and they don't use one up. */
.leaderboard-list li.is-unranked { counter-increment: none; opacity: 0.75; }
.leaderboard-list li.is-unranked::before { content: '–'; color: var(--text-muted); }

.leaderboard-list li.is-you {
    border-color: var(--cargo-gold);
}

.leaderboard-name {
    overflow: hidden;
    color: var(--mooney-ivory);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-score {
    color: var(--electric-cyan);
    font-family: var(--font-display);
    font-weight: 700;
}

.leaderboard-stage {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.leaderboard-callsign-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.leaderboard-rank {
    margin: 0;
    color: var(--cargo-gold);
    font-weight: 700;
}

.signup-form {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    text-align: left;
}

.signup-form[hidden] {
    display: none;
}

.signup-title {
    margin: 0;
    color: var(--mooney-ivory) !important;
    font-weight: 700;
}

.signup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.signup-submit {
    min-height: var(--control-height);
    padding: 0 16px;
    border: 1px solid var(--electric-cyan);
    color: var(--space-950);
    background: var(--electric-cyan);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.signup-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.signup-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.signup-consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--electric-cyan);
}

.signup-privacy {
    color: var(--electric-cyan);
}

.signup-status {
    min-height: 1.2em;
    margin: 0;
    font-size: 0.85rem;
}

.signup-status[data-tone="error"] { color: var(--danger-coral); }
.signup-status[data-tone="success"] { color: #83f58b; }

@media (max-width: 430px) {
    .signup-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact main menu: Play Classic leads at full width; the other options are half-width tiles
   in a two-column grid, so new entries fit without growing the panel. */
.hub-console .hub-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hub-console .hub-actions .console-action {
    min-height: 50px;
    padding-inline: 42px 10px;
    font-size: clamp(0.82rem, 2.1vw, 1.05rem);
}

.hub-console .hub-actions .console-action::before {
    left: 16px;
    font-size: 1.1em;
}

/* Play Classic and Classic Co-op side by side on the first row. */
.hub-console .hub-actions #playClassicButton {
    min-height: 58px;
    padding-left: 58px;
    font-size: clamp(1rem, 2.8vw, 1.4rem);
}

.hub-console .hub-actions #playClassicButton::before {
    left: 24px;
}

/* An odd tile out at the end takes the full row. Play Classic and Classic Co-op share the first row and
   Online Battle takes the second, so the half-width tiles start at the fourth child: an unpaired last
   tile is an even child. */
.hub-console .hub-actions .console-action:nth-child(even):last-child:not(#coopButton) {
    grid-column: 1 / -1;
}

#leaderboardButton::before { content: "★"; color: var(--cargo-gold); }
#newsletterButton::before { content: "✉\FE0E"; color: var(--electric-cyan); }

#achievementsButton::before { content: "✪"; color: #83f58b; }

/* Achievements page */
.achievements-progress {
    height: 8px;
    border: 1px solid rgba(82, 229, 255, 0.35);
    background: rgba(2, 5, 27, 0.6);
}

.achievements-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--electric-cyan), #83f58b);
}

.achievements-scroll {
    display: grid;
    gap: 16px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.achievements-category h3 {
    margin: 0 0 8px;
    color: var(--mooney-ivory);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.achievement-card {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 10px 12px;
    border: 1px solid rgba(140, 91, 255, 0.35);
    background: rgba(2, 5, 27, 0.55);
    opacity: 0.72;
}

.achievement-card strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.achievement-card-text {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.achievement-card-status {
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.achievement-card-bar {
    display: block;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.achievement-card-bar span {
    display: block;
    height: 100%;
    background: var(--electric-cyan);
}

.achievements-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 4px 0 10px;
}

.achievements-tabs button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(82, 229, 255, 0.3);
    clip-path: var(--control-clip);
    color: var(--text-muted);
    background: rgba(7, 11, 45, 0.8);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.achievements-tabs button:hover {
    color: var(--text-primary);
    border-color: rgba(82, 229, 255, 0.6);
}

.achievements-tabs button[aria-selected="true"] {
    color: #04102e;
    border-color: var(--electric-cyan);
    background: var(--electric-cyan);
}

.achievements-tabs button:focus-visible {
    outline: 2px solid var(--mooney-ivory);
    outline-offset: 2px;
}

/* Spotter's Log: everything passed on the journey, with its fact. Unseen entries are silhouettes. */
.spotter-log-intro {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.spotter-log-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spotter-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid rgba(82, 229, 255, 0.22);
    background: rgba(2, 5, 27, 0.55);
}

.spotter-card div {
    display: grid;
    gap: 3px;
}

.spotter-card strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.spotter-card-picture {
    display: grid;
    place-items: center;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 229, 255, 0.12), rgba(2, 5, 27, 0) 70%);
}

.spotter-card-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.spotter-card:not(.is-spotted) .spotter-card-picture img {
    filter: brightness(0) saturate(0);
    opacity: 0.45;
}

.spotter-card.is-spotted {
    border-color: rgba(82, 229, 255, 0.55);
    background: linear-gradient(135deg, rgba(82, 229, 255, 0.1), rgba(2, 5, 27, 0.6));
}

.spotter-card.is-fact.is-spotted .spotter-card-picture img {
    border-radius: 50%;
}

.achievement-card.is-unlocked {
    border-color: rgba(255, 200, 61, 0.7);
    background: linear-gradient(135deg, rgba(255, 200, 61, 0.12), rgba(2, 5, 27, 0.6));
    opacity: 1;
}

.achievement-card.is-unlocked strong::before {
    content: "★ ";
    color: var(--cargo-gold);
}

.achievement-card.is-unlocked .achievement-card-status {
    color: var(--cargo-gold);
}

/* The unlock card that slides in during play (and in menus, e.g. after a purchase). */
.achievement-toast {
    position: fixed;
    z-index: 40;
    top: max(70px, env(safe-area-inset-top));
    left: 50%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: min(380px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid var(--cargo-gold);
    background: linear-gradient(135deg, rgba(41, 16, 95, 0.96), rgba(7, 11, 45, 0.96));
    box-shadow: 0 0 24px rgba(255, 200, 61, 0.35);
    pointer-events: none;
    transform: translate(-50%, -24px);
    opacity: 0;
    transition: transform 320ms ease-out, opacity 320ms ease-out;
}

.achievement-toast[hidden] {
    display: none;
}

.achievement-toast.is-showing {
    transform: translate(-50%, 0);
    opacity: 1;
}

.achievement-toast.is-leaving {
    transform: translate(-50%, -24px);
    opacity: 0;
}

.achievement-toast-icon {
    color: var(--cargo-gold);
    font-size: 1.8rem;
    text-shadow: 0 0 14px rgba(255, 200, 61, 0.8);
}

.achievement-toast p {
    margin: 0;
}

.achievement-toast-kicker {
    color: var(--cargo-gold);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.achievement-toast-title {
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.achievement-toast-text {
    color: var(--text-muted);
    font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
    .achievement-toast,
    .achievement-toast.is-showing,
    .achievement-toast.is-leaving {
        transform: translate(-50%, 0);
        transition: opacity 200ms linear;
    }
}

/* Narrow phones: the half-width tiles keep their labels on one line. */
@media (max-width: 420px) {
    .hub-console .hub-actions .console-action:not(#playClassicButton):not(#coopButton) {
        padding-inline: 32px 6px;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        line-height: 1.15;
    }

    .hub-console .hub-actions .console-action:not(#playClassicButton):not(#coopButton)::before {
        left: 11px;
        font-size: 1em;
    }
}

/* Legendary achievements: a hotter glow on the unlock card and on their cards in the list. */
.achievement-toast.is-legendary {
    border-color: #ff5bc8;
    box-shadow: 0 0 30px rgba(255, 91, 200, 0.55), 0 0 12px rgba(255, 200, 61, 0.5);
}

.achievement-toast.is-legendary .achievement-toast-kicker,
.achievement-toast.is-legendary .achievement-toast-icon {
    color: #ff9fe3;
}

/*
 * One button look across the game: the soft, dark-purple chamfered fill of the results-screen buttons,
 * without the bright outer frame. Hover brightens the fill. Play Classic (the main call to action) keeps its
 * cyan frame; Quit keeps its red tint.
 */
.console-action:not(.is-primary),
.subview-actions button,
.hubBackButtons,
.spectator-actions button,
#arenaLaunchButton,
#resumeButton,
#restartButton,
#upgradeShopButton,
#backToLobbyButton,
.shop-buy-button:not(:disabled) {
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    background: transparent;
    box-shadow: none;
}

.console-action:not(.is-primary):hover,
.subview-actions button:hover,
.hubBackButtons:hover,
.homecoming-panel button:hover,
.pause-card button:hover,
.spectator-actions button:hover,
#arenaLaunchButton:hover,
#resumeButton:hover,
#restartButton:hover,
#upgradeShopButton:hover,
#backToLobbyButton:hover,
.shop-buy-button:not(:disabled):hover {
    --control-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
    background: transparent;
    box-shadow: none;
}

.pause-card button:not(.trip-log-item)::before {
    background: transparent;
}

.pause-card button:not(.trip-log-item)::after {
    background: var(--control-fill, linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94)));
}

.pause-card button:not(.trip-log-item) {
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
}

.pause-card button:not(.trip-log-item):hover {
    --control-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

#quitToMainButton,
#quitToMainButton:hover {
    --control-fill: linear-gradient(135deg, rgba(110, 28, 82, 0.96), rgba(40, 20, 72, 0.98));
}

/* The Achievements / Spotter's Log tabs in the same style: the open tab is brighter, with a cyan label. */
.achievements-tabs button {
    border: 0;
    color: var(--text-muted);
    background: linear-gradient(135deg, rgba(41, 16, 95, 0.75), rgba(16, 19, 74, 0.75));
}

.achievements-tabs button:hover {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(70, 32, 150, 0.9), rgba(30, 36, 116, 0.9));
}

.achievements-tabs button[aria-selected="true"] {
    color: var(--electric-cyan);
    background: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
    box-shadow: inset 0 -3px 0 var(--electric-cyan);
}

#quitToMainButton::before {
    background: transparent;
}

/* Game-over buttons draw their frame from --post-run-frame: same frameless purple look as the rest. */
#restartButton.post-run-control,
#upgradeShopButton.post-run-control,
#backToLobbyButton.post-run-control {
    --post-run-frame: transparent;
    --post-run-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.96), rgba(16, 19, 74, 0.96));
}

#restartButton.post-run-control:hover,
#upgradeShopButton.post-run-control:hover,
#backToLobbyButton.post-run-control:hover {
    --post-run-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

/* Online duel: a full-width entry under Play Classic, the lobby panel and the start countdown. */
.hub-console .hub-actions #duelButton {
    grid-column: 1 / -1;
}

#duelButton::before { content: "\2694\FE0E"; color: var(--accent-magenta); }

.duel-setup,
.duel-room {
    display: grid;
    gap: 10px;
}

.duel-join {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.duel-code-input {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 900;
    text-align: center;
}

.duel-room {
    justify-items: center;
    text-align: center;
}

.duel-room button {
    width: min(100%, 320px);
}

.duel-code-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.duel-code {
    margin: 0;
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    letter-spacing: 0.22em;
    text-shadow: 0 0 18px rgba(255, 91, 200, 0.5);
}

.duel-status {
    min-height: 1.4em;
    margin: 0;
    color: var(--electric-cyan);
    font-size: 0.9rem;
    text-align: center;
}

.duel-offline {
    color: var(--danger-coral);
}

#duelStartButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.duel-countdown {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-content: center;
    gap: 6px;
    background: rgba(2, 5, 27, 0.72);
    text-align: center;
    pointer-events: none;
}

/* The countdown reads like the Game Over title: same face, weight, case, spacing, pink and glow. */
.duel-countdown-label,
.duel-countdown-number {
    margin: 0;
    color: #ff9fe3;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-shadow: 0 0 2px var(--mooney-ivory), 0 0 14px rgba(255, 91, 200, 0.7), 0 0 34px rgba(140, 91, 255, 0.52);
}

.duel-countdown-label {
    font-size: clamp(1.1rem, 3.2vw, 1.7rem);
    line-height: 1.1;
}

.duel-countdown-number {
    font-size: clamp(5rem, 22vw, 10rem);
    line-height: 1;
    animation: duel-count 1s ease-out infinite;
}

@keyframes duel-count {
    from { transform: scale(1.4); opacity: 0.2; }
    30% { opacity: 1; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .duel-countdown-number { animation: none; }
}

/* Duel lobby buttons in the game's button style. */
.duel-panel .duel-setup > button,
.duel-panel .duel-join button,
.duel-panel .duel-room button {
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    position: relative;
    isolation: isolate;
    min-height: var(--control-height);
    padding: 10px 20px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
}

.duel-panel .duel-setup > button::after,
.duel-panel .duel-join button::after,
.duel-panel .duel-room button::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    pointer-events: none;
}

.duel-panel .duel-setup > button:hover,
.duel-panel .duel-join button:hover,
.duel-panel .duel-room button:hover:not(:disabled) {
    --control-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

/* Start is the main action once a rival is in: cyan, like Play Classic. */
.duel-panel #duelStartButton:not(:disabled) {
    --control-fill: linear-gradient(135deg, rgba(3, 82, 128, 0.94), rgba(12, 20, 74, 0.96));
    color: var(--mooney-ivory);
    /* The cyan edge is the button's own fill around its inner layer (::after), so it also follows the cut
       corners; an inset box-shadow edge would be clipped away there. */
    background: var(--electric-cyan);
    box-shadow: none;
}

.duel-panel .duel-setup > button:focus-visible,
.duel-panel .duel-join button:focus-visible,
.duel-panel .duel-room button:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
}

/* Quick Match leads (cyan, like Play Classic); the room shows who is in. */
.duel-panel #duelQuickButton {
    --control-fill: linear-gradient(135deg, rgba(3, 82, 128, 0.94), rgba(12, 20, 74, 0.96));
    color: var(--mooney-ivory);
    /* The cyan edge is the button's own fill around its inner layer (::after), so it also follows the cut
       corners; an inset box-shadow edge would be clipped away there. */
    background: var(--electric-cyan);
    box-shadow: none;
}

.duel-or {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.duel-players {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.duel-players li {
    padding: 5px 12px;
    border: 1px solid rgba(255, 91, 200, 0.45);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 750;
    background: rgba(41, 16, 95, 0.6);
}

/* Quick chat: fixed phrases and emotes in the battle room and on the battle results. */
.quick-chat {
    display: grid;
    gap: 8px;
    width: min(100%, 360px);
    justify-self: center;
}

.quick-chat--results {
    margin: 4px 0 0;
}

.quick-chat-log {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-chat-log li {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    font-size: 0.85rem;
}

.quick-chat-log li:last-child {
    animation: quick-chat-pop 180ms ease-out;
}

.quick-chat-name {
    overflow: hidden;
    max-width: 50%;
    color: #ff8de1;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-chat-said {
    padding: 3px 10px;
    border-radius: 999px;
    color: #29105f;
    font-weight: 850;
    background: rgba(248, 251, 255, 0.95);
}

.quick-chat-said.is-emote {
    padding: 0 8px;
    font-size: 1.15rem;
    line-height: 1.5;
}

.quick-chat-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* Small pills, not the big clipped game buttons (beats `.duel-panel .duel-room button`). */
.quick-chat .quick-chat-buttons .quick-chat-button {
    width: auto;
    min-width: 44px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 91, 200, 0.45);
    border-radius: 999px;
    clip-path: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    background: rgba(41, 16, 95, 0.75);
    box-shadow: none;
    cursor: pointer;
}

.quick-chat .quick-chat-buttons .quick-chat-button::after {
    content: none;
}

.quick-chat .quick-chat-buttons .quick-chat-button.is-emote {
    padding: 0 8px;
    font-size: 1.15rem;
}

.quick-chat .quick-chat-buttons .quick-chat-button:hover:not(:disabled) {
    border-color: var(--electric-cyan);
    background: rgba(70, 32, 150, 0.9);
}

.quick-chat .quick-chat-buttons .quick-chat-button:disabled {
    opacity: 0.45;
    cursor: default;
}

@keyframes quick-chat-pop {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .quick-chat-log li:last-child { animation: none; }
}

/* Name field with a dice button that rolls a new random name. */
.callsign-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.callsign-reroll {
    min-width: 52px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--mooney-ivory);
    font-size: 1.3rem;
    background: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    cursor: pointer;
}

.callsign-reroll:hover {
    background: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

.callsign-reroll:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
}

.callsign-hint {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.duel-players li.is-bot {
    border-color: rgba(82, 229, 255, 0.4);
    color: var(--text-muted);
    background: rgba(16, 19, 74, 0.6);
}

.duel-ai-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

/* Friends: the Online Battle panel's second tab, invites and the leaderboard's Friends tab. */
.duel-tab[hidden] {
    display: none;
}

.tab-badge {
    color: #52ff9a;
    letter-spacing: 0.02em;
    text-transform: none;
}

.achievements-tabs button[aria-selected="true"] .tab-badge {
    color: inherit;
}

.friends-tab {
    display: grid;
    gap: 10px;
}

.friend-code-box {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.friend-code {
    margin: 0;
    color: var(--mooney-ivory);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: 0.22em;
    text-shadow: 0 0 18px rgba(82, 229, 255, 0.45);
}

.friend-list {
    display: grid;
    gap: 6px;
    max-height: min(32vh, 300px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.friend-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(82, 229, 255, 0.22);
    background: rgba(2, 5, 27, 0.55);
}

.friend-list li.friend-empty {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.friend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.friend-list li.is-online .friend-dot {
    background: #52ff9a;
    box-shadow: 0 0 8px rgba(82, 255, 154, 0.8);
}

.friend-info {
    display: grid;
    min-width: 0;
}

.friend-name {
    overflow: hidden;
    color: var(--mooney-ivory);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-detail {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.duel-panel .friend-code-box button,
.duel-panel .friend-invite-button,
.friend-invite-actions button,
.leaderboard-add-friends {
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    position: relative;
    isolation: isolate;
    padding: 10px 20px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
}

.duel-panel .friend-code-box button::after,
.duel-panel .friend-invite-button::after,
.friend-invite-actions button::after,
.leaderboard-add-friends::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    pointer-events: none;
}

.duel-panel .friend-code-box button:hover:not(:disabled),
.duel-panel .friend-invite-button:hover:not(:disabled),
.friend-invite-actions button:hover,
.leaderboard-add-friends:hover {
    --control-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

.duel-panel .friend-code-box button {
    width: min(100%, 320px);
    min-height: var(--control-height);
}

.duel-panel .friend-invite-button {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.78rem;
}

/* Invite is the friend's main action when they're online: cyan, like Play Classic. */
.duel-panel .friend-invite-button:not(:disabled),
#friendInviteJoin,
.leaderboard-add-friends {
    --control-fill: linear-gradient(135deg, rgba(3, 82, 128, 0.94), rgba(12, 20, 74, 0.96));
    color: var(--mooney-ivory);
    /* The cyan edge is the button's own fill around its inner layer (::after), so it also follows the cut
       corners; an inset box-shadow edge would be clipped away there. */
    background: var(--electric-cyan);
    box-shadow: none;
}

.duel-panel .friend-code-box button:disabled,
.duel-panel .friend-invite-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.friend-remove-button {
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(255, 100, 124, 0.35);
    color: var(--text-muted);
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
}

.friend-remove-button:hover,
.friend-remove-button.is-confirming {
    border-color: var(--danger-coral);
    color: var(--danger-coral);
}

.friend-remove-button.is-confirming {
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.duel-panel .friend-code-box button:focus-visible,
.duel-panel .friend-invite-button:focus-visible,
.friend-remove-button:focus-visible,
.friend-invite-actions button:focus-visible,
.leaderboard-add-friends:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
}

.friend-invite {
    position: fixed;
    z-index: 45;
    top: max(70px, env(safe-area-inset-top));
    left: 50%;
    display: grid;
    gap: 10px;
    width: min(400px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid var(--electric-cyan);
    background: linear-gradient(135deg, rgba(41, 16, 95, 0.97), rgba(7, 11, 45, 0.97));
    box-shadow: 0 0 24px rgba(82, 229, 255, 0.35);
    transform: translateX(-50%);
    animation: friend-invite-in 320ms ease-out;
}

.friend-invite[hidden] {
    display: none;
}

.friend-invite-text {
    margin: 0;
    color: var(--mooney-ivory);
    font-weight: 750;
    text-align: center;
}

.friend-invite-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.friend-invite-actions button {
    min-height: 44px;
}

@keyframes friend-invite-in {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .friend-invite { animation: none; }
}

.leaderboard-add-friends {
    justify-self: center;
    width: min(100%, 320px);
    min-height: var(--control-height);
    margin-top: 8px;
}

.leaderboard-add-friends[hidden] {
    display: none;
}

/* Rewarded-ad offers: the player's choice, marked clearly as an ad. */
.ad-rewards {
    display: grid;
    gap: 8px;
    margin: 10px 0 4px;
}

.ad-rewards[hidden],
.ad-reward-button[hidden] {
    display: none;
}

.ad-reward-button {
    --control-fill: linear-gradient(135deg, rgba(92, 58, 6, 0.95), rgba(41, 16, 95, 0.97));
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 8px 16px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    background: var(--cargo-gold);
    text-align: left;
    cursor: pointer;
}

.ad-reward-button::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    pointer-events: none;
}

.ad-reward-button:hover {
    --control-fill: linear-gradient(135deg, rgba(128, 82, 10, 0.97), rgba(60, 26, 130, 0.98));
}

.ad-reward-button:focus-visible {
    outline: 2px solid var(--mooney-ivory);
    outline-offset: 3px;
}

.ad-reward-badge {
    padding: 3px 7px;
    border-radius: 4px;
    color: #1b1203;
    background: var(--cargo-gold);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.ad-reward-text {
    display: grid;
    min-width: 0;
}

.ad-reward-text strong {
    color: var(--cargo-gold);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ad-reward-text span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.ad-reward-status {
    min-height: 0;
    margin: 0;
    color: var(--cargo-gold);
    font-size: 0.85rem;
}

.ad-reward-status:empty {
    display: none;
}

.run-upgrade-reroll {
    grid-column: 1 / -1;
}

/* Co-op upgrade stop: who has picked, and the time left. */
.run-upgrade-coop-status {
    margin: 14px 0 0;
    color: var(--electric-cyan);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Cut corners: the fill is the border colour and the inner layer sits on top (no outline, which the clip
   would cut off). Filters, unlike opacity, are not overridden by the cards' entrance animation. */
.run-upgrade-choice.is-picked {
    background: var(--cargo-gold);
    cursor: default;
}

.run-upgrade-choice.is-picked::before {
    background: linear-gradient(145deg, rgba(92, 58, 6, 0.96), rgba(41, 16, 95, 0.99));
}

.run-upgrade-choices button:disabled:not(.is-picked) {
    filter: grayscale(0.75) brightness(0.55);
    cursor: default;
}

/* The pretend ad on localhost (?ads=preview). */
.ad-preview {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.88);
}

.ad-preview-card {
    display: grid;
    gap: 10px;
    justify-items: center;
    width: min(420px, 100%);
    padding: 28px 20px;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    color: #fff;
    background: #1d1d1d;
    text-align: center;
}

.ad-preview-label {
    margin: 0;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ad-preview-note {
    margin: 0;
    color: #bbb;
    font-size: 0.85rem;
}

.ad-preview-timer {
    margin: 4px 0;
    font-size: 3rem;
    font-weight: 900;
}

.ad-preview-close {
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

/* Touch aiming stick: a ring where the thumb went down and a knob under the thumb. It never takes touches
   itself; the canvas underneath does. Positioned in viewport pixels by game.js (translate). */
.touch-stick {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    width: 0;
    height: 0;
    pointer-events: none;
}

.touch-stick[hidden] { display: none; }

.touch-stick::before,
.touch-stick-knob {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.touch-stick::before {
    left: -46px;
    top: -46px;
    width: 92px;
    height: 92px;
    border: 2px solid rgba(82, 229, 255, 0.45);
    background: radial-gradient(circle, rgba(82, 229, 255, 0.08), rgba(82, 229, 255, 0.02) 70%);
    box-shadow: 0 0 18px rgba(82, 229, 255, 0.25);
}

.touch-stick-knob {
    left: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.85), rgba(82, 229, 255, 0.55));
    box-shadow: 0 0 14px rgba(82, 229, 255, 0.6);
}

/* Touch controls choice: asked once on touch devices before the first run. Two big options, each with a
   tiny looping demo: a finger tapping the rock (Tap to aim) and a thumb sliding in a ring (Thumb stick). */
.controls-choice-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding:
        max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    background: rgba(2, 5, 27, 0.82);
    backdrop-filter: blur(9px);
}

.controls-choice-overlay[hidden] { display: none; }

.controls-choice-card {
    display: grid;
    gap: 14px;
    width: min(520px, 100%);
    max-height: calc(100svh - 32px);
    padding: clamp(22px, 5vw, 34px);
    overflow-y: auto;
    text-align: center;
}

.controls-choice-card h2 {
    margin: 0;
    color: var(--mooney-ivory);
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.1;
}

.controls-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.controls-choice-option {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 14px 10px 16px;
    border: 1px solid rgba(82, 229, 255, 0.35);
    border-radius: 14px;
    background: rgba(10, 16, 58, 0.85);
    color: var(--mooney-ivory);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.controls-choice-option:hover,
.controls-choice-option:focus-visible {
    border-color: var(--electric-cyan);
    background: rgba(24, 34, 96, 0.95);
    outline: none;
}

.controls-choice-option:active { transform: scale(0.97); }

.controls-choice-option strong {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.controls-choice-option span:last-child {
    color: rgba(226, 230, 255, 0.75);
    font-size: 0.82rem;
    line-height: 1.35;
}

.controls-choice-note {
    margin: 0;
    color: rgba(226, 230, 255, 0.6);
    font-size: 0.8rem;
}

/* The demos: a 120x96 "screen" with the moon in the middle. */
.controls-demo {
    position: relative;
    width: 120px;
    height: 96px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(82, 229, 255, 0.08), rgba(2, 5, 27, 0.9));
    overflow: hidden;
}

.demo-moon {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff7de, #c9bba0);
    box-shadow: 0 0 10px rgba(255, 247, 222, 0.45);
}

.demo-rock {
    position: absolute;
    left: 18px;
    top: 14px;
    width: 12px;
    height: 10px;
    border-radius: 45% 55% 50% 40%;
    background: #8a7f9e;
    animation: demo-rock 2.4s ease-in-out infinite;
}

.demo-finger {
    position: absolute;
    left: 14px;
    top: 10px;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    animation: demo-tap 2.4s ease-in-out infinite;
}

.demo-ring {
    position: absolute;
    right: 12px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(82, 229, 255, 0.6);
    border-radius: 50%;
}

.demo-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff, rgba(82, 229, 255, 0.7));
    animation: demo-stick 2.4s ease-in-out infinite;
}

@keyframes demo-tap {
    0%, 20% { opacity: 0; transform: scale(1.4); }
    35%, 70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes demo-rock {
    0%, 60% { opacity: 1; }
    70%, 100% { opacity: 0; }
}

@keyframes demo-stick {
    0%, 15% { transform: translate(0, 0); }
    40%, 60% { transform: translate(-9px, -9px); }
    85%, 100% { transform: translate(10px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-finger, .demo-rock, .demo-knob { animation: none; }
}

/* Online Battle: the player's record on this device (wins · losses · streak). */
.duel-record {
    margin: 0;
    color: var(--mooney-ivory);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

/* Daily supply drop: hub button and panel */
.hub-daily {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 12px;
    border: 0;
    clip-path: var(--control-clip);
    background: rgba(140, 91, 255, 0.18);
    color: var(--text-muted);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.hub-daily[hidden] { display: none; }
.hub-daily:hover { color: var(--text-primary); background: rgba(140, 91, 255, 0.3); }
.hub-daily:focus-visible { outline: none; box-shadow: var(--focus-cyan); }

.hub-daily-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}

.hub-daily.is-ready {
    color: var(--cargo-gold);
    background: rgba(255, 200, 61, 0.16);
}

.hub-daily.is-ready .hub-daily-dot {
    background: var(--cargo-gold);
    opacity: 1;
    box-shadow: 0 0 10px var(--cargo-gold);
    animation: daily-pulse 1.6s ease-in-out infinite;
}

@keyframes daily-pulse {
    50% { transform: scale(1.5); opacity: 0.6; }
}

.daily-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 0 8px;
    padding: 0;
    list-style: none;
}

.daily-day {
    /* Border drawn as the tile's own fill, with the inside (::before) cut a little smaller, so the border
       also runs along the cut corners (an inset box-shadow gets clipped away there). The inner cut is
       12px - width * (2 - sqrt 2), which keeps the border the same thickness on the diagonals. */
    --day-edge: rgba(140, 91, 255, 0.55);
    --day-fill: rgba(16, 19, 74, 0.92);
    --day-bw: 1px;
    --day-cut: calc(12px - var(--day-bw) * 0.586);
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 2px;
    clip-path: var(--control-clip);
    background: var(--day-edge);
    color: var(--text-muted);
    text-align: center;
}

.daily-day::before {
    content: "";
    position: absolute;
    inset: var(--day-bw);
    z-index: -1;
    background: var(--day-fill);
    clip-path: polygon(var(--day-cut) 0, calc(100% - var(--day-cut)) 0, 100% var(--day-cut), 100% calc(100% - var(--day-cut)), calc(100% - var(--day-cut)) 100%, var(--day-cut) 100%, 0 calc(100% - var(--day-cut)), 0 var(--day-cut));
}

.daily-day-label {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.daily-day strong {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 2.6vw, 1.1rem);
}

.daily-day.is-big {
    --day-edge: rgba(255, 200, 61, 0.75);
    --day-fill: linear-gradient(160deg, rgb(78, 50, 10), rgb(41, 16, 95));
}

.daily-day.is-big strong { color: var(--cargo-gold); }

.daily-day.is-claimed {
    --day-edge: rgba(82, 229, 255, 0.6);
    --day-fill: linear-gradient(rgba(82, 229, 255, 0.14), rgba(82, 229, 255, 0.14)), rgb(16, 19, 74);
}

.daily-day.is-claimed strong::after {
    content: " ✓";
    color: var(--electric-cyan);
}

.daily-day.is-today {
    --day-edge: var(--electric-cyan);
    --day-bw: 2px;
}

.daily-streak {
    margin: 6px 0 12px;
    color: var(--text-primary);
    font-weight: 750;
    text-align: center;
}

.daily-actions {
    display: grid;
    gap: 10px;
}

/* Daily challenges: one row per challenge, cut corners drawn like the daily tiles (border colour as the
   fill, the inside cut a little smaller so the border runs along the diagonals too). */
.challenge-list {
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 0 4px 0 0;
    list-style: none;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A thin themed bar instead of the bright system one, when the list scrolls on short screens. */
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 91, 255, 0.75) transparent;
}

.challenge {
    --challenge-edge: rgba(82, 229, 255, 0.55);
    --challenge-fill: rgba(16, 19, 74, 0.92);
    --challenge-bw: 1px;
    --challenge-cut: calc(12px - var(--challenge-bw) * 0.586);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head reward"
        "text actions"
        "bar actions"
        "count actions";
    gap: 4px 14px;
    align-items: center;
    padding: 12px 14px;
    clip-path: var(--control-clip);
    background: var(--challenge-edge);
}

.challenge-head { grid-area: head; }

.challenge::before {
    content: "";
    position: absolute;
    inset: var(--challenge-bw);
    z-index: -1;
    background: var(--challenge-fill);
    clip-path: polygon(var(--challenge-cut) 0, calc(100% - var(--challenge-cut)) 0, 100% var(--challenge-cut), 100% calc(100% - var(--challenge-cut)), calc(100% - var(--challenge-cut)) 100%, var(--challenge-cut) 100%, 0 calc(100% - var(--challenge-cut)), 0 var(--challenge-cut));
}

.challenge[data-tier="medium"] { --challenge-edge: rgba(140, 91, 255, 0.75); }
.challenge[data-tier="hard"] { --challenge-edge: rgba(255, 200, 61, 0.75); }

.challenge.is-done {
    --challenge-fill: linear-gradient(rgba(82, 229, 255, 0.14), rgba(82, 229, 255, 0.14)), rgb(16, 19, 74);
}

.challenge-tier {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.challenge-title {
    color: var(--text-primary);
    font-weight: 800;
}

.challenge-text {
    grid-area: text;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.challenge-reward {
    grid-area: reward;
    justify-self: end;
    color: var(--cargo-gold);
    font-family: var(--font-display);
    font-size: 1.05rem;
    white-space: nowrap;
}

.challenge.is-done .challenge-reward { color: var(--electric-cyan); }

.challenge-bar {
    grid-area: bar;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
}

.challenge-bar > span {
    display: block;
    height: 100%;
    background: var(--electric-cyan);
}

.challenge[data-tier="hard"] .challenge-bar > span { background: var(--cargo-gold); }

.challenge-count {
    grid-area: count;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.challenge-actions {
    grid-area: actions;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.challenge-actions .challenge-start {
    min-height: 40px;
    padding: 0 18px;
}

.challenge .challenge-swap {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    color: var(--cargo-gold);
    background: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.challenge .challenge-swap:hover,
.challenge .challenge-swap:focus-visible {
    text-decoration: underline;
}

.challenge .challenge-swap .ad-reward-badge {
    font-size: 0.62rem;
    padding: 2px 5px;
}

.challenge-footer {
    margin: 8px 0 0;
    color: var(--text-primary);
    font-weight: 750;
    text-align: center;
}

.daily-actions .daily-claim[hidden] { display: none; }
.daily-actions .daily-claim { width: 100%; justify-content: center; }

.daily-status {
    min-height: 1.4em;
    padding-left: 0;
    border-left: 0;
    text-align: center;
}

@media (max-width: 420px) {
    .daily-track { gap: 4px; }
    .daily-day { padding: 8px 0; }
    .daily-day-label { font-size: 0.58rem; letter-spacing: 0.02em; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-daily.is-ready .hub-daily-dot { animation: none; }
}

/* Online Battle rounds: every Mooney with its round wins in the player's colour; the game's winner is
   bigger and wears a crown (accessories will join it later). */
.duel-standings {
    display: grid;
    gap: 8px;
    margin: 6px 0 4px;
    text-align: center;
}

.duel-standings[hidden] { display: none; }

.duel-standings-title {
    margin: 0;
    color: var(--mooney-ivory);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.duel-standings-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.duel-standing {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 76px;
}

.duel-standing-mooney {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--player-color), 0 0 14px var(--player-color);
}

.duel-standing-body,
.duel-standing-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The face art fills the middle of its square image, so it is drawn larger than the moon (as in the game). */
.duel-standing-face { inset: -14%; width: 128%; height: 128%; }

.duel-standing-wins {
    position: absolute;
    right: -8px;
    bottom: -6px;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border-radius: 12px;
    background: var(--player-color);
    color: #070b2d;
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.duel-standing-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duel-standing.is-round-winner .duel-standing-name { color: var(--player-color); }

.duel-standing.is-champion { width: 110px; }

.duel-standing.is-champion .duel-standing-mooney {
    width: 86px;
    height: 86px;
    margin-top: 26px;
}

.duel-standing.is-champion .duel-standing-name {
    color: var(--mooney-ivory);
    font-size: 0.85rem;
}

.duel-standing-crown {
    position: absolute;
    left: 50%;
    top: -34px;
    width: 58px;
    transform: translateX(-50%) rotate(-6deg);
    fill: #ffd54a;
    stroke: #b8860b;
    stroke-width: 2;
    filter: drop-shadow(0 2px 6px rgba(255, 213, 74, 0.6));
    z-index: 1;
}

.duel-standings-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Online Battle: friend requests (a toast at the bottom) and the Add friend buttons in the room. */
.friend-request-toast {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 45;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100% - 32px));
    padding: 14px 18px;
    transform: translateX(-50%);
    color: var(--mooney-ivory);
    text-align: center;
}

.friend-request-toast[hidden] { display: none; }

.friend-request-toast p {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.friend-request-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.friend-request-actions[hidden] { display: none; }

.friend-request-actions button {
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid rgba(82, 229, 255, 0.55);
    border-radius: 999px;
    background: rgba(82, 229, 255, 0.12);
    color: var(--mooney-ivory);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.friend-request-actions button[data-friend-accept] {
    background: var(--electric-cyan);
    color: #070b2d;
}

/* "Add friend": a small round icon button (user with a plus) inside a player's pill or under their Mooney.
   The long selectors beat the room's big clipped buttons (`.duel-panel .duel-room button`). */
.duel-panel .duel-room .duel-players .friend-request-button,
.duel-standings .duel-standing .friend-request-button,
.coop-standings .coop-standing .friend-request-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(82, 229, 255, 0.6);
    border-radius: 50%;
    clip-path: none;
    background: rgba(82, 229, 255, 0.14);
    color: var(--electric-cyan);
    box-shadow: none;
    cursor: pointer;
}

.duel-panel .duel-room .duel-players .friend-request-button::after,
.duel-panel .duel-room .duel-players .friend-request-button::before,
.coop-standings .coop-standing .friend-request-button::after,
.coop-standings .coop-standing .friend-request-button::before { content: none; }

.duel-panel .duel-room .duel-players .friend-request-button:hover:not(:disabled),
.duel-standings .duel-standing .friend-request-button:hover:not(:disabled),
.coop-standings .coop-standing .friend-request-button:hover:not(:disabled) {
    background: var(--electric-cyan);
    color: #070b2d;
}

.friend-request-button svg {
    width: 17px;
    height: 15px;
    fill: currentColor;
}

.friend-request-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.duel-players li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The name filter refused a name: the hint under the name field turns into the reason. */
.callsign-hint.is-error { color: #ff9fb1; }

/* Armory: opt-in "Short on credits?" rewarded ad (the gold ad-reward button style), kept in the header block
   so the panel's header / list / Back rows stay as they are. */
.armory-top {
    display: grid;
    gap: 10px;
}

.armory-topup {
    margin: 0 0 4px;
}

/* Classic Co-op: its hub tile (next to Play Classic), the room panel and the results list. */
.hub-console .hub-actions #coopButton {
    min-height: 58px;
    font-size: clamp(1rem, 2.8vw, 1.4rem);
}

#coopButton::before { content: "\2726"; color: var(--electric-cyan); }

#coopPanel:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#coopPanel > * { flex-shrink: 0; }

#coopPanel > .duel-room {
    flex-shrink: 1;
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

.coop-players li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: var(--player-color, rgba(255, 91, 200, 0.45));
}

.coop-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--player-color, #ff5bc8);
    box-shadow: 0 0 8px var(--player-color, #ff5bc8);
}

.coop-player-level {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.coop-loadout-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.coop-friends {
    display: grid;
    gap: 6px;
    margin-top: 4px;
}

.coop-friends[hidden] { display: none; }

.coop-friends .duel-code-label { margin: 0; }

.coop-standings {
    display: grid;
    gap: 8px;
    margin: 6px 0 4px;
}

.coop-standings[hidden] { display: none; }

.coop-standings-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coop-standing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1.5px solid var(--player-color);
    border-radius: 999px;
    background: rgba(16, 19, 74, 0.72);
    color: var(--text-primary);
    font-weight: 750;
}

.coop-standing.is-you { box-shadow: 0 0 12px var(--player-color); }

.coop-standing-rank { color: var(--player-color); font-weight: 900; }

.coop-standing-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coop-standing-points { font-variant-numeric: tabular-nums; }

.coop-standing.is-top .coop-standing-rank::after { content: " \2605"; color: var(--cargo-gold); }

/* Online runs: Leave (two taps) in the run controls, in the HUD button style. The id rule above would
   otherwise beat [hidden]. */
#leaveBattleButton[hidden] { display: none; }

/* Accounts: the hub pill and the "Save Your Progress" panel. */
.hub-account-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.hub-account {
    color: var(--electric-cyan);
    background: rgba(82, 229, 255, 0.14);
}

.hub-account:hover {
    color: var(--mooney-ivory);
    background: rgba(82, 229, 255, 0.26);
}

.hub-account.is-signed-in {
    color: #83f58b;
    background: rgba(131, 245, 139, 0.12);
}

.account-view,
.account-form {
    display: grid;
    gap: 10px;
}

.account-view[hidden],
.account-form[hidden],
.account-actions[hidden],
.account-confirm[hidden],
.account-link[hidden] {
    display: none;
}

.account-panel .mode-helper strong {
    color: var(--mooney-ivory);
    overflow-wrap: anywhere;
}

.account-code-input {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    text-align: center;
}

.account-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
}

.account-link {
    padding: 6px 0;
    border: 0;
    color: var(--electric-cyan);
    background: none;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.account-link:disabled {
    color: var(--text-muted);
    text-decoration: none;
    cursor: default;
}

.account-link:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
}

.leaderboard-account-link {
    justify-self: center;
    text-align: center;
}

.account-sync {
    min-height: 1.2em;
    margin: 0;
    color: #83f58b;
    font-size: 0.85rem;
}

.account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Same cut-corner construction as the Online Battle buttons: the frame is the button's own fill around an
   inner layer, so the edge follows the diagonals. */
.account-actions button {
    --control-fill: linear-gradient(135deg, rgba(41, 16, 95, 0.94), rgba(16, 19, 74, 0.94));
    position: relative;
    isolation: isolate;
    min-height: var(--control-height);
    padding: 10px 16px;
    border: 0;
    clip-path: var(--control-clip);
    color: var(--text-primary);
    font: inherit;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    background: var(--control-frame, rgba(140, 91, 255, 0.76));
    cursor: pointer;
}

.account-actions button::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--control-inner-clip);
    background: var(--control-fill);
    pointer-events: none;
}

.account-actions button:hover:not(:disabled) {
    --control-fill: linear-gradient(135deg, rgba(70, 32, 150, 0.97), rgba(30, 36, 116, 0.97));
}

.account-actions .account-danger {
    --control-frame: var(--danger-coral);
    color: #ffd0d8;
}

.account-actions .account-danger:hover:not(:disabled) {
    --control-fill: linear-gradient(135deg, rgba(120, 20, 48, 0.95), rgba(41, 16, 95, 0.95));
}

.account-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

.account-actions button:focus-visible {
    outline: 2px solid var(--electric-cyan);
    outline-offset: 3px;
}

.account-confirm {
    display: grid;
    gap: 10px;
}

.account-confirm p {
    margin: 0;
    color: var(--mooney-ivory);
    font-size: 0.95rem;
    line-height: 1.45;
}

.account-panel #accountStatus[data-tone="error"] { color: var(--danger-coral); }
.account-panel #accountStatus[data-tone="success"] { color: #83f58b; }

@media (max-width: 430px) {
    .account-actions {
        grid-template-columns: 1fr;
    }
}

.account-panel #accountStatus:empty {
    display: none;
}