:root {
    --bg-deep: #eceef4;
    --cell-empty: #e0e4ee;

    --ink: #1a2030;
    --ink-muted: #4a5268;
    --ink-light: #78829a;

    --gold: #b0a0c8;
    --gold-light: #e8e2f4;
    --gold-dark: #8878a8;
    --bronze: #686080;

    --border-gold-hi: #faf8ff;
    --border-gold: #c8b8dc;
    --border-gold-mid: #a898bc;
    --border-gold-lo: #5c5478;
    --border-gold-shadow: #282438;

    --ui-panel-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 244, 254, 0.96) 50%, rgba(236, 232, 246, 0.94) 100%);
    --ui-btn-bg: linear-gradient(180deg, #ffffff 0%, #f2eef8 46%, #dcd4ec 100%);
    --ui-btn-bg-hover: linear-gradient(180deg, #ffffff 0%, #f8f4ff 46%, #e8e0f4 100%);
    --ui-btn-bg-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 242, 252, 0.92) 50%, rgba(232, 226, 244, 0.9) 100%);
    --ui-btn-bg-subtle-hover: linear-gradient(180deg, #ffffff 0%, #faf6ff 50%, #eee8f8 100%);
    --ui-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.94);
    --ui-inset-lo: inset 0 -1px 0 rgba(72, 64, 100, 0.1);
    --shadow-gold: 0 8px 28px rgba(64, 56, 96, 0.14);
    --shadow-gold-soft: 0 4px 18px rgba(64, 56, 96, 0.1);
    --shadow-gold-hover: 0 12px 34px rgba(80, 72, 112, 0.18);

    --text-main: #323848;
    --text-muted: #5c6478;

    --hud-inset: 8px;
    --hud-gap: 6px;
    --hud-btn-size: 36px;
    --hud-top-reserve: calc(var(--hud-inset) + var(--hud-btn-size) + 10px);
    --hud-side-reserve: var(--hud-inset);
    --hud-bottom-reserve: max(var(--hud-inset), env(safe-area-inset-bottom, 0px));
    --goal-reserve: 0px;
    --goal-panel-width: min(200px, 42vw);
    --goal-bottom-reserve: calc(96px + env(safe-area-inset-bottom, 0px));

    --frame-top: var(--hud-top-reserve);
    --frame-bottom: var(--goal-bottom-reserve);
    --frame-left: max(var(--hud-side-reserve), env(safe-area-inset-left, 0px));
    --frame-right: max(var(--hud-side-reserve), var(--goal-reserve), env(safe-area-inset-right, 0px));

    --font-level: 16px;
    --font-icon: 18px;
    --font-play-again: 10px;
    --font-goal-eyebrow: 8px;
    --font-goal-title: 13px;
    --font-goal-text: 13px;
    --font-goal-note: 11px;
    --font-goal-number: 18px;
    --font-btn: 11px;
    --font-btn-wide: 13px;
    --font-game-title: 26px;
    --font-tagline: 14px;
    --font-modal-h1: 28px;
    --font-modal-h2: 22px;
    --font-modal-body: 15px;
    --font-level-number: 36px;
    --font-level-caption: 9px;

    --accent-warn: #c08090;
    --accent-teal: #6a9a9c;
    --accent-blue: #7a94c4;
    --accent-success: #6a9a88;
    --radius-control: 10px;
    --radius-panel: 14px;
    --radius-modal: 18px;
    --radius-level-card: 12px;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    --grid-cols: 5;
    --grid-rows: 5;
    --board-size-cap: 272px;
    --board-size: var(--board-size-cap);
    --cell-size: calc(var(--board-size) / max(var(--grid-cols), var(--grid-rows)));
    --goal-shape-cell: 7px;
    --goal-icon-size: 24px;
    --goal-number-size: 34px;
    --goal-symbol-size: 30px;
    --level-card-size: 84px;

    --facet-strength: 0.2;

    --paint-0: #c87888;
    --paint-1: #6aa8ac;
    --paint-2: #d4bc88;
    --paint-3: #9a8ab8;
    --paint-4: #6d90c4;
    --paint-5: #d49888;
    --paint-6: #88a888;
    --paint-7: #b8a890;
    --paint-8: #a87088;
    --paint-9: #7890a8;
    --paint-10: #5a9088;
    --paint-11: #c4a878;
    --paint-12: #8878b0;
    --paint-13: #c49098;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin: 0;
    padding: 0;
    touch-action: none;
}

html {
    height: 100%;
}

body {
    background-color: var(--bg-deep);
    min-height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    overflow: hidden;
    color: var(--text-main);
}

/* ── Living ambient canvas (replaces static background image) ── */
#ambient-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, #faf8ff 0%, transparent 58%),
        linear-gradient(168deg, #f8f6fc 0%, var(--bg-deep) 38%, #e4e8f2 72%, #dce2ee 100%);
}

#ambient-bg > * {
    position: absolute;
    inset: 0;
}

.ambient-wash {
    background:
        radial-gradient(ellipse 80% 55% at 18% 78%, rgba(106, 168, 172, 0.12), transparent 68%),
        radial-gradient(ellipse 70% 50% at 82% 22%, rgba(200, 120, 136, 0.1), transparent 70%),
        radial-gradient(ellipse 60% 45% at 50% 52%, rgba(180, 160, 200, 0.1), transparent 72%);
    animation: ambientWash 22s ease-in-out infinite alternate;
}

.ambient-aurora {
    filter: blur(56px);
    opacity: 0.55;
    mix-blend-mode: multiply;
    will-change: transform;
}

