:root {
    --font-display: 'Fredoka', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, sans-serif;

    --color-ink: #1e1b4b;
    --color-muted: #6366a0;
    --color-violet: #7c3aed;
    --color-indigo: #6366f1;
    --color-pink: #ec4899;
    --color-coral: #fb7185;
    --color-gold: #fbbf24;
    --color-mint: #34d399;
    --color-sky: #38bdf8;
    --color-white: #ffffff;

    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-strong: #ffffff;
    --color-glass-border: rgba(255, 255, 255, 0.65);

    --gradient-brand: linear-gradient(135deg, var(--color-violet), var(--color-pink));
    --gradient-brand-wide: linear-gradient(120deg, var(--color-violet) 0%, var(--color-pink) 50%, var(--color-coral) 100%);
    --gradient-play: linear-gradient(135deg, var(--color-violet) 0%, var(--color-indigo) 45%, var(--color-pink) 100%);
    --gradient-body: linear-gradient(145deg, #eef2ff 0%, #fce7f3 45%, #e0f2fe 100%);

    --shadow-panel: 0 12px 40px rgba(79, 70, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-btn: 0 6px 0 rgba(79, 70, 229, 0.35), 0 14px 28px rgba(99, 102, 241, 0.25);
    --shadow-btn-press: 0 2px 0 rgba(79, 70, 229, 0.35), 0 6px 16px rgba(99, 102, 241, 0.2);

    --radius-pill: 9999px;
    --radius-card: 1.5rem;
    --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Responsive tokens (small mobile defaults) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --hud-padding-y: 0.5rem;
    --hud-padding-x: 0.625rem;
    --hud-gap: 0.5rem;
    --hud-panel-gap: 0.375rem;
    --hud-panel-padding: 0.3rem;

    --btn-icon-size: 2.25rem;
    --icon-size: 1.05rem;
    --badge-font-size: 0.6875rem;

    --overlay-padding: 0.875rem;
    --card-max-width: 18rem;
    --card-padding-y: 1.375rem;
    --card-padding-x: 1.125rem;
    --card-border: 2px;

    --eyebrow-size: 0.6875rem;
    --tagline-size: 0.8125rem;
    --tagline-margin: 1rem;

    --start-logo-width: 15rem;
    --start-title-margin: 0.5rem;

    --level-card-padding-y: 0.75rem;
    --level-card-padding-x: 1.5rem;
    --level-card-margin: 1rem;
    --level-card-label-size: 0.6875rem;
    --level-card-value-size: 2.375rem;

    --btn-play-font-size: 1rem;
    --btn-play-padding-y: 0.8125rem;
    --btn-play-padding-x: 1.125rem;
    --btn-play-icon-size: 1.25rem;

    --win-title-size: 1.75rem;
    --win-stars-size: 1.25rem;
    --win-stars-gap: 0.5rem;
    --btn-win-font-size: 0.75rem;
    --btn-win-padding-y: 0.6875rem;
    --btn-win-padding-x: 0.4375rem;

    --help-title-size: 1.375rem;
    --help-step-gap: 0.625rem;
    --help-step-margin: 0.75rem;
    --help-step-icon-size: 2rem;
    --help-step-icon-font: 1rem;
    --help-step-text-size: 0.8125rem;

    --sparkle-size: 0.9rem;
    --orb-blur: 48px;
    --grid-dot-size: 22px;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

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

body {
    margin: 0;
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    overscroll-behavior: none;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--gradient-body);
}

.text-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: var(--eyebrow-size);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow--pink { color: var(--color-pink); }
.eyebrow--gold { color: var(--color-gold); }

.card-tagline {
    margin: 0 0 var(--tagline-margin);
    font-size: var(--tagline-size);
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-muted);
}

/* ── Background ── */

.game-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.game-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--orb-blur));
    opacity: 0.55;
    animation: orbFloat 12s ease-in-out infinite;
}

.game-bg-orb--1 {
    width: 55vw;
    height: 55vw;
    top: -15%;
    left: -10%;
    background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
}

.game-bg-orb--2 {
    width: 45vw;
    height: 45vw;
    bottom: -10%;
    right: -8%;
    background: radial-gradient(circle, #f472b6 0%, transparent 70%);
    animation-delay: -4s;
}

.game-bg-orb--3 {
    width: 35vw;
    height: 35vw;
    top: 40%;
    left: 35%;
    background: radial-gradient(circle, #67e8f9 0%, transparent 70%);
    animation-delay: -8s;
}

.game-bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.07) 1px, transparent 1px);
    background-size: var(--grid-dot-size) var(--grid-dot-size);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(3%, 4%) scale(1.05); }
    66% { transform: translate(-2%, 2%) scale(0.97); }
}

/* ── Canvas ── */

.game-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    height: 100dvh;
}

/* ── HUD ── */

.ui-layer {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.ui-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hud-gap);
    padding: calc(var(--hud-padding-y) + var(--safe-top)) calc(var(--hud-padding-x) + var(--safe-right)) var(--hud-padding-y) calc(var(--hud-padding-x) + var(--safe-left));
}

.hud-panel {
    display: flex;
    align-items: center;
    gap: var(--hud-panel-gap);
    padding: var(--hud-panel-padding);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 2px solid var(--color-glass-border);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
}

.level-badge {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem 0.25rem 0.35rem;
    white-space: nowrap;
}

.level-badge-label {
    font-family: var(--font-display);
    font-size: var(--badge-font-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.level-badge-value {
    font-family: var(--font-display);
    font-size: var(--badge-font-size);
    font-weight: 700;
}

.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: var(--icon-size);
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--transition-bounce), box-shadow var(--transition-smooth), filter var(--transition-smooth);
}

.btn-icon--back {
    background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
    color: var(--color-indigo);
    box-shadow: 0 4px 0 #a5b4fc, 0 8px 16px rgba(99, 102, 241, 0.2);
}

.btn-icon--hint {
    background: linear-gradient(145deg, #fef3c7, #fde68a);
    color: #d97706;
    box-shadow: 0 4px 0 #fbbf24, 0 8px 16px rgba(251, 191, 36, 0.25);
}

.btn-icon--restart {
    background: linear-gradient(145deg, #ccfbf1, #99f6e4);
    color: #0d9488;
    box-shadow: 0 4px 0 #5eead4, 0 8px 16px rgba(45, 212, 191, 0.25);
}

.btn-icon--help {
    background: linear-gradient(145deg, #ede9fe, #ddd6fe);
    color: var(--color-violet);
    box-shadow: 0 4px 0 #c4b5fd, 0 8px 16px rgba(124, 58, 237, 0.2);
}

.btn-icon:hover {
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.03);
}

.btn-icon:active {
    transform: translateY(2px) scale(0.96);
}

.btn-icon--back:active { box-shadow: 0 1px 0 #a5b4fc, 0 4px 10px rgba(99, 102, 241, 0.15); }
.btn-icon--hint:active { box-shadow: 0 1px 0 #fbbf24, 0 4px 10px rgba(251, 191, 36, 0.15); }
.btn-icon--restart:active { box-shadow: 0 1px 0 #5eead4, 0 4px 10px rgba(45, 212, 191, 0.15); }
.btn-icon--help:active { box-shadow: 0 1px 0 #c4b5fd, 0 4px 10px rgba(124, 58, 237, 0.15); }

.btn-icon--hint.is-active {
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    color: var(--color-white);
    box-shadow: 0 4px 0 #d97706, 0 8px 20px rgba(245, 158, 11, 0.45);
    animation: hintPulse 1.2s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

/* ── Overlays & cards ── */

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
    padding-bottom: calc(var(--overlay-padding) + var(--safe-bottom));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}

.overlay--start {
    z-index: 60;
    background: rgba(238, 242, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.overlay--win {
    z-index: 50;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.overlay--help {
    z-index: 55;
    background: rgba(238, 242, 255, 0.6);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

.overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.card {
    position: relative;
    width: min(100%, var(--card-max-width));
    max-height: calc(100dvh - var(--overlay-padding) * 2 - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--card-padding-y) var(--card-padding-x);
    border-radius: var(--radius-card);
    background: var(--color-surface-strong);
    border: var(--card-border) solid rgba(255, 255, 255, 0.95);
    text-align: center;
}

.card--start {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
    box-shadow: 0 24px 60px rgba(99, 102, 241, 0.22), inset 0 1px 0 var(--color-white), 0 0 0 1px rgba(99, 102, 241, 0.08);
    transform: translateY(2rem) scale(0.92) rotate(-1deg);
    transition: transform var(--transition-bounce);
    overflow: hidden;
}

.overlay--start.is-visible .card--start {
    transform: translateY(0) scale(1) rotate(0deg);
}

.card--win {
    width: min(100%, var(--card-max-width));
    box-shadow: 0 24px 50px rgba(236, 72, 153, 0.2);
    transform: scale(0.85);
    transition: transform var(--transition-bounce);
}

.overlay--win.is-visible .card--win {
    transform: scale(1);
    animation: winPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card--help {
    width: min(100%, calc(var(--card-max-width) + 1rem));
    padding: var(--card-padding-y) var(--card-padding-x);
    box-shadow: 0 24px 50px rgba(124, 58, 237, 0.18);
    transform: translateY(1.5rem) scale(0.94);
    transition: transform var(--transition-bounce);
    text-align: left;
}

.overlay--help.is-visible .card--help {
    transform: translateY(0) scale(1);
}

.help-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: var(--help-title-size);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}

.help-steps {
    margin: 0 0 1.375rem;
    padding: 0;
    list-style: none;
}

.help-step {
    display: flex;
    align-items: flex-start;
    gap: var(--help-step-gap);
    margin-bottom: var(--help-step-margin);
}

.help-step:last-child {
    margin-bottom: 0;
}

.help-step-icon {
    flex-shrink: 0;
    width: var(--help-step-icon-size);
    height: var(--help-step-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: linear-gradient(145deg, #faf5ff, #f3e8ff);
    color: var(--color-violet);
    font-size: var(--help-step-icon-font);
}

.help-step-text {
    font-size: var(--help-step-text-size);
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-muted);
    padding-top: 0.35rem;
}

.btn-play--compact {
    padding: 0.875rem 1.25rem;
    font-size: 1.0625rem;
}

@keyframes winPop {
    0% { transform: scale(0.7) rotate(-3deg); }
    60% { transform: scale(1.05) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.start-sparkle {
    position: absolute;
    font-size: var(--sparkle-size);
    color: var(--color-gold);
    opacity: 0.85;
    animation: sparkle 2.5s ease-in-out infinite;
    pointer-events: none;
}

.start-sparkle--1 { top: 1rem; left: 1.25rem; }
.start-sparkle--2 { top: 2.5rem; right: 1.5rem; animation-delay: 0.8s; color: var(--color-pink); }
.start-sparkle--3 { bottom: 5.5rem; left: 1rem; animation-delay: 1.4s; font-size: 0.9rem; }

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.3) rotate(20deg); opacity: 1; }
}

.start-title {
    margin: 0 0 var(--start-title-margin);
    line-height: 0;
}

.start-logo-img {
    display: block;
    width: var(--start-logo-width);
    max-width: 100%;
    height: auto;
    margin: 0 auto 0.75rem;
    animation: logoBob 3s ease-in-out infinite;
}

@keyframes logoBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.level-card {
    position: relative;
    margin: 0 auto var(--level-card-margin);
    padding: var(--level-card-padding-y) var(--level-card-padding-x);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #faf5ff 0%, #fdf2f8 100%);
    border: 2px solid rgba(167, 139, 250, 0.35);
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(124, 58, 237, 0.12);
    overflow: hidden;
}

.level-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    animation: cardShine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardShine {
    0%, 100% { transform: translateX(-120%); }
    50% { transform: translateX(120%); }
}

.level-card-label {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-display);
    font-size: var(--level-card-label-size);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.level-card-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--level-card-value-size);
    font-weight: 700;
    line-height: 1;
}

.btn-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: var(--btn-play-padding-y) var(--btn-play-padding-x);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--gradient-play);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--btn-play-font-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    overflow: hidden;
    transition: transform var(--transition-bounce), box-shadow var(--transition-smooth);
}

.btn-play-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
    animation: cardShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

.btn-play-label,
.btn-play-icon {
    position: relative;
    z-index: 1;
}

.btn-play-icon {
    font-size: var(--btn-play-icon-size);
}

.btn-play:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 0 rgba(79, 70, 229, 0.35), 0 20px 36px rgba(236, 72, 153, 0.35);
}

.btn-play:active {
    transform: translateY(3px) scale(0.98);
    box-shadow: var(--shadow-btn-press);
}

/* ── Win card ── */

.win-burst {
    position: absolute;
    inset: -1rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 65%);
    animation: burstPulse 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes burstPulse {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

.win-stars {
    display: flex;
    justify-content: center;
    gap: var(--win-stars-gap);
    margin-bottom: 0.5rem;
    font-size: var(--win-stars-size);
}

.win-stars span:nth-child(1) { color: var(--color-gold); animation: starBounce 0.6s ease 0.1s both; }
.win-stars span:nth-child(2) { color: var(--color-pink); animation: starBounce 0.6s ease 0.25s both; font-size: 1.75rem; }
.win-stars span:nth-child(3) { color: var(--color-gold); animation: starBounce 0.6s ease 0.4s both; }

@keyframes starBounce {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    70% { transform: scale(1.2) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.win-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: var(--win-title-size);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.win-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.btn-win {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: var(--btn-win-padding-y) var(--btn-win-padding-x);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--btn-win-font-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform var(--transition-bounce), box-shadow var(--transition-smooth);
}

.btn-win .icon {
    font-size: 1.15rem;
}

.btn-win--home {
    background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
    color: var(--color-indigo);
    box-shadow: 0 4px 0 #a5b4fc, 0 8px 16px rgba(99, 102, 241, 0.2);
}

.btn-win--next {
    background: var(--gradient-play);
    color: var(--color-white);
    box-shadow: var(--shadow-btn);
}

.btn-win:hover {
    transform: translateY(-3px) scale(1.03);
}

.btn-win:active {
    transform: translateY(2px) scale(0.97);
}

.btn-win--home:active {
    box-shadow: 0 1px 0 #a5b4fc, 0 4px 10px rgba(99, 102, 241, 0.15);
}

.btn-win--next:active {
    box-shadow: var(--shadow-btn-press);
}

/* ── Responsive breakpoints ── */

/* Mobile (481px – 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    :root {
        --hud-padding-y: 0.5625rem;
        --hud-padding-x: 0.75rem;
        --hud-gap: 0.625rem;
        --hud-panel-gap: 0.4375rem;
        --hud-panel-padding: 0.325rem;

        --btn-icon-size: 2.5rem;
        --icon-size: 1.15rem;
        --badge-font-size: 0.75rem;

        --overlay-padding: 1rem;
        --card-max-width: 20rem;
        --card-padding-y: 1.625rem;
        --card-padding-x: 1.375rem;
        --card-border: 2px;
        --radius-card: 1.75rem;

        --eyebrow-size: 0.71875rem;
        --tagline-size: 0.875rem;
        --tagline-margin: 1.25rem;

        --start-logo-width: 16rem;
        --start-title-margin: 0.5625rem;

        --level-card-padding-y: 0.875rem;
        --level-card-padding-x: 1.75rem;
        --level-card-margin: 1.125rem;
        --level-card-label-size: 0.71875rem;
        --level-card-value-size: 2.75rem;

        --btn-play-font-size: 1.125rem;
        --btn-play-padding-y: 0.9375rem;
        --btn-play-padding-x: 1.25rem;
        --btn-play-icon-size: 1.375rem;

        --win-title-size: 2rem;
        --win-stars-size: 1.375rem;
        --win-stars-gap: 0.625rem;
        --btn-win-font-size: 0.8125rem;
        --btn-win-padding-y: 0.75rem;
        --btn-win-padding-x: 0.5rem;

        --help-title-size: 1.5rem;
        --help-step-gap: 0.6875rem;
        --help-step-margin: 0.8125rem;
        --help-step-icon-size: 2.125rem;
        --help-step-icon-font: 1.075rem;
        --help-step-text-size: 0.84375rem;

        --sparkle-size: 1rem;
        --orb-blur: 52px;
        --grid-dot-size: 24px;
    }
}

/* Tablet Portrait (641px – 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --hud-padding-y: 0.625rem;
        --hud-padding-x: 0.875rem;
        --hud-gap: 0.6875rem;
        --hud-panel-gap: 0.5rem;
        --hud-panel-padding: 0.375rem;

        --btn-icon-size: 2.625rem;
        --icon-size: 1.2rem;
        --badge-font-size: 0.78125rem;

        --overlay-padding: 1.125rem;
        --card-max-width: 21rem;
        --card-padding-y: 1.75rem;
        --card-padding-x: 1.5rem;
        --card-border: 3px;
        --radius-card: 1.875rem;

        --eyebrow-size: 0.734375rem;
        --tagline-size: 0.90625rem;
        --tagline-margin: 1.375rem;

        --start-logo-width: 16.5rem;
        --start-title-margin: 0.59375rem;

        --level-card-padding-y: 0.9375rem;
        --level-card-padding-x: 1.875rem;
        --level-card-margin: 1.25rem;
        --level-card-label-size: 0.734375rem;
        --level-card-value-size: 3rem;

        --btn-play-font-size: 1.1875rem;
        --btn-play-padding-y: 0.96875rem;
        --btn-play-padding-x: 1.375rem;
        --btn-play-icon-size: 1.4375rem;

        --win-title-size: 2.25rem;
        --win-stars-size: 1.4375rem;
        --win-stars-gap: 0.6875rem;
        --btn-win-font-size: 0.875rem;
        --btn-win-padding-y: 0.8125rem;
        --btn-win-padding-x: 0.625rem;

        --help-title-size: 1.625rem;
        --help-step-gap: 0.71875rem;
        --help-step-margin: 0.84375rem;
        --help-step-icon-size: 2.1875rem;
        --help-step-icon-font: 1.1rem;
        --help-step-text-size: 0.859375rem;

        --sparkle-size: 1.05rem;
        --orb-blur: 56px;
        --grid-dot-size: 26px;
    }
}

/* Tablet Landscape (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --hud-padding-y: 0.75rem;
        --hud-padding-x: 1rem;
        --hud-gap: 0.75rem;
        --hud-panel-gap: 0.5rem;
        --hud-panel-padding: 0.375rem;

        --btn-icon-size: 2.75rem;
        --icon-size: 1.25rem;
        --badge-font-size: 0.8125rem;

        --overlay-padding: 1.25rem;
        --card-max-width: 22rem;
        --card-padding-y: 1.875rem;
        --card-padding-x: 1.625rem;
        --card-border: 3px;
        --radius-card: 2rem;

        --eyebrow-size: 0.75rem;
        --tagline-size: 0.9375rem;
        --tagline-margin: 1.5rem;

        --start-logo-width: 17rem;
        --start-title-margin: 0.625rem;

        --level-card-padding-y: 1rem;
        --level-card-padding-x: 2rem;
        --level-card-margin: 1.375rem;
        --level-card-label-size: 0.75rem;
        --level-card-value-size: 3.375rem;

        --btn-play-font-size: 1.21875rem;
        --btn-play-padding-y: 1rem;
        --btn-play-padding-x: 1.4375rem;
        --btn-play-icon-size: 1.46875rem;

        --win-title-size: 2.625rem;
        --win-stars-size: 1.5rem;
        --win-stars-gap: 0.75rem;
        --btn-win-font-size: 0.90625rem;
        --btn-win-padding-y: 0.84375rem;
        --btn-win-padding-x: 0.6875rem;

        --help-title-size: 1.6875rem;
        --help-step-gap: 0.75rem;
        --help-step-margin: 0.875rem;
        --help-step-icon-size: 2.25rem;
        --help-step-icon-font: 1.125rem;
        --help-step-text-size: 0.875rem;

        --sparkle-size: 1.075rem;
        --orb-blur: 58px;
        --grid-dot-size: 27px;
    }
}

/* Desktop (≥1025px) */
@media (min-width: 1025px) {
    :root {
        --hud-padding-y: 0.875rem;
        --hud-padding-x: 1.25rem;
        --hud-gap: 0.875rem;
        --hud-panel-gap: 0.5rem;
        --hud-panel-padding: 0.375rem;

        --btn-icon-size: 2.875rem;
        --icon-size: 1.3rem;
        --badge-font-size: 0.875rem;

        --overlay-padding: 1.5rem;
        --card-max-width: 24rem;
        --card-padding-y: 2rem;
        --card-padding-x: 1.75rem;
        --card-border: 3px;
        --radius-card: 2rem;

        --eyebrow-size: 0.75rem;
        --tagline-size: 0.9375rem;
        --tagline-margin: 1.5rem;

        --start-logo-width: 18rem;
        --start-title-margin: 0.625rem;

        --level-card-padding-y: 1rem;
        --level-card-padding-x: 2rem;
        --level-card-margin: 1.375rem;
        --level-card-label-size: 0.75rem;
        --level-card-value-size: 3.75rem;

        --btn-play-font-size: 1.25rem;
        --btn-play-padding-y: 1rem;
        --btn-play-padding-x: 1.5rem;
        --btn-play-icon-size: 1.5rem;

        --win-title-size: 3rem;
        --win-stars-size: 1.625rem;
        --win-stars-gap: 0.75rem;
        --btn-win-font-size: 0.9375rem;
        --btn-win-padding-y: 0.875rem;
        --btn-win-padding-x: 0.75rem;

        --help-title-size: 1.75rem;
        --help-step-gap: 0.75rem;
        --help-step-margin: 0.875rem;
        --help-step-icon-size: 2.25rem;
        --help-step-icon-font: 1.15rem;
        --help-step-text-size: 0.875rem;

        --sparkle-size: 1.1rem;
        --orb-blur: 60px;
        --grid-dot-size: 28px;
    }

    .card--help {
        width: min(100%, 26rem);
    }
}

/* Small Mobile (≤480px) — extra-tight overrides */
@media (max-width: 480px) {
    :root {
        --hud-padding-y: 0.4375rem;
        --hud-padding-x: 0.5rem;
        --hud-gap: 0.375rem;
        --hud-panel-gap: 0.3125rem;
        --hud-panel-padding: 0.25rem;

        --btn-icon-size: 2.125rem;
        --icon-size: 1rem;
        --badge-font-size: 0.625rem;

        --overlay-padding: 0.75rem;
        --card-max-width: 17rem;
        --card-padding-y: 1.25rem;
        --card-padding-x: 1rem;

        --eyebrow-size: 0.625rem;
        --tagline-size: 0.75rem;
        --tagline-margin: 0.875rem;

        --start-logo-width: 13rem;

        --level-card-padding-y: 0.625rem;
        --level-card-padding-x: 1.25rem;
        --level-card-margin: 0.875rem;
        --level-card-value-size: 2.125rem;

        --btn-play-font-size: 0.9375rem;
        --btn-play-padding-y: 0.75rem;

        --win-title-size: 1.5rem;
        --win-stars-size: 1.125rem;
        --btn-win-font-size: 0.6875rem;
        --btn-win-padding-y: 0.625rem;

        --help-title-size: 1.25rem;
        --help-step-icon-size: 1.875rem;
        --help-step-text-size: 0.75rem;

        --orb-blur: 40px;
        --grid-dot-size: 20px;
    }

    .level-badge {
        padding: 0.15rem 0.5rem 0.15rem 0.25rem;
    }

    .win-stars span:nth-child(2) {
        font-size: 1.25rem;
    }

    .start-sparkle--3 {
        bottom: 4.5rem;
    }
}

/* Landscape Mobile — short viewports in landscape */
@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --hud-padding-y: 0.3125rem;
        --hud-padding-x: 0.5rem;
        --hud-gap: 0.375rem;
        --hud-panel-gap: 0.25rem;
        --hud-panel-padding: 0.2rem;

        --btn-icon-size: 2rem;
        --icon-size: 0.95rem;
        --badge-font-size: 0.625rem;

        --overlay-padding: 0.5rem;
        --card-max-width: 16rem;
        --card-padding-y: 0.875rem;
        --card-padding-x: 1rem;
        --radius-card: 1.25rem;

        --eyebrow-size: 0.5625rem;
        --tagline-size: 0.6875rem;
        --tagline-margin: 0.5rem;

        --start-logo-width: 11rem;
        --start-title-margin: 0.25rem;

        --level-card-padding-y: 0.4375rem;
        --level-card-padding-x: 1rem;
        --level-card-margin: 0.5rem;
        --level-card-label-size: 0.5625rem;
        --level-card-value-size: 1.75rem;

        --btn-play-font-size: 0.875rem;
        --btn-play-padding-y: 0.5625rem;
        --btn-play-padding-x: 0.875rem;
        --btn-play-icon-size: 1.125rem;

        --win-title-size: 1.375rem;
        --win-stars-size: 1rem;
        --win-stars-gap: 0.375rem;
        --btn-win-font-size: 0.6875rem;
        --btn-win-padding-y: 0.5rem;
        --btn-win-padding-x: 0.375rem;

        --help-title-size: 1.125rem;
        --help-step-gap: 0.5rem;
        --help-step-margin: 0.5rem;
        --help-step-icon-size: 1.625rem;
        --help-step-icon-font: 0.875rem;
        --help-step-text-size: 0.6875rem;

        --sparkle-size: 0.75rem;
        --orb-blur: 36px;
        --grid-dot-size: 18px;
    }

    .overlay {
        align-items: flex-start;
        padding-top: calc(0.5rem + var(--safe-top));
    }

    .card {
        margin-top: 0.25rem;
    }

    .card--start {
        transform: translateY(0.5rem) scale(0.94);
    }

    .overlay--start.is-visible .card--start {
        transform: translateY(0) scale(1);
    }

    .start-sparkle {
        display: none;
    }

    .win-burst {
        inset: -0.5rem;
    }

    .help-steps {
        margin-bottom: 0.75rem;
    }

    .btn-play--compact {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .ui-header {
        flex-wrap: nowrap;
    }

    .level-badge-label {
        display: none;
    }
}

/* Landscape Mobile on wider phones (still short height) */
@media (orientation: landscape) and (min-width: 481px) and (max-height: 500px) {
    :root {
        --card-max-width: 18rem;
        --start-logo-width: 14rem;
        --level-card-value-size: 2rem;
    }
}

/* Touch devices — larger tap targets */
@media (hover: none) and (pointer: coarse) {
    .btn-icon,
    .btn-play,
    .btn-win {
        min-height: 44px;
    }

    .btn-icon {
        min-width: 44px;
    }
}

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