:root {
    --ui-scale: 1;
    --font-display: 'Fredoka', system-ui, sans-serif;
    --font-ui: 'Nunito', system-ui, sans-serif;
    --color-bg: #0a0f1f;
    --color-text: #fff8f0;
    --color-text-muted: #b8c4e8;
    --color-cream: #fff4dc;
    --color-gold: #ffd54a;
    --color-gold-deep: #e8a820;
    --color-coral: #ff6b4a;
    --color-coral-deep: #d94428;
    --color-berry: #ff4d7a;
    --color-leaf: #5ce08a;
    --color-panel-top: #1e2a52;
    --color-panel-bot: #121a38;
    --color-panel-edge: #3d5088;
    --color-chip-shadow: rgba(0, 0, 0, 0.45);
    --radius-chip: calc(16px * var(--ui-scale));
    --radius-btn: calc(18px * var(--ui-scale));
    --hud-inset: calc(12px * var(--ui-scale));
    --hud-h: calc(54px * var(--ui-scale));
    --hud-home: calc(50px * var(--ui-scale));
    --hud-gap: calc(8px * var(--ui-scale));
    --chip-pad-x: calc(14px * var(--ui-scale));
    --chip-gap: calc(8px * var(--ui-scale));
    --chip-icon-size: calc(20px * var(--ui-scale));
    --chip-label-size: calc(10px * var(--ui-scale));
    --stat-count-size: calc(15px * var(--ui-scale));
    --stat-stack-min: calc(44px * var(--ui-scale));
    --meter-h: calc(6px * var(--ui-scale));
    --goal-slot-size: calc(40px * var(--ui-scale));
    --goal-emoji-size: calc(26px * var(--ui-scale));
    --goals-badge-size: calc(11px * var(--ui-scale));
    --goals-gap: calc(10px * var(--ui-scale));
    --score-size: calc(18px * var(--ui-scale));
    --home-radius: calc(14px * var(--ui-scale));
    --home-icon-size: calc(24px * var(--ui-scale));
    --ammo-min-w: calc(72px * var(--ui-scale));
    --menu-card-max-w: min(calc(400px * var(--ui-scale)), 92vw);
    --menu-card-pad: clamp(calc(20px * var(--ui-scale)), min(3.2vh, 3.5vw), calc(32px * var(--ui-scale)));
    --logo-max-width: clamp(calc(230px * var(--ui-scale)), min(58vw, 38vh), calc(340px * var(--ui-scale)));
    --logo-max-height: clamp(calc(95px * var(--ui-scale)), min(18vw, 14vh), calc(140px * var(--ui-scale)));
    --transition-fast: 0.1s ease;
    --transition-screen: 0.35s ease;
}

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

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

body {
    position: relative;
}

body.is-mobile-blocked #gameCanvas,
body.is-mobile-blocked #ui-layer,
body.is-mobile-blocked .screen {
    visibility: hidden;
    pointer-events: none;
}

#gameCanvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#ui-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

#ui-layer.hidden {
    opacity: 0;
    visibility: hidden;
}

.hud-home-icon {
    font-size: var(--home-icon-size);
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Shared HUD primitives ────────────────────────────── */

.hud-chip {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--chip-gap);
    height: var(--hud-h);
    padding: 0 var(--chip-pad-x);
    border-radius: var(--radius-chip);
    background: linear-gradient(180deg, var(--color-panel-top) 0%, var(--color-panel-bot) 100%);
    border: calc(2px * var(--ui-scale)) solid var(--color-panel-edge);
    box-shadow:
        0 calc(4px * var(--ui-scale)) 0 rgba(0, 0, 0, 0.35),
        0 calc(8px * var(--ui-scale)) calc(24px * var(--ui-scale)) var(--color-chip-shadow),
        inset 0 calc(1px * var(--ui-scale)) 0 rgba(255, 255, 255, 0.12);
}

.chip-icon {
    font-size: var(--chip-icon-size);
    line-height: 1;
    filter: drop-shadow(0 calc(2px * var(--ui-scale)) calc(4px * var(--ui-scale)) rgba(0, 0, 0, 0.4));
}

.chip-label {
    font-family: var(--font-ui);
    font-size: var(--chip-label-size);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    opacity: 0.85;
}

.stat-stack {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--ui-scale));
    min-width: var(--stat-stack-min);
}

.stat-count {
    font-family: var(--font-ui);
    font-size: var(--stat-count-size);
    font-weight: 600;
    line-height: 1;
    color: var(--color-cream);
}

