@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block');

:root {
    /* --play-again-top: set on html when the play-again bar is visible (board layout). */
    /* Matches opaque canvas (2d context alpha: false clears to black). */
    --game-screen-bg: #000000;
    --color-ink: #4a5568;
    --color-ink-shadow: rgba(74, 85, 104, 0.35);
    --color-panel: #141418;
    --color-text-on-dark: #ffffff;
    --color-text-muted: #f7fafc;
    --radius-ui: 11px;
    --border-ink: 3px solid var(--color-ink);
    --shadow-lift: 0 4px 0 var(--color-ink);

    /* Canvas layout — read by script.js in resize() */
    --board-width-ratio: 0.85;
    --board-height-ratio: 0.6;
    --cell-ideal-px: 65;
    /* Larger boards shrink ideal cell before viewport clamp (see script.js resize). */
    --cell-area-ref: 64;
    --cell-min-px: 22;
    --board-y-offset: 20px;
    --play-again-min-top: 56px;
    --play-again-gap-above-board: 44px;
    --play-again-extra-lift: 18px;

    /* Floor & path colors: html[data-theme="1"…"4"] only (default theme 1). */

    /* HUD / chrome */
    --hud-top-pad: 12px;
    --hud-side-pad: 12px;
    --hud-gap: 8px;
    --hud-actions-gap: 6px;
    --icon-btn-size: 44px;
    --icon-btn-padding: 6px;
    --icon-symbol-size: 22px;
    --level-text-size: clamp(0.85rem, 2vw, 1.1rem);

    --play-again-btn-pad-y: 12px;
    --play-again-btn-pad-x: 28px;
    --play-again-btn-font: 1.05rem;

    --start-panel-max: 360px;
    --start-panel-pad-y: 28px;
    --start-panel-pad-x: 26px;
    --start-panel-gap: 22px;
    --start-logo-max: 308px;
    --level-card-size: 148px;
    --level-card-label: 0.72rem;
    --level-card-value: 2.65rem;
    --start-play-font: 1.18rem;
    --start-play-pad-y: 14px;
    --start-play-pad-x: 26px;

    --result-panel-max: 410px;
    --result-panel-pad-y: 26px;
    --result-panel-pad-x: 22px;
    --result-panel-gap: 14px;
    --result-title-size: clamp(1.35rem, 2.8vw, 1.6rem);
    --result-msg-size: clamp(0.92rem, 2.2vw, 1.05rem);
    --result-actions-gap: 10px;
    --result-btn-pad-y: 13px;
    --result-btn-pad-x: 12px;
    --result-btn-font: clamp(0.88rem, 2.2vw, 0.98rem);
}

html[data-theme="1"] {
    --theme-floor: #876BC2;
    --theme-floor-deep: #614D8C;
    --theme-floor-light: #A893D4;
    --theme-path: #d0b1fa;
    --theme-path-light: #EAD9FC;
    --theme-accent: #A893D4;
    --theme-border: #F8F4FF;
    --theme-particle: rgba(208, 177, 250, 0.22);
    --theme-board-shadow: rgba(73, 55, 120, 0.34);
    --theme-obstacle-hole: rgba(45, 35, 75, 0.12);
}

html[data-theme="2"] {
    --theme-floor: #0e7fa8;
    --theme-floor-deep: #095E7A;
    --theme-floor-light: #3BA0C4;
    --theme-path: #52bde4;
    --theme-path-light: #8AD4EF;
    --theme-accent: #3BA0C4;
    --theme-border: #E8F6FC;
    --theme-particle: rgba(82, 189, 228, 0.22);
    --theme-board-shadow: rgba(8, 78, 102, 0.34);
    --theme-obstacle-hole: rgba(4, 45, 58, 0.14);
}

html[data-theme="3"] {
    --theme-floor: #D47A94;
    --theme-floor-deep: #B35F78;
    --theme-floor-light: #E8A4B6;
    --theme-path: #FFD0E0;
    --theme-path-light: #FFE8F0;
    --theme-accent: #E8A4B6;
    --theme-border: #FFF5F8;
    --theme-particle: rgba(255, 208, 224, 0.22);
    --theme-board-shadow: rgba(150, 55, 85, 0.3);
    --theme-obstacle-hole: rgba(80, 25, 45, 0.12);
}

html[data-theme="4"] {
    --theme-floor: #E8A070;
    --theme-floor-deep: #C48350;
    --theme-floor-light: #F5C090;
    --theme-path: #FFECD0;
    --theme-path-light: #FFF5E8;
    --theme-accent: #F5C090;
    --theme-border: #FFFCF5;
    --theme-particle: rgba(255, 236, 208, 0.22);
    --theme-board-shadow: rgba(175, 95, 45, 0.3);
    --theme-obstacle-hole: rgba(90, 45, 15, 0.12);
}

html[data-theme="5"] {
    --theme-floor: #F5B137;
    --theme-floor-deep: #C48A1A;
    --theme-floor-light: #FCD060;
    --theme-path: #f9d580;
    --theme-path-light: #FFF0C0;
    --theme-accent: #FCD060;
    --theme-border: #FFF9EE;
    --theme-particle: rgba(249, 213, 128, 0.24);
    --theme-board-shadow: rgba(165, 110, 20, 0.34);
    --theme-obstacle-hole: rgba(70, 45, 8, 0.14);
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: var(--game-screen-bg);
    overflow: hidden;
    overscroll-behavior: none;
    font-family: 'Nunito', sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#gameCanvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#menuBackdropCanvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    visibility: hidden;
}

body.start-overlay-open #menuBackdropCanvas {
    visibility: visible;
}

body.start-overlay-open #gameCanvas {
    visibility: hidden;
}

#uiLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.hud-top {
    position: absolute;
    top: max(var(--hud-top-pad), env(safe-area-inset-top, 0px));
    left: max(var(--hud-side-pad), env(safe-area-inset-left, 0px));
    right: max(var(--hud-side-pad), env(safe-area-inset-right, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
    gap: var(--hud-gap);
    flex-wrap: nowrap;
    min-height: 0;
}

.hud-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--hud-gap);
    min-width: 0;
    flex: 1 1 auto;
}

.hud-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--hud-actions-gap);
    flex-shrink: 0;
}

body.solution-hud-suppressed .icon-btn--hide-on-solution {
    display: none;
}

/* top: --play-again-top when visible; otherwise --play-again-min-top. */
.play-again-bar {
    position: fixed;
    left: 50%;
    top: var(--play-again-top, var(--play-again-min-top));
    transform: translateX(-50%);
    z-index: 12;
    pointer-events: auto;
}

.play-again-bar.is-hidden {
    display: none;
}

.play-again-btn,
.icon-btn,
.start-play-btn {
    background: var(--theme-path);
}

.play-again-btn {
    margin: 0;
    padding: var(--play-again-btn-pad-y) var(--play-again-btn-pad-x);
    border-radius: var(--radius-ui);
    font-family: inherit;
    font-size: var(--play-again-btn-font);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-ink);
    border: var(--border-ink);
    box-shadow: var(--shadow-lift), 0 10px 20px rgba(74, 85, 104, 0.15);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-again-btn:active {
    transform: translateY(4px);
    background: var(--theme-path);
    filter: brightness(0.94);
    box-shadow: 0 0 0 var(--color-ink), 0 6px 14px rgba(74, 85, 104, 0.12);
}

.icon-btn {
    border: var(--border-ink);
    border-radius: var(--radius-ui);
    padding: var(--icon-btn-padding);
    margin: 0;
    cursor: pointer;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lift), 0 8px 14px rgba(0,0,0,0.08);
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-btn:active {
    transform: translateY(4px);
    background: var(--theme-path);
    filter: brightness(0.94);
    box-shadow: 0 0 0 var(--color-ink), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon-btn--sound-off {
    background: #e2e8f0;
    opacity: 0.92;
}

.icon-btn--sound-off .material-symbols-outlined {
    color: #718096;
}

.theme-panel {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--theme-floor) 22%, var(--color-panel)) 0%,
        var(--color-panel) 48%
    );
    box-shadow:
        var(--shadow-lift),
        0 14px 36px rgba(0, 0, 0, 0.45),
        inset 0 3px 0 var(--theme-floor-light);
}

.theme-btn-secondary {
    background: #f7fafc;
}

.icon-btn .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: var(--icon-symbol-size);
    line-height: 1;
    color: var(--color-ink);
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

#levelText {
    position: relative;
    font-size: var(--level-text-size);
    font-weight: 900;
    color: var(--color-text-on-dark);
    letter-spacing: 0.1em;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(74, 85, 104, 0.45), 0 6px 12px rgba(0,0,0,0.12);
    pointer-events: none;
    white-space: nowrap;
}

body.start-overlay-open #uiLayer .hud-top {
    display: none;
}

.start-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.start-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.start-panel {
    width: min(100%, var(--start-panel-max));
    max-width: var(--start-panel-max);
    flex: 0 1 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--start-panel-gap);
    padding: var(--start-panel-pad-y) var(--start-panel-pad-x) calc(var(--start-panel-pad-y) - 2px);
    box-sizing: border-box;
    border: var(--border-ink);
    border-radius: var(--radius-ui);
}

.start-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.start-logo-img {
    display: block;
    width: 100%;
    max-width: var(--start-logo-max);
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
}

#startOverlay .level-card {
    width: var(--level-card-size);
    height: var(--level-card-size);
    padding: 0;
    border-radius: var(--radius-ui);
    background: linear-gradient(180deg, var(--theme-floor) 0%, var(--theme-floor-deep) 100%);
    border: var(--border-ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 4px 0 var(--theme-floor-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#startOverlay .level-card-label {
    font-size: var(--level-card-label);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 var(--color-ink-shadow);
}

#startOverlay .level-card-value {
    font-size: var(--level-card-value);
    font-weight: 900;
    color: var(--color-text-on-dark);
    line-height: 1;
    text-shadow: 0 3px 0 var(--color-ink-shadow), 0 6px 12px rgba(0, 0, 0, 0.12);
}

.start-play-btn {
    width: 100%;
    max-width: var(--start-logo-max);
    padding: var(--start-play-pad-y) var(--start-play-pad-x);
    margin: 0;
    border-radius: var(--radius-ui);
    font-family: inherit;
    font-size: var(--start-play-font);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
    border: var(--border-ink);
    box-shadow: var(--shadow-lift), 0 10px 20px rgba(74, 85, 104, 0.15);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.start-play-btn:active {
    transform: translateY(4px);
    background: var(--theme-path);
    filter: brightness(0.94);
    box-shadow: 0 0 0 var(--color-ink), 0 6px 14px rgba(74, 85, 104, 0.12);
}

.game-result-overlay,
.how-to-play-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: color-mix(in srgb, var(--theme-floor-deep) 18%, rgba(0, 0, 0, 0.62));
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.game-result-overlay.is-hidden,
.how-to-play-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.how-to-play-overlay {
    z-index: 105;
}

.how-to-play-panel {
    width: min(100%, var(--result-panel-max));
    max-width: min(92vw, var(--result-panel-max));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--result-panel-gap);
    padding: var(--result-panel-pad-y) var(--result-panel-pad-x) calc(var(--result-panel-pad-y) - 2px);
    box-sizing: border-box;
    border: var(--border-ink);
    border-radius: calc(var(--radius-ui) + 2px);
    text-align: left;
}

.how-to-play-title {
    margin: 0;
    font-size: var(--result-title-size);
    font-weight: 900;
    color: var(--theme-path-light);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.how-to-play-list {
    margin: 0;
    padding: 0 0 0 1.15rem;
    font-size: var(--result-msg-size);
    font-weight: 700;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.how-to-play-list li::marker {
    color: var(--theme-path);
}

.how-to-play-list strong {
    color: var(--theme-path-light);
    font-weight: 900;
}

.how-to-play-close-btn {
    width: 100%;
    max-width: none;
    margin-top: 4px;
}

.game-result-panel {
    width: min(100%, var(--result-panel-max));
    max-width: min(92vw, var(--result-panel-max));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--result-panel-gap);
    padding: var(--result-panel-pad-y) var(--result-panel-pad-x) calc(var(--result-panel-pad-y) - 2px);
    box-sizing: border-box;
    border: var(--border-ink);
    border-radius: calc(var(--radius-ui) + 2px);
    text-align: center;
}

.game-result-overlay--win .game-result-panel {
    padding-top: 22px;
}

.game-result-trophy {
    margin: 0;
    font-size: clamp(3.25rem, 14vw, 5rem);
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.4));
}

.game-result-trophy.is-hidden {
    display: none;
}

.game-result-title {
    margin: 0;
    font-size: var(--result-title-size);
    font-weight: 900;
    color: var(--theme-path-light);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.game-result-message {
    margin: 0;
    font-size: var(--result-msg-size);
    font-weight: 700;
    color: var(--color-text-muted);
    line-height: 1.45;
    max-width: 320px;
}

.game-result-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--result-actions-gap);
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
}

.game-result-actions--single {
    max-width: 100%;
}

.game-result-home-btn {
    flex: 1;
    min-width: 0;
    padding: var(--result-btn-pad-y) var(--result-btn-pad-x);
    margin: 0;
    border-radius: var(--radius-ui);
    font-family: inherit;
    font-size: var(--result-btn-font);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-ink);
    border: var(--border-ink);
    box-shadow: var(--shadow-lift), 0 8px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-result-home-btn:active {
    transform: translateY(4px);
    background: #f7fafc;
    filter: brightness(0.96);
    box-shadow: 0 0 0 var(--color-ink), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.game-result-home-btn.is-hidden {
    display: none;
}

.game-result-actions .game-result-btn {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    max-width: none;
    padding-left: var(--result-btn-pad-x);
    padding-right: var(--result-btn-pad-x);
    font-size: var(--result-btn-font);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.game-result-actions--single .game-result-btn {
    max-width: 100%;
}

body.game-result-open #uiLayer .hud-top,
body.how-to-play-open #uiLayer .hud-top {
    pointer-events: none;
}

/* =============================================================================
   Responsive breakpoints (desktop-first base in :root)
   • Desktop: ≥1025px — defaults above
   • Tablet landscape: 769px–1024px
   • Tablet portrait: 641px–768px
   • Mobile: ≤640px
   • Small mobile: ≤480px
   • Landscape mobile: orientation + short viewport (stacked after widths)
   ============================================================================= */

/* Tablet landscape: 769px–1024px */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    :root {
        --board-width-ratio: 0.87;
        --board-height-ratio: 0.58;
        --cell-ideal-px: 58;
        --board-y-offset: 16px;
        --play-again-min-top: 52px;
        --play-again-gap-above-board: 40px;
        --play-again-extra-lift: 16px;

        --hud-top-pad: 10px;
        --hud-side-pad: 14px;
        --hud-gap: 8px;
        --hud-actions-gap: 6px;
        --icon-btn-size: 42px;
        --icon-btn-padding: 5px;
        --icon-symbol-size: 21px;
        --level-text-size: clamp(0.8rem, 2.2vw, 1.05rem);

        --play-again-btn-pad-y: 11px;
        --play-again-btn-pad-x: 24px;
        --play-again-btn-font: 1rem;

        --start-panel-max: 340px;
        --start-panel-pad-y: 24px;
        --start-panel-pad-x: 22px;
        --start-panel-gap: 18px;
        --start-logo-max: 292px;
        --level-card-size: 132px;
        --level-card-label: 0.68rem;
        --level-card-value: 2.35rem;
        --start-play-font: 1.1rem;
        --start-play-pad-y: 13px;
        --start-play-pad-x: 22px;

        --result-panel-max: 392px;
        --result-panel-pad-y: 22px;
        --result-panel-pad-x: 20px;
        --result-panel-gap: 12px;
        --result-title-size: clamp(1.25rem, 2.6vw, 1.5rem);
        --result-msg-size: clamp(0.88rem, 2vw, 1rem);
        --result-actions-gap: 9px;
        --result-btn-pad-y: 12px;
        --result-btn-pad-x: 11px;
        --result-btn-font: clamp(0.82rem, 2vw, 0.95rem);
    }
}

/* Tablet portrait: 641px–768px */
@media screen and (max-width: 768px) and (min-width: 641px) {
    :root {
        --board-width-ratio: 0.9;
        --board-height-ratio: 0.56;
        --cell-ideal-px: 52;
        --board-y-offset: 14px;
        --play-again-min-top: 50px;
        --play-again-gap-above-board: 38px;
        --play-again-extra-lift: 14px;

        --hud-top-pad: 10px;
        --hud-side-pad: 12px;
        --hud-gap: 7px;
        --hud-actions-gap: 5px;
        --icon-btn-size: 40px;
        --icon-btn-padding: 5px;
        --icon-symbol-size: 20px;
        --level-text-size: clamp(0.78rem, 2.8vw, 1rem);

        --play-again-btn-pad-y: 10px;
        --play-again-btn-pad-x: 22px;
        --play-again-btn-font: 0.98rem;

        --start-panel-max: 320px;
        --start-panel-pad-y: 22px;
        --start-panel-pad-x: 20px;
        --start-panel-gap: 16px;
        --start-logo-max: 276px;
        --level-card-size: 124px;
        --level-card-label: 0.65rem;
        --level-card-value: 2.15rem;
        --start-play-font: 1.05rem;
        --start-play-pad-y: 12px;
        --start-play-pad-x: 20px;

        --result-panel-max: 368px;
        --result-panel-pad-y: 20px;
        --result-panel-pad-x: 18px;
        --result-panel-gap: 11px;
        --result-title-size: clamp(1.2rem, 3vw, 1.45rem);
        --result-msg-size: clamp(0.86rem, 2.4vw, 0.98rem);
        --result-actions-gap: 8px;
        --result-btn-pad-y: 11px;
        --result-btn-pad-x: 10px;
        --result-btn-font: clamp(0.8rem, 2.2vw, 0.92rem);
    }
}

/* Mobile: ≤640px */
@media screen and (max-width: 640px) {
    :root {
        --board-width-ratio: 0.92;
        --board-height-ratio: 0.54;
        --cell-ideal-px: 46;
        --board-y-offset: 12px;
        --play-again-min-top: 48px;
        --play-again-gap-above-board: 34px;
        --play-again-extra-lift: 12px;

        --hud-top-pad: 8px;
        --hud-side-pad: 8px;
        --hud-gap: 6px;
        --hud-actions-gap: 4px;
        --icon-btn-size: 38px;
        --icon-btn-padding: 4px;
        --icon-symbol-size: 19px;
        --level-text-size: clamp(0.72rem, 3.5vw, 0.95rem);

        --play-again-btn-pad-y: 10px;
        --play-again-btn-pad-x: 20px;
        --play-again-btn-font: 0.92rem;

        --radius-ui: 10px;

        --start-panel-max: min(360px, 94vw);
        --start-panel-pad-y: 20px;
        --start-panel-pad-x: 18px;
        --start-panel-gap: 14px;
        --start-logo-max: min(280px, 88vw);
        --level-card-size: 118px;
        --level-card-label: 0.62rem;
        --level-card-value: 2rem;
        --start-play-font: 1rem;
        --start-play-pad-y: 12px;
        --start-play-pad-x: 18px;

        --result-panel-max: min(400px, 94vw);
        --result-panel-pad-y: 18px;
        --result-panel-pad-x: 16px;
        --result-panel-gap: 10px;
        --result-title-size: clamp(1.1rem, 4.2vw, 1.35rem);
        --result-msg-size: clamp(0.82rem, 3.2vw, 0.95rem);
        --result-actions-gap: 8px;
        --result-btn-pad-y: 11px;
        --result-btn-pad-x: 9px;
        --result-btn-font: clamp(0.76rem, 3vw, 0.9rem);
    }

    .hud-top {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .hud-left {
        flex: 1 1 auto;
        min-width: min(100%, 140px);
    }

    .hud-actions {
        flex: 0 0 auto;
    }

    .game-result-message {
        max-width: 100%;
    }
}

/* Small mobile: ≤480px */
@media screen and (max-width: 480px) {
    :root {
        --board-width-ratio: 0.94;
        --board-height-ratio: 0.52;
        --cell-ideal-px: 40;
        --board-y-offset: 8px;
        --play-again-min-top: 44px;
        --play-again-gap-above-board: 30px;
        --play-again-extra-lift: 10px;

        --hud-top-pad: 6px;
        --hud-side-pad: 6px;
        --hud-gap: 5px;
        --hud-actions-gap: 3px;
        --icon-btn-size: 36px;
        --icon-btn-padding: 4px;
        --icon-symbol-size: 18px;
        --level-text-size: clamp(0.68rem, 3.8vw, 0.88rem);

        --play-again-btn-pad-y: 9px;
        --play-again-btn-pad-x: 18px;
        --play-again-btn-font: 0.86rem;

        --radius-ui: 9px;

        --start-panel-max: min(340px, 96vw);
        --start-panel-pad-y: 16px;
        --start-panel-pad-x: 14px;
        --start-panel-gap: 12px;
        --start-logo-max: min(260px, 90vw);
        --level-card-size: 104px;
        --level-card-label: 0.58rem;
        --level-card-value: 1.75rem;
        --start-play-font: 0.95rem;
        --start-play-pad-y: 11px;
        --start-play-pad-x: 16px;

        --result-panel-max: min(380px, 96vw);
        --result-panel-pad-y: 16px;
        --result-panel-pad-x: 14px;
        --result-panel-gap: 9px;
        --result-title-size: clamp(1.02rem, 4.5vw, 1.25rem);
        --result-msg-size: clamp(0.78rem, 3.5vw, 0.9rem);
        --result-actions-gap: 6px;
        --result-btn-pad-y: 10px;
        --result-btn-pad-x: 8px;
        --result-btn-font: clamp(0.72rem, 3.2vw, 0.86rem);
    }

    .start-overlay,
    .game-result-overlay,
    .how-to-play-overlay {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .game-result-trophy {
        font-size: clamp(2.75rem, 12vw, 4rem);
    }
}

/* Landscape mobile: short height + not desktop width — prioritise playable board */
@media screen and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
    :root {
        --board-width-ratio: 0.72;
        --board-height-ratio: 0.68;
        --cell-ideal-px: 56;
        --board-y-offset: 4px;
        --play-again-min-top: 40px;
        --play-again-gap-above-board: 26px;
        --play-again-extra-lift: 8px;

        --hud-top-pad: max(4px, env(safe-area-inset-top, 0px));
        --hud-side-pad: max(8px, env(safe-area-inset-left, 0px));
        --hud-gap: 6px;
        --hud-actions-gap: 4px;
        --icon-btn-size: 34px;
        --icon-btn-padding: 3px;
        --icon-symbol-size: 17px;
        --level-text-size: clamp(0.65rem, 2.8vh, 0.82rem);

        --play-again-btn-pad-y: 8px;
        --play-again-btn-pad-x: 16px;
        --play-again-btn-font: 0.82rem;

        --start-panel-max: min(520px, 92vw);
        --start-panel-pad-y: 12px;
        --start-panel-pad-x: 16px;
        --start-panel-gap: 10px;
        --start-logo-max: min(220px, 42vh);
        --level-card-size: 72px;
        --level-card-label: 0.52rem;
        --level-card-value: 1.35rem;
        --start-play-font: 0.88rem;
        --start-play-pad-y: 9px;
        --start-play-pad-x: 14px;

        --result-panel-max: min(520px, 88vw);
        --result-panel-pad-y: 12px;
        --result-panel-pad-x: 14px;
        --result-panel-gap: 8px;
        --result-title-size: clamp(0.95rem, 3.5vh, 1.2rem);
        --result-msg-size: clamp(0.72rem, 2.8vh, 0.88rem);
        --result-actions-gap: 6px;
        --result-btn-pad-y: 9px;
        --result-btn-pad-x: 8px;
        --result-btn-font: clamp(0.7rem, 2.6vh, 0.84rem);
    }

    .hud-top {
        flex-wrap: nowrap;
        align-items: center;
    }

    .start-overlay,
    .game-result-overlay,
    .how-to-play-overlay {
        align-items: flex-start;
        justify-content: center;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .start-panel {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 16px;
        row-gap: 10px;
        max-height: min(92vh, 100%);
        overflow-y: auto;
    }

    .start-logo {
        flex: 1 1 45%;
        min-width: 140px;
        max-width: 50%;
    }

    #startOverlay .level-card {
        flex: 0 0 auto;
    }

    .start-play-btn {
        flex: 1 1 100%;
        max-width: 280px;
    }

    .game-result-panel,
    .how-to-play-panel {
        flex-direction: column;
        max-height: min(92vh, 100%);
        overflow-y: auto;
    }

    .game-result-trophy {
        font-size: clamp(2rem, 8vh, 3rem);
    }
}

/* Very small landscape phones */
@media screen and (orientation: landscape) and (max-height: 400px) and (max-width: 896px) {
    :root {
        --board-height-ratio: 0.72;
        --cell-ideal-px: 48;
        --icon-btn-size: 32px;
        --play-again-min-top: 36px;
    }
}