/* ── Cat Café theme (cozy wood & pastel) ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');

:root {
    /* Layout (defaults; synced from JS CONFIG) */
    --pet-size: 52px;
    --pet-half: 26px;
    --dock-gap: 8px;
    --dock-padding: 10px;
    --dock-border: 4px;
    --dock-width: 200px;
    --dock-height: calc(var(--pet-size) + (var(--dock-padding) * 2) + (var(--dock-border) * 2));
    --queue-step: 48px;
    --travel-duration: 250ms;

    /* Palette */
    --color-btn-slot: #edd3b1;
    --color-bg: #dfb57f;
    --color-border: #613e1d;
    --color-brown-mid: #613e1d;
    --color-overlay: rgba(97, 62, 29, 0.32);
    --game-btn-hover: #f5e6cc;
    --game-btn-depth: #8a5f3a;
    --game-stroke: var(--color-border);
    --game-frame-light: var(--color-btn-slot);

    /* UI */
    --btn-size: 42px;
    --btn-radius-squircle: 14px;
    --ui-radius-md: 20px;
    --ui-radius-pill: 9999px;
    --font-sans: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Game chrome */
    --game-surface: var(--color-bg);
    --game-surface-board: var(--color-bg);
    --game-stage-width: min(420px, 92vw);
    --game-panel-gap: 1.75rem;
    /* Pile grid span (half–pet-size units); board fits cat stack + breathing room */
    --pile-span-half-units-x: 10;
    --pile-span-half-units-y: 8;
    --board-padding: 0.875rem;
    --board-size-extra: var(--pet-half);
    --board-pile-width: calc(var(--pile-span-half-units-x) * var(--pet-half) + var(--pet-size));
    --board-pile-height: calc(var(--pile-span-half-units-y) * var(--pet-half) + var(--pet-size));
    --board-content-width: calc(var(--board-pile-width) + var(--board-padding) * 2 + var(--board-size-extra) * 2);
    --board-content-height: calc(var(--board-pile-height) + var(--board-padding) * 2 + var(--board-size-extra) * 2);
    --path-block-radius: 42px;
    --queue-treat-size: 2.5rem;
    --conveyor-min-height: 3.25rem;
    --queue-peek-cup-size: 1.45rem;
    --toolbar-padding-x: 1rem;
    --toolbar-padding-y: 0.75rem;
    --body-padding-top: 4.75rem;
    --body-padding-x: 0.75rem;
    --body-padding-bottom: 1.25rem;
    --chrome-border: 3px;
    --chrome-border-sm: 2.5px;
    --chrome-bevel-hi: rgba(255, 248, 235, 0.78);
    --chrome-bevel-lo: rgba(74, 48, 22, 0.28);
    --chrome-shadow: rgba(97, 62, 29, 0.42);
    --chrome-shadow-soft: rgba(97, 62, 29, 0.22);

    /* Raised panels: solid border + top-left highlight + bottom-right shade + float shadow */
    --chrome-raised:
        4px 10px 22px var(--chrome-shadow),
        2px 4px 8px var(--chrome-shadow-soft),
        inset 2px 2px 0 var(--chrome-bevel-hi),
        inset -2px -3px 0 var(--chrome-bevel-lo);

    --chrome-raised-lg:
        5px 14px 30px var(--chrome-shadow),
        3px 6px 12px var(--chrome-shadow-soft),
        inset 2px 2px 0 rgba(255, 248, 235, 0.85),
        inset -2px -4px 0 rgba(74, 48, 22, 0.32),
        inset 0 -3px 6px rgba(97, 62, 29, 0.1);

    /* Push buttons: border + depth block + bevel + drop shadow */
    --chrome-btn:
        0 5px 0 var(--game-btn-depth),
        0 8px 16px var(--chrome-shadow),
        inset 2px 2px 0 var(--chrome-bevel-hi),
        inset -1px -2px 0 var(--chrome-bevel-lo);

    --chrome-btn-hover:
        0 6px 0 var(--game-btn-depth),
        0 10px 20px rgba(97, 62, 29, 0.48),
        inset 2px 2px 0 rgba(255, 252, 248, 0.92),
        inset -1px -2px 0 var(--chrome-bevel-lo);

    --chrome-btn-active:
        0 2px 0 var(--game-btn-depth),
        0 4px 10px rgba(97, 62, 29, 0.3),
        inset 0 4px 8px rgba(97, 62, 29, 0.32),
        inset 0 1px 3px rgba(74, 48, 22, 0.22);

    /* Carved slots */
    --chrome-recessed:
        inset 0 5px 10px rgba(97, 62, 29, 0.48),
        inset 0 2px 4px rgba(74, 48, 22, 0.38),
        inset 0 -1px 1px rgba(255, 248, 235, 0.35);
}