.game-meter {
    display: block;
    width: 100%;
    height: var(--meter-h);
    margin: 0;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.game-meter::-webkit-progress-bar {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.game-meter::-webkit-progress-value {
    border-radius: 999px;
    transition: width 0.08s linear;
}

.game-meter::-moz-progress-bar {
    border-radius: 999px;
    transition: width 0.08s linear;
}

.game-meter--health::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-berry), #ff8fa8);
}

.game-meter--health::-moz-progress-bar {
    background: linear-gradient(90deg, var(--color-berry), #ff8fa8);
}

.game-meter--ammo::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-leaf), var(--color-gold));
}

.game-meter--ammo::-moz-progress-bar {
    background: linear-gradient(90deg, var(--color-leaf), var(--color-gold));
}

.arrow-ammo.is-full .game-meter--ammo::-webkit-progress-value {
    background: linear-gradient(90deg, #8ee8b0, #ffe08a);
}

.arrow-ammo.is-full .game-meter--ammo::-moz-progress-bar {
    background: linear-gradient(90deg, #8ee8b0, #ffe08a);
}

.hud-home {
    position: absolute;
    top: var(--hud-inset);
    left: var(--hud-inset);
    z-index: 4;
    display: grid;
    place-items: center;
    width: var(--hud-home);
    height: var(--hud-home);
    padding: 0;
    border: calc(2px * var(--ui-scale)) solid var(--color-panel-edge);
    border-radius: var(--home-radius);
    color: var(--color-cream);
    cursor: pointer;
    pointer-events: auto;
    background: linear-gradient(180deg, #2a3868 0%, #1a2448 100%);
    box-shadow:
        0 calc(4px * var(--ui-scale)) 0 rgba(0, 0, 0, 0.35),
        0 calc(8px * var(--ui-scale)) calc(20px * var(--ui-scale)) var(--color-chip-shadow),
        inset 0 calc(1px * var(--ui-scale)) 0 rgba(255, 255, 255, 0.15);
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.hud-home:hover {
    filter: brightness(1.1);
}

.hud-home:active {
    transform: translateY(calc(3px * var(--ui-scale)));
    box-shadow:
        0 calc(1px * var(--ui-scale)) 0 rgba(0, 0, 0, 0.35),
        0 calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale)) var(--color-chip-shadow);
}

.hud-goals {
    position: absolute;
    top: var(--hud-inset);
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--goals-gap);
    height: var(--hud-h);
    padding: 0 calc(14px * var(--ui-scale)) 0 calc(12px * var(--ui-scale));
    border-radius: 999px;
    background: linear-gradient(180deg, #2a1f4a 0%, #1a1238 100%);
    border: calc(2px * var(--ui-scale)) solid rgba(255, 213, 74, 0.55);
    box-shadow:
        0 calc(4px * var(--ui-scale)) 0 rgba(0, 0, 0, 0.4),
        0 0 calc(28px * var(--ui-scale)) rgba(255, 213, 74, 0.18),
        inset 0 calc(1px * var(--ui-scale)) 0 rgba(255, 255, 255, 0.1);
}

.goals-badge {
    font-family: var(--font-display);
    font-size: var(--goals-badge-size);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-gold);
    padding-right: calc(4px * var(--ui-scale));
    border-right: calc(1px * var(--ui-scale)) solid rgba(255, 213, 74, 0.25);
    margin-right: calc(2px * var(--ui-scale));
}

.goal-fruits {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale));
}

.goal-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--goal-slot-size);
    height: var(--goal-slot-size);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22), rgba(255, 213, 74, 0.08));
    border: calc(2px * var(--ui-scale)) solid rgba(255, 213, 74, 0.5);
    box-shadow:
        inset 0 calc(-3px * var(--ui-scale)) calc(8px * var(--ui-scale)) rgba(0, 0, 0, 0.25),
        0 0 calc(14px * var(--ui-scale)) rgba(255, 213, 74, 0.2);
    animation: goal-pulse 2.4s ease-in-out infinite;
}

.goal-slot.is-bursting {
    animation: none;
}

.goal-slot.is-bursting::after {
    content: '';
    position: absolute;
    inset: calc(-6px * var(--ui-scale));
    border-radius: 50%;
    border: calc(2px * var(--ui-scale)) solid rgba(255, 213, 74, 0.85);
    animation: goal-ring-burst 0.4s ease-out forwards;
    pointer-events: none;
}

.goal-slot.is-bursting .goal-emoji {
    animation: goal-emoji-burst 0.4s ease-in forwards;
}

.goal-slot.is-appearing {
    animation: none;
}

.goal-slot.is-appearing .goal-emoji {
    animation: goal-emoji-appear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes goal-ring-burst {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes goal-emoji-burst {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }

    40% {
        transform: scale(1.35) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.15) rotate(-14deg);
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes goal-emoji-appear {
    0% {
        transform: scale(0) rotate(-18deg);
        opacity: 0;
    }

    65% {
        transform: scale(1.18) rotate(5deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.goal-slot:nth-child(2) {
    animation-delay: 0.4s;
}

.goal-slot:nth-child(3) {
    animation-delay: 0.8s;
}

@keyframes goal-pulse {

    0%,
    100% {
        box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 213, 74, 0.15);
    }

    50% {
        box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 213, 74, 0.35);
    }
}

.goal-slot.is-empty {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin: 0;
    padding: 0;
    border: none;
    animation: none;
}

.goal-emoji {
    font-size: var(--goal-emoji-size);
    line-height: 1;
    filter: drop-shadow(0 calc(2px * var(--ui-scale)) calc(6px * var(--ui-scale)) rgba(0, 0, 0, 0.45));
}

.hud-rail {
    position: absolute;
    top: var(--hud-inset);
    right: var(--hud-inset);
    z-index: 3;
    display: flex;
    align-items: stretch;
    gap: var(--hud-gap);
    pointer-events: none;
}

.hud-chip--health {
    border-color: rgba(255, 77, 122, 0.45);
}

.hud-chip--health.is-low .stat-count {
    color: var(--color-berry);
}

.hud-chip--ammo {
    min-width: var(--ammo-min-w);
    border-color: rgba(92, 224, 138, 0.4);
}

.arrow-ammo.is-empty .stat-count {
    color: var(--color-berry);
}

.hud-chip--score {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(2px * var(--ui-scale));
    min-width: var(--ammo-min-w);
    padding: calc(6px * var(--ui-scale)) var(--chip-pad-x);
    border-color: rgba(255, 213, 74, 0.45);
}

.score-value {
    font-family: var(--font-ui);
    font-size: var(--score-size);
    font-weight: 600;
    line-height: 1;
    color: var(--color-gold);
}

/* ─── Menus ────────────────────────────────────────────── */

.screen {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(calc(12px * var(--ui-scale)), 2.5vh, calc(20px * var(--ui-scale)));
    pointer-events: auto;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 107, 74, 0.12), transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(92, 224, 138, 0.08), transparent 60%),
        rgba(6, 10, 22, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity var(--transition-screen), visibility var(--transition-screen);
}

.screen.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.menu-card {
    position: relative;
    width: min(var(--menu-card-max-w), 100%);
    max-height: min(92vh, 92dvh);
    overflow-y: auto;
    padding: var(--menu-card-pad);
    text-align: center;
    border-radius: calc(28px * var(--ui-scale));
    background: linear-gradient(165deg, #243060 0%, #141c40 45%, #0e1430 100%);
    border: calc(3px * var(--ui-scale)) solid #4a5e9a;
    box-shadow:
        0 calc(8px * var(--ui-scale)) 0 #0a0e20,
        0 calc(24px * var(--ui-scale)) calc(60px * var(--ui-scale)) rgba(0, 0, 0, 0.55),
        inset 0 calc(1px * var(--ui-scale)) 0 rgba(255, 255, 255, 0.12),
        inset 0 calc(-4px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(0, 0, 0, 0.2);
}

.menu-emoji-burst {
    font-size: calc(48px * var(--ui-scale));
    margin-bottom: calc(8px * var(--ui-scale));
    filter: drop-shadow(0 calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(255, 107, 74, 0.5));
}

.menu-kicker {
    margin: 0 0 calc(8px * var(--ui-scale));
    font-family: var(--font-display);
    font-size: calc(14px * var(--ui-scale));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-leaf);
}

.game-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, var(--logo-max-width));
    max-height: var(--logo-max-height);
    margin: 0 auto clamp(calc(10px * var(--ui-scale)), 1.8vh, calc(14px * var(--ui-scale)));
    object-fit: contain;
    filter: drop-shadow(0 calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(255, 213, 74, 0.35));
    user-select: none;
    -webkit-user-drag: none;
}

.menu-title {
    margin: 0 0 calc(14px * var(--ui-scale));
    font-family: var(--font-display);
    font-size: clamp(calc(42px * var(--ui-scale)), 10vw, calc(58px * var(--ui-scale)));
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff8e8 0%, var(--color-gold) 55%, var(--color-coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(255, 213, 74, 0.35));
}

.menu-title--sm {
    font-size: clamp(calc(32px * var(--ui-scale)), 8vw, calc(44px * var(--ui-scale)));
}

.menu-copy {
    margin: 0 0 clamp(calc(14px * var(--ui-scale)), 2.2vh, calc(20px * var(--ui-scale)));
    font-size: clamp(calc(14px * var(--ui-scale)), min(2.8vw, 2.2vh), calc(16px * var(--ui-scale)));
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.menu-copy--score-label {
    margin-bottom: calc(6px * var(--ui-scale));
    font-size: calc(13px * var(--ui-scale));
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.8;
}

.menu-tips {
    list-style: none;
    margin: 0 0 clamp(calc(18px * var(--ui-scale)), 2.8vh, calc(28px * var(--ui-scale)));
    padding: clamp(calc(10px * var(--ui-scale)), 1.8vh, calc(14px * var(--ui-scale))) clamp(calc(12px * var(--ui-scale)), 2vw, calc(16px * var(--ui-scale)));
    text-align: left;
    border-radius: calc(16px * var(--ui-scale));
    background: rgba(0, 0, 0, 0.25);
    border: calc(1px * var(--ui-scale)) solid rgba(255, 255, 255, 0.08);
}

.menu-tips li {
    display: flex;
    align-items: flex-start;
    gap: calc(10px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale));
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-cream);
    opacity: 0.9;
}

.menu-tips li+li {
    margin-top: calc(10px * var(--ui-scale));
}

.menu-tips li span {
    flex-shrink: 0;
    font-size: calc(16px * var(--ui-scale));
}

.final-score {
    margin: 0 0 calc(28px * var(--ui-scale));
    font-family: var(--font-ui);
    font-size: clamp(calc(36px * var(--ui-scale)), 10vw, calc(48px * var(--ui-scale)));
    font-weight: 600;
    line-height: 1;
    color: var(--color-gold);
}

.menu-actions {
    display: flex;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--ui-scale));
    min-width: calc(220px * var(--ui-scale));
    padding: calc(16px * var(--ui-scale)) calc(32px * var(--ui-scale));
    font-family: var(--font-display);
    font-size: calc(18px * var(--ui-scale));
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(180deg, #ff8a65 0%, var(--color-coral) 40%, var(--color-coral-deep) 100%);
    border: calc(2px * var(--ui-scale)) solid rgba(255, 200, 160, 0.5);
    border-radius: var(--radius-btn);
    cursor: pointer;
    box-shadow:
        0 calc(6px * var(--ui-scale)) 0 #9a2818,
        0 calc(12px * var(--ui-scale)) calc(32px * var(--ui-scale)) rgba(255, 107, 74, 0.4),
        inset 0 calc(1px * var(--ui-scale)) 0 rgba(255, 255, 255, 0.25);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter 0.15s ease;
}

.btn-icon {
    font-size: calc(16px * var(--ui-scale));
    line-height: 1;
}

.btn-label {
    line-height: 1;
}

.btn:hover {
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(calc(5px * var(--ui-scale)));
    box-shadow:
        0 calc(1px * var(--ui-scale)) 0 #9a2818,
        0 calc(6px * var(--ui-scale)) calc(16px * var(--ui-scale)) rgba(255, 107, 74, 0.35);
}

/* ─── Mobile gate ────────────────────────────────────────── */

.mobile-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px * var(--ui-scale));
    background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(255, 107, 74, 0.14), transparent 60%),
        rgba(6, 10, 22, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mobile-gate.hidden {
    display: none;
}

.mobile-gate-card {
    max-width: min(calc(400px * var(--ui-scale)), 100%);
}

.mobile-gate-icon {
    display: block;
    font-size: calc(52px * var(--ui-scale));
    margin-bottom: calc(12px * var(--ui-scale));
    filter: drop-shadow(0 calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(255, 213, 74, 0.35));
}

/* ─── Responsive (proportional --ui-scale) ─────────────── */

/* Short viewport — embedded game portal / iframe */
@media (max-height: 720px) {
    :root {
        --menu-card-max-w: min(calc(360px * var(--ui-scale)), calc(100vw - 24px));
        --menu-card-pad: clamp(14px, min(2.2vh, 2.5vw), 24px);
        --logo-max-width: clamp(175px, min(72vw, 50vw), 270px);
        --logo-max-height: clamp(72px, min(14vh, 20vw), 108px);
    }
}

@media (max-height: 620px) {
    :root {
        --menu-card-max-w: min(calc(340px * var(--ui-scale)), calc(100vw - 20px));
        --menu-card-pad: clamp(12px, min(1.8vh, 2.2vw), 20px);
        --logo-max-width: clamp(155px, min(68vw, 46vw), 240px);
        --logo-max-height: clamp(62px, min(12vh, 18vw), 92px);
    }

    .menu-tips li {
        font-size: clamp(calc(12px * var(--ui-scale)), min(2.6vw, 2vh), calc(14px * var(--ui-scale)));
    }

    .btn {
        min-width: calc(180px * var(--ui-scale));
        padding: calc(12px * var(--ui-scale)) calc(20px * var(--ui-scale));
        font-size: calc(15px * var(--ui-scale));
    }
}

/* Desktop ≥1025px */
@media (min-width: 1025px) {
    :root {
        --ui-scale: 1.08;
        --logo-max-width: clamp(260px, min(56vw, 38vh), 360px);
        --logo-max-height: clamp(110px, min(18vw, 15vh), 148px);
    }
}

/* Portal embed: wide + short (game page with sidebar) */
@media (max-height: 720px) and (min-width: 640px) {
    :root {
        --logo-max-width: clamp(260px, 90%, 360px);
        --logo-max-height: clamp(115px, 22vh, 158px);
        --menu-card-max-w: min(420px, calc(100vw - 24px));
    }
}

@media (max-height: 620px) and (min-width: 640px) {
    :root {
        --logo-max-width: clamp(240px, 88%, 340px);
        --logo-max-height: clamp(105px, 20vh, 145px);
        --menu-card-max-w: min(400px, calc(100vw - 20px));
    }
}

/* Tablet Landscape 769px–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --ui-scale: 0.96;
    }
}

/* Tablet Portrait 641px–768px */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --ui-scale: 0.9;
    }

    .goals-badge {
        display: none;
    }

    .hud-goals {
        padding: 0 calc(10px * var(--ui-scale));
    }

    .hud-rail {
        top: calc(var(--hud-inset) + var(--hud-h) + calc(6px * var(--ui-scale)));
        right: var(--hud-inset);
        left: var(--hud-inset);
        justify-content: center;
    }

    .hud-chip {
        flex: 1;
        min-width: 0;
        padding: 0 calc(10px * var(--ui-scale));
    }

    .hud-chip--score {
        flex: 0.85;
        min-width: 0;
    }
}

/* Mobile ≤640px */
@media (max-width: 640px) {
    :root {
        --ui-scale: 0.84;
        --logo-max-width: clamp(165px, 76vw, 250px);
        --logo-max-height: clamp(66px, 13vh, 98px);
        --menu-card-max-w: min(calc(360px * var(--ui-scale)), calc(100vw - 20px));
    }

    .menu-card {
        border-radius: calc(22px * var(--ui-scale));
    }

    .btn {
        min-width: calc(200px * var(--ui-scale));
        padding: calc(14px * var(--ui-scale)) calc(24px * var(--ui-scale));
        font-size: calc(16px * var(--ui-scale));
    }
}

/* Small Mobile ≤480px */
@media (max-width: 480px) {
    :root {
        --ui-scale: 0.76;
        --logo-max-width: clamp(140px, 72vw, 215px);
        --logo-max-height: clamp(56px, 12vh, 84px);
    }
}

/* Landscape Mobile */
@media (orientation: landscape) and (max-height: 480px) {
    :root {
        --ui-scale: 0.72;
        --logo-max-width: clamp(130px, min(46vw, 42vh), 195px);
        --logo-max-height: clamp(52px, min(12vh, 16vw), 76px);
        --menu-card-pad: clamp(10px, min(1.6vh, 2vw), 16px);
    }

    .mobile-gate {
        padding: calc(12px * var(--ui-scale));
    }

    .menu-tips {
        margin-bottom: calc(12px * var(--ui-scale));
    }

    .menu-tips li+li {
        margin-top: calc(6px * var(--ui-scale));
    }
}