.ambient-aurora--rose {
    background:
        radial-gradient(ellipse 55% 40% at 30% 40%, rgba(212, 152, 136, 0.28), transparent 72%),
        radial-gradient(ellipse 45% 35% at 70% 60%, rgba(200, 120, 136, 0.18), transparent 70%);
    animation: auroraDriftA 36s ease-in-out infinite alternate;
}

.ambient-aurora--teal {
    background:
        radial-gradient(ellipse 50% 38% at 68% 28%, rgba(106, 168, 172, 0.26), transparent 72%),
        radial-gradient(ellipse 42% 34% at 22% 72%, rgba(90, 144, 136, 0.16), transparent 68%);
    animation: auroraDriftB 42s ease-in-out infinite alternate;
}

.ambient-aurora--gold {
    background:
        radial-gradient(ellipse 62% 48% at 50% 88%, rgba(176, 160, 200, 0.22), transparent 74%),
        radial-gradient(ellipse 40% 30% at 88% 12%, rgba(220, 210, 240, 0.2), transparent 70%);
    animation: auroraDriftC 48s ease-in-out infinite alternate;
}

.ambient-orbs {
    inset: -12%;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.42;
    mix-blend-mode: multiply;
    animation: orbFloat var(--orb-duration, 26s) ease-in-out infinite alternate;
    animation-delay: var(--orb-delay, 0s);
    width: var(--orb-size, 30vmin);
    height: var(--orb-size, 30vmin);
    left: var(--orb-x, 50%);
    top: var(--orb-y, 50%);
    margin-left: calc(var(--orb-size, 30vmin) / -2);
    margin-top: calc(var(--orb-size, 30vmin) / -2);
    background: radial-gradient(circle at 35% 32%, color-mix(in srgb, var(--orb-color) 72%, white), var(--orb-color));
}

.ambient-orb:nth-child(1) {
    --orb-color: var(--paint-1);
    --orb-size: 38vmin;
    --orb-x: 14%;
    --orb-y: 22%;
    --orb-drift-x: 22px;
    --orb-drift-y: -16px;
    --orb-duration: 30s;
    --orb-delay: -4s;
}

.ambient-orb:nth-child(2) {
    --orb-color: var(--paint-0);
    --orb-size: 32vmin;
    --orb-x: 84%;
    --orb-y: 18%;
    --orb-drift-x: -18px;
    --orb-drift-y: 20px;
    --orb-duration: 34s;
    --orb-delay: -11s;
}

.ambient-orb:nth-child(3) {
    --orb-color: var(--paint-2);
    --orb-size: 28vmin;
    --orb-x: 72%;
    --orb-y: 68%;
    --orb-drift-x: -24px;
    --orb-drift-y: -12px;
    --orb-duration: 27s;
    --orb-delay: -7s;
}

.ambient-orb:nth-child(4) {
    --orb-color: var(--paint-3);
    --orb-size: 34vmin;
    --orb-x: 20%;
    --orb-y: 74%;
    --orb-drift-x: 16px;
    --orb-drift-y: -22px;
    --orb-duration: 32s;
    --orb-delay: -15s;
}

.ambient-orb:nth-child(5) {
    --orb-color: var(--paint-4);
    --orb-size: 24vmin;
    --orb-x: 48%;
    --orb-y: 12%;
    --orb-drift-x: 14px;
    --orb-drift-y: 18px;
    --orb-duration: 25s;
    --orb-delay: -2s;
}

.ambient-orb:nth-child(6) {
    --orb-color: var(--paint-6);
    --orb-size: 26vmin;
    --orb-x: 8%;
    --orb-y: 48%;
    --orb-drift-x: 20px;
    --orb-drift-y: 14px;
    --orb-duration: 29s;
    --orb-delay: -9s;
}

.ambient-orb:nth-child(7) {
    --orb-color: var(--paint-11);
    --orb-size: 22vmin;
    --orb-x: 90%;
    --orb-y: 44%;
    --orb-drift-x: -20px;
    --orb-drift-y: -18px;
    --orb-duration: 31s;
    --orb-delay: -13s;
}

.ambient-orb:nth-child(8) {
    --orb-color: var(--paint-12);
    --orb-size: 20vmin;
    --orb-x: 52%;
    --orb-y: 82%;
    --orb-drift-x: -12px;
    --orb-drift-y: 16px;
    --orb-duration: 28s;
    --orb-delay: -6s;
}

.ambient-sparkle-field {
    opacity: 0.55;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 24%, rgba(255, 248, 230, 0.95), transparent),
        radial-gradient(1px 1px at 28% 68%, rgba(255, 234, 184, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 44% 16%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 58% 78%, rgba(234, 217, 168, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 72% 34%, rgba(255, 248, 230, 0.92), transparent),
        radial-gradient(1px 1px at 86% 58%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 18% 88%, rgba(255, 234, 184, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 36% 42%, rgba(255, 255, 255, 0.88), transparent),
        radial-gradient(1px 1px at 64% 52%, rgba(255, 248, 230, 0.82), transparent),
        radial-gradient(1px 1px at 92% 12%, rgba(255, 255, 255, 0.78), transparent);
    animation: sparkleTwinkle 5.5s ease-in-out infinite alternate;
}

.ambient-vignette {
    background: radial-gradient(ellipse 78% 72% at 50% 48%, transparent 42%, rgba(48, 44, 72, 0.1) 100%);
}

.ambient-grain {
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .ambient-wash,
    .ambient-aurora,
    .ambient-orb,
    .ambient-sparkle-field {
        animation: none;
    }
}

/* ── Top HUD panels ── */
.hud-panel {
    position: fixed;
    top: max(var(--hud-inset), env(safe-area-inset-top, 0px));
    z-index: 20;
    animation: fadeDown 1s var(--ease-smooth);
}

#top-left {
    left: max(var(--hud-inset), env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    gap: 10px;
}

#top-left h1 {
    font-family: 'Cinzel', serif;
    font-size: var(--font-level);
    font-weight: 500;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

#top-right {
    right: max(var(--hud-inset), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    gap: var(--hud-gap);
}

#play-again-bar {
    left: 0;
    right: 0;
    top: max(var(--hud-inset), env(safe-area-inset-top, 0px));
    width: max-content;
    margin-inline: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.play-again-visible #btn-solution,
body.play-again-visible #btn-undo,
body.play-again-visible #btn-reset,
body.play-again-visible #color-palette {
    display: none;
}

#play-again-bar[hidden] {
    display: none !important;
}