/* ── Pet / treat colors (original vibrant palette) ── */
.is-color-red { --pet-color-main: #fda4af; --pet-color-dark: #f43f5e; --pet-color-shadow: #9f1239; }
.is-color-green { --pet-color-main: #86efac; --pet-color-dark: #22c55e; --pet-color-shadow: #064a21; }
.is-color-yellow { --pet-color-main: #fde047; --pet-color-dark: #eab308; --pet-color-shadow: #854d0e; }
.is-color-purple { --pet-color-main: #e8a8ff; --pet-color-dark: #b040e0; --pet-color-shadow: #6b1f9e; }
.is-color-orange { --pet-color-main: #fdba74; --pet-color-dark: #f97316; --pet-color-shadow: #862c0d; }
.is-color-cyan { --pet-color-main: #67e8f9; --pet-color-dark: #06b6d4; --pet-color-shadow: #164e63; }
.is-color-gray { --pet-color-main: #f1f5f9; --pet-color-dark: #94a3b8; --pet-color-shadow: #64748b; }

/* ── App shell ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body.app {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: max(var(--body-padding-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--body-padding-x), env(safe-area-inset-right, 0px));
    padding-top: max(var(--body-padding-top), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--body-padding-bottom), env(safe-area-inset-bottom, 0px));
    background-color: transparent;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    color: var(--game-stroke);
}

.app-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ── Game toolbar ── */
.game-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: max(var(--toolbar-padding-y), env(safe-area-inset-top, 0px)) var(--toolbar-padding-x) var(--toolbar-padding-y);
    padding-left: max(var(--toolbar-padding-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--toolbar-padding-x), env(safe-area-inset-right, 0px));
    pointer-events: none;
}

.game-toolbar[hidden] {
    display: none;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
}

.toolbar-group--left {
    justify-content: flex-start;
}

.toolbar-group--right {
    justify-content: flex-end;
}

.toolbar-btn {
    width: var(--btn-size);
    height: var(--btn-size);
    min-width: var(--btn-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--game-frame-light);
    border: var(--chrome-border-sm) solid var(--color-border);
    border-radius: var(--btn-radius-squircle);
    box-shadow: var(--chrome-btn);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}

.toolbar-btn:hover {
    background-color: var(--game-btn-hover);
    box-shadow: var(--chrome-btn-hover);
}

.toolbar-btn:active {
    transform: translateY(3px);
    box-shadow: var(--chrome-btn-active);
}

.toolbar-btn-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--game-stroke);
    display: block;
}

.toolbar-btn-icon--sound-off {
    display: none;
}

.toolbar-btn.is-sound-off .toolbar-btn-icon--sound-on {
    display: none;
}

.toolbar-btn.is-sound-off .toolbar-btn-icon--sound-off {
    display: block;
}

/* ── Game stage (centered play column) ── */
.game-stage {
    position: relative;
    z-index: 10;
    width: fit-content;
    max-width: min(var(--game-stage-width), 100%);
    margin: 0 auto;
    flex-shrink: 0;
}

.game-play-area {
    position: relative;
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--game-panel-gap);
    column-gap: 0;
}

.game-play-area > .conveyor,
.game-play-area > .dock-bg {
    margin-block: 0;
}

.game-play-area > .game-board {
    margin-block: 0;
    margin-top: calc(-1 * var(--game-panel-gap));
}

/* ── Shared soft-3D game panels ── */
.game-panel {
    border: var(--chrome-border) solid var(--color-border);
    background: var(--game-surface);
    box-shadow: var(--chrome-raised);
}

.level-badge {
    height: var(--btn-size);
    display: inline-flex;
    align-items: center;
    background: var(--game-frame-light);
    border: var(--chrome-border-sm) solid var(--color-border);
    padding: 0 1rem;
    border-radius: var(--ui-radius-pill);
    box-shadow: var(--chrome-btn);
}

.level-text {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--game-stroke);
    text-shadow: none;
    letter-spacing: 0.01em;
}

/* ── Conveyor (top goal bar) ── */
.conveyor {
    width: fit-content;
    max-width: 100%;
    border-radius: var(--ui-radius-pill);
    padding: 0.5rem 0.875rem;
    min-height: var(--conveyor-min-height);
    flex-shrink: 0;
    background: var(--color-btn-slot);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.conveyor-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    z-index: 10;
    pointer-events: none;
}

.conveyor-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-btn-slot), transparent);
}

.conveyor-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-btn-slot), transparent);
}

.conveyor.has-queue-more .conveyor-fade--right {
    width: 3.5rem;
    background: linear-gradient(to left, var(--color-btn-slot) 15%, transparent);
}

.queue-container {
    position: relative;
    width: var(--conveyor-inner-width, calc(5 * var(--queue-step) + var(--queue-treat-size)));
    height: 2.5rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
    z-index: 1;
}

/* ── Game board ── */
.game-board {
    position: relative;
    width: var(--board-content-width);
    max-width: 100%;
    min-height: var(--board-content-height);
    padding: var(--board-padding);
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 2;
    overflow: visible;
    margin-inline: auto;
}

.game-panel--board {
    background: color-mix(in srgb, var(--game-surface-board) 65%, transparent);
    box-shadow: var(--chrome-raised-lg);
    border-radius: 26px;
}

.play-rug {
    width: 100%;
    height: calc(var(--board-pile-height) + var(--board-size-extra) * 2);
    min-height: var(--board-pile-height);
    border-radius: 22px;
    box-sizing: border-box;
}

.game-board .pets-container {
    position: absolute;
    top: var(--board-padding);
    right: var(--board-padding);
    bottom: var(--board-padding);
    left: var(--board-padding);
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.game-panel--slot {
    position: relative;
    z-index: 1;
    width: var(--dock-width);
    max-width: 100%;
    height: var(--dock-height);
    margin-inline: auto;
    align-self: center;
    padding: var(--dock-padding);
    gap: var(--dock-gap);
    border-radius: var(--ui-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg);
}

.dock-slot {
    width: var(--pet-size);
    height: var(--pet-size);
    flex-shrink: 0;
    border-radius: 9999px;
    background: linear-gradient(180deg, #e5c8a8 0%, var(--color-btn-slot) 38%, #edd3b1 100%);
    border: var(--chrome-border-sm) solid var(--color-border);
    box-shadow: var(--chrome-recessed);
}

.game-board .pet.is-dock,
.game-board .pet.is-left {
    z-index: 30;
}

/* ── Pets ── */
.pet {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--pet-size);
    height: var(--pet-size);
    transition-property: transform, filter;
    transition-timing-function: ease-in-out;
    transition-duration: var(--travel-duration);
    transform: translate(calc(-50% + var(--pet-x, 0px)), calc(var(--pet-y, 0px) - var(--pet-half)));
    z-index: var(--pet-z, 0);
    filter: var(--pet-filter, none);
    pointer-events: auto;
    cursor: pointer;
}

.pet.is-busy {
    pointer-events: none;
    cursor: default;
}

.pet.is-pile {
    --pet-filter: drop-shadow(0 4px 8px rgba(74, 55, 40, 0.24));
}
.pet.is-dock { --pet-z: 100; --pet-filter: drop-shadow(0 4px 6px rgba(74, 51, 44, 0.18)); }
.pet.is-left { --pet-z: 200; --pet-filter: none; }

.pet-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotate(var(--pet-rot, 0deg));
    transition: transform 0.2s ease;
}

.pet:not(.is-busy) .pet-inner:hover {
    transform: rotate(var(--pet-rot, 0deg)) scale(1.05);
}

.pet.is-hint > .pet-inner {
    animation: hint-pulse 0.8s ease-in-out 3;
}

@keyframes hint-pulse {
    0%, 100% { transform: rotate(var(--pet-rot, 0deg)) scale(1); filter: drop-shadow(0 0 0 rgba(166, 124, 82, 0)); }
    50% { transform: rotate(var(--pet-rot, 0deg)) scale(1.12); filter: drop-shadow(0 0 10px rgba(166, 124, 82, 0.85)); }
}

.pet-svg-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.game-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 3px 4px rgba(74, 55, 40, 0.2)) drop-shadow(0 1px 1px rgba(74, 55, 40, 0.1));
    overflow: visible;
}

/* ── Queue treats ── */
.queue-treat {
    position: absolute;
    top: 0;
    left: calc(var(--queue-index, 0) * var(--queue-step));
    width: var(--queue-treat-size);
    height: var(--queue-treat-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 300ms ease, transform 300ms ease, opacity 300ms ease;
    z-index: 2;
}

.queue-treat.is-leaving {
    opacity: 0;
    transform: scale(0);
}

.queue-treat.is-first {
    transform: scale(1.15);
    opacity: 1;
    z-index: 10;
}

.queue-treat:not(.is-first) {
    transform: scale(0.9);
    opacity: 0.6;
    z-index: 1;
}

.active-ring {
    position: absolute;
    inset: -5px;
    border: 2px solid var(--color-border);
    border-radius: 9999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    box-shadow:
        0 0 0 1px rgba(255, 248, 235, 0.5),
        0 2px 6px rgba(97, 62, 29, 0.35);
}

.queue-treat.is-first .active-ring {
    opacity: 0.7;
    animation: ring-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.queue-treat-art {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(74, 51, 44, 0.1));
}

/* Upcoming drinks peek (stacked mini cups — no numbers) */
.queue-peek {
    position: absolute;
    top: 50%;
    left: calc(var(--queue-peek-offset, 1) * var(--queue-step) - 0.35rem);
    transform: translateY(-50%);
    display: flex;
    align-items: flex-end;
    height: 2rem;
    pointer-events: none;
    z-index: 4;
}

.queue-peek[hidden] {
    display: none !important;
}

.queue-peek-cup {
    width: var(--queue-peek-cup-size);
    height: var(--queue-peek-cup-size);
    flex-shrink: 0;
    margin-left: -0.7rem;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(97, 62, 29, 0.35));
    animation: queue-peek-bob 1.6s ease-in-out infinite;
    animation-delay: calc(var(--peek-i, 0) * 0.14s);
}

.queue-peek-cup:first-child {
    margin-left: 0;
    opacity: 0.9;
    z-index: 3;
}

.queue-peek-cup:nth-child(2) {
    z-index: 2;
    opacity: 0.65;
}

.queue-peek-cup:nth-child(3) {
    z-index: 1;
    opacity: 0.5;
}

.queue-peek-cup-art {
    width: 100%;
    height: 100%;
    display: block;
}

.queue-peek-dots {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.1rem;
    padding-bottom: 0.4rem;
    z-index: 0;
}

.queue-peek-dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-border);
    opacity: 0.45;
    animation: queue-peek-dot-pulse 1.1s ease-in-out infinite;
}

.queue-peek-dot:nth-child(2) {
    opacity: 0.65;
    animation-delay: 0.15s;
}

.queue-peek-dot:nth-child(3) {
    opacity: 0.85;
    animation-delay: 0.3s;
}

.queue-peek.is-deep .queue-peek-cup:last-of-type {
    margin-right: 0.05rem;
}

@keyframes queue-peek-bob {
    0%, 100% {
        transform: translateY(2px) scale(0.9);
    }
    50% {
        transform: translateY(-3px) scale(0.95);
    }
}

@keyframes queue-peek-dot-pulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.15);
    }
}

.treat-burst {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--queue-treat-size);
    height: var(--queue-treat-size);
    pointer-events: none;
    z-index: 20;
}

.treat-burst-inner {
    width: 100%;
    height: 100%;
}

/* ── Particles ── */
.particle {
    position: absolute;
    background-color: var(--particle-color, var(--pet-color-main));
    box-shadow: 0 1px 2px rgba(74, 51, 44, 0.1);
    --tx: 0px;
    --ty: 0px;
    --rot: 0deg;
    animation: shatter 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.particle--sm { width: 4px; height: 4px; }
.particle--md { width: 8px; height: 8px; }
.particle--lg { width: 12px; height: 12px; }
.particle--round { border-radius: 50%; }
.particle--square { border-radius: 2px; }
.particle--tone-main { --particle-color: var(--pet-color-main); }
.particle--tone-shadow { --particle-color: var(--pet-color-shadow); }

.particle-burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.burst-flash {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(253, 248, 240, 0.85) 0%, transparent 60%);
    pointer-events: none;
}

.pet-burst-flash {
    inset: -20px;
    background: radial-gradient(circle, rgba(253, 248, 240, 0.95) 0%, transparent 60%);
    z-index: 0;
}

/* ── Popups ── */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--color-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.popup-overlay--start {
    z-index: 60;
    align-items: center;
    justify-content: center;
}

.popup-overlay--start .popup-card {
    margin: auto;
}

.popup-overlay--help {
    z-index: 55;
}

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

.popup-card {
    background: var(--game-surface);
    border: var(--chrome-border) solid var(--color-border);
    border-radius: 32px;
    padding: 1.5rem;
    max-width: 22rem;
    width: 100%;
    text-align: center;
    box-shadow: var(--chrome-raised-lg), 0 20px 48px rgba(97, 62, 29, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.popup-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--game-stroke);
    margin: 0;
    line-height: 1.15;
    text-shadow: none;
}

.popup-logo {
    margin: 0;
    line-height: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-logo__img {
    display: block;
    width: min(100%, 12rem);
    height: auto;
    margin-inline: auto;
}

.popup-emoji {
    font-size: 5.25rem;
    line-height: 1;
    margin: 0;
}

.popup-card--result {
    gap: 0;
}

.popup-card--result .popup-emoji {
    font-size: 6rem;
    margin: 0 0 0.375rem;
}

.popup-card--result .popup-title {
    margin: 0 0 1.25rem;
}

.popup-card--result .popup-actions {
    width: 100%;
    gap: 1.25rem;
    margin: 0;
    padding-bottom: 6px;
}

.popup-card--help {
    gap: 1rem;
}

.help-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    color: var(--game-stroke);
    font-weight: 700;
    line-height: 1.5;
    width: 100%;
}

.help-list li {
    position: relative;
    padding-left: 1.35rem;
}

.help-list li::before {
    content: '🐾';
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.7rem;
    opacity: 0.75;
}

.help-list li + li {
    margin-top: 0.5rem;
}

.popup-actions {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    width: 100%;
}

.popup-actions .popup-btn {
    width: auto;
}

.popup-btn--primary {
    flex: 1;
    min-width: 0;
}

.popup-level-card {
    width: 7rem;
    height: 7rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    background: var(--game-surface-board);
    border: var(--chrome-border-sm) solid var(--color-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--chrome-raised);
}

.popup-level-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brown-mid);
}

.popup-level-num {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--game-stroke);
}

.popup-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    border: var(--chrome-border-sm) solid var(--color-border);
    border-radius: var(--ui-radius-pill);
    font-weight: 800;
    font-size: 1.125rem;
    font-family: inherit;
    color: var(--game-stroke);
    background: var(--game-frame-light);
    cursor: pointer;
    box-shadow: var(--chrome-btn);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.popup-btn:hover {
    background: var(--game-btn-hover);
    transform: translateY(-1px);
    box-shadow: var(--chrome-btn-hover);
}

.popup-btn:active {
    transform: translateY(3px);
    box-shadow: var(--chrome-btn-active);
}

.popup-btn--home {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background: var(--game-surface);
    color: var(--game-stroke);
    box-shadow: var(--chrome-raised);
}

.popup-btn--home:hover {
    background: var(--game-btn-hover);
    transform: translateY(-1px);
    box-shadow:
        4px 10px 22px var(--chrome-shadow),
        2px 4px 8px var(--chrome-shadow-soft),
        inset 2px 2px 0 var(--chrome-bevel-hi),
        inset -2px -3px 0 var(--chrome-bevel-lo);
}

.popup-btn--home:active {
    transform: translateY(2px);
    box-shadow: var(--chrome-btn-active);
}

/* ── Keyframes ── */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

.pet.animate-shake > .pet-inner {
    animation: shake 0.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shatter {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    40% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot)); opacity: 0; }
}

@keyframes treat-burst-fade {
    0% { transform: scale(1); filter: brightness(1.5); opacity: 1; }
    100% { transform: scale(0); filter: brightness(2) blur(4px); opacity: 0; }
}

.animate-treat-burst-fade {
    animation: treat-burst-fade 0.25s ease-out forwards;
}

@keyframes flash-fade {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.animate-flash-fade {
    animation: flash-fade 0.3s ease-out forwards;
}

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-pop-in {
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes ring-ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive breakpoints (desktop-first; non-overlapping width ranges)
   • Desktop           ≥1025px  (:root defaults)
   • Tablet Landscape  769px–1024px
   • Tablet Portrait   641px–768px
   • Mobile            481px–640px
   • Small Mobile      ≤480px
   • Landscape Mobile  orientation: landscape + short viewport (additive)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape (769px – 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --game-stage-width: min(400px, 94vw);
        --pet-size: 48px;
        --pet-half: 24px;
        --dock-gap: 7px;
        --dock-padding: 9px;
        --dock-border: 3.5px;
        --queue-step: 44px;
        --path-block-radius: 38px;
        --btn-size: 40px;
        --btn-radius-squircle: 13px;
        --game-panel-gap: 1.5rem;
        --queue-treat-size: 2.35rem;
        --conveyor-min-height: 3rem;
        --queue-peek-cup-size: 1.35rem;
        --ui-radius-md: 18px;
        --toolbar-padding-x: 0.875rem;
        --toolbar-padding-y: 0.625rem;
        --body-padding-top: 4.25rem;
        --body-padding-x: 0.625rem;
        --body-padding-bottom: 1rem;
    }

    .level-text {
        font-size: 1rem;
    }

    .game-panel--board {
        border-radius: 24px;
    }

    .play-rug {
        border-radius: 20px;
    }

    .popup-card {
        max-width: 21rem;
        padding: 1.375rem;
        border-radius: 28px;
    }

    .popup-title {
        font-size: 1.75rem;
    }

    .popup-logo__img {
        width: min(100%, 11rem);
    }

    .popup-level-card {
        width: 6.5rem;
        height: 6.5rem;
    }

    .popup-level-num {
        font-size: 2.5rem;
    }

    .popup-btn {
        font-size: 1.0625rem;
        padding: 0.8125rem 0.9375rem;
    }
}

/* ── Tablet Portrait (641px – 768px) ── */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --game-stage-width: min(380px, 96vw);
        --pet-size: 46px;
        --pet-half: 23px;
        --dock-gap: 7px;
        --dock-padding: 8px;
        --dock-border: 3px;
        --queue-step: 42px;
        --path-block-radius: 36px;
        --btn-size: 38px;
        --btn-radius-squircle: 12px;
        --game-panel-gap: 1.25rem;
        --queue-treat-size: 2.25rem;
        --conveyor-min-height: 2.875rem;
        --queue-peek-cup-size: 1.3rem;
        --chrome-border: 2.5px;
        --toolbar-padding-x: 0.75rem;
        --body-padding-top: 4rem;
        --body-padding-x: 0.5rem;
    }

    .conveyor {
        padding: 0.4375rem 0.75rem;
    }

    .conveyor-fade {
        width: 2.5rem;
    }

    .conveyor.has-queue-more .conveyor-fade--right {
        width: 3rem;
    }

    .queue-container {
        height: 2.25rem;
        margin-left: 0.375rem;
    }

    .level-badge {
        padding: 0 0.875rem;
    }

    .level-text {
        font-size: 0.9375rem;
    }

    .toolbar-btn-icon {
        width: 1rem;
        height: 1rem;
    }

    .toolbar-group {
        gap: 0.375rem;
    }

    .game-panel--board {
        border-radius: 22px;
    }

    .popup-card {
        max-width: 20rem;
        padding: 1.25rem;
        gap: 1rem;
        border-radius: 26px;
    }

    .popup-title {
        font-size: 1.625rem;
    }

    .popup-card--result .popup-emoji {
        font-size: 5rem;
    }

    .popup-logo__img {
        width: min(100%, 10rem);
    }

    .popup-level-card {
        width: 6rem;
        height: 6rem;
    }

    .popup-level-num {
        font-size: 2.25rem;
    }

    .help-list {
        font-size: 0.9375rem;
    }
}

/* ── Mobile (481px – 640px) ── */
@media (min-width: 481px) and (max-width: 640px) {
    :root {
        --game-stage-width: min(360px, 97vw);
        --pet-size: 44px;
        --pet-half: 22px;
        --dock-gap: 6px;
        --dock-padding: 8px;
        --dock-border: 3px;
        --queue-step: 40px;
        --path-block-radius: 34px;
        --btn-size: 36px;
        --btn-radius-squircle: 11px;
        --game-panel-gap: 1rem;
        --queue-treat-size: 2.125rem;
        --conveyor-min-height: 2.75rem;
        --queue-peek-cup-size: 1.25rem;
        --toolbar-padding-x: 0.625rem;
        --toolbar-padding-y: 0.5rem;
        --body-padding-top: 3.75rem;
        --body-padding-x: 0.5rem;
        --body-padding-bottom: 0.75rem;
    }

    body.app {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .game-toolbar {
        gap: 0.5rem;
    }

    .toolbar-group {
        gap: 0.3125rem;
    }

    .level-badge {
        padding: 0 0.75rem;
        height: var(--btn-size);
    }

    .level-text {
        font-size: 0.875rem;
    }

    .toolbar-btn-icon {
        width: 0.9375rem;
        height: 0.9375rem;
    }

    .conveyor {
        padding: 0.375rem 0.625rem;
    }

    .conveyor-fade {
        width: 2.25rem;
    }

    .queue-container {
        height: 2.125rem;
        margin-left: 0.25rem;
    }

    .queue-peek {
        height: 1.75rem;
    }

    .queue-peek-cup {
        margin-left: -0.6rem;
    }

    .game-panel--board {
        border-radius: 20px;
    }

    .play-rug {
        border-radius: 18px;
    }

    .popup-overlay {
        padding: 0.75rem;
    }

    .popup-card {
        max-width: 19rem;
        padding: 1.125rem;
        gap: 0.875rem;
        border-radius: 24px;
    }

    .popup-title {
        font-size: 1.5rem;
    }

    .popup-card--result .popup-emoji {
        font-size: 4.5rem;
    }

    .popup-logo__img {
        width: min(100%, 9rem);
    }

    .popup-level-card {
        width: 5.5rem;
        height: 5.5rem;
    }

    .popup-level-num {
        font-size: 2rem;
    }

    .popup-btn {
        font-size: 1rem;
        padding: 0.75rem 0.875rem;
    }

    .popup-actions {
        gap: 0.75rem;
    }

    .help-list {
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .help-list li + li {
        margin-top: 0.375rem;
    }
}

/* ── Small Mobile (≤480px) ── */
@media (max-width: 480px) {
    :root {
        --game-stage-width: min(100%, 100vw - 1rem);
        --pet-size: 40px;
        --pet-half: 20px;
        --dock-gap: 5px;
        --dock-padding: 7px;
        --dock-border: 2.5px;
        --queue-step: 36px;
        --path-block-radius: 30px;
        --btn-size: 34px;
        --btn-radius-squircle: 10px;
        --game-panel-gap: 0.75rem;
        --queue-treat-size: 2rem;
        --conveyor-min-height: 2.5rem;
        --queue-peek-cup-size: 1.15rem;
        --chrome-border: 2px;
        --chrome-border-sm: 2px;
        --toolbar-padding-x: 0.5rem;
        --toolbar-padding-y: 0.4375rem;
        --body-padding-top: 3.5rem;
        --body-padding-x: 0.375rem;
        --body-padding-bottom: 0.5rem;
    }

    body.app {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .game-toolbar {
        gap: 0.375rem;
    }

    .toolbar-group {
        gap: 0.25rem;
    }

    .level-badge {
        padding: 0 0.625rem;
    }

    .level-text {
        font-size: 0.8125rem;
    }

    .toolbar-btn-icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    .conveyor {
        padding: 0.3125rem 0.5rem;
        border-radius: var(--ui-radius-pill);
    }

    .conveyor-fade {
        width: 1.75rem;
    }

    .conveyor.has-queue-more .conveyor-fade--right {
        width: 2.25rem;
    }

    .queue-container {
        height: 2rem;
        margin-left: 0.125rem;
    }

    .queue-peek {
        height: 1.625rem;
        left: calc(var(--queue-peek-offset, 1) * var(--queue-step) - 0.25rem);
    }

    .queue-peek-cup {
        margin-left: -0.5rem;
    }

    .queue-peek-dot {
        width: 0.3rem;
        height: 0.3rem;
    }

    .active-ring {
        inset: -4px;
    }

    .game-panel--board {
        border-radius: 18px;
    }

    .play-rug {
        border-radius: 16px;
    }

    .popup-overlay:not(.popup-overlay--start) {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .popup-overlay--start {
        padding: max(0.75rem, env(safe-area-inset-top, 0px))
            max(0.75rem, env(safe-area-inset-right, 0px))
            max(0.75rem, env(safe-area-inset-bottom, 0px))
            max(0.75rem, env(safe-area-inset-left, 0px));
        align-items: center;
        justify-content: center;
    }

    .popup-overlay:not(.popup-overlay--start) .popup-card {
        max-width: 100%;
        width: 100%;
        padding: 1rem 1rem 1.125rem;
        gap: 0.75rem;
        border-radius: 22px 22px 20px 20px;
    }

    .popup-overlay--start .popup-card {
        max-width: min(100%, 19rem);
        width: 100%;
        padding: 1rem 1rem 1.125rem;
        gap: 0.75rem;
        border-radius: 22px;
    }

    .popup-title {
        font-size: 1.375rem;
    }

    .popup-card--result .popup-emoji {
        font-size: 4rem;
        margin-bottom: 0.25rem;
    }

    .popup-card--result .popup-title {
        margin-bottom: 1rem;
    }

    .popup-logo__img {
        width: min(100%, 8.5rem);
    }

    .popup-level-card {
        width: 5rem;
        height: 5rem;
    }

    .popup-level-label {
        font-size: 0.6875rem;
    }

    .popup-level-num {
        font-size: 1.75rem;
    }

    .popup-btn {
        font-size: 0.9375rem;
        padding: 0.6875rem 0.75rem;
    }

    .popup-btn--home {
        min-width: 4.75rem;
    }

    .popup-actions {
        gap: 0.625rem;
    }

    .help-list {
        font-size: 0.8125rem;
    }

    .help-list li {
        padding-left: 1.2rem;
    }
}

/* ── Landscape Mobile (short landscape viewports; additive overrides) ── */
@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --body-padding-top: 3rem;
        --body-padding-x: 0.5rem;
        --body-padding-bottom: 0.375rem;
        --game-panel-gap: 0.625rem;
        --toolbar-padding-y: 0.375rem;
        --toolbar-padding-x: 0.625rem;
        --conveyor-min-height: 2.375rem;
    }

    body.app {
        justify-content: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .game-stage {
        margin-top: 0.125rem;
    }

    .game-play-area > .game-board {
        margin-top: calc(-0.85 * var(--game-panel-gap));
    }

    .popup-overlay {
        align-items: center;
        padding: 0.5rem 1rem;
    }

    .popup-card {
        max-width: min(28rem, 92vw);
        max-height: min(92vh, 100dvh - 1rem);
        overflow-y: auto;
        border-radius: 22px;
        padding: 1rem 1.25rem;
        gap: 0.625rem;
    }

    .popup-logo__img {
        width: min(100%, 7.5rem);
    }

    .popup-level-card {
        width: 4.5rem;
        height: 4.5rem;
    }

    .popup-level-num {
        font-size: 1.625rem;
    }

    .popup-card--result .popup-emoji {
        font-size: 3.5rem;
        margin-bottom: 0.125rem;
    }

    .popup-card--result .popup-title {
        margin-bottom: 0.75rem;
    }

    .popup-card--help .popup-title {
        font-size: 1.25rem;
    }

    .help-list {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .help-list li + li {
        margin-top: 0.25rem;
    }

    .popup-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
    }
}

/* Landscape + very narrow (phone held sideways) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 896px) {
    :root {
        --game-stage-width: min(72vw, 520px);
    }

    .game-board,
    .play-rug {
        width: min(var(--board-content-width), 72vw);
        min-height: min(var(--board-content-height), 42vh);
        height: min(var(--board-content-height), 42vh);
    }
}

/* Landscape + small width: compress toolbar row */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 640px) {
    :root {
        --btn-size: 32px;
        --game-stage-width: min(88vw, 480px);
    }

    .game-board,
    .play-rug {
        width: min(var(--board-content-width), 88vw);
        min-height: min(var(--board-content-height), 38vh);
        height: min(var(--board-content-height), 38vh);
    }

    .level-text {
        font-size: 0.75rem;
    }

    .level-badge {
        padding: 0 0.5rem;
    }
}