.control-btn,
.play-again-btn {
    background: var(--ui-btn-bg-subtle);
    border: 1.5px solid var(--border-gold-mid);
    box-shadow: var(--shadow-gold-soft), var(--ui-inset-hi), var(--ui-inset-lo);
    color: var(--border-gold-lo);
    backdrop-filter: blur(8px);
}

.control-btn {
    width: var(--hud-btn-size);
    height: var(--hud-btn-size);
    min-width: var(--hud-btn-size);
    min-height: var(--hud-btn-size);
    padding: 0;
    border-radius: var(--radius-control);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-bounce);
}

.control-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--ui-btn-bg-subtle-hover);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-gold-hover), var(--ui-inset-hi), var(--ui-inset-lo);
    color: var(--border-gold-shadow);
}

.control-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

#btn-solution:hover:not(:disabled) { color: var(--border-gold-shadow); border-color: var(--border-gold); }
#btn-home:hover:not(:disabled) { color: var(--accent-teal); border-color: var(--border-gold); }

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

.play-again-btn {
    height: var(--hud-btn-size);
    padding: 0 18px;
    gap: 8px;
    border-radius: var(--radius-control);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-bounce);
}

.play-again-btn:hover {
    transform: translateY(-2px);
    background: var(--ui-btn-bg-subtle-hover);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-gold-hover), var(--ui-inset-hi), var(--ui-inset-lo);
    color: var(--border-gold-shadow);
}

.play-again-label {
    font-family: 'Cinzel', serif;
    font-size: var(--font-play-again);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Pearl buttons (modals & HUD) ── */
.parchment-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--ui-btn-bg);
    border: 1.5px solid var(--border-gold-mid);
    border-radius: var(--radius-control);
    color: var(--border-gold-lo);
    font-family: 'Cinzel', serif;
    font-size: var(--font-btn);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-gold-soft), var(--ui-inset-hi), inset 0 -2px 0 rgba(72, 64, 100, 0.1);
    transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

.parchment-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--ui-btn-bg-hover);
    border-color: var(--border-gold);
    color: var(--border-gold-shadow);
    box-shadow: var(--shadow-gold-hover), var(--ui-inset-hi), inset 0 -2px 0 rgba(72, 64, 100, 0.08);
}

.parchment-btn:active:not(:disabled) {
    transform: translateY(0);
}

.parchment-btn:disabled:not(.is-loading) {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
}

.parchment-btn.is-loading:disabled {
    opacity: 1;
    cursor: wait;
    pointer-events: none;
}

.parchment-btn-wide {
    min-width: min(180px, 72vw);
    padding: 10px 22px;
    font-size: var(--font-btn-wide);
}

.parchment-btn .btn-label {
    position: relative;
    z-index: 1;
}

.parchment-btn .btn-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(40, 36, 56, 0.16);
    z-index: 2;
    overflow: hidden;
    border-radius: 0 0 calc(var(--radius-control) - 1px) calc(var(--radius-control) - 1px);
}

.parchment-btn .btn-progress[hidden] {
    display: none;
}

.parchment-btn .btn-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue));
    box-shadow: 0 0 8px rgba(106, 168, 172, 0.45);
    transition: width 0.18s ease;
}

.parchment-btn.is-loading .btn-label {
    opacity: 0.92;
}

.parchment-btn.is-indeterminate .btn-progress-bar {
    width: 42%;
    min-width: 48px;
    transition: none;
    animation: btnProgressIndeterminate 1s ease-in-out infinite;
}

.parchment-btn.is-complete .btn-progress-bar {
    width: 100%;
    min-width: 0;
    animation: none;
    transform: none;
}

@keyframes btnProgressIndeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* ── Full-screen level generation loading ── */
.level-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(40, 36, 56, 0.42);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.level-loading[hidden] {
    display: none !important;
}

.level-loading.is-active {
    opacity: 1;
    pointer-events: all;
}

.level-loading-card {
    width: min(320px, calc(100vw - 48px));
    padding: 22px 24px 20px;
    border-radius: var(--radius-panel);
    border: 1.5px solid var(--border-gold-mid);
    background: var(--ui-panel-bg);
    box-shadow: var(--shadow-gold), var(--ui-inset-hi), var(--ui-inset-lo);
    text-align: center;
}

.level-loading-text {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--border-gold-lo);
    margin-bottom: 16px;
}

.level-loading-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(40, 36, 56, 0.16);
}

.level-loading-bar-fill {
    display: block;
    height: 100%;
    width: 42%;
    min-width: 72px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue));
    box-shadow: 0 0 10px rgba(106, 168, 172, 0.45);
    animation: levelLoadingIndeterminate 1.05s ease-in-out infinite;
}

@keyframes levelLoadingIndeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

body.level-loading-active {
    overflow: hidden;
}

/* ── Game layout & board ── */
#game-layout {
    position: fixed;
    top: var(--frame-top);
    right: var(--frame-right);
    bottom: var(--frame-bottom);
    left: var(--frame-left);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
    box-sizing: border-box;
    container-type: size;
}

/* ── Goal column: palette + goal (right middle) ── */
.goal-column {
    position: fixed;
    top: 50%;
    right: max(var(--hud-inset), env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
    width: var(--goal-panel-width);
    max-width: calc(100vw - var(--hud-inset) * 2);
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeDown 0.8s var(--ease-smooth);
}

.goal-panel {
    position: relative;
    width: 100%;
    max-width: none;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    animation: none;
}

.goal-panel[hidden] {
    display: none;
}

.goal-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--ui-panel-bg);
    border: 1.5px solid var(--border-gold-mid);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-gold-soft), var(--ui-inset-hi), var(--ui-inset-lo);
    backdrop-filter: blur(10px);
}

.goal-scroll::before,
.goal-scroll::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--border-gold-hi), var(--border-gold));
    border: 1px solid var(--border-gold-lo);
    box-shadow: 0 1px 3px rgba(72, 64, 100, 0.18);
}

.goal-scroll::before { left: 12px; }
.goal-scroll::after { right: 12px; }

.goal-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: var(--font-goal-eyebrow);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--border-gold-mid);
    text-align: center;
}

.goal-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-icon {
    flex: 0 0 auto;
    width: var(--goal-icon-size);
    height: var(--goal-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--border-gold-mid);
    background: linear-gradient(180deg, #ffffff, #ece8f4);
    font-size: calc(var(--goal-icon-size) * 0.55);
    line-height: 1;
    color: var(--accent-teal);
    box-shadow: var(--ui-inset-hi), var(--ui-inset-lo);
}

.goal-title {
    font-family: 'Cinzel', serif;
    font-size: var(--font-goal-title);
    font-weight: 500;
    line-height: 1.2;
    color: var(--border-gold-lo);
    letter-spacing: 0.04em;
}

.goal-text {
    font-size: var(--font-goal-text);
    line-height: 1.45;
    color: var(--ink-muted);
}

.goal-note {
    font-size: var(--font-goal-note);
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--border-gold-mid);
    padding-top: 8px;
    border-top: 1px solid rgba(168, 152, 188, 0.35);
}

.goal-note[hidden] {
    display: none;
}

.goal-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.goal-extra:empty {
    display: none;
}

.goal-number {
    min-width: var(--goal-number-size);
    height: var(--goal-number-size);
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius-control) - 2px);
    border: 1.5px solid var(--border-gold-mid);
    background: linear-gradient(180deg, #ffffff, #ece8f4);
    font-family: 'Cinzel', serif;
    font-size: var(--font-goal-number);
    font-weight: 500;
    color: var(--border-gold-lo);
    box-shadow: var(--ui-inset-hi), var(--ui-inset-lo);
}

.goal-symbol {
    width: var(--goal-symbol-size);
    height: var(--goal-symbol-size);
    filter: drop-shadow(0 2px 4px rgba(40, 36, 56, 0.25));
}

.goal-extra.shapes-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

.goal-shape {
    display: grid;
    gap: 2px;
    padding: 5px;
    border-radius: 6px;
    background: rgba(255, 246, 228, 0.85);
    border: 1px solid rgba(184, 137, 46, 0.45);
}

.goal-shape[data-w="1"] { grid-template-columns: repeat(1, var(--goal-shape-cell)); }
.goal-shape[data-w="2"] { grid-template-columns: repeat(2, var(--goal-shape-cell)); }
.goal-shape[data-w="3"] { grid-template-columns: repeat(3, var(--goal-shape-cell)); }
.goal-shape[data-w="4"] { grid-template-columns: repeat(4, var(--goal-shape-cell)); }
.goal-shape[data-h="1"] { grid-template-rows: repeat(1, var(--goal-shape-cell)); }
.goal-shape[data-h="2"] { grid-template-rows: repeat(2, var(--goal-shape-cell)); }
.goal-shape[data-h="3"] { grid-template-rows: repeat(3, var(--goal-shape-cell)); }
.goal-shape[data-h="4"] { grid-template-rows: repeat(4, var(--goal-shape-cell)); }

.shape-cell {
    width: var(--goal-shape-cell);
    height: var(--goal-shape-cell);
    border-radius: 2px;
}

.shape-cell.on {
    background: linear-gradient(145deg, var(--accent-teal), #5a8888);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(40, 36, 56, 0.25);
}

.palette-panel {
    background: var(--ui-panel-bg);
    border: 1.5px solid var(--border-gold-mid);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-gold-soft), var(--ui-inset-hi), var(--ui-inset-lo);
    backdrop-filter: blur(10px);
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.color-palette[hidden] {
    display: none;
}

.palette-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1.5px solid rgba(168, 152, 188, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    backdrop-filter: blur(4px);
}

.palette-swatch:hover {
    border-color: var(--border-gold-mid);
    transform: translateY(-1px);
}

.palette-swatch.active {
    border-color: var(--border-gold-lo);
    box-shadow: 0 0 0 2px rgba(168, 152, 188, 0.35), var(--ui-inset-hi);
}

.palette-swatch.match {
    border-color: var(--accent-success);
}

.palette-swatch.mismatch {
    border-color: var(--accent-warn);
}

.palette-swatch-fill {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--swatch-color, var(--paint-0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(40, 36, 56, 0.14);
    border: 1px solid rgba(40, 36, 56, 0.15);
}

.palette-swatch[data-paint="0"]  { --swatch-color: var(--paint-0); }
.palette-swatch[data-paint="1"]  { --swatch-color: var(--paint-1); }
.palette-swatch[data-paint="2"]  { --swatch-color: var(--paint-2); }
.palette-swatch[data-paint="3"]  { --swatch-color: var(--paint-3); }
.palette-swatch[data-paint="4"]  { --swatch-color: var(--paint-4); }
.palette-swatch[data-paint="5"]  { --swatch-color: var(--paint-5); }
.palette-swatch[data-paint="6"]  { --swatch-color: var(--paint-6); }
.palette-swatch[data-paint="7"]  { --swatch-color: var(--paint-7); }
.palette-swatch[data-paint="8"]  { --swatch-color: var(--paint-8); }
.palette-swatch[data-paint="9"]  { --swatch-color: var(--paint-9); }
.palette-swatch[data-paint="10"] { --swatch-color: var(--paint-10); }
.palette-swatch[data-paint="11"] { --swatch-color: var(--paint-11); }
.palette-swatch[data-paint="12"] { --swatch-color: var(--paint-12); }
.palette-swatch[data-paint="13"] { --swatch-color: var(--paint-13); }

.palette-status {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    opacity: 0;
    pointer-events: none;
}

.palette-swatch.match .palette-status,
.palette-swatch.mismatch .palette-status {
    opacity: 1;
}

.palette-swatch.match .palette-status {
    background: var(--accent-success);
    content: '✓';
}

.palette-swatch.mismatch .palette-status {
    background: var(--accent-warn);
}

.palette-swatch.match .palette-status::after {
    content: '✓';
}

.palette-swatch.mismatch .palette-status::after {
    content: '✕';
}

#board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    filter: drop-shadow(0 8px 24px rgba(28, 24, 40, 0.18));
}

#board[data-cols="3"]  { --grid-cols: 3; }
#board[data-cols="4"]  { --grid-cols: 4; }
#board[data-cols="5"]  { --grid-cols: 5; }
#board[data-cols="6"]  { --grid-cols: 6; }
#board[data-cols="7"]  { --grid-cols: 7; }
#board[data-cols="8"]  { --grid-cols: 8; }
#board[data-cols="9"]  { --grid-cols: 9; }
#board[data-cols="10"] { --grid-cols: 10; }
#board[data-cols="11"] { --grid-cols: 11; }
#board[data-cols="12"] { --grid-cols: 12; }
#board[data-cols="13"] { --grid-cols: 13; }
#board[data-cols="14"] { --grid-cols: 14; }

#board[data-rows="3"]  { --grid-rows: 3; }
#board[data-rows="4"]  { --grid-rows: 4; }
#board[data-rows="5"]  { --grid-rows: 5; }
#board[data-rows="6"]  { --grid-rows: 6; }
#board[data-rows="7"]  { --grid-rows: 7; }
#board[data-rows="8"]  { --grid-rows: 8; }
#board[data-rows="9"]  { --grid-rows: 9; }
#board[data-rows="10"] { --grid-rows: 10; }
#board[data-rows="11"] { --grid-rows: 11; }
#board[data-rows="12"] { --grid-rows: 12; }
#board[data-rows="13"] { --grid-rows: 13; }
#board[data-rows="14"] { --grid-rows: 14; }

#board {
    --grid-span: max(var(--grid-cols), var(--grid-rows));
    --cell-size: calc(var(--board-size) / var(--grid-span));
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), var(--cell-size));
    grid-template-rows: repeat(var(--grid-rows), var(--cell-size));
    position: relative;
    width: calc(var(--cell-size) * var(--grid-cols));
    height: calc(var(--cell-size) * var(--grid-rows));
    flex: 0 0 auto;
    overflow: visible;
    z-index: 1;
    background: transparent;
}

#board .cell[data-r][data-c] {
    grid-row: calc(attr(data-r type(<number>)) + 1);
    grid-column: calc(attr(data-c type(<number>)) + 1);
}

.cell {
    --cell-inset-gold:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(48, 44, 72, 0.04),
        inset 0 0 0 max(0.5px, calc(var(--cell-size) * 0.007)) rgba(168, 152, 188, 0.2);
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: var(--cell-color, var(--cell-empty));
    background-image:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.45) 0%,
            transparent 42%,
            rgba(48, 44, 72, 0.025) 100%
        ),
        repeating-linear-gradient(
            94deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.12) 3px,
            rgba(255, 255, 255, 0.12) 4px
        );
    background-blend-mode: normal, soft-light;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.15s ease;
    box-shadow: var(--cell-inset-gold);
    z-index: 1;
    overflow: hidden;
}

.cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--facet-texture, none);
    background-size: calc(var(--cell-size) * var(--grid-cols)) calc(var(--cell-size) * var(--grid-rows));
    background-position:
        calc(attr(data-c type(<number>)) * var(--cell-size) * -1)
        calc(attr(data-r type(<number>)) * var(--cell-size) * -1);
    background-repeat: no-repeat;
    opacity: var(--facet-strength);
    mix-blend-mode: multiply;
    pointer-events: none;
}

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

.cell[data-paint] {
    filter: saturate(1.06) contrast(1.01);
}

.cell[data-paint] .symbol {
    filter: drop-shadow(0 3px 6px rgba(40, 36, 56, 0.25)) saturate(0.9);
}

.cell[data-paint].solved .symbol {
    filter: drop-shadow(0 2px 6px rgba(40, 36, 56, 0.35)) brightness(1.08) saturate(0.85) !important;
}

.cell[data-paint="0"]  { --cell-color: var(--paint-0); }
.cell[data-paint="1"]  { --cell-color: var(--paint-1); }
.cell[data-paint="2"]  { --cell-color: var(--paint-2); }
.cell[data-paint="3"]  { --cell-color: var(--paint-3); }
.cell[data-paint="4"]  { --cell-color: var(--paint-4); }
.cell[data-paint="5"]  { --cell-color: var(--paint-5); }
.cell[data-paint="6"]  { --cell-color: var(--paint-6); }
.cell[data-paint="7"]  { --cell-color: var(--paint-7); }
.cell[data-paint="8"]  { --cell-color: var(--paint-8); }
.cell[data-paint="9"]  { --cell-color: var(--paint-9); }
.cell[data-paint="10"] { --cell-color: var(--paint-10); }
.cell[data-paint="11"] { --cell-color: var(--paint-11); }
.cell[data-paint="12"] { --cell-color: var(--paint-12); }
.cell[data-paint="13"] { --cell-color: var(--paint-13); }

.cell.pop {
    animation: squish 0.4s var(--ease-bounce);
    z-index: 2;
}

.cell.solved .symbol {
    filter: drop-shadow(0 2px 6px rgba(40, 36, 56, 0.35)) brightness(1.08) !important;
    transform: scale(1.08);
    transition: all 0.4s var(--ease-smooth);
}

@keyframes errorPulse {
    0% {
        box-shadow:
            var(--cell-inset-gold),
            inset 0 0 0 2px var(--accent-warn),
            inset 0 0 14px rgba(192, 128, 144, 0.4);
    }
    100% {
        box-shadow:
            var(--cell-inset-gold),
            inset 0 0 0 2px var(--accent-warn),
            inset 0 0 5px rgba(192, 128, 144, 0.2);
    }
}

.cell.error {
    animation: errorPulse 0.8s infinite alternate !important;
}

.cell.error .symbol {
    filter: grayscale(0.6) sepia(0.3);
}

.symbol {
    width: 68%;
    height: 68%;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(40, 36, 56, 0.3));
    animation: pulseGlow 3s infinite alternate;
}

.glow-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.glow-path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glow-path-subtle {
    stroke: rgba(120, 108, 148, 0.28);
    stroke-width: max(0.5px, calc(var(--cell-size) * 0.009));
}

.glow-path-frame-shadow {
    stroke: rgba(28, 24, 40, 0.62);
    stroke-width: max(2.5px, calc(var(--cell-size) * 0.052));
}

.glow-path-frame-outer {
    stroke: url(#gold-frame-gradient);
    stroke-width: max(3px, calc(var(--cell-size) * 0.062));
    filter: drop-shadow(0 1px 4px rgba(28, 24, 40, 0.35));
}

.glow-path-frame-shine {
    stroke: url(#gold-shine-gradient);
    stroke-width: max(1px, calc(var(--cell-size) * 0.016));
    opacity: 0.55;
}

.glow-path-outer {
    stroke: url(#gold-frame-gradient);
    stroke-width: max(1.75px, calc(var(--cell-size) * 0.036));
    opacity: 0.9;
}

.glow-path-core {
    stroke: url(#gold-shadow-gradient);
    stroke-width: max(0.85px, calc(var(--cell-size) * 0.016));
    opacity: 0.8;
}

/* ── Start screen: hide all game chrome ── */
body.start-screen #game-layout,
body.start-screen #goal-column,
body.start-screen .hud-panel,
body.start-screen #confetti-canvas {
    visibility: hidden;
    pointer-events: none;
}

/* ── Modals ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.modal-overlay.show:not(#start-modal) {
    background: rgba(40, 36, 56, 0.28);
    backdrop-filter: blur(8px);
}

#start-modal.modal-overlay {
    background: rgba(40, 36, 56, 0.04);
    backdrop-filter: blur(3px);
}

.modal-content {
    position: relative;
    background: var(--ui-panel-bg);
    border: 1.5px solid var(--border-gold-mid);
    padding: clamp(24px, 5vw, 44px) clamp(20px, 5vw, 52px);
    border-radius: var(--radius-modal);
    box-shadow:
        var(--shadow-gold),
        var(--ui-inset-hi),
        var(--ui-inset-lo),
        0 0 0 1px rgba(255, 255, 255, 0.55);
    transform: scale(0.94) translateY(20px);
    transition: all 0.55s var(--ease-smooth);
    max-width: 500px;
    color: var(--ink);
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-gold-hi), transparent);
    pointer-events: none;
}

.start-modal {
    max-width: min(440px, calc(100vw - 24px));
    padding: clamp(24px, 5vw, 44px) clamp(20px, 4vw, 48px);
}

.start-game-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 12px 28px;
}

.game-title,
.modal-title {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    color: var(--border-gold-lo);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.game-title {
    font-size: var(--font-game-title);
    margin-bottom: 8px;
    line-height: 1.2;
}

.game-logo {
    display: block;
    width: min(320px, 100%);
    height: auto;
    margin: 0 auto;
}

.game-tagline {
    font-size: var(--font-tagline);
    font-style: italic;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}

.level-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: var(--level-card-size);
    height: var(--level-card-size);
    margin: 0 auto 22px;
    padding: 8px;
    border-radius: var(--radius-level-card);
    border: 1.5px solid var(--border-gold-mid);
    background: linear-gradient(168deg, rgba(255, 255, 255, 0.95), rgba(236, 232, 246, 0.85));
    box-shadow: var(--ui-inset-hi), var(--ui-inset-lo), 0 4px 18px rgba(64, 56, 96, 0.1);
}

.level-card-number {
    font-family: 'Cinzel', serif;
    font-size: var(--font-level-number);
    line-height: 1;
    color: var(--border-gold-lo);
    font-weight: 500;
}

.level-card-caption {
    font-family: 'Cinzel', serif;
    font-size: var(--font-level-caption);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--border-gold-mid);
}

.text-center { text-align: center; }

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-title {
    margin-bottom: 12px;
}

.modal-h1 { font-size: var(--font-modal-h1); }
.modal-h2 { font-size: var(--font-modal-h2); }

.modal-body,
.modal-list {
    font-size: var(--font-modal-body);
    color: var(--ink-muted);
    margin-bottom: 20px;
    line-height: 1.55;
}

.modal-list li { margin-bottom: 10px; }

.btn-primary {
    margin-top: 12px;
}

.highlight-blue { color: var(--accent-teal); font-weight: 600; }
.highlight-red { color: var(--accent-warn); font-weight: 600; }
.highlight-warn { color: var(--border-gold-mid); font-weight: 600; }
.mt-small { margin-top: 10px; }

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.modal-actions .btn-primary {
    min-width: 120px;
    margin-top: 0;
}

#confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
}

.hidden-svg { display: none; }

@keyframes fadeDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes ambientWash {
    0% { opacity: 0.88; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.04); }
}

@keyframes auroraDriftA {
    0% { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); }
}

@keyframes auroraDriftB {
    0% { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.02); }
    100% { transform: translate3d(-4%, -3%, 0) rotate(-6deg) scale(1.1); }
}

@keyframes auroraDriftC {
    0% { transform: translate3d(-2%, 4%, 0) rotate(-2deg) scale(0.98); }
    100% { transform: translate3d(2%, -3%, 0) rotate(4deg) scale(1.06); }
}

@keyframes orbFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(var(--orb-drift-x, 18px), var(--orb-drift-y, -14px), 0) scale(1.08); }
}

@keyframes sparkleTwinkle {
    0% { opacity: 0.35; filter: brightness(0.92); }
    100% { opacity: 0.72; filter: brightness(1.12); }
}

@keyframes pulseGlow {
    0% { filter: drop-shadow(0 2px 4px rgba(40, 36, 56, 0.25)); transform: scale(1); }
    100% { filter: drop-shadow(0 4px 8px rgba(40, 36, 56, 0.35)); transform: scale(1.04); }
}

@keyframes squish {
    0% { transform: scale(1); }
    40% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

/* ── Responsive breakpoints ── */

/* Mobile (481px – 640px) */
@media (min-width: 481px) {
    :root {
        --hud-inset: 10px;
        --hud-gap: 7px;
        --hud-btn-size: 38px;
        --board-size-cap: 300px;
        --goal-bottom-reserve: calc(104px + env(safe-area-inset-bottom, 0px));
        --goal-panel-width: min(360px, calc(100vw - 20px));
        --font-level: 17px;
        --font-icon: 19px;
        --font-goal-title: 14px;
        --font-goal-text: 14px;
        --font-game-title: 28px;
        --font-tagline: 15px;
        --font-modal-h1: 30px;
        --font-modal-body: 16px;
        --goal-shape-cell: 8px;
        --goal-icon-size: 26px;
        --goal-number-size: 36px;
        --goal-symbol-size: 32px;
        --level-card-size: 92px;
        --font-level-number: 38px;
        --radius-control: 9px;
        --radius-panel: 14px;
    }
}

/* Tablet Portrait (641px – 768px) */
@media (min-width: 641px) {
    :root {
        --hud-inset: 12px;
        --hud-gap: 8px;
        --hud-btn-size: 40px;
        --board-size-cap: 360px;
        --goal-bottom-reserve: calc(112px + env(safe-area-inset-bottom, 0px));
        --goal-panel-width: min(420px, calc(100vw - 24px));
        --font-level: 19px;
        --font-icon: 20px;
        --font-goal-title: 15px;
        --font-goal-text: 15px;
        --font-goal-note: 12px;
        --font-goal-number: 20px;
        --font-game-title: 30px;
        --font-tagline: 16px;
        --font-modal-h1: 32px;
        --font-modal-h2: 24px;
        --font-modal-body: 17px;
        --goal-shape-cell: 8px;
        --goal-icon-size: 28px;
        --goal-number-size: 38px;
        --goal-symbol-size: 34px;
        --level-card-size: 100px;
        --font-level-number: 40px;
        --radius-control: 9px;
        --radius-panel: 15px;
        --radius-modal: 16px;
    }

    .goal-scroll {
        padding: 12px 16px;
        gap: 6px 14px;
    }
}

/* Tablet Landscape (769px – 1024px) */
@media (min-width: 769px) {
    :root {
        --hud-inset: 12px;
        --hud-btn-size: 42px;
        --board-size-cap: 400px;
        --frame-bottom: var(--hud-top-reserve);
        --goal-reserve: calc(var(--goal-panel-width) + var(--hud-inset) + 10px);
        --goal-panel-width: 200px;
        --font-level: 20px;
        --font-icon: 21px;
        --font-play-again: 11px;
        --font-goal-eyebrow: 9px;
        --font-goal-title: 15px;
        --font-goal-text: 15px;
        --font-btn: 12px;
        --font-btn-wide: 14px;
        --font-game-title: 32px;
        --font-tagline: 16px;
        --font-modal-h1: 34px;
        --font-modal-h2: 26px;
        --font-modal-body: 17px;
        --goal-shape-cell: 9px;
        --goal-icon-size: 28px;
        --goal-number-size: 40px;
        --goal-symbol-size: 36px;
        --level-card-size: 104px;
        --font-level-number: 42px;
        --font-level-caption: 10px;
        --radius-control: 10px;
        --radius-panel: 16px;
        --radius-modal: 18px;
    }

    .goal-column {
        top: 50%;
        bottom: auto;
        left: auto;
        right: max(var(--hud-inset), env(safe-area-inset-right, 0px));
        transform: translateY(-50%);
    }

    .goal-panel {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
    }

    .goal-scroll {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        padding: 16px 18px;
    }

    .goal-eyebrow {
        flex-basis: auto;
    }

    .goal-text {
        flex: initial;
    }
}

/* Desktop (≥ 1025px) */
@media (min-width: 1025px) {
    :root {
        --hud-inset: 14px;
        --hud-gap: 8px;
        --hud-btn-size: 44px;
        --board-size-cap: 460px;
        --goal-reserve: calc(var(--goal-panel-width) + var(--hud-inset) + 14px);
        --goal-panel-width: 220px;
        --font-level: 22px;
        --font-icon: 22px;
        --font-play-again: 12px;
        --font-goal-eyebrow: 9px;
        --font-goal-title: 15px;
        --font-goal-text: 15px;
        --font-goal-note: 13px;
        --font-goal-number: 22px;
        --font-btn: 13px;
        --font-btn-wide: 15px;
        --font-game-title: 34px;
        --font-tagline: 17px;
        --font-modal-h1: 36px;
        --font-modal-h2: 28px;
        --font-modal-body: 18px;
        --goal-shape-cell: 9px;
        --goal-icon-size: 30px;
        --goal-number-size: 42px;
        --goal-symbol-size: 38px;
        --level-card-size: 108px;
        --font-level-number: 44px;
        --font-level-caption: 11px;
        --radius-control: 10px;
        --radius-panel: 16px;
        --radius-modal: 20px;
        --radius-level-card: 12px;
    }

    .goal-scroll {
        gap: 8px;
        padding: 18px 20px;
    }

    #top-left {
        gap: 10px;
    }

    .parchment-btn {
        padding: 11px 22px;
    }

    .parchment-btn-wide {
        padding: 12px 28px;
    }
}

/* Goal column docks to bottom on ≤ 768px */
@media (max-width: 768px) {
    .goal-column {
        top: auto;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .goal-panel {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
    }

    .goal-scroll {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 10px 14px;
    }

    .goal-eyebrow {
        flex-basis: 100%;
    }

    .goal-text {
        flex: 1 1 140px;
    }

}

/* Mobile (≤ 640px) layout tweaks */
@media (max-width: 640px) {
    .play-again-label {
        display: none;
    }

    .play-again-btn {
        width: var(--hud-btn-size);
        padding: 0;
    }

    .modal-content {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }

    .modal-actions .btn-primary {
        min-width: 100px;
    }
}

/* Small Mobile (≤ 480px) — base :root values apply */
@media (max-width: 480px) {
    :root {
        --hud-gap: 5px;
        --goal-panel-width: calc(100vw - 16px);
    }

    #top-left h1 {
        letter-spacing: 0.05em;
    }

    #top-right {
        gap: var(--hud-gap);
    }
}

/* Landscape Mobile — short viewports in landscape */
@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --hud-inset: 6px;
        --hud-gap: 5px;
        --hud-btn-size: 32px;
        --board-size-cap: min(272px, calc(100dvh - 88px), calc(100dvw - 200px));
        --frame-bottom: var(--hud-inset);
        --frame-top: calc(var(--hud-inset) + var(--hud-btn-size) + 6px);
        --goal-reserve: calc(156px + env(safe-area-inset-right, 0px));
        --goal-panel-width: 148px;
        --font-level: 14px;
        --font-icon: 17px;
        --font-goal-eyebrow: 7px;
        --font-goal-title: 11px;
        --font-goal-text: 11px;
        --font-goal-note: 10px;
        --font-goal-number: 16px;
        --goal-shape-cell: 6px;
        --goal-icon-size: 20px;
        --goal-number-size: 28px;
        --goal-symbol-size: 24px;
        --radius-control: 7px;
        --radius-panel: 10px;
    }

    .goal-column {
        top: 50%;
        bottom: auto;
        left: auto;
        right: max(var(--hud-inset), env(safe-area-inset-right, 0px));
        transform: translateY(-50%);
    }

    .goal-panel {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
    }

    .goal-scroll {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 8px 10px;
    }

    .goal-eyebrow,
    .goal-text {
        flex-basis: auto;
        flex: initial;
    }

    .goal-head {
        gap: 6px;
    }

    #play-again-bar {
        top: max(var(--hud-inset), env(safe-area-inset-top, 0px));
    }

    .game-tagline {
        margin-bottom: 18px;
    }

    .level-card {
        margin-bottom: 16px;
    }
}

/* Landscape mobile with very narrow width */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 768px) {
    :root {
        --board-size-cap: min(252px, calc(100dvh - 80px), calc(100dvw - 180px));
        --goal-reserve: 0px;
        --goal-panel-width: min(280px, calc(100vw - 16px));
        --frame-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .goal-column {
        top: auto;
        bottom: max(6px, env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .goal-panel {
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
    }

    .goal-scroll {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 10px;
        padding: 6px 10px;
    }

    .goal-eyebrow {
        flex-basis: 100%;
    }

    .goal-text {
        flex: 1 1 120px;
    }
}