/* ========================================
   LOCAL FONT FACES (offline-safe)
   ======================================== */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/PressStart2P-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================
   SUSHI CONVEYOR BELT - STYLES
   Modern, Clean Design
   ======================================== */

:root {
    /* Color Palette */
    --bg-primary: #F5F0E1;
    --bg-dark: #5C3A1E;
    --accent: #E8B84B;
    --success: #7CB342;
    --ui-dark: #3B2816;
    --ui-light: #F5F0E1;
    --gold: #D4AF37;
    --error: #E53935;

    /* New theme variables */
    --wood-border: #5C3A1E;
    --cream: #F5F0E1;
    --cream-dark: #EDE5D0;
    --text-primary: #3B2816;
    --text-secondary: #7A6348;
    --teal-ornament: #5B8C7A;
    --panel-shadow: rgba(91, 58, 30, 0.2);

    /* Sushi Colors */
    --salmon: #FA8072;
    --tuna: #CD5C5C;
    --tamago: #FFD700;
    --cucumber: #228B22;

    /* Spacing */
    --hud-height: 44px;
    --bento-height: 180px;

    /* iOS Safe Areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* Kill long-press text/image selection and the iOS copy/define callout
       across the whole game. No text inputs exist (only range sliders), so
       a global rule is safe. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

img {
    /* Prevent long-press "Save Image" / drag-to-copy on iOS Safari + WebView */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

body {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(135deg, #2D2D2D 0%, #1a1a1a 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
    image-rendering: pixelated;
}

/* ========================================
   UI SPRITE SUPPORT CLASSES
   ======================================== */

/* Applied when element uses sprite background instead of CSS */
.ui-sprite-rendered {
    border: none !important;
    box-shadow: none !important;
}

/* Click animation for sprite buttons/tiles */
@keyframes ui-sprite-click {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes ui-sprite-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.ui-sprite-clicking {
    animation: ui-sprite-click 0.15s ease-out;
}

.ui-sprite-selected {
    animation: ui-sprite-pop 0.2s ease-out;
}

/* Ensure content stays above sprite background */
.ui-sprite-rendered > * {
    position: relative;
    z-index: 1;
}

/* Pixelated rendering for sprite elements */
.ui-sprite,
.ui-sprite-rendered {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ========================================
   GAME CONTAINER - Fill Viewport
   The canvas + HUD adapt to any aspect ratio (foreground sprite is clamped
   to 55% of height in getForegroundDrawRect; globalScale is width-based).
   Filling the viewport on all devices avoids brown letterbox bands on
   non-16:9 displays like iPad landscape (4:3) and iPad mini (~3:2).
   ======================================== */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: var(--bg-primary);
    overflow: hidden;
    border: none;
}

/* ========================================
   HUD (Heads Up Display)
   ======================================== */

#hud {
    position: absolute;
    top: var(--safe-top);
    left: 0;
    right: 0;
    height: var(--hud-height);
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    z-index: 100;
    pointer-events: none;
}

#hud > div {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: auto;
}

.hud-label {
    display: none;
}

#score, #timer, #combo {
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-light);
}

#timer {
    color: var(--ui-light);
}

#combo {
    color: var(--gold);
}

/* ========================================
   GAME CANVAS
   ======================================== */

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

/* ========================================
   MISSED ORDERS INDICATOR
   ======================================== */

#missed-orders {
    position: absolute;
    top: calc(var(--safe-top) + 4px);
    right: calc(60px + var(--safe-right));
    display: flex;
    gap: 6px;
    z-index: 101;
}

.miss-dot {
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: rgba(229, 57, 53, 0.2);
    border: 2px solid rgba(229, 57, 53, 0.4);
    transition: all 0.3s ease;
}

.miss-dot.active {
    background: var(--error);
    border-color: var(--error);
    box-shadow: 0 0 10px var(--error);
}

/* HUD miss meter (built dynamically per level) */
#miss-meter {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
    border-radius: 20px;
    pointer-events: none;
}

#miss-meter:empty,
#miss-meter.hidden,
.zen-mode #miss-meter,
.infinite-mode #miss-meter {
    display: none;
}

#miss-meter.danger {
    animation: miss-meter-pulse 0.8s ease-in-out infinite;
}

@keyframes miss-meter-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(229, 57, 53, 0); }
    50% { box-shadow: 0 0 14px var(--error); }
}

/* ========================================
   OVERLAYS (Start, Game Over)
   ======================================== */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 240, 225, 0.97);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    backdrop-filter: blur(8px);
}

.overlay.hidden {
    display: none;
}

/* Animated overlay entrance */
.overlay:not(.hidden) {
    animation: overlayFadeIn 0.25s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.overlay-content {
    text-align: center;
    padding: 16px 20px;
    padding-bottom: calc(16px + var(--safe-bottom));
    animation: fadeInUp 0.5s ease;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overlay h1 {
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.overlay h2 {
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.overlay p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.5;
}

.overlay button {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    color: var(--text-primary);
    border: 4px solid var(--wood-border);
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    border-radius: 0;
    cursor: pointer;
    transition: none;
    box-shadow: 4px 4px 0 rgba(91, 58, 30, 0.4);
    position: relative;
}

.overlay button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(91, 58, 30, 0.4);
}

.overlay button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* iOS Touch Target Minimum */
.overlay button, button {
    min-width: 48px;
    min-height: 48px;
}

/* ========================================
   TITLE SCREEN
   ======================================== */

/* ========================================
   START MENU — STORYBOOK REDESIGN
   (design_handoff_start_and_popup)
   ======================================== */

/* Use :not(.hidden) so this rule does NOT win over `.overlay.hidden`'s
   display:none (which has lower specificity than #id+class). Without
   this guard the start screen stays painted on top of the canvas
   forever and clicking PLAY appears to "go nowhere". */
#start-screen.title-screen-v2:not(.hidden) {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #86C7E8; /* sky fallback */
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block; /* override .overlay flex centering */
}

.title-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
    image-rendering: pixelated;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.title-vignette {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 60%, transparent 35%, rgba(42,30,63,0.18) 100%);
}

/* Drifting cherry-blossom petals (CSS-only pixel petals) */
.title-petal {
    position: absolute;
    width: 8px; height: 8px;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(#FFB7D5, #FFB7D5) top    / 4px 2px no-repeat,
        linear-gradient(#FFB7D5, #FFB7D5) bottom / 4px 2px no-repeat,
        linear-gradient(#FF8FBE, #FF8FBE) center / 8px 4px no-repeat;
    background-color: transparent;
    image-rendering: pixelated;
    animation: petalDrift 6s ease-in-out infinite;
}

.title-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    z-index: 6;
}

.title-logo {
    width: 200px; height: 200px;
    image-rendering: pixelated;
    user-select: none;
    display: block;
    filter: drop-shadow(0 6px 0 rgba(42,30,63,0.35));
    animation: logoBob 3.2s ease-in-out infinite;
}

/* PLAY button — 3-state pixel sprite (button_sprite_3state.png).
   Sprite is 46x48: up y=0..15, hover y=17..31, down y=34..47.
   Rendered at scale 4 → 184 wide; reserved height = 64 (up state).
   Press settles into the surface by dropping the visible art down
   by (up.h - cur.h) * scale when shorter. */
/* Use a tag+class compound selector so this beats the global
   `.overlay button` gold-gradient styling (which has higher specificity
   than a bare class selector). */
button.sprite-play-btn {
    all: unset;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 184px;
    height: 64px;
    cursor: pointer;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    min-height: 0;
}
button.sprite-play-btn:hover,
button.sprite-play-btn:active {
    transform: none;
    box-shadow: none;
    background: transparent;
}

.sprite-play-art {
    position: absolute;
    left: 0; top: 0;
    width: 184px; height: 64px;
    background-image: url('sprites/UI/buttons/button_sprite_3state.png');
    background-repeat: no-repeat;
    background-size: 184px 192px;   /* 46*4 × 48*4 */
    background-position: 0 0;        /* up slice (y=0, h=16) */
    image-rendering: pixelated;
    pointer-events: none;
}

.sprite-play-btn:hover .sprite-play-art {
    /* hover slice y=17..31 (15px tall), drop visible art by (16-15)*4 = 4px */
    top: 4px;
    height: 60px;
    background-position: 0 -68px;
}

.sprite-play-btn:active .sprite-play-art {
    /* down slice y=34..47 (14px tall), drop by (16-14)*4 = 8px */
    top: 8px;
    height: 56px;
    background-position: 0 -136px;
}

.sprite-play-label {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #FFE0EA;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 #B73363;
    pointer-events: none;
}

.sprite-play-btn:hover .sprite-play-label { top: 4px; height: 60px; }
.sprite-play-btn:active .sprite-play-label { top: 8px; height: 56px; }

/* Triangle "▶" play glyph rendered via border trick */
.sprite-play-tri {
    display: inline-block;
    width: 0; height: 0;
    border-left: 14px solid #FFE0EA;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    filter: drop-shadow(0 2px 0 #B73363);
}

.title-version {
    position: absolute;
    bottom: calc(8px + var(--safe-bottom, 0px));
    right: 12px;
    z-index: 7;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #2A1E3F;
    user-select: none;
    pointer-events: none;
}

@keyframes logoBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-4px) rotate(0.4deg); }
}
@keyframes petalDrift {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
    50%  { transform: translate(-30px, 80px) rotate(180deg); opacity: 1; }
    100% { transform: translate(20px, 200px) rotate(360deg); opacity: 0; }
}

/* Final Score Display */
#final-score-container,
#high-score-container {
    margin-bottom: 16px;
}

.final-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

#final-score {
    font-size: 56px;
    font-weight: 700;
    color: var(--gold);
}

#high-score {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-secondary);
}

#orders-completed {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 14px;
}

#orders-count {
    font-weight: 700;
    color: var(--success);
}

/* Compact game-over layout for short landscape screens */
@media (max-height: 500px) {
    #game-over-screen .overlay-content {
        padding: 8px 16px;
        padding-bottom: calc(8px + var(--safe-bottom));
    }
    #game-over-screen h2 {
        font-size: 16px;
        margin-bottom: 4px;
    }
    #final-score-container,
    #high-score-container {
        margin-bottom: 6px;
    }
    #final-score {
        font-size: 36px;
    }
    #high-score {
        font-size: 16px;
    }
    #orders-completed {
        margin-bottom: 10px;
        font-size: 12px;
    }
    .continue-options {
        margin-bottom: 6px;
        padding: 8px;
    }
    .continue-label {
        font-size: 11px;
        margin-bottom: 4px;
    }
    #game-over-screen .overlay button {
        padding: 8px 16px;
        font-size: 10px;
    }
    #game-over-screen .button-group {
        gap: 8px;
    }
}

/* ========================================
   TUTORIAL HINTS
   ======================================== */

#tutorial-hint {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 45, 45, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 0;
    font-size: 14px;
    z-index: 150;
    animation: pulse 2s infinite;
    pointer-events: none;
}

#tutorial-hint.hidden {
    display: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#hint-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.pop {
    animation: pop 0.3s ease;
}

.shake {
    animation: shake 0.3s ease;
}

/* ========================================
   SPEED UP INDICATOR  
   ======================================== */

#speed-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--accent) 0%, #ff6b5b 100%);
    color: white;
    padding: 16px 32px;
    border-radius: 0;
    font-size: 20px;
    font-weight: 700;
    z-index: 160;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#speed-indicator.visible {
    opacity: 1;
    animation: popIn 0.5s ease;
}

@keyframes popIn {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ========================================
   CUSTOMER PROGRESS HUD (Top Center)
   ======================================== */

/* In-level customer progress bar — restyled to match the storybook
   level-popup design (cream pill, brown ink, pink fill, Fredoka type).
   Variables come from the :root block at line ~6518. The timer chip is
   nested inside this pill (right side) so the bar can sit at the very
   top without colliding with the centered TIME element. */
/* HUD pill — pixel-art belt style: ink shell, cream surface, stepped pixel
   corners, hard offset drop-shadow (matches the progress bar + map header). */
#customer-progress-hud {
    position: absolute;
    top: calc(var(--safe-top) + 8px);   /* box-align with the pause button + small top padding */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: #2A1E3F;        /* ink shell → the pixel border */
    image-rendering: pixelated;
    z-index: 101;
    --hud-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
    clip-path: var(--hud-clip);
    -webkit-clip-path: var(--hud-clip);
    filter: drop-shadow(0 3px 0 #2A1E3F);
}
/* Cream surface inset by the ink shell */
#customer-progress-hud::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    background: #FFF8E5;       /* lp-creamHi */
    clip-path: var(--hud-clip);
    -webkit-clip-path: var(--hud-clip);
}
/* Contents (count · bar · goal · timer) sit above the surface */
#customer-progress-hud > * { position: relative; z-index: 1; }

/* Timer chip nested inside the cream pill — strip the default dark HUD
   bubble look and adopt the storybook ink-on-cream typography. */
#customer-progress-hud #timer-display {
    background: transparent;
    border: none;
    border-left: 2px solid #3A2417;   /* divider from the goal text */
    border-radius: 0;
    padding: 0 0 0 10px;
    margin: 0;
    box-shadow: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #3A2417;
    text-shadow: none;
    min-width: 44px;
    text-align: center;
}
#customer-progress-hud #timer-display .hud-label { display: none; }
/* Override the global #timer { color: var(--ui-light) } so the countdown
   reads as dark ink against the cream pill background. */
#customer-progress-hud #timer-display #timer { color: #3A2417; }
#customer-progress-hud #timer-display.timer-yellow #timer { color: #C97A0E; }
#customer-progress-hud #timer-display.timer-orange #timer { color: #D9622A; }
#customer-progress-hud #timer-display.timer-red    #timer { color: #C9333A; animation: timerPulse 0.6s ease-in-out infinite; }
@keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* === Tablet (iPad) HUD scaling ==============================================
   The DOM HUD is tuned in fixed px for phones and reads small on iPad's larger
   display. game.js adds `.tablet` to #game-container on tablet-proportioned
   screens (see window.isTabletScreen). We scale the top-of-screen UI up around
   anchors that keep each piece on-screen: the progress pill grows from its
   top-center anchor; the pause button and corner meters from their own edge.
   --hud-tablet-scale is the single tuning knob. */
#game-container.tablet { --hud-tablet-scale: 1.35; }
#game-container.tablet #customer-progress-hud {
    transform: translateX(-50%) scale(var(--hud-tablet-scale));
    transform-origin: top center;
}
#game-container.tablet #pause-button {
    transform: translateY(-50%) scale(var(--hud-tablet-scale));
    transform-origin: center right;
}
#game-container.tablet #pause-button:active {
    transform: translateY(-50%) translateY(3px) scale(var(--hud-tablet-scale));
}
#game-container.tablet #hud > div,
#game-container.tablet #miss-meter {
    transform: scale(var(--hud-tablet-scale));
    transform-origin: top left;
}

#customers-remaining {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #3A2417;
    text-shadow: none;
    min-width: 18px;
    text-align: right;
}

/* Progress bar — pixel-art conveyor-belt look (matches the loading bar + the
   map-header buttons): ink shell, dark surface, 2-tone pink fill, stepped
   pixel corners, hard offset drop-shadow. */
.customer-bar-wrapper {
    position: relative;
    width: 180px;
    height: 18px;
    background: #2A1E3F;            /* ink shell → the pixel border */
    image-rendering: pixelated;
    --bar-clip: polygon(
        4px 0, calc(100% - 4px) 0,
        calc(100% - 4px) 2px, calc(100% - 2px) 2px,
        calc(100% - 2px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px),
        calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
        calc(100% - 4px) 100%, 4px 100%,
        4px calc(100% - 2px), 2px calc(100% - 2px),
        2px calc(100% - 4px), 0 calc(100% - 4px),
        0 4px, 2px 4px,
        2px 2px, 4px 2px
    );
    clip-path: var(--bar-clip);
    -webkit-clip-path: var(--bar-clip);
    filter: drop-shadow(0 3px 0 #2A1E3F);
}
/* Dark belt surface, inset by the ink border; clips the fill to its shape. */
.customer-bar-surface {
    position: absolute;
    inset: 3px;
    overflow: hidden;
    background: #463AA8;
    clip-path: var(--bar-clip);
    -webkit-clip-path: var(--bar-clip);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.30), inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}

/* Hide the legacy sprite — fill is now pure CSS. */
.customer-bar-bg { display: none; }

#customer-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    max-width: 100%;
    /* 2-tone pink fill like the loading-bar's "loaded" track */
    background: linear-gradient(180deg, #FD79A8 0 50%, #C94A7B 50% 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.40);
    transition: width 0.3s ease;
}

#customer-bar-fill.near-complete {
    animation: progressPulse 0.8s ease-in-out infinite;
}

#customer-bar-fill.complete {
    background: linear-gradient(180deg, #FFD566 0 50%, #E8A640 50% 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45);
}

#coin-goal-display {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #3A2417;
    text-shadow: none;
    min-width: 56px;
}

/* Pulse animation when close to goal */
@keyframes progressPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* Customer count animation */
@keyframes customerPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: var(--gold); }
    100% { transform: scale(1); }
}

#customers-remaining.pop {
    animation: customerPop 0.3s ease;
}

/* ========================================
   LEVEL SELECT SCREEN - TWO-PANEL POPUP
   ======================================== */

/* Backdrop: darkens & blurs the map behind */
.ls-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(91, 58, 30, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    padding: 16px;
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: calc(16px + var(--safe-bottom));
}

.ls-backdrop.hidden {
    display: none;
}

.ls-backdrop:not(.hidden) {
    animation: overlayFadeIn 0.25s ease;
}

/* Popup container - just holds the two bordered panels */
.level-select-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.level-select-popup::after {
    display: none;
}

/* Close X button - button_new.png 9-slice */
.ls-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    background: #804E37;
    border: 6px solid transparent;
    border-image: url('sprites/new_UI_test/button_new.png') 4 fill / 6px / 0 stretch;
    color: var(--cream);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.1s, filter 0.1s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-close-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Restaurant banner - button_new.png 9-slice */
.ls-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    padding-right: 48px;
    margin: 4px 6px 0;
    background: #804E37;
    border: 6px solid transparent;
    border-image: url('sprites/new_UI_test/button_new.png') 4 fill / 6px / 0 stretch;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ls-banner-icon {
    font-size: 28px;
}

.ls-banner h2 {
    font-size: 14px;
    color: var(--cream);
    margin: 0;
    flex: 1;
}

.ls-currency {
    display: flex;
    gap: 6px;
    margin: 0;
    color: var(--cream);
}

.ls-currency .currency-item {
    border: 4px solid transparent;
    border-image: url('sprites/new_UI_test/button_new.png') 4 fill / 4px / 0 stretch;
    background: #804E37;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--cream);
}

/* Two-panel body */
.ls-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 6px;
    padding: 0 6px 6px;
}

/* LEFT PANEL - 9-slice rounded border */
.ls-left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cream);
    border: 14px solid transparent;
    border-image: url('sprites/new_UI_test/rounded_border.png') 14 / 14px / 0 stretch;
    border-radius: 8px;
}

/* Switchable left panel content areas */
.ls-left-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ls-left-content.active {
    display: flex;
    flex-direction: column;
}

.ls-left-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}


/* Left panel item grid (upgrades & menu) */
.ls-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
}

.ls-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 4px;
    /* Keep every menu tile square regardless of grid column width. */
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    /* Grid items default to min-width:auto, which refuses to shrink below the
       card's content and overflows the panel (right column clipped). Allow the
       columns to shrink to fit the frame width. */
    min-width: 0;
    border: 9px solid transparent;
    border-image: url('sprites/UI/ui_item_bg_paper.png') 3 fill / 9px / 0 stretch;
    border-radius: 0;
    background: transparent;
    image-rendering: pixelated;
    cursor: pointer;
    transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
    text-align: center;
}

/* Hover scale only on real mice/trackpads. On touch devices :hover
   "sticks" after a tap, leaving a card at scale(1.03) which smears the
   8px Press Start 2P labels into wrong-looking glyphs (e.g. "Soup
   Kettle" → "Sour Bettle"). */
@media (hover: hover) and (pointer: fine) {
    .ls-grid-card:hover {
        transform: scale(1.03);
        filter: brightness(1.05);
    }
}

.ls-grid-card:active {
    transform: scale(0.97);
}

.ls-grid-card.selected {
    /* border-image overrides border-color, so signal selection via an
       outline + glow rather than re-coloring the paper frame. */
    outline: 2px solid #4A90D9;
    outline-offset: -2px;
    box-shadow: 0 0 8px rgba(74, 144, 217, 0.5);
    /* Force transform off on the selected card even if the device's
       sticky-hover would otherwise scale it — any non-integer scale
       corrupts the pixel-font label. */
    transform: none;
}
.ls-grid-card.selected:hover { transform: none; }

.ls-grid-card.maxed {
    outline: 2px solid var(--success);
    outline-offset: -2px;
}

/* Locked menu item — silhouette of the real sprite so players can recognize
   the shape but the item still reads as "mystery to unlock". */
.ls-grid-card.locked {
    opacity: 1;
}
.ls-grid-card.locked .ls-grid-card-icon img,
.ls-grid-card.locked .ls-grid-card-icon .sushi-sprite-frame > div {
    filter: brightness(0) opacity(0.85);
}
/* White "?" centered over the darkened silhouette so locked items read as a
   mystery to unlock. Dark outline keeps it legible on any sprite shape. */
.ls-grid-card.locked .ls-grid-card-icon {
    position: relative;
}
.ls-grid-card.locked .ls-grid-card-icon::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    text-shadow: 1px 1px 0 #3A2417, -1px 1px 0 #3A2417, 1px -1px 0 #3A2417, -1px -1px 0 #3A2417;
    pointer-events: none;
}
.ls-grid-card.locked .ls-grid-card-name {
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
}

.ls-grid-card-icon {
    font-size: 22px;
    line-height: 1;
}

.ls-grid-card-icon img {
    width: 32px;
    height: 32px;
    /* contain so non-square icons (e.g. the stacked soup bowls) keep their
       aspect ratio within the 32×32 box instead of being squished. */
    object-fit: contain;
    image-rendering: pixelated;
}

/* Spritesheet frame wrapper — used by sushi types that share an atlas
   (e.g. the maki rolls). The inner div carries the bg-image + scaled
   transform; the outer div reserves the post-transform footprint. */
.sushi-sprite-frame {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    image-rendering: pixelated;
}
.sushi-sprite-frame > div {
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transform-origin: top left;
}

.ls-grid-card-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ls-grid-card-dots {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Same pill look as the detail panel, scaled down to fit the square tile. */
.ls-grid-card-dots .upgrade-dot {
    width: 12px;
    height: 6px;
    border-radius: 2.5px;
    border: 1px solid rgb(58, 36, 23);
    background: transparent;
}

.ls-grid-card-dots .upgrade-dot.filled {
    background: rgb(127, 201, 94);
    border-color: rgb(58, 36, 23);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ls-grid-card-dots .upgrade-dot.filled.maxed-dot {
    background: rgb(127, 201, 94);
    border-color: rgb(58, 36, 23);
}

/* Right panel detail layout — vertical card with tight rhythm. */
.ls-item-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
    width: 100%;
    box-sizing: border-box;
}

.ls-item-detail h3 {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-ink, #3A2417);
    text-shadow: 0 1.5px 0 rgba(58, 36, 23, 0.15);
    margin: 0 0 2px;
    text-align: center;
    line-height: 1;
}

.ls-item-detail-icon {
    font-size: 40px;
    line-height: 1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 36, 23, 0.06);
    border: 2px solid rgba(58, 36, 23, 0.3);
    border-radius: 8px;
    box-shadow: 0 2px 0 rgba(58, 36, 23, 0.2);
}

.ls-item-detail-icon img {
    width: 48px;
    height: 48px;
    /* contain so non-square icons (e.g. the stacked soup bowls) keep aspect. */
    object-fit: contain;
    image-rendering: pixelated;
}

/* Detail-panel silhouette for unowned sushi — matches the grid-card style. */
.ls-item-detail-icon.locked img,
.ls-item-detail-icon.locked .sushi-sprite-frame > div {
    filter: brightness(0) opacity(0.55);
}

.ls-item-detail-level {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--lp-ink, #3A2417);
    letter-spacing: 0.5px;
    margin-top: -2px;
}

.ls-item-detail-dots {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.ls-item-detail-desc {
    font-family: 'Fredoka', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(58, 36, 23, 0.78);
    text-align: center;
    line-height: 1.35;
    max-width: 90%;
}

.ls-item-detail-stat {
    font-family: 'Fredoka', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-ink, #3A2417);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Preview chip — "2 slots → 3 slots". Soft paper-card backdrop so the
   upgrade value reads as a distinct callout instead of plain text. */
.ls-detail-upgrade-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--lp-ink, #3A2417);
    background: rgba(255, 248, 229, 0.7);
    border: 2px solid rgba(58, 36, 23, 0.35);
    border-radius: 14px;
    box-shadow: 0 2px 0 rgba(58, 36, 23, 0.18);
    padding: 4px 12px;
    margin-top: 2px;
}

.ls-detail-upgrade-preview .preview-arrow {
    color: rgba(58, 36, 23, 0.45);
    font-weight: 400;
}

.ls-detail-upgrade-preview .preview-next {
    color: #2E7A3A;
    font-weight: 700;
}

/* Green pixel-sprite buy button — uses button_green_sprite_3state.png
   (46×48 source: 3 × 16-px state rows). To keep the pixel-art pill caps
   crisp we render at integer 3× scale (138×48 art) and let the button
   sit at a fixed width centered in the column rather than stretching to
   100%. The three states share one sprite via vertical background-position. */
.ls-upgrade-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 138px;
    /* A global `button { min-height: 48px }` touch-target rule forces this
       button to 48px regardless of `height`, so the sprite MUST be sized for a
       48px-tall box. Source art is 46×48 = 3 stacked states of 46×16. At a
       clean integer 3× scale that's 138×144 (each state exactly 48px tall), so
       background-size height is 144 and the state offsets are 0 / -48 / -96.
       Sizing it any shorter let the next state bleed in (white seam + ghost
       pill below the button). */
    height: 48px;
    padding: 0 10px 5px;
    margin: 4px auto 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-image: url('sprites/UI/buttons/button_green_sprite_3state.png');
    background-repeat: no-repeat;
    background-size: 138px 144px;
    background-position: 0 0;
    image-rendering: pixelated;
    color: #FFFFFF;
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-shadow: 0 1.5px 0 #1F5C2A;
    cursor: pointer;
    transition: background-position 0.05s, padding 0.05s;
    box-sizing: border-box;
    overflow: hidden;
}

.ls-upgrade-btn:hover:not(:disabled) {
    background-position: 0 -48px;
    padding-top: 2px;
    padding-bottom: 3px;
}

.ls-upgrade-btn:active:not(:disabled) {
    background-position: 0 -96px;
    padding-top: 5px;
    padding-bottom: 0;
}

.ls-upgrade-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.45);
}

.ls-upgrade-btn img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.ls-ad-upgrade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 158px;
    padding: 7px 10px;
    margin: 0 auto;
    border: 2px solid var(--lp-ink, #3A2417);
    border-radius: 14px;
    background: #4A90D9;
    box-shadow: 0 2px 0 var(--lp-ink, #3A2417);
    color: #fff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
}

.ls-ad-upgrade-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.ls-ad-upgrade-btn:active {
    transform: scale(0.97);
}

.ls-detail-max-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--success);
    text-align: center;
    padding: 8px;
    border: none;
    border-radius: 0;
    background: none;
}

.ls-detail-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Left panel bottom nav tabs */
.ls-left-tabs {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    border: none;
    flex-shrink: 0;
}

/* Nav tabs - button_new.png 9-slice */
.ls-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    background: #804E37;
    border: 6px solid transparent;
    border-image: url('sprites/new_UI_test/button_new.png') 4 fill / 6px / 0 stretch;
    color: var(--cream);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    cursor: pointer;
    transition: filter 0.15s;
    padding: 2px 4px;
}

.ls-nav-tab:hover {
    filter: brightness(1.15);
}

.ls-nav-tab.active {
    filter: brightness(1.3);
}

.ls-nav-tab:active {
    transform: scale(0.98);
}

.ls-nav-tab span {
    font-size: 14px;
}

.ls-nav-tab span img.currency-icon {
    width: 32px;
    height: 32px;
    filter: drop-shadow(2px 3px 1px rgba(0,0,0,0.3));
}

/* RIGHT PANEL - 9-slice rounded border */
.ls-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--cream);
    border: 14px solid transparent;
    border-image: url('sprites/new_UI_test/rounded_border.png') 14 / 14px / 0 stretch;
    border-radius: 8px;
}

.ls-right-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    animation: tabFadeIn 0.2s ease;
}

.ls-right-content.active {
    display: block;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Level detail placeholder */
.ls-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(59, 40, 22, 0.3);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    padding: 0 8px;
}

/* Level detail card (when a level is selected) */
.ls-level-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ls-level-detail h3 {
    font-size: 16px;
    color: var(--gold);
    margin: 0;
    text-align: center;
}

.ls-detail-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
}

.ls-detail-stars .star-earned { color: #FFD700; }
.ls-detail-stars .star-empty { color: rgba(59, 40, 22, 0.3); }

.ls-detail-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 10px 0;
}

.ls-detail-section h4 {
    font-size: 10px;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ls-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ls-detail-row img {
    width: 16px;
    height: 16px;
}

.ls-play-btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 50%, #2E7D32 100%);
    border: 3px solid #1B5E20;
    border-radius: 10px;
    cursor: pointer;
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 0 #1B5E20, 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    margin-top: auto;
}

.ls-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1B5E20, 0 8px 16px rgba(0, 0, 0, 0.3);
}

.ls-play-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1B5E20;
}

.ls-play-btn:disabled {
    background: #555;
    border-color: #333;
    box-shadow: none;
    cursor: default;
    opacity: 0.5;
}

/* Boost tray in level detail */
.ls-boost-tray {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ls-boost-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 150, 255, 0.2);
    border: 2px solid rgba(0, 150, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.ls-boost-item:hover {
    background: rgba(0, 150, 255, 0.3);
}

.ls-boost-item .boost-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--gold);
    color: #1a1a1a;
    font-size: 8px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: stack panels vertically */
@media (max-width: 600px) {
    .ls-backdrop {
        padding: 6px;
        padding-top: calc(40px + var(--safe-top));
        padding-bottom: calc(6px + var(--safe-bottom));
    }

    .level-select-popup {
        height: calc(100% - 10px);
        max-height: calc(100% - 10px);
        margin-top: 0;
    }

    .ls-banner {
        padding: 6px 10px;
        padding-right: 36px;
        gap: 6px;
    }

    .ls-banner-icon {
        font-size: 18px;
    }

    .ls-banner h2 {
        font-size: 10px;
    }

    .ls-currency {
        gap: 6px;
    }

    .ls-body {
        flex-direction: column;
    }

    .ls-left-panel {
        max-height: 55%;
        border-width: 12px;
        border-image-width: 12px;
    }

    .ls-right-panel {
        border-width: 12px;
        border-image-width: 12px;
    }

    .ls-left-scroll {
        padding: 6px;
    }

    .ls-left-tabs {
        padding: 0 4px 12px 4px;
        gap: 2px;
    }

    .ls-nav-tab {
        min-height: 22px;
        padding: 2px 6px 2px 4px;
        font-size: 8px;
        gap: 4px;
    }

    .ls-nav-tab span {
        font-size: 10px;
    }

    .ls-nav-tab span img.currency-icon {
        width: 24px;
        height: 24px;
    }

    .ls-right-panel {
        flex: 1;
        min-height: 160px;
    }

    .ls-right-content {
        padding: 8px 14px 14px 8px;
    }

    .ls-level-detail h3 {
        font-size: 12px;
    }

    .ls-detail-stars {
        font-size: 18px;
        gap: 6px;
    }

    .ls-detail-section {
        padding: 6px 0;
    }

    .ls-detail-section h4 {
        font-size: 8px;
        margin: 0 0 4px 0;
    }

    .ls-detail-row {
        font-size: 8px;
        gap: 6px;
    }

    .ls-play-btn {
        padding: 10px;
        font-size: 12px;
        border-width: 2px;
        border-radius: 6px;
    }

    .ls-close-btn {
        width: 28px;
        height: 28px;
        top: -14px;
        right: -6px;
    }

    .currency-item {
        padding: 3px 6px;
        font-size: 10px;
        gap: 3px;
    }

    .currency-icon {
        width: 14px;
        height: 14px;
    }
}

/* Upgrades Panel */
#ls-right-upgrades {
    border: none;
    padding: 0;
    background: transparent;
    flex-direction: column;
    overflow: hidden;
}

#ls-right-upgrades.active {
    display: flex;
}

/* Upgrade Sub-tabs */
.upgrade-tab-bar {
    display: flex;
    flex-shrink: 0;
    padding: 4px 6px;
    gap: 4px;
    background: var(--cream-dark);
    border-bottom: 1px solid rgba(92, 58, 30, 0.2);
}

.upgrade-tab {
    flex: 1;
    padding: 4px 8px;
    background: var(--cream-dark);
    border: none;
    color: var(--text-secondary);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
}

.upgrade-tab:hover {
    filter: brightness(0.95);
}

.upgrade-tab.active {
    background: var(--cream);
    color: var(--text-primary);
}

.upgrade-tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.upgrade-tab-content.active {
    display: flex;
    flex-direction: column;
}


/* Upgrades scroll area */
.upgrades-scroll {
    padding: 0;
}

.upgrade-section {
    margin-bottom: 16px;
}

.upgrade-section-title {
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--wood-border);
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Enhanced Upgrade Cards */
.upgrade-card {
    background: var(--cream-dark);
    border: 2px solid rgba(92, 58, 30, 0.25);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.upgrade-card:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--panel-shadow);
}

.upgrade-card:active {
    transform: scale(0.97);
}

.upgrade-card.maxed {
    border-color: var(--success);
    background: rgba(124, 179, 66, 0.1);
}

.upgrade-card.cannot-afford {
    opacity: 0.5;
}

.upgrade-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.upgrade-card-icon {
    font-size: 20px;
}

.upgrade-card-name {
    font-size: 9px;
    color: var(--text-primary);
    font-weight: 700;
}

.upgrade-card-level {
    font-size: 8px;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Level dots indicator */
.upgrade-level-dots {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.upgrade-dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(59, 40, 22, 0.3);
    background: transparent;
}

.upgrade-dot.filled {
    background: var(--gold);
    border-color: var(--gold);
}

.upgrade-dot.filled.maxed-dot {
    background: var(--success);
    border-color: var(--success);
}

/* Upgrades tab (level-select popup) — detail panel on the right, shown when an
   upgrade is selected. Pill-shaped level dots with a chunky dark border + glossy
   inset highlight, per the design spec (22×10). */
.ls-item-detail-dots .upgrade-dot {
    width: 22px;
    height: 10px;
    border-radius: 4px;
    border: 1.5px solid rgb(58, 36, 23);
    background: transparent;
}

.ls-item-detail-dots .upgrade-dot.filled {
    background: rgb(127, 201, 94);
    border-color: rgb(58, 36, 23);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.ls-item-detail-dots .upgrade-dot.filled.maxed-dot {
    background: rgb(127, 201, 94);
    border-color: rgb(58, 36, 23);
}

.upgrade-card-desc {
    font-size: 8px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Benefit preview */
.upgrade-card-preview {
    font-size: 8px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.upgrade-card-preview .preview-arrow {
    color: var(--success);
    font-weight: 700;
}

.upgrade-card-preview .preview-next {
    color: var(--success);
    font-weight: 700;
}

/* Cost button */
.upgrade-card-cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    font-size: 9px;
    color: #1a1a1a;
    font-weight: 700;
    background: var(--success);
    padding: 4px 8px;
    border: 2px solid #000;
    text-align: center;
}

.upgrade-card.cannot-afford .upgrade-card-cost {
    background: #555;
    color: rgba(255, 255, 255, 0.4);
}

.upgrade-card-cost img {
    width: 12px;
    height: 12px;
}

.upgrade-card-cost.maxed-text {
    background: var(--gold);
    color: #1a1a1a;
}

/* Purchase flash animation */
@keyframes upgradeFlash {
    0% { background: rgba(124, 179, 66, 0.5); }
    100% { background: var(--cream-dark); }
}

.upgrade-card.just-purchased {
    animation: upgradeFlash 0.4s ease;
}

/* Aesthetic option cards */
.aesthetic-card {
    background: var(--cream-dark);
    border: 2px solid rgba(92, 58, 30, 0.25);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    min-height: 48px;
}

.aesthetic-card:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-1px);
}

.aesthetic-card:active {
    transform: scale(0.97);
}

.aesthetic-card.owned {
    border-color: var(--success);
    background: rgba(124, 179, 66, 0.1);
}

.aesthetic-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    animation: activeGlow 2s ease-in-out infinite;
}

@keyframes activeGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.7); }
}

.aesthetic-card.cannot-afford {
    opacity: 0.5;
}

.aesthetic-swatch {
    width: 32px;
    height: 32px;
    border: 2px solid var(--wood-border);
    flex-shrink: 0;
}

.aesthetic-name {
    font-size: 9px;
    color: var(--text-primary);
    flex: 1;
}

.aesthetic-cost {
    font-size: 9px;
    color: var(--gold);
}

.aesthetic-owned {
    font-size: 9px;
    color: var(--success);
}

.aesthetic-equipped {
    font-size: 8px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Decorate tab (shop) — stacked cosmetic cards */
#decorate-items .aesthetic-card {
    margin-bottom: 6px;
}

/* Prestige Badge */
.prestige-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--wood-border);
    margin-bottom: 12px;
}

.prestige-title {
    font-size: 10px;
    color: var(--gold);
    font-weight: 700;
    white-space: nowrap;
}

.prestige-bar {
    flex: 1;
    height: 8px;
    background: rgba(59, 40, 22, 0.1);
    border: 1px solid rgba(59, 40, 22, 0.2);
    overflow: hidden;
}

.prestige-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #FFD700);
    transition: width 0.5s ease;
}

/* Mobile: single column upgrades */
@media (max-width: 600px) {
    .upgrade-grid {
        grid-template-columns: 1fr;
    }
}

.scrollable {
    max-height: calc(90vh - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    padding: 12px;
    padding-bottom: calc(12px + var(--safe-bottom));
}

.currency-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--cream-dark);
    border: 2px solid var(--wood-border);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.currency-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

#level-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0; /* belt fills to the panel's inner border edges */
}

/* Level Group Containers */
.level-group {
    background: rgba(92, 58, 30, 0.05);
    border: 2px solid rgba(92, 58, 30, 0.15);
    border-radius: 8px;
    padding: 8px;
    transition: opacity 0.3s;
}

.level-group.group-locked {
    display: none;
}

.level-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Gift Box Tile */
.gift-box-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 3px solid var(--wood-border);
    box-shadow: 3px 3px 0 var(--panel-shadow);
    gap: 2px;
    min-width: 48px;
    min-height: 48px;
}

.gift-box-tile.gift-locked {
    background: linear-gradient(180deg, #A08060 0%, #7A5C3E 100%);
    opacity: 0.6;
    cursor: default;
}

.gift-box-tile.gift-ready {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    cursor: pointer;
    animation: giftPulse 1.5s ease-in-out infinite;
}

.gift-box-tile.gift-ready:hover {
    transform: scale(1.05);
}

.gift-box-tile.gift-ready:active {
    transform: scale(0.95);
}

.gift-box-tile.gift-opened {
    background: rgba(124, 179, 66, 0.2);
    border-color: var(--success);
    opacity: 0.7;
    cursor: default;
}

@keyframes giftPulse {
    0%, 100% { box-shadow: 3px 3px 0 var(--panel-shadow), 0 0 8px rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 3px 3px 0 var(--panel-shadow), 0 0 20px rgba(212, 175, 55, 0.8); }
}

.gift-icon {
    font-size: 24px;
    line-height: 1;
    image-rendering: pixelated;
}

.gift-progress {
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Gift Reward Overlay */
.gift-reward-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
    animation: overlayFadeIn 0.25s ease;
}

.gift-reward-popup {
    background: var(--cream);
    border: 6px solid var(--wood-border);
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    animation: fadeInUp 0.4s ease;
    max-width: 320px;
    width: 90%;
}

.gift-reward-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
    font-family: 'Press Start 2P', cursive;
}

.gift-reward-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: starPop 0.5s ease 0.2s both;
}

.gift-reward-items {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.gift-reward-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Press Start 2P', cursive;
}

.gift-reward-item .currency-icon {
    width: 20px;
    height: 20px;
}

.gift-reward-dismiss {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 50%, #2E7D32 100%);
    color: #fff;
    border: 3px solid #1B5E20;
    border-radius: 8px;
    padding: 12px 32px;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 0 #1B5E20;
}

.gift-reward-dismiss:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1B5E20;
}

.gift-reward-dismiss:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* ========================================
   SUSHI REVEAL POPUP (Gift Box Unlock)
   ======================================== */

.gift-reveal-popup {
    background: linear-gradient(180deg, #1a1020 0%, #2a1830 50%, #1a1020 100%);
    border: 6px solid var(--gold);
    border-radius: 16px;
    padding: 28px 36px 24px;
    text-align: center;
    animation: fadeInUp 0.4s ease;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3), inset 0 0 40px rgba(212, 175, 55, 0.05);
    position: relative;
    overflow: hidden;
}

.gift-reveal-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    animation: labelPulse 1.5s ease-in-out infinite;
}

@keyframes labelPulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
    50% { opacity: 0.8; text-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
}

.gift-reveal-stage {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gift-reveal-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

.gift-reveal-glow.burst {
    animation: glowBurst 0.6s ease-out forwards;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes glowBurst {
    0% { transform: scale(1); opacity: 1; background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%); }
    50% { transform: scale(2.5); opacity: 1; background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%); }
    100% { transform: scale(3); opacity: 0; }
}

.gift-reveal-sprite {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

/* Silhouette filter: black against the dark popup is invisible, so we
   `invert` after blacking out — net result is a flat WHITE silhouette
   that reads cleanly against the popup's dark gradient bg. */
.gift-reveal-sprite.silhouette {
    filter: brightness(0) invert(1) opacity(0.85);
    transform: scale(0.9);
}
/* Inner-div sprite-frame variant (used for maki rolls that come from
   the spritesheet). The wrapper carries the .silhouette class but the
   actual visible pixels live on the inner div, so apply the filter
   there too. */
.gift-reveal-sprite.silhouette > div {
    filter: brightness(0) invert(1) opacity(0.85);
}

.gift-reveal-sprite.revealed {
    filter: brightness(1) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
    transform: scale(1.15);
    animation: sushiRevealBounce 0.6s ease;
}

@keyframes sushiRevealBounce {
    0%   { transform: scale(0.9); filter: brightness(0) invert(1) opacity(0.85); }
    30%  { transform: scale(1.4); filter: brightness(1.5); }
    50%  { transform: scale(1.0); filter: brightness(1); }
    70%  { transform: scale(1.2); filter: brightness(1.1); }
    100% { transform: scale(1.15); filter: brightness(1) drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)); }
}

.gift-reveal-gem-icon {
    font-size: 64px;
    position: relative;
    z-index: 2;
    filter: grayscale(100%) brightness(0.3);
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.gift-reveal-gem-icon.revealed {
    filter: none;
    transform: scale(1.2);
    animation: gemRevealBounce 0.6s ease;
}

@keyframes gemRevealBounce {
    0% { transform: scale(0.9); filter: grayscale(100%) brightness(0.3); }
    30% { transform: scale(1.5); filter: none; }
    50% { transform: scale(1.0); }
    70% { transform: scale(1.3); }
    100% { transform: scale(1.2); }
}

.gift-reveal-question {
    position: absolute;
    font-size: 48px;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Press Start 2P', cursive;
    z-index: 3;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    animation: questionBob 1.2s ease-in-out infinite;
    pointer-events: none;
}

.gift-reveal-question.hidden {
    display: none;
}

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

.gift-reveal-btn {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    color: var(--text-primary);
    border: 4px solid var(--wood-border);
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 4px 4px 0 rgba(91, 58, 30, 0.4), 0 0 20px rgba(212, 175, 55, 0.3);
    animation: revealBtnPulse 1.5s ease-in-out infinite;
    min-height: 48px;
}

.gift-reveal-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(91, 58, 30, 0.4), 0 0 30px rgba(212, 175, 55, 0.5);
}

.gift-reveal-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

@keyframes revealBtnPulse {
    0%, 100% { box-shadow: 4px 4px 0 rgba(91, 58, 30, 0.4), 0 0 20px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 4px 4px 0 rgba(91, 58, 30, 0.4), 0 0 35px rgba(212, 175, 55, 0.6); }
}

.gift-reveal-info {
    animation: fadeInUp 0.4s ease;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.gift-reveal-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.gift-reveal-popup .gift-reward-items {
    margin-bottom: 20px;
}

.gift-reveal-popup .gift-reward-item {
    color: #fff;
}

.gift-reveal-popup .gift-reward-dismiss {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 50%, #2E7D32 100%);
    color: #fff;
    border: 3px solid #1B5E20;
    border-radius: 8px;
    padding: 12px 32px;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 0 #1B5E20;
    min-height: 48px;
}

.gift-reveal-popup .gift-reward-dismiss:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1B5E20;
}

.gift-reveal-popup .gift-reward-dismiss:active {
    transform: translateY(2px);
    box-shadow: none;
}

.level-button {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--cream-dark);
    border: 3px solid var(--wood-border);
    box-shadow: 3px 3px 0 var(--panel-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    padding: 2px;
}

.level-button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.level-button:hover {
    background: rgba(212, 175, 55, 0.15);
    transform: scale(1.05);
}

.level-button:active {
    transform: scale(0.95);
}

.level-button.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.level-button.locked:hover {
    transform: none;
    background: var(--cream-dark);
}

.locked-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.locked-icon {
    width: 50%;
    height: 50%;
    image-rendering: pixelated;
    opacity: 0.6;
}

.level-number {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.level-stars {
    display: flex;
    gap: 1px;
    margin-top: 2px;
}

.level-stars .star {
    font-size: 9px;
    color: rgba(59, 40, 22, 0.3);
}

.level-stars .star.earned {
    color: var(--gold);
}

/* ========================================
   LEVEL COMPLETE SCREEN - Receipt Style
   ======================================== */

#level-complete-screen {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

#level-complete-screen:not(.hidden) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Receipt paper base — CSS fallback background */
.level-complete-popup.receipt {
    background: #f5f0e0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 23px,
        rgba(0, 0, 0, 0.03) 23px,
        rgba(0, 0, 0, 0.03) 24px
    );
    border: none;
    border-radius: 0;
    padding: 28px 32px 24px;
    text-align: center;
    animation: fadeInUp 0.4s ease;
    max-width: 340px;
    width: 88%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
    image-rendering: pixelated;
}

/* When 9-slice sprite is applied, override the CSS fallback */
.level-complete-popup.receipt.ui-sprite-rendered {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* Torn zigzag edges — only show as CSS fallback when sprite is NOT loaded */
.level-complete-popup.receipt:not(.ui-sprite-rendered)::before,
.level-complete-popup.receipt:not(.ui-sprite-rendered)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(
        90deg,
        #f5f0e0 0px,
        #f5f0e0 8px,
        transparent 8px,
        transparent 16px
    );
}

.level-complete-popup.receipt:not(.ui-sprite-rendered)::before {
    top: -12px;
    clip-path: polygon(
        0% 100%, 4% 0%, 8% 100%, 12% 0%, 16% 100%, 20% 0%, 24% 100%, 28% 0%,
        32% 100%, 36% 0%, 40% 100%, 44% 0%, 48% 100%, 52% 0%, 56% 100%, 60% 0%,
        64% 100%, 68% 0%, 72% 100%, 76% 0%, 80% 100%, 84% 0%, 88% 100%, 92% 0%,
        96% 100%, 100% 0%, 100% 100%
    );
}

.level-complete-popup.receipt:not(.ui-sprite-rendered)::after {
    bottom: -12px;
    clip-path: polygon(
        0% 0%, 4% 100%, 8% 0%, 12% 100%, 16% 0%, 20% 100%, 24% 0%, 28% 100%,
        32% 0%, 36% 100%, 40% 0%, 44% 100%, 48% 0%, 52% 100%, 56% 0%, 60% 100%,
        64% 0%, 68% 100%, 72% 0%, 76% 100%, 80% 0%, 84% 100%, 88% 0%, 92% 100%,
        96% 0%, 100% 100%, 100% 0%
    );
}

/* Receipt header */
.receipt-header {
    margin-bottom: 4px;
}

.receipt-logo {
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 3px;
    margin-bottom: 4px;
}

.receipt-tagline {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: #555;
    margin-bottom: 6px;
}


/* Dividers */
.receipt-divider {
    margin: 10px 0;
    border: none;
    height: 0;
}

.receipt-divider.solid {
    border-top: 2px solid #1a1a1a;
}

.receipt-divider.dashed {
    border-top: 2px dashed #999;
}

.receipt-divider.double {
    border-top: 2px dashed #1a1a1a;
    position: relative;
}

.receipt-divider.double::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    border-top: 2px dashed #1a1a1a;
}

/* Level line */
.receipt-level {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 8px 0;
    letter-spacing: 1px;
}

/* Receipt stars */
.receipt-stars {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
    position: relative;
}

.receipt-stars .star-big {
    font-size: 36px;
    color: #ccc;
    transition: all 0.3s ease;
    filter: none;
    text-shadow: none;
}

.receipt-stars .star-big.earned {
    color: #1a1a1a;
    animation: starPopReceipt 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: none;
    filter: none;
}

.receipt-stars .star-big.earned::after {
    display: none;
}

@keyframes starPopReceipt {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    40% { transform: scale(1.4) rotate(15deg); opacity: 1; }
    60% { transform: scale(0.9) rotate(-5deg); }
    80% { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* 2c: Near-miss star pulse animation */
.near-miss-pulse {
    animation: starNearMissPulse 0.8s ease-in-out infinite !important;
    color: rgba(26, 26, 26, 0.5) !important;
}

@keyframes starNearMissPulse {
    0%, 100% { filter: drop-shadow(0 0 0 #FFD700); transform: scale(1); }
    50% { filter: drop-shadow(0 0 6px #FFD700); transform: scale(1.15); }
}

/* Receipt line items with dot leaders */
.receipt-items {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

.receipt-line {
    display: flex;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: none;
}

.receipt-line .stat-label {
    color: #1a1a1a;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    order: 0;
    white-space: nowrap;
}

.receipt-line::after {
    content: '....................................';
    flex: 1;
    overflow: hidden;
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: #999;
    margin: 0 4px;
    order: 1;
    white-space: nowrap;
}

.receipt-line .stat-value {
    color: #1a1a1a;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    font-weight: 700;
    order: 2;
    white-space: nowrap;
}

/* Override colored value classes to monochrome */
.receipt-line .coins-value,
.receipt-line .gems-value,
.receipt-line .combo-value {
    color: #1a1a1a;
}

/* TOTAL section */
.receipt-total {
    padding: 6px 0 4px;
}

.receipt-total .receipt-line .stat-label {
    font-size: 10px;
    font-weight: 700;
}

.receipt-total .receipt-line .stat-value {
    font-size: 12px;
    font-weight: 700;
}

/* Receipt footer */
.receipt-footer {
    margin: 4px 0 16px;
}

.receipt-thankyou {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.receipt-comeagain {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: #555;
}

/* Continue button - stamp style */
.level-complete-btn {
    background: #1a1a1a !important;
    color: #f5f0e0 !important;
    border: none !important;
    padding: 12px 36px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Press Start 2P', cursive !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    animation: none !important;
    min-height: 44px;
    letter-spacing: 1px;
    transition: opacity 0.2s ease;
}

.level-complete-btn:hover {
    opacity: 0.85;
    transform: none !important;
    box-shadow: none !important;
}

.level-complete-btn:active {
    opacity: 0.7;
    transform: none !important;
    box-shadow: none !important;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(59, 40, 22, 0.2);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 14px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.coins-value {
    color: var(--gold);
}

/* Stats/Achievements Tab Bar */
.stats-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.stats-tab {
    flex: 1;
    padding: 8px 12px;
    background: rgba(59, 40, 22, 0.2);
    border: 2px solid var(--wood-border);
    color: var(--text-secondary);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.stats-tab.active {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 100%);
    color: var(--text-primary);
}

.stats-tab-content {
    display: none;
}

.stats-tab-content.active {
    display: block;
}

/* Achievements Browser */
.achievements-progress {
    text-align: center;
    margin-bottom: 12px;
    font-size: 10px;
    color: var(--text-secondary);
}

.achievements-progress .progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(59, 40, 22, 0.2);
    border: 1px solid var(--wood-border);
    margin-top: 6px;
}

.achievements-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7CB342, #4CAF50);
    transition: width 0.3s;
}

.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(59, 40, 22, 0.1);
    border: 2px solid rgba(59, 40, 22, 0.2);
}

.achievement-card.unlocked {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

.achievement-card.claimed {
    opacity: 0.7;
}

.achievement-icon {
    font-size: 24px;
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-size: 9px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.achievement-desc {
    font-size: 8px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.achievement-bar {
    width: 100%;
    height: 6px;
    background: rgba(59, 40, 22, 0.15);
}

.achievement-bar-fill {
    height: 100%;
    background: var(--gold);
    transition: width 0.3s;
}

.achievement-reward {
    font-size: 9px;
    color: var(--gold);
    flex-shrink: 0;
}

.achievement-claim-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #7CB342, #558B2F);
    color: #fff;
    border: 2px solid #33691E;
    cursor: pointer;
    flex-shrink: 0;
}

.achievement-claim-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.achievement-category-header {
    font-size: 9px;
    font-family: 'Press Start 2P', cursive;
    padding: 6px 0 4px;
    margin-top: 4px;
}

/* Level Complete Receipt - Mobile */
@media (max-width: 600px) {
    .level-complete-popup.receipt {
        max-width: 280px;
        padding: 16px 18px 14px;
        margin: 8px;
        max-height: calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));
        overflow-y: auto;
    }

    .receipt-logo {
        font-size: 14px;
    }

    .receipt-level {
        font-size: 9px;
    }

    .receipt-stars .star-big {
        font-size: 28px;
    }

    .receipt-stars {
        margin: 8px 0;
        gap: 8px;
    }

    .receipt-line .stat-label {
        font-size: 7px;
    }

    .receipt-line .stat-value {
        font-size: 8px;
    }

    .receipt-total .receipt-line .stat-label {
        font-size: 8px;
    }

    .receipt-total .receipt-line .stat-value {
        font-size: 10px;
    }

    .level-complete-btn {
        padding: 8px 20px !important;
        font-size: 9px !important;
        min-height: 36px;
    }

    .button-group {
        gap: 6px;
    }
}

/* Landscape phone: short viewport height */
@media (max-height: 500px) {
    .level-complete-popup.receipt {
        max-width: 260px;
        max-height: calc(100vh - 20px - var(--safe-top) - var(--safe-bottom));
        overflow-y: auto;
        padding: 10px 14px 10px;
        margin: 4px;
    }

    .receipt-logo {
        font-size: 12px;
    }

    .receipt-tagline {
        font-size: 6px;
    }

    .receipt-level {
        font-size: 8px;
        margin: 4px 0;
    }

    .receipt-stars {
        margin: 4px 0;
        gap: 6px;
    }

    .receipt-stars .star-big {
        font-size: 18px;
    }

    .receipt-divider {
        margin: 6px 0;
    }

    .receipt-line {
        padding: 3px 0;
    }

    .receipt-line .stat-label {
        font-size: 6px;
    }

    .receipt-line .stat-value {
        font-size: 7px;
    }

    .receipt-line::after {
        font-size: 5px;
    }

    .receipt-total .receipt-line .stat-label {
        font-size: 7px;
    }

    .receipt-total .receipt-line .stat-value {
        font-size: 9px;
    }

    .receipt-thankyou {
        font-size: 9px;
    }

    .receipt-comeagain {
        font-size: 6px;
    }

    .receipt-footer {
        margin: 2px 0 10px;
    }

    .level-complete-btn {
        padding: 6px 16px !important;
        font-size: 8px !important;
        min-height: 30px;
    }

    .button-group {
        gap: 4px;
    }

    /* Level select panel - landscape phone */
    .ls-backdrop {
        padding: 12px 48px;
        padding-top: calc(12px + var(--safe-top));
        padding-bottom: calc(12px + var(--safe-bottom));
    }

    .level-select-popup {
        max-width: 85%;
        height: calc(100% - 8px);
        max-height: calc(100% - 8px);
        margin-top: 0;
    }

    .ls-banner {
        padding: 4px 8px;
        padding-right: 32px;
        gap: 4px;
    }

    .ls-banner-icon {
        font-size: 16px;
    }

    .ls-banner h2 {
        font-size: 9px;
    }

    .ls-currency {
        gap: 4px;
    }

    .ls-left-scroll {
        padding: 4px;
    }

    .ls-left-scroll {
        overflow-x: auto;
    }

    .ls-left-tabs {
        padding: 0 2px 12px 2px;
        gap: 2px;
    }

    .ls-nav-tab {
        min-height: 20px;
        padding: 1px 4px 1px 3px;
        font-size: 8px;
        gap: 3px;
    }

    .ls-nav-tab span {
        font-size: 9px;
    }

    .ls-nav-tab span img.currency-icon {
        width: 24px;
        height: 24px;
    }

    .ls-right-content {
        padding: 6px 14px 14px 6px;
    }

    .ls-level-detail {
        gap: 8px;
    }

    .ls-level-detail h3 {
        font-size: 11px;
    }

    .ls-detail-stars {
        font-size: 16px;
        gap: 4px;
    }

    .ls-detail-section {
        padding: 5px 0;
    }

    .ls-detail-section h4 {
        font-size: 8px;
        margin: 0 0 3px 0;
    }

    .ls-detail-row {
        font-size: 8px;
        gap: 4px;
        margin-bottom: 2px;
    }

    .ls-detail-row img {
        width: 12px;
        height: 12px;
    }

    .ls-play-btn {
        padding: 8px;
        font-size: 11px;
        border-width: 2px;
        border-radius: 6px;
        box-shadow: 0 3px 0 #1B5E20, 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .ls-close-btn {
        width: 34px;
        height: 34px;
        top: -13px;
        right: -5px;
    }

    .ls-detail-placeholder {
        font-size: 9px;
    }

    .currency-item {
        padding: 2px 5px;
        font-size: 9px;
        gap: 2px;
    }

    .currency-icon {
        width: 12px;
        height: 12px;
    }

    .ls-boost-item {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .ls-boost-item .boost-count {
        font-size: 8px;
        width: 13px;
        height: 13px;
    }

    /* Restaurant progress (e.g. "10/60 ⭐") */
    .restaurant-progress {
        font-size: 10px;
        margin-bottom: 4px;
        padding: 3px 8px;
    }

    /* Conveyor path container */
    .conveyor-path-container {
        min-height: 100px;
        padding: 4px;
    }

    /* Upgrade panel in landscape */
    .upgrade-tab-bar {
        height: 34px;
        padding: 8px 8px 0 4px;
        gap: 3px;
    }

    .upgrade-tab {
        font-size: 8px;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        gap: 3px;
    }

    .upgrade-tab-content {
        padding: 6px;
    }

    .upgrade-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .upgrade-card {
        padding: 6px;
        gap: 4px;
    }

    .upgrade-card-icon {
        font-size: 14px;
    }

    .upgrade-card-name {
        font-size: 8px;
    }

    .upgrade-card-level {
        font-size: 8px;
    }

    .upgrade-card-desc {
        font-size: 8px;
    }

    .upgrade-card-cost {
        font-size: 8px;
        padding: 3px 6px;
    }

    .upgrade-card-cost img {
        width: 10px;
        height: 10px;
    }
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.button-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.secondary-btn {
    background: var(--cream-dark) !important;
    border: 2px solid var(--wood-border) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.secondary-btn:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    transform: translateY(-2px);
}

/* ========================================
   LEVEL UNLOCK ANIMATION
   ======================================== */

@keyframes level-unlock-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes level-confirmed-pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
    50% { box-shadow: 0 0 10px 4px rgba(76, 175, 80, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.level-unlock-pending {
    transform: scale(0);
    opacity: 0;
}

.level-unlocking {
    animation: level-unlock-pop 0.5s ease-out forwards;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.level-confirmed {
    animation: level-confirmed-pulse 0.6s ease-out;
}

/* ========================================
   POWER-UP TRAY
   ======================================== */

#powerup-tray {
    display: none;
}

.powerup-btn {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: #3d2314;
    border: 3px solid #000;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.powerup-btn:active:not(.disabled) {
    transform: translate(1px, 1px);
    box-shadow: none;
}

.powerup-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.powerup-btn.active {
    border-color: var(--success);
    background: rgba(124, 179, 66, 0.3);
    animation: powerupPulse 1s infinite;
}

@keyframes powerupPulse {
    0%, 100% { box-shadow: 0 0 5px var(--success); }
    50% { box-shadow: 0 0 15px var(--success); }
}

.powerup-icon {
    font-size: 20px;
}

.powerup-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.powerup-time {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 0;
    display: none;
}

/* ========================================
   SHOP SCREEN
   ======================================== */

.shop-nav-btn {
    margin-top: 20px;
    background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    padding: 12px 32px !important;
}

.shop-section {
    margin: 24px 0;
    text-align: left;
}

.shop-section h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 4px;
}

.shop-section-desc {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 12px;
}

.shop-item {
    display: flex;
    align-items: center;
    background: var(--cream-dark);
    border: 1px solid rgba(92, 58, 30, 0.2);
    padding: 12px;
    border-radius: 0;
    margin-bottom: 10px;
    gap: 12px;
}

.shop-item.cannot-afford {
    opacity: 0.5;
}

.shop-item.purchased {
    background: rgba(124, 179, 66, 0.1);
    border: 1px solid rgba(124, 179, 66, 0.3);
}

.shop-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--wood-border);
    flex-shrink: 0;
}

.upgrade-icon {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
}

.shop-item-info {
    flex: 1;
    min-width: 0;
}

.shop-item-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.shop-item-desc {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 2px;
}

.shop-item-owned {
    color: var(--success);
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

.shop-buy-btn {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    color: var(--text-primary);
    border: 2px solid var(--wood-border);
    padding: 8px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.shop-buy-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

.shop-buy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shop-buy-btn .coin-icon {
    color: #FFD700;
}

/* Rewarded-ad currency top-up row (shown when player is just short) */
.shop-topup-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.topup-btn {
    background: linear-gradient(180deg, #6FCF97 0%, #4CAF50 50%, #3D8B40 100%);
    color: #fff;
    font-size: 11px;
    padding: 10px 14px;
}

.star-btn {
    background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);
    color: #1a1a1a;
}

.star-btn .star-icon {
    color: #1a1a1a;
}

#close-shop {
    margin-top: 20px;
    width: 100%;
}

/* ========================================
   COMBO VALUE IN STATS
   ======================================== */

.combo-value {
    color: var(--accent);
}

/* ========================================
   VIP INDICATOR GLOW
   ======================================== */

.vip-glow {
    animation: vipGlow 1.5s ease-in-out infinite;
}

@keyframes vipGlow {
    0%, 100% { box-shadow: 0 0 10px #FFD700; }
    50% { box-shadow: 0 0 25px #FFD700; }
}


/* ========================================
   COMBO MILESTONE EFFECTS
   ======================================== */

.combo-fire {
    animation: comboFire 0.2s ease-in-out;
}

@keyframes comboFire {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* ========================================
   ACHIEVEMENT NOTIFICATION
   ======================================== */

.achievement-popup {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cream);
    border: 2px solid var(--gold);
    border-radius: 0;
    padding: 16px 24px;
    z-index: 300;
    animation: achievementSlide 0.5s ease-out;
}

@keyframes achievementSlide {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.achievement-title {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.achievement-name {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.achievement-desc {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
}

/* ========================================
   DAILY REWARD BADGE
   ======================================== */

.daily-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    animation: badgeBounce 1s infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========================================
   SCREEN SHAKE ANIMATION
   ======================================== */

.screen-shake {
    animation: screenShake 0.15s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-5px, 2px); }
    50% { transform: translate(5px, -2px); }
    75% { transform: translate(-3px, 1px); }
}

/* ========================================
   LEGENDARY COMBO RAINBOW
   ======================================== */

.legendary-combo {
    background: linear-gradient(90deg,
        #ff0000, #ff7f00, #ffff00,
        #00ff00, #0000ff, #4b0082, #9400d3
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: legendaryRainbow 2s linear infinite;
}

@keyframes legendaryRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ========================================
   PAUSE BUTTON
   ======================================== */

/* Pause button — pixel-art belt style (ink shell, cream surface, stepped
   corners, hard drop-shadow) to match the HUD bar + map-header buttons. */
#pause-button {
    position: absolute;
    right: calc(10px + var(--safe-right) + 34px);   /* shifted left by one button width */
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 28px;                  /* matches the #customer-progress-hud pill */
    min-width: 0;                  /* beat the global `button { min: 48px }` */
    min-height: 0;
    padding: 0;
    font-size: 14px;
    color: var(--lp-ink, #2A1E3F);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: #2A1E3F;            /* ink shell */
    image-rendering: pixelated;
    /* 6px stepped corners, same as the HUD pill */
    --pb-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
    clip-path: var(--pb-clip);
    -webkit-clip-path: var(--pb-clip);
    filter: drop-shadow(0 3px 0 #2A1E3F);
}
#pause-button::before {
    content: '';
    position: absolute;
    inset: 2px;                    /* thinner border to match the HUD's proportions */
    z-index: 0;
    background: var(--lp-creamHi, #FFF8E5);
    clip-path: var(--pb-clip);
    -webkit-clip-path: var(--pb-clip);
}
#pause-button > * { position: relative; z-index: 1; }

/* Pause glyph drawn with two bars (no emoji — renders consistently on iOS). */
#pause-button .pause-bars {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}
#pause-button .pause-bars::before,
#pause-button .pause-bars::after {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--lp-ink, #2A1E3F);
}

#pause-button:active {
    transform: translateY(-50%) translateY(3px);
    filter: drop-shadow(0 1px 0 #2A1E3F);
}

/* ========================================
   VERTICAL BUTTON GROUP
   ======================================== */

.button-group.vertical {
    flex-direction: column;
    gap: 12px;
}

.button-group.vertical button {
    width: 200px;
}

/* ========================================
   SETTINGS SCREEN
   ======================================== */

.settings-list {
    background: var(--cream-dark);
    border: 3px solid var(--wood-border);
    padding: 16px 24px;
    margin-bottom: 24px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(59, 40, 22, 0.2);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.settings-link {
    display: block;
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    margin: 12px 0 8px;
    text-decoration: underline;
}

.toggle-btn {
    background: var(--success);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.toggle-btn.off {
    background: rgba(92, 58, 30, 0.15);
    color: var(--text-secondary);
}

.toggle-btn:hover {
    transform: scale(1.05);
}

/* Volume Slider */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 8px;
    background: rgba(92, 58, 30, 0.15);
    border: 1px solid rgba(92, 58, 30, 0.3);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: var(--gold);
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    background: var(--gold);
    border-radius: 0;
    border: none;
    cursor: pointer;
}

/* ========================================
   NAV BUTTONS
   ======================================== */

.nav-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.nav-btn {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    border: 4px solid var(--wood-border);
    color: var(--text-primary);
    padding: 12px 24px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    box-shadow: 4px 4px 0 rgba(91, 58, 30, 0.4);
    transition: none;
}

.nav-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(91, 58, 30, 0.4);
}

.nav-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.small-nav-btn {
    width: 54px;
    height: 54px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-nav-btn img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* ========================================
   CAREER STATS SCREEN
   ======================================== */

#career-stats {
    background: var(--cream-dark);
    border: 3px solid var(--wood-border);
    padding: 16px 24px;
    margin-bottom: 24px;
    text-align: left;
}

/* ========================================
   ZEN MODE
   ======================================== */

#special-modes-container {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(59, 40, 22, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zen-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 20px 24px;
    background: linear-gradient(135deg, #6BA89A 0%, #5B8C7A 100%);
    border: 3px solid var(--wood-border);
    border-radius: 0;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Press Start 2P', cursive;
}

.zen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(91, 140, 122, 0.4);
}

.zen-icon {
    font-size: 32px;
}

.zen-btn > span:nth-child(2) {
    font-size: 18px;
    font-weight: 700;
}

.zen-desc {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 400;
}

/* Zen Mode HUD modifications */
/* Scripted tutorial (level 1): no timer pressure, hand cursor overlay */
.tutorial-mode #timer-display {
    display: none;
}

#tutorial-hand {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    z-index: 150;
    pointer-events: none;
    transition: opacity 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.zen-mode #timer-display {
    display: none;
}

.zen-mode #customer-progress-hud {
    display: none;
}

.zen-indicator {
    position: absolute;
    top: 8px;
    right: 16px;
    background: linear-gradient(135deg, #4a90a4 0%, #2d5a6b 100%);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 12px;
    color: white;
    font-weight: 600;
}

/* ========================================
   INFINITE MODE
   ======================================== */

.infinite-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 20px 24px;
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    border: 3px solid var(--wood-border);
    border-radius: 0;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Press Start 2P', cursive;
}

.infinite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.infinite-icon {
    font-size: 32px;
}

.infinite-btn > span:nth-child(2) {
    font-size: 18px;
    font-weight: 700;
}

.infinite-desc {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 400;
}

/* Infinite Mode HUD modifications — hide everything except pause button */
.infinite-mode #hud > div {
    display: none;
}

.infinite-mode #hud > #pause-button {
    display: flex;
}

.infinite-mode #customer-progress-hud {
    display: none;
}

.infinite-mode #missed-orders {
    display: none;
}

/* Speed indicator pulse */
@keyframes speedPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ========================================
   WORLD MAP SCREEN
   ======================================== */

#world-map-screen {
    /* Sky-color fill behind everything; the Tokyo backdrop is painted by
       the ::before pseudo-element so it can be constrained to the top
       2/3 of the viewport without squishing the image. The .overlay
       class already provides position: absolute, so a child ::before
       positions correctly relative to this element. */
    background: #68aff3;
    image-rendering: pixelated;
    /* Width-driven on-screen height of the foreground sidewalk sprite
       (map_foreground.png is 2264×648, drawn full-width in ::after below).
       Both the building baseline and the sky seam are anchored to this so all
       three layers (sky / building strip / foreground) track together across
       every aspect ratio instead of drifting apart. If the foreground art is
       re-exported at a new size, update this ratio AND the ::after aspect. */
    --wm-fg-height: calc(100vw * 648 / 2264);
}
#world-map-screen::before {
    /* Tokyo skyline diorama backdrop. 'cover' preserves the image's
       natural aspect ratio inside a top-2/3-viewport-tall band — the
       bottom 1/3 stays sky color, ready for the building row. */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Extend the sky down to (and slightly behind) the foreground top so there
       is never a flat #68aff3 band between the skyline and the sidewalk on
       tall/portrait screens. --wm-sky-overlap is how far above the viewport
       bottom (in foreground-heights) the sky stops; smaller = more overlap. */
    height: calc(100% - var(--wm-fg-height) * var(--wm-sky-overlap, 0.55));
    background: url('sprites/map/bg_tokyo.png') center top / cover no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 0;
}
#world-map-screen::after {
    /* Foreground sidewalk/street art anchored to the bottom of the
       viewport. Spans full width; aspect-ratio preserves the image so
       it doesn't squish. Sits at the top of the stacking order so it
       reads as a true foreground layer in front of the building row;
       pointer-events: none lets taps still reach the restaurants. */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 2264 / 648;
    background: url('sprites/map/map_foreground.png') center bottom / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 100;
}

.world-map-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.map-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    padding-top: calc(12px + var(--safe-top));
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.map-title {
    font-size: 18px;
    color: var(--ui-light);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.map-currency {
    margin: 0;
}

/* === Illustrated Map === */
.illustrated-map {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.map-cloud {
    /* Clouds removed from the restaurant select view. */
    display: none;
}

.cloud-1 { top: 6%;  left: 8%;  animation-delay: 0s; }
.cloud-2 { top: 4%;  right: 14%; animation-delay: -12s; width: 90px; }
.cloud-3 { top: 18%; left: 48%; animation-delay: -24s; width: 80px; opacity: 0.8; }

@keyframes cloudDrift {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(14px); }
    100% { transform: translateX(0); }
}

/* === Horizontally scrolling tile track === */
.map-scroll {
    position: absolute;
    inset: 0;
    /* JS handles swipe gestures and animates scrollLeft programmatically.
       overflow-x: hidden blocks every native scroll path (touch, mouse
       wheel, trackpad, scrollbar drag) while still allowing scripted
       scrollLeft updates and scrollTo() to take effect. */
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    z-index: 5;
    touch-action: pan-y;
    user-select: none;
}
.map-scroll::-webkit-scrollbar { display: none; }

/* Width is set inline by WorldMap (based on tile count) */
.map-buildings {
    position: relative;
    height: 100%;
    min-width: 100%;
}

/* === World-map strip layout =================================
   JS computes pixel positions and writes inline `left` / `width` on each
   segment. The .wm-grid wrapper is bottom-left-anchored to the map; all
   segments inside are absolutely positioned with `bottom: 0` so the
   building art sits on a shared baseline. */
.wm-grid {
    position: absolute;
    /* Baseline anchored to a fixed point ON the width-driven foreground (not a
       fraction of viewport height), so the buildings stay grounded on the
       sidewalk at every aspect ratio and scale with it. The default foot-frac
       reproduces the previous ~16.5vh placement on a modern phone; tune via
       the dev panel (wmGridFootFrac). */
    bottom: calc(var(--wm-fg-height) * var(--wm-grid-foot-frac, 0.27));
    /* --wm-edge-buffer is set by JS so the leftmost and rightmost
       restaurants can be scrolled to viewport center. */
    left: calc(var(--wm-grid-left, 4vw) + var(--wm-edge-buffer, 0px));
    z-index: 1;
    pointer-events: none;
}

/* Segment positions are derived from the CSS vars
   --wm-bg-row-width / --wm-restaurant-width / --wm-segment-gap so the
   live tweaker can scale each independently. Each element carries a
   --idx (0-indexed within its kind) set by JS. */
.wm-restaurant {
    position: absolute;
    /* Restaurants render BEHIND the bg buildings row (z-index 2 vs bg's 4).
       --wm-restaurant-bottom is an independent vertical offset so the
       restaurant baseline can be raised/lowered without moving the bg row. */
    bottom: var(--wm-restaurant-bottom, 0px);
    width: var(--wm-restaurant-width, 240px);
    /* left = (idx + 1)*BG + idx*R + (2*idx + 1)*GAP */
    left: calc(
        (var(--idx, 0) + 1) * var(--wm-bg-row-width, 1200px)
        + var(--idx, 0) * var(--wm-restaurant-width, 240px)
        + (2 * var(--idx, 0) + 1) * var(--wm-segment-gap, 0px)
    );
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}

/* Horizontal background row sprite — one long pixel-art strip that fills
   the space between (and around) restaurants. */
.wm-bg-row {
    position: absolute;
    bottom: 0;
    width: var(--wm-bg-row-width, 1200px);
    /* left = idx * (BG + R + 2*GAP) */
    left: calc(
        var(--idx, 0) * (
            var(--wm-bg-row-width, 1200px)
            + var(--wm-restaurant-width, 240px)
            + 2 * var(--wm-segment-gap, 0px)
        )
    );
    z-index: 4;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.wm-bg-row .wm-building-sprite {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.wm-restaurant.playable { cursor: pointer; }
.wm-restaurant.playable:active .wm-building-art { transform: scale(0.96); }
.wm-restaurant.locked .wm-building-art { filter: grayscale(0.5) brightness(0.85); }

.wm-banner {
    background: #FFF8E5;
    border: 2px solid #3A2417;
    border-radius: 10px;
    box-shadow: 0 2px 0 #3A2417;
    padding: 4px 8px;
    text-align: center;
    min-width: 96px;
    /* Gentle hovering motion so the label feels alive. */
    animation: wm-banner-hover 2.4s ease-in-out infinite;
}
@keyframes wm-banner-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.wm-banner-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: #3A2417;
    font-size: 13px;
    line-height: 1.1;
}
.wm-banner-progress {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #6B5A3E;
    font-size: 11px;
}
.wm-banner-soon {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #B85F5F;
    font-size: 11px;
}

.wm-building-art {
    /* Restaurant art fills the marker's full width (set inline by JS). */
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform 0.08s ease;
}
.wm-building-sprite {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.wm-icon {
    font-size: 56px;
    line-height: 1;
}
/* TODO: remove after tile-map v2 lands — legacy .map-building styles
   below are kept for now in case we revert the layout. */


/* === Individual restaurant tile (zigzag-positioned) === */
.map-building {
    position: absolute;
    width: 160px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.map-building.playable {
    cursor: pointer;
    /* (bob animation removed) */
}

.map-building.playable:active .mb-tile {
    transform: translateY(3px);
}

.map-building.coming-soon {
    filter: grayscale(0.55) brightness(0.92);
    opacity: 0.85;
}

/* Featured tile (grocery_store) takes the spotlight on the map. */
.map-building.featured {
    z-index: 2;
}

/* Locked teaser sits to the right — scaled up so it reads as a real
   "next chapter" preview. The dark/blur filter is applied only to the
   tile so the banner label stays readable. */
.map-building.locked-teaser {
    z-index: 1;
    transform: translate(-50%, -50%) scale(1.10);
    opacity: 0.95;
}
.map-building.locked-teaser .mb-tile {
    filter: grayscale(1) brightness(0.45) blur(2px);
}
.map-building.locked-teaser .mb-banner-soon {
    background: rgba(58, 36, 23, 0.85);
    color: #FFE0EA;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

@keyframes buildingBob {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 4px)); }
}

/* --- Banner label above tile --- */
.mb-banner {
    min-width: 120px;
    padding: 6px 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    border: 2px solid #333;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.35);
    text-align: center;
    position: relative;
}
.mb-banner::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}
.mb-banner-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    line-height: 1.2;
    color: #2E7D32;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.mb-banner-progress {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: #E85A4F;
    font-weight: bold;
}
.mb-banner-soon {
    font-family: 'Press Start 2P', cursive;
    font-size: 6px;
    color: #9E9E9E;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.map-building.coming-soon .mb-banner-title { color: #616161; }

/* --- Flat colored tile (sprite placeholder) --- */
.mb-tile {
    width: 160px;
    height: 160px;
    background: var(--primary);
    border: 3px solid #333;
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.35), inset 0 -10px 0 rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

.mb-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
}

/* Tile variant for buildings that ship a real pixel-art sprite — drop the
   colored fill / inset shading so the sprite reads cleanly, and grow the
   footprint so the building reads at a larger size on the map. */
.mb-tile.mb-tile-sprite {
    width: 320px;
    height: 320px;
    background: transparent;
    border: none;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    overflow: visible;
    padding: 0;
}
.mb-building-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    user-select: none;
    pointer-events: none;
    display: block;
}

/* --- Pin marker below tile --- */
.mb-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #2E7D32;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.map-building.coming-soon .mb-pin {
    background: #CFD8DC;
    color: #555;
}

/* Unlock glow (retained for game.js API compatibility) */
.map-building.unlock-glow .mb-tile {
    animation: unlockPulse 1.5s ease-out;
}
@keyframes unlockPulse {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.5) drop-shadow(0 0 16px #FFD700); }
    100% { filter: brightness(1); }
}

/* === Card Inner Elements === */
.card-accent-bar {
    width: 60%;
    height: 4px;
    border-radius: 2px;
}

.card-icon {
    font-size: 44px;
    line-height: 1;
}

.card-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: #3a2a1a;
    text-align: center;
}

.card-description {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: #8a7a6a;
    text-align: center;
}

.card-star-bar {
    width: 70%;
    height: 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
}

.card-star-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.card-star-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: #FFD700;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.card-level-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: #8a7a6a;
}

.card-play-btn {
    margin-top: 4px;
    padding: 8px 24px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    background: #4CAF50;
    color: #fff;
    border: 3px solid #2E7D32;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 0 #1B5E20;
    transition: transform 0.1s;
}

.card-play-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1B5E20;
}

.card-lock-icon {
    font-size: 32px;
    opacity: 0.5;
}

.card-lock-info {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: #999;
}

/* === Badges === */
.card-new-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #E85A4F;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 2px solid #000;
    animation: cardBadgeBounce 1s ease infinite;
    z-index: 5;
}

.card-completion-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
}

.card-completion-badge.gold { background: #FFD700; }
.card-completion-badge.green { background: #7CB342; color: #fff; }

/* === Card Animations === */
@keyframes cardBadgeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.map-footer {
    /* Hidden — restaurant select is now a focused 2-tile layout with no
       global nav/shortcut buttons. (Other entry points to shop/stats/
       settings/sushidex are still accessible from the level-select popup.) */
    display: none;
}

.map-footer .nav-btn {
    pointer-events: auto;
}

.map-footer .nav-buttons {
    margin-top: 0;
}

.map-special-modes {
    position: absolute;
    bottom: calc(16px + var(--safe-bottom));
    right: calc(16px + var(--safe-right));
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 15;
}

.map-special-modes.hidden {
    display: none;
}

.map-mode-btn {
    display: flex;
    cursor: pointer;
    pointer-events: auto;
}

.map-mode-btn.zen-btn,
.map-mode-btn.infinite-btn {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: 8px;
    padding: 10px 18px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    font-weight: 700;
    border: 3px solid var(--wood-border);
    box-shadow: 3px 3px 0 rgba(91, 58, 30, 0.4);
    transition: none;
}

.map-mode-btn.zen-btn:hover,
.map-mode-btn.infinite-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(91, 58, 30, 0.4);
}

.map-mode-btn:active {
    transform: translate(2px, 2px) !important;
    box-shadow: none !important;
}

.map-mode-btn .zen-icon,
.map-mode-btn .infinite-icon {
    font-size: 18px;
}

.map-mode-btn > span:nth-child(2) {
    font-size: 10px;
}

/* Restaurant Header in Level Select */
.restaurant-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    position: relative;
}

.back-btn {
    position: absolute;
    left: 0;
    background: var(--cream-dark);
    border: 2px solid var(--wood-border);
    color: var(--text-primary);
    padding: 8px 16px;
    font-size: 10px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    transform: translateX(-2px);
}

#restaurant-title {
    margin: 0;
    text-align: center;
}

.restaurant-progress {
    text-align: center;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 0;
    display: inline-block;
}
.restaurant-progress[hidden] { display: none; }

/* ========================================
   RESTAURANT SHOP SCREEN
   ======================================== */

#restaurant-shop-screen .overlay-content {
    max-width: 500px;
    width: 100%;
}

#restaurant-shop-name {
    margin-bottom: 12px;
}

#restaurant-shop-items {
    margin: 16px 0;
    text-align: left;
}

#restaurant-shop-items .shop-item {
    margin-bottom: 10px;
}

#close-restaurant-shop {
    margin-top: 16px;
    width: 100%;
}

/* Restaurant themed level select */
.level-select-themed {
    border-top: 4px solid var(--accent);
}

/* Restaurant node animations */
@keyframes nodeGlow {
    0%, 100% { box-shadow: 0 0 15px var(--accent); }
    50% { box-shadow: 0 0 30px var(--accent); }
}

@keyframes pathDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 16; }
}

/* Unlock animation */
@keyframes unlockBurst {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.unlock-burst {
    animation: unlockBurst 0.5s ease-out forwards;
}

/* Restaurant completion badge */
.completion-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--success);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    border: 2px solid #000;
}

.completion-badge.perfect {
    background: var(--gold);
    color: #1a1a1a;
}

/* Level grid restaurant theme colors */
.level-grid-grocery-store .level-button {
    border-color: #4CAF50;
}

.level-grid-grocery-store .level-button:not(.locked):hover {
    background: rgba(76, 175, 80, 0.3);
}

.level-grid-beach-kiosk .level-button {
    border-color: #00BCD4;
}

.level-grid-beach-kiosk .level-button:not(.locked):hover {
    background: rgba(0, 188, 212, 0.3);
}

.level-grid-downtown-diner .level-button {
    border-color: #9C27B0;
}

.level-grid-downtown-diner .level-button:not(.locked):hover {
    background: rgba(156, 39, 176, 0.3);
}

.level-grid-tokyo-night .level-button {
    border-color: #E91E63;
}

.level-grid-tokyo-night .level-button:not(.locked):hover {
    background: rgba(233, 30, 99, 0.3);
}

.level-grid-cruise-ship .level-button {
    border-color: #1A237E;
}

.level-grid-cruise-ship .level-button:not(.locked):hover {
    background: rgba(26, 35, 126, 0.3);
}

.level-grid-michelin-star .level-button {
    border-color: #FFD700;
}

.level-grid-michelin-star .level-button:not(.locked):hover {
    background: rgba(255, 215, 0, 0.3);
}

/* ========================================
   SHOP TAB BAR
   ======================================== */

.shop-content {
    max-width: 600px;
    width: 100%;
}

.shop-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 2px solid var(--wood-border);
    overflow: hidden;
}

.shop-tab {
    flex: 1;
    padding: 10px 16px;
    background: var(--cream-dark);
    border: none;
    color: var(--text-secondary);
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    min-height: 48px;
}

.shop-tab:not(:last-child) {
    border-right: 2px solid var(--wood-border);
}

.shop-tab.active {
    background: rgba(212, 175, 55, 0.25);
    color: var(--text-primary);
}

.shop-tab:hover {
    background: rgba(212, 175, 55, 0.1);
}

.shop-tab-content {
    display: none;
}

.shop-tab-content.active {
    display: block;
}

/* Enhanced Power-up Cards */
.shop-item .shop-item-quantity {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    margin-top: 2px;
}

.shop-item .recommended-badge {
    display: inline-block;
    font-size: 8px;
    color: #1a1a1a;
    background: var(--gold);
    padding: 2px 6px;
    margin-top: 4px;
    font-weight: 700;
}

.shop-item .value-text {
    font-size: 8px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-style: italic;
}

/* Bulk Buy Button */
.shop-buy-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.shop-buy-btn.bulk-btn {
    font-size: 10px;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);
    color: #1a1a1a;
}

/* Price flash animation */
@keyframes priceFlashRed {
    0% { color: #ff4444; transform: scale(1.1); }
    100% { color: inherit; transform: scale(1); }
}

.price-flash {
    animation: priceFlashRed 0.3s ease;
}

/* ========================================
   COMBO METER BAR
   ======================================== */

#combo-meter {
    width: 40px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    margin-left: 4px;
}

#combo-meter-fill {
    height: 100%;
    width: 0%;
    background: var(--ui-light);
    transition: width 0.3s ease, background 0.3s ease;
}

#combo-meter-fill.combo-green {
    background: var(--success);
}

#combo-meter-fill.combo-orange {
    background: #FF9800;
}

#combo-meter-fill.combo-red {
    background: #F44336;
}

#combo-meter-fill.combo-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3);
    background-size: 200% 100%;
    animation: legendaryRainbow 1s linear infinite;
}

@keyframes comboMeterPulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.5); }
}

#combo-meter.combo-pulse {
    animation: comboMeterPulse 0.3s ease;
}

/* ========================================
   FEVER METER (HUD)
   ======================================== */

#fever-meter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 10px;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
}

#fever-meter.hidden {
    display: none;
}

#fever-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF9800, #FFD700);
    transition: width 0.15s linear;
}

/* Charging: subdued */
#fever-meter.fever-charging {
    opacity: 0.85;
}

/* Nearly full: pulse to telegraph the payoff */
@keyframes feverFullPulse {
    0%, 100% { box-shadow: 0 0 2px rgba(255, 215, 0, 0.4); transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.9); transform: translate(-50%, -50%) scale(1.12); }
}
#fever-meter.fever-full-pulse {
    animation: feverFullPulse 0.6s ease-in-out infinite;
    border-color: #FFD700;
}

/* Active: burning gold, fill drains as the timer runs out */
@keyframes feverActiveGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 120, 0, 0.8); }
    50% { box-shadow: 0 0 14px rgba(255, 215, 0, 1); }
}
#fever-meter.fever-active {
    animation: feverActiveGlow 0.4s ease-in-out infinite;
    border-color: #FFD700;
}
#fever-meter.fever-active #fever-meter-fill {
    background: linear-gradient(90deg, #FF5722, #FF9800, #FFD700);
}

/* ========================================
   SCREEN TRANSITIONS
   ======================================== */

.overlay.transition-ready {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.overlay.transition-ready.hidden {
    display: flex;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.overlay.slide-left.transition-ready.hidden {
    transform: translateX(-100%);
}

.overlay.slide-up.transition-ready.hidden {
    transform: translateY(100%);
}

/* Button feedback animations */
@keyframes buttonPurchase {
    0% { transform: scale(1); }
    30% { transform: scale(0.92); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.btn-purchase-anim {
    animation: buttonPurchase 0.3s ease;
}

@keyframes levelSelectGlow {
    0% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
    50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
    100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
}

.level-button:not(.locked):active {
    animation: levelSelectGlow 0.3s ease;
}

/* ========================================
   RESTAURANT SHOP INLINE
   ======================================== */

#restaurant-shop-inline {
    padding: 4px 0;
}

#restaurant-shop-inline .shop-item {
    margin-bottom: 10px;
}

#restaurant-shop-inline .shop-section-desc {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
}

/* ========================================
   SUSHI SHOP SECTION TITLES & UPGRADES
   ======================================== */

.shop-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--wood-border);
}

.shop-section-title:first-child {
    margin-top: 0;
}

.shop-item-coin-value {
    font-size: 10px;
    color: var(--gold);
    margin-top: 2px;
    font-weight: 600;
}

.sushi-upgrade-item {
    border: 1px solid rgba(92, 58, 30, 0.2);
}

.sushi-upgrade-item.maxed {
    border-color: var(--success);
    background: rgba(124, 179, 66, 0.1);
}

.sushi-upgrade-level {
    font-size: 9px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.sushi-upgrade-dots {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.sushi-upgrade-preview {
    font-size: 10px;
    color: var(--success);
    margin-top: 2px;
    font-weight: 600;
}

.sushi-upgrade-max {
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    background: rgba(124, 179, 66, 0.2);
    padding: 6px 12px;
    border: 2px solid var(--success);
    text-align: center;
    flex-shrink: 0;
}

/* ========================================
   TOUCH TARGET AUDIT - 48px minimum
   ======================================== */

.level-button {
    min-width: 48px;
    min-height: 48px;
}

.upgrade-card {
    min-height: 48px;
}

.aesthetic-card {
    min-height: 48px;
}

.ls-nav-tab {
    min-height: 48px;
    min-width: 48px;
}

.shop-tab {
    min-height: 48px;
}

.powerup-btn {
    min-width: 48px;
    min-height: 48px;
}

.shop-buy-btn {
    min-height: 40px;
}

.back-btn {
    min-height: 48px;
    min-width: 48px;
}

.ls-close-btn {
    min-height: 44px;
    min-width: 44px;
}

/* ========================================
   GEM CURRENCY SYSTEM
   ======================================== */

.gem-currency {
    background: rgba(138, 43, 226, 0.1) !important;
    border-color: #8B5CF6 !important;
}

.gem-icon-display {
    font-size: 16px;
    line-height: 1;
}

.gems-value {
    color: #8B5CF6;
}

/* Gem reward row in level complete */
.gem-reward-row .stat-label {
    color: #8B5CF6;
}

.gem-reward-row .gems-value {
    color: #8B5CF6;
    font-weight: 700;
}

.gem-reward-row.hidden {
    display: none;
}

/* Gem button styling */
.gem-btn {
    background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%) !important;
    color: #fff !important;
    border-color: #4C1D95 !important;
}

.gem-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

.gem-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gem-icon {
    font-size: 14px;
}

/* Premium item styling in shop */
.premium-item {
    border: 2px solid #8B5CF6 !important;
    background: rgba(139, 92, 246, 0.05) !important;
}

.premium-item:not(.cannot-afford):not(.purchased) {
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.premium-icon {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: #8B5CF6 !important;
}

/* Gem reward animation */
@keyframes gemEarn {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gem-earned-anim {
    animation: gemEarn 0.5s ease;
}

/* ========================================
   CONVEYOR BELT LEVEL SELECT
   Snake-pattern conveyor with level markers
   ======================================== */

.conveyor-path-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    padding: 8px;
}

.conveyor-canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.conveyor-markers-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Level/Gift Markers */
.conveyor-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
    z-index: 10;
}

.conveyor-marker:hover {
    transform: scale(1.1);
}

.conveyor-marker:active {
    transform: scale(0.95);
}

/* Level Marker Styling */
.conveyor-marker.level-marker {
    background: var(--cream-dark);
    border: 3px solid var(--wood-border);
    box-shadow: 2px 2px 0 rgba(91, 58, 30, 0.3);
}

/* Sushi markers override - no border/background */
.conveyor-marker.level-marker.sushi-marker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Storybook redesign — strip the legacy oval/gradient/border off our new
   gift markers so the gift_box.png sprite reads cleanly. */
.conveyor-marker.gift-marker.lp-gift-marker,
.conveyor-marker.gift-marker.lp-gift-marker.gift-ready,
.conveyor-marker.gift-marker.lp-gift-marker.gift-locked,
.conveyor-marker.gift-marker.lp-gift-marker.gift-opened {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    animation: none !important;
}

.conveyor-marker.level-marker.locked {
    cursor: not-allowed;
    background: rgba(92, 58, 30, 0.2);
}

.conveyor-marker.level-marker.sushi-marker.locked {
    background: transparent !important;
    opacity: 1;
}

.conveyor-marker.level-marker.locked:hover {
    transform: none;
}

.marker-level-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Press Start 2P', cursive;
    line-height: 1;
}

.marker-stars {
    display: flex;
    gap: 1px;
    margin-top: 2px;
}

.star-mini {
    font-size: 8px;
    color: rgba(92, 58, 30, 0.3);
    line-height: 1;
}

.star-mini.earned {
    color: var(--gold);
}

.marker-locked {
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-icon-small {
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

/* Gift Marker Styling */
.conveyor-marker.gift-marker {
    background: linear-gradient(180deg, #A08060 0%, #7A5C3E 100%);
    border: 3px solid var(--wood-border);
    box-shadow: 2px 2px 0 rgba(91, 58, 30, 0.3);
}

.conveyor-marker.gift-marker.gift-locked {
    opacity: 0.6;
    cursor: default;
}

.conveyor-marker.gift-marker.gift-locked:hover {
    transform: none;
}

.conveyor-marker.gift-marker.gift-ready {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    animation: giftPulse 1.5s ease-in-out infinite;
}

.conveyor-marker.gift-marker.gift-highlight {
    animation: giftHighlight 0.5s ease-in-out 3;
    box-shadow: 0 0 12px 4px rgba(242, 208, 107, 0.8);
}

@keyframes giftHighlight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.conveyor-marker.gift-marker.gift-opened {
    background: rgba(124, 179, 66, 0.3);
    border-color: var(--success);
    opacity: 0.7;
    cursor: default;
}

.conveyor-marker.gift-marker.gift-opened:hover {
    transform: none;
}

.gift-icon-marker {
    font-size: 16px;
    line-height: 1;
}

.gift-progress-mini {
    font-size: 8px;
    font-family: 'Press Start 2P', cursive;
    color: var(--text-primary);
    margin-top: 2px;
}

/* Progressive Reveal */
.conveyor-marker.conveyor-hidden {
    display: none !important;
}

.conveyor-marker.conveyor-preview {
    opacity: 0.4 !important;
}

/* Restaurant Theme Colors for Conveyor Markers */
.level-grid-grocery-store .conveyor-marker.level-marker:not(.locked) {
    border-color: #4CAF50;
}

.level-grid-beach-kiosk .conveyor-marker.level-marker:not(.locked) {
    border-color: #00BCD4;
}

.level-grid-downtown-diner .conveyor-marker.level-marker:not(.locked) {
    border-color: #9C27B0;
}

.level-grid-tokyo-night .conveyor-marker.level-marker:not(.locked) {
    border-color: #E91E63;
}

.level-grid-cruise-ship .conveyor-marker.level-marker:not(.locked) {
    border-color: #1A237E;
}

.level-grid-michelin-star .conveyor-marker.level-marker:not(.locked) {
    border-color: #FFD700;
}

/* Earned stars glow (legacy hook — no longer renders the old "▼" arrow,
   the gold drop-shadow pulse, or the corner-pip locks; the storybook
   redesign in `.lp-*` rules below handles current/locked styling). */
.sushi-marker .star-mini.earned {
    color: #FFD700;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

/* Grocery store themed background tint */
.level-grid-grocery-store {
    background: linear-gradient(180deg, rgba(76,175,80,0.06) 0%, rgba(76,175,80,0.02) 100%);
}

/* Enhanced gift box ready state */
.conveyor-marker.gift-marker.gift-ready {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), 0 0 16px rgba(255, 215, 0, 0.3);
}

/* Cloud cutoff at end of revealed conveyor belt */
.conveyor-cloud-cutoff {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-cutoff-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    animation: cloudFloat 3s ease-in-out infinite;
}

@keyframes cloudFloat {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(3px) translateY(-2px); }
}

/* ========================================
   Sushi-based Level Markers
   ======================================== */

.sushi-marker {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
    overflow: visible;
}

.sushi-level-num {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
    font-family: 'Press Start 2P', cursive;
    z-index: 2;
    line-height: 1;
}

.sushi-stars {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0px;
    z-index: 2;
}

.sushi-marker .star-mini {
    font-size: 8px;
    text-shadow: 1px 1px 0 #333;
}

.sushi-sprite-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sushi-sprite-canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.sushi-marker.locked .sushi-sprite-canvas {
    filter: grayscale(100%) brightness(0.5);
}

.sushi-marker.locked .sushi-level-num,
.sushi-marker.locked .sushi-stars {
    opacity: 0.5;
}

.sushi-lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.sushi-lock-overlay .locked-icon-small {
    width: 14px;
    height: 14px;
}

/* ========================================
   TIMER URGENCY STATES
   ======================================== */

#timer-display.timer-yellow #timer {
    color: #F9A825;
}

#timer-display.timer-orange #timer {
    color: #EF6C00;
    animation: timerPulse 1s ease-in-out infinite;
}

#timer-display.timer-red #timer {
    color: #D32F2F;
    animation: timerShake 0.3s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes timerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* ========================================
   LOADING SCREEN
   ======================================== */

/* ========================================
   LOADING SCREEN — Sushi conveyor-belt loader
   (design_handoff_loading_screen). Purple bg + dot pattern, floating sushi,
   logo, and the progress bar reimagined as a running conveyor with a riding
   plate of nigiri. Landscape reference canvas ~816×362.
   Palette: purple #6C5CE7 / beltDeep #463AA8 / pink #FD79A8 / pinkDeep
   #C94A7B / yellow #FDCB6E / cream #FFF3D6 / ink #2A1E3F.
   ======================================== */
#loading-screen {
    position: absolute;
    inset: 0;
    background: #6C5CE7;
    image-rendering: pixelated;
    z-index: 1000;
    transition: opacity 0.5s ease;
}
#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Cross-stitch dot pattern, full bleed */
.ls2-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Logo lockup — centered then nudged up, idle bob */
.ls2-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 244px;
    height: 244px;
    transform: translate(-50%, -58%);
    image-rendering: pixelated;
    user-select: none;
    filter: drop-shadow(0 7px 0 rgba(42, 30, 63, 0.35));
    animation: loadLogoBob 3.2s ease-in-out infinite;
    /* keep the bob centered on the nudged position */
    transform-origin: center;
}

/* Floating background sushi — gentle bob + rotate, soft drop shadow */
.ls2-float {
    position: absolute;
    image-rendering: pixelated;
    user-select: none;
    filter: drop-shadow(0 3px 0 rgba(42, 30, 63, 0.3));
    animation: floatY 2.2s ease-in-out infinite;
}
.ls2-float-1 { left: 6%;  top: 16%; width: 69px; animation-delay: 0s;   }
.ls2-float-2 { left: 82%; top: 12%; width: 69px; animation-delay: 0.3s; }
.ls2-float-3 { left: 12%; top: 44%; width: 48px; animation-delay: 0.6s; }
.ls2-float-4 { left: 84%; top: 42%; width: 54px; animation-delay: 0.9s; }

/* Bottom loader group */
.ls2-loader {
    position: absolute;
    bottom: 34px;
    left: 60px;
    right: 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Belt wrapper reserves room above the belt for the riding plate */
.ls2-belt-wrap {
    position: relative;
    padding-top: 30px;
}
.ls2-belt {
    position: relative;
    height: 34px;
    /* Pixel-art stepped rounded ends (2 hard 3px steps → chunky ~6px corner) */
    --belt-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% 28px, calc(100% - 3px) 28px,
        calc(100% - 3px) 31px, calc(100% - 6px) 31px,
        calc(100% - 6px) 34px, 6px 34px,
        6px 31px, 3px 31px,
        3px 28px, 0 28px,
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
}
/* Drop shadow drawn as a sibling (clip-path eats box-shadow) */
.ls2-belt-shadow {
    position: absolute;
    left: 0; right: 0; top: 5px;
    height: 34px;
    background: #2A1E3F;
    clip-path: var(--belt-clip);
    -webkit-clip-path: var(--belt-clip);
}
/* Ink shell = the chunky pixel border */
.ls2-belt-shell {
    position: absolute;
    inset: 0;
    background: #2A1E3F;
    clip-path: var(--belt-clip);
    -webkit-clip-path: var(--belt-clip);
}
/* Belt surface, inset by the border, clipped to the smaller stepped shape */
.ls2-belt-surface {
    position: absolute;
    inset: 3px;
    overflow: hidden;
    background: #463AA8;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    --belt-inner-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% 22px, calc(100% - 3px) 22px,
        calc(100% - 3px) 25px, calc(100% - 6px) 25px,
        calc(100% - 6px) 28px, 6px 28px,
        6px 25px, 3px 25px,
        3px 22px, 0 22px,
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
    clip-path: var(--belt-inner-clip);
    -webkit-clip-path: var(--belt-inner-clip);
}
/* Unloaded treads — dark, always scrolling */
.ls2-treads {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, #4a3a6e 0 13px, #34285190 13px 16px);
    background-size: 32px 100%;
    animation: beltRoll 0.5s linear infinite;
    opacity: 0.9;
}
/* Loaded track — pink, fills with progress (#loading-bar-fill drives width) */
.ls2-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(180deg, #FD79A8 0 50%, #C94A7B 50% 100%);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45);
    transition: width 0.08s linear;
    overflow: hidden;
}
.ls2-fill-treads {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(42, 30, 63, 0.28) 0 2px, transparent 2px 16px);
    background-size: 32px 100%;
    animation: beltRoll 0.5s linear infinite;
}

/* Plate riding the leading edge of the fill (#ls2-plate left drives position) */
.ls2-plate {
    position: absolute;
    left: 0%;
    top: 34px;
    transform: translate(-50%, -50%);
    transition: left 0.08s linear;
    pointer-events: none;
    z-index: 3;
}
.ls2-plate-ride {
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 85%;
    animation: plateRide 1.8s ease-in-out infinite;
}
/* Nigiri sits on the plate, overlapping its top edge */
.ls2-plate-sushi {
    width: 60px;
    height: auto;
    margin-bottom: -22px;
    image-rendering: pixelated;
    user-select: none;
    position: relative;
    z-index: 1;
}
/* Plate — stacked ink outline so the pink plate reads on the pink fill */
.ls2-plate-img {
    width: 84px;
    height: auto;
    image-rendering: pixelated;
    user-select: none;
    display: block;
    filter:
        drop-shadow(1.5px 0 0 #2A1E3F)
        drop-shadow(-1.5px 0 0 #2A1E3F)
        drop-shadow(0 1.5px 0 #2A1E3F)
        drop-shadow(0 -1.5px 0 #2A1E3F)
        drop-shadow(0 5px 0 rgba(42, 30, 63, 0.4));
}

/* Caption row: rotating TIP (left) + percent (right) */
.ls2-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #FFF3D6;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0 #2A1E3F;
}
.ls2-tip { opacity: 0.95; }
.ls2-percent { color: #FDCB6E; }

.ls2-version {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: rgba(255, 255, 255, 0.45);
}

@keyframes floatY {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-10px) rotate(4deg); }
}
@keyframes loadLogoBob {
    0%, 100% { transform: translate(-50%, -58%) translateY(0) rotate(0deg); }
    50%      { transform: translate(-50%, -58%) translateY(-5px) rotate(0.5deg); }
}
@keyframes beltRoll {
    0%   { background-position: 0 0; }
    100% { background-position: 32px 0; }
}
@keyframes plateRide {
    0%   { transform: translateY(0) rotate(-6deg); }
    50%  { transform: translateY(-1px) rotate(-3deg); }
    100% { transform: translateY(0) rotate(-6deg); }
}

/* ========================================
   LEVEL TRANSITION SCREEN
   ======================================== */

#level-transition-screen {
    background: rgba(59, 40, 22, 0.95);
    z-index: 250;
    transition: opacity 0.4s ease;
}

#level-transition-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.transition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.transition-restaurant {
    font-size: 12px;
    color: rgba(245, 240, 225, 0.6);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0;
}

.transition-level {
    font-size: 28px;
    color: var(--gold);
    text-shadow: 2px 4px 0 rgba(0, 0, 0, 0.4);
    margin-bottom: 8px;
}

.transition-tip {
    font-size: 10px;
    color: rgba(245, 240, 225, 0.5);
    max-width: 280px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ========================================
   AD REWARD BUTTONS
   ======================================== */

.ad-reward-btn {
    background: linear-gradient(180deg, #7B1FA2 0%, #6A1B9A 50%, #4A148C 100%);
    color: #FFFFFF;
    border: 3px solid #4A148C;
    padding: 10px 20px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(74, 20, 140, 0.4);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ad-reward-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(74, 20, 140, 0.4);
}

.ad-reward-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.ad-reward-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ad-reward-btn.hidden {
    display: none;
}

.ad-cooldown-text {
    font-size: 9px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ========================================
   CONTINUE OPTIONS (Game Over)
   ======================================== */

.continue-options {
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
}

.continue-options.hidden {
    display: none;
}

.continue-label {
    font-size: 14px;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 8px;
}

.gem-continue-btn {
    background: linear-gradient(180deg, #26C6DA 0%, #00ACC1 50%, #00838F 100%);
    color: #FFFFFF;
    border: 3px solid #00838F;
    padding: 10px 20px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0, 131, 143, 0.4);
    min-height: 48px;
}

.gem-continue-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ========================================
   GEM SHOP CARDS (IAP)
   ======================================== */

.gem-shop-card {
    background: var(--cream-dark);
    border: 2px solid var(--wood-border);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gem-shop-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gem-shop-icon {
    font-size: 28px;
}

.gem-shop-info {
    flex: 1;
}

.gem-shop-name {
    font-size: 10px;
    color: var(--text-primary);
    font-weight: 700;
}

.gem-shop-amount {
    font-size: 8px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.gem-shop-badge {
    font-size: 8px;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FF6F00, #E65100);
    padding: 3px 6px;
    font-weight: 700;
}

.gem-shop-buy-btn {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Press Start 2P', cursive;
    color: #FFFFFF;
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 50%, #2E7D32 100%);
    border: 3px solid #1B5E20;
    cursor: pointer;
    box-shadow: 3px 3px 0 #1B5E20;
    min-height: 48px;
}

.gem-shop-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 4px 4px 0 #1B5E20;
}

.gem-shop-buy-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

.gem-shop-buy-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.gem-shop-restore {
    margin-top: 12px;
    width: 100%;
}

/* ========================================
   DAILY REWARD POPUP
   ======================================== */

.daily-reward-content {
    max-width: 340px;
}

.daily-streak {
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 12px;
}

.daily-streak-label {
    color: var(--text-secondary);
}

.daily-day-indicator {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.daily-day-dot {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wood-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--text-secondary);
}

.daily-day-dot.claimed {
    background: var(--success);
    color: #FFFFFF;
    border-color: var(--success);
}

.daily-day-dot.today {
    background: var(--gold);
    color: #1a1a1a;
    border-color: var(--gold);
    animation: pulse 1.5s ease-in-out infinite;
}

.daily-reward-display {
    font-size: 16px;
    color: var(--gold);
    padding: 12px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
    margin-bottom: 16px;
}

/* ========================================
   INFINITE MODE HUD
   ======================================== */

#infinite-hud {
    position: absolute;
    top: calc(var(--safe-top, 0px) + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: rgba(59, 40, 22, 0.85);
    border: 2px solid var(--accent);
    border-radius: 8px;
    z-index: 100;
    font-family: 'Press Start 2P', cursive;
}

#infinite-hud.hidden {
    display: none;
}

#infinite-orders {
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
}

#infinite-strikes {
    display: flex;
    gap: 0;
    align-items: center;
}

.strike-heart {
    width: 20px;
    height: 20px;
    background: url('sprites/Heart.png') no-repeat;
    background-size: 60px 60px;
    background-position-y: -20px;
    image-rendering: pixelated;
    transition: all 0.3s ease;
}

.strike-heart[data-index="0"] { background-position-x: 0; }
.strike-heart[data-index="1"] { background-position-x: -20px; }
.strike-heart[data-index="2"] { background-position-x: -40px; }

.strike-heart.strike-active {
    opacity: 1;
}

.strike-heart.strike-lost {
    opacity: 0.2;
    filter: grayscale(1);
    animation: strikeLost 0.5s ease;
}

@keyframes strikeLost {
    0% { transform: scale(1.3); }
    50% { transform: scale(0.8) translateX(-3px); }
    70% { transform: scale(0.8) translateX(3px); }
    100% { transform: scale(1); }
}

/* Phase Transition Banner */
#phase-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    pointer-events: none;
}

#phase-banner.hidden {
    display: none;
}

.phase-banner-content {
    text-align: center;
    padding: 20px 40px;
    background: rgba(59, 40, 22, 0.92);
    border: 3px solid #FFD700;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.phase-banner-animate .phase-banner-content {
    animation: phaseBannerIn 0.5s ease-out, phaseBannerOut 0.5s ease-in 2.3s;
}

.phase-banner-content h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    color: #FFD700;
    margin-bottom: 8px;
}

.phase-banner-content p {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #AAFFAA;
}

@keyframes phaseBannerIn {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes phaseBannerOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
}

/* Infinite Mode Game Over Results */
.infinite-results {
    text-align: left;
    width: 100%;
}

.infinite-result-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.infinite-result-row span {
    color: var(--text-secondary);
}

.infinite-result-row strong {
    color: var(--ui-light);
}

.infinite-near-miss {
    text-align: center;
    margin-top: 8px;
    font-size: 10px;
    color: #FFA726;
    font-style: italic;
}

/* ========================================
   RECEIPT-STYLE GAME-OVER / LEVEL-CLEAR SCREEN
   Pixel-art thermal printer that feeds a paper
   receipt UPWARD out of its slot. Spec lives in
   design_handoff_receipt_screen/README.md.
   ======================================== */

#game-over-screen.receipt-screen {
    /* Override default .overlay (cream + blur). Pure black dim so the
       frozen level scene shows through, fading toward solid black at the
       edges. Same treatment for win and loss — colour comes from the
       printer + receipt, not the backdrop. */
    background: radial-gradient(ellipse at 50% 60%,
                rgba(0, 0, 0, 0.78) 0%,
                rgba(0, 0, 0, 0.94) 70%,
                rgba(0, 0, 0, 1.00) 100%);
    backdrop-filter: none;
    padding: 0;
    overflow: hidden;
    z-index: 250; /* above HUD (200), below loading-screen (1000) */
    animation: receiptOverlayFadeIn 450ms ease-out backwards;
}

/* Bg dots removed — clash with the visible level scene underneath. */
#game-over-screen .receipt-bg-dots {
    display: none;
}

/* ----- Printer (split layers around the slot) ----- */
/* Asset 752×397, slot dark band at y=217..230. Render at 360×190.
   Split fraction = 217/397 ≈ 0.547 — clip-path:inset top/bottom uses %. */
#game-over-screen .printer-layer {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 432px;
    height: 228px;
    pointer-events: none;
    /* Slide up from below + fade in once the overlay backdrop has darkened */
    animation: printerSlideIn 700ms cubic-bezier(0.18, 0.72, 0.22, 1.0) 250ms backwards;
}
#game-over-screen .printer-layer img {
    width: 100%; height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    user-select: none;
    display: block;
}
#game-over-screen .printer-back  { z-index: 3; }
#game-over-screen .printer-back  img { clip-path: inset(0 0 45.3% 0); }
#game-over-screen .printer-front { z-index: 6; }
#game-over-screen .printer-front img { clip-path: inset(54.7% 0 0 0); }

/* Green status LED overlay (blinks on top of asset's existing LED) */
#game-over-screen .printer-led {
    position: absolute;
    /* asset LED at (0.8557, 0.6625) of 360×190 → (308, 126); 7×6 px overlay */
    left: calc(85.57% - 3.5px);
    top:  calc(66.25% - 3px);
    width: 7px; height: 6px;
    background: #7ed957;
    box-shadow: 0 0 4px #7ed957;
    animation: ledBlink 0.9s steps(2) infinite;
}

/* ----- Receipt paper container ----- */
/* Slot center is offset 19px LEFT of the printer's horizontal center
   (printer has buttons on the right). Receipt is 200px wide, narrower
   than the ~188px-wide slot opening so paper visually sits inside it. */
#game-over-screen #receipt-scroll {
    position: absolute;
    /* Bottom-anchored to the printer slot and sized to its CONTENT (not the
       viewport), so the receipt always emerges from the printer regardless of
       screen height. Previously this also pinned `top: 16px`, stretching the
       container to the full viewport — on tall screens the finished receipt
       then floated near the top instead of sitting in the slot. max-height
       keeps long receipts on-screen and scrollable; align-items:flex-end pins
       the paper to the slot and clips older lines off the top as it prints. */
    bottom: 45px;          /* sits at the slot; front layer hides the bottom */
    max-height: calc(100% - 60px);
    left: calc(50% - 19px);
    transform: translateX(-50%);
    width: 240px;
    overflow-x: hidden;
    overflow-y: hidden;    /* JS swaps to auto when print is done */
    display: flex;
    align-items: flex-end;
    filter: drop-shadow(0 -4px 0 rgba(0,0,0,0.18));
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 4;
}
#game-over-screen #receipt-scroll.done {
    overflow-y: auto;
    display: block;
    align-items: stretch;
}
#game-over-screen #receipt-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

#game-over-screen .receipt-paper {
    width: 100%;
    background: #FFFDF5;
    padding: 12px 12px 8px;
    color: #1c1c1c;
    font-family: 'VT323', 'Courier New', monospace;
    position: relative;
    /* Jagged TORN TOP edge — small tileable zigzag (24px) repeated across
       the paper width so the mask adapts to any receipt width without
       stretching the pixel-art look. */
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8'><path d='M0,8 L0,5 L6,1 L12,5 L18,1 L24,5 L24,8 Z' fill='black'/></svg>"),
        linear-gradient(black, black);
    -webkit-mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: top, bottom;
    -webkit-mask-size: 24px 8px, 100% calc(100% - 8px);
    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8'><path d='M0,8 L0,5 L6,1 L12,5 L18,1 L24,5 L24,8 Z' fill='black'/></svg>"),
        linear-gradient(black, black);
    mask-repeat: repeat-x, no-repeat;
    mask-position: top, bottom;
    mask-size: 24px 8px, 100% calc(100% - 8px);
}

/* ----- Per-line styles (each .r-line is one printed row) ----- */
.r-line {
    animation: receiptFeed 180ms cubic-bezier(0.2, 0.9, 0.4, 1.05) backwards;
}
.r-spacer  { height: 8px; }
.r-logo {
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px; letter-spacing: 1px;
    margin-bottom: 2px;
}
.r-subtitle {
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 14px; letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.r-rule {
    height: 0;
    border-top: 2.5px solid #1c1c1c;
    margin: 6px 0;
}
.r-dashes {
    font-family: 'VT323', monospace;
    font-size: 16px; letter-spacing: 1px;
    color: #1c1c1c;
    margin: 4px 0;
    white-space: nowrap; overflow: hidden;
}
.r-header {
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px; letter-spacing: 1px;
    margin: 6px 0 2px;
}
.r-row, .r-rowBig {
    display: flex; align-items: center;
    flex-wrap: nowrap; white-space: nowrap;
    font-family: 'VT323', monospace;
    line-height: 1.15;
    gap: 4px;
}
.r-row    { font-size: 13px; margin: 1px 0; }
.r-rowBig { font-size: 15px; margin: 4px 0; font-weight: 700; }
.r-row .r-leader, .r-rowBig .r-leader {
    flex: 1; min-width: 16px;
    height: 1px;
    border-bottom: 2px dotted #1c1c1c;
    transform: translateY(2px);
    margin: 0 4px;
}
.r-row .r-value, .r-rowBig .r-value { flex-shrink: 0; font-weight: 700; }
.r-row .r-label, .r-rowBig .r-label { flex-shrink: 0; }
.r-rank {
    text-align: center;
    margin: 8px 0 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #6C5CE7;
    text-shadow: 1px 1px 0 #ddd;
}
#game-over-screen.won .r-rank { color: #008B8A; }
.r-stars {
    display: flex; justify-content: center; gap: 8px;
    margin: 8px 0 6px;
}
.r-stars .r-star {
    width: 22px; height: 22px;
    image-rendering: pixelated;
    animation: starPop 360ms cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
.r-stars .r-star.filled  { filter: drop-shadow(0 0 3px rgba(255,200,60,0.6)); }
.r-stars .r-star.empty   { filter: grayscale(1) opacity(0.35); }
.r-tagline {
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 13px; color: #444;
    margin-top: 2px;
    padding: 0 4px;
    line-height: 1.15;
    white-space: normal;
}
/* Watch-ad continue "sticker" — the one full-color pixel element printed onto
   the monochrome thermal receipt (lost runs only). design_handoff_gift_unlock_v2 */
.r-adOffer { margin: 2px 0 0; }
.r-ad-wrap { width: 100%; }
.r-ad-small {
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 12px; letter-spacing: 1.5px; color: #666;
    margin-bottom: 5px;
}
.r-ad-foot { font-size: 11px; letter-spacing: 1px; color: #888; margin: 6px 0 0; }
#game-over-screen .r-ad-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 48px;
    background: #FDCB6E;
    color: #2A1E3F;
    /* pixel recipe: 4 inset outline edges + top highlight + bottom shade + drop face */
    box-shadow: inset 3px 0 0 #2A1E3F,
                inset -3px 0 0 #2A1E3F,
                inset 0 3px 0 #2A1E3F,
                inset 0 -3px 0 #2A1E3F,
                inset 0 6px 0 -3px rgba(255,255,255,0.7),
                inset 0 -9px 0 -3px #D49831,
                0 5px 0 0 #2A1E3F;
    transition: transform 70ms, box-shadow 70ms, background 90ms;
    animation: adOfferPulse 1.6s ease-in-out infinite;
}
#game-over-screen .r-ad-btn:hover { background: #FFD98A; animation: none; }
#game-over-screen .r-ad-btn:active {
    transform: translateY(5px);
    animation: none;
    box-shadow: inset 3px 0 0 #2A1E3F,
                inset -3px 0 0 #2A1E3F,
                inset 0 3px 0 #2A1E3F,
                inset 0 -3px 0 #2A1E3F,
                inset 0 6px 0 -3px rgba(255,255,255,0.7),
                inset 0 -9px 0 -3px #D49831;
}
#game-over-screen .r-ad-btn:disabled { opacity: 0.45; cursor: default; animation: none; }
.r-ad-tv { display: block; }
.r-ad-labels { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.r-ad-watch {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px; letter-spacing: 0.5px; line-height: 1;
    color: #2A1E3F;
}
.r-ad-free {
    font-family: 'VT323', monospace;
    font-size: 14px; line-height: 1; font-weight: 700;
    color: #463AA8;
}
@keyframes adOfferPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* "Keep Cooking!" gem continue — primary gem-pill button on the fail receipt */
#game-over-screen .r-gem-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 48px;
    background: #A29BFE;
    color: #2A1E3F;
    box-shadow: inset 3px 0 0 #2A1E3F,
                inset -3px 0 0 #2A1E3F,
                inset 0 3px 0 #2A1E3F,
                inset 0 -3px 0 #2A1E3F,
                inset 0 6px 0 -3px rgba(255,255,255,0.7),
                inset 0 -9px 0 -3px #6C5CE7,
                0 5px 0 0 #2A1E3F;
    transition: transform 70ms, box-shadow 70ms, background 90ms;
    animation: adOfferPulse 1.6s ease-in-out infinite;
}
#game-over-screen .r-gem-btn:hover { background: #B6B0FF; animation: none; }
#game-over-screen .r-gem-btn:active {
    transform: translateY(5px);
    animation: none;
    box-shadow: inset 3px 0 0 #2A1E3F,
                inset -3px 0 0 #2A1E3F,
                inset 0 3px 0 #2A1E3F,
                inset 0 -3px 0 #2A1E3F,
                inset 0 6px 0 -3px rgba(255,255,255,0.7),
                inset 0 -9px 0 -3px #6C5CE7;
}
#game-over-screen .r-gem-btn:disabled { opacity: 0.45; cursor: default; animation: none; }
/* Grayed (can't afford) — still tappable to open the gem top-up rescue */
#game-over-screen .r-gem-btn.locked {
    background: #C9C9C9;
    animation: none;
    box-shadow: inset 3px 0 0 #2A1E3F,
                inset -3px 0 0 #2A1E3F,
                inset 0 3px 0 #2A1E3F,
                inset 0 -3px 0 #2A1E3F,
                inset 0 6px 0 -3px rgba(255,255,255,0.55),
                inset 0 -9px 0 -3px #9A9A9A,
                0 5px 0 0 #2A1E3F;
}
.r-gem-price {
    font-family: 'VT323', monospace;
    font-size: 14px; line-height: 1; font-weight: 700;
    color: #463AA8;
}
/* Small watch-ad row beneath the gem pill (fallback revive / gem top-up) */
#game-over-screen .r-ad-row-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 34px;
    margin-top: 6px;
    background: #FFFDF5;
    color: #1c1c1c;
    border: 2px dashed #1c1c1c;
    box-shadow: 2px 2px 0 #1c1c1c;
    transition: background 80ms, transform 60ms, box-shadow 60ms;
}
#game-over-screen .r-ad-row-btn:hover { background: #FDCB6E; }
#game-over-screen .r-ad-row-btn:active { transform: translate(2px, 2px); box-shadow: none; }
#game-over-screen .r-ad-row-btn:disabled { opacity: 0.45; cursor: default; }
#game-over-screen .r-ad-row-btn .r-ad-tv { width: 22px; height: 19px; }
.r-ad-row-label {
    font-family: 'VT323', monospace;
    font-size: 13px; letter-spacing: 1px; line-height: 1;
}

.r-barcode {
    margin: 6px auto 2px;
    text-align: center;
}
.r-barcode .r-bars {
    display: inline-flex; align-items: flex-end; gap: 0; height: 30px;
}
.r-barcode .r-bars > span { display: inline-block; height: 100%; }
.r-barcode .r-bars > span.bar { background: #1c1c1c; }
.r-barcode .r-num {
    font-family: 'VT323', monospace;
    font-size: 11px; letter-spacing: 3px;
    margin-top: 2px;
    color: #1c1c1c;
}
.r-thanks {
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 11px; letter-spacing: 1px;
    color: #666;
    margin-top: 4px;
}
.r-actions {
    display: flex; gap: 8px;
    margin: 8px 0 4px;
    justify-content: center;
}
/* Prefixed with #game-over-screen so specificity (1,1,0) defeats the
   generic ".overlay button" rule (0,1,1) earlier in this file. Without
   this the stamps inherit the chunky gold-button look + iOS 48×48 min. */
#game-over-screen .r-stamp {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    flex: 1;
    min-width: 0; min-height: 0;
    text-align: center;
    padding: 6px 4px;
    background: #FFFDF5;
    color: #1c1c1c;
    border: 2px dashed #1c1c1c;
    border-radius: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px; letter-spacing: 1px;
    line-height: 1.2;
    box-shadow: 2px 2px 0 #1c1c1c;
    transition: background 80ms, color 80ms, transform 60ms, box-shadow 60ms;
}
#game-over-screen .r-stamp:hover { color: #FFFDF5; }
#game-over-screen .r-stamp.r-stamp-retry:hover  { background: #FD79A8; }
#game-over-screen .r-stamp.r-stamp-home:hover   { background: #6C5CE7; }
#game-over-screen .r-stamp.r-stamp-next:hover   { background: #00CEC9; }
#game-over-screen .r-stamp.r-stamp-double:hover { background: #FDCB6E; }
#game-over-screen .r-stamp.r-stamp-double { border-color: #B8860B; color: #8B6914; }
#game-over-screen .r-stamp:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
#game-over-screen .r-stamp:active {
    box-shadow: inset 0 2px 0 rgba(0,0,0,0.2);
    transform: translate(2px, 2px);
}

/* Print-head cursor — blinking dashed bar at bottom of paper while printing */
#game-over-screen .receipt-cursor {
    height: 6px;
    margin-top: 2px;
    background: repeating-linear-gradient(90deg, #1c1c1c 0 2px, transparent 2px 5px);
    animation: printerHead 220ms steps(4) infinite;
    opacity: 0.6;
}
#game-over-screen.done .receipt-cursor { display: none; }

/* Top fade band (only while printing) so chip reads cleanly. Tinted to
   the dark backdrop so the band blends with the new vignette. */
#game-over-screen .receipt-top-fade {
    position: absolute; left: 0; right: 0; top: 0;
    height: 36px;
    background: linear-gradient(180deg, rgba(5,2,8,0.85) 0%, transparent 100%);
    pointer-events: none;
    z-index: 7;
}
#game-over-screen.done .receipt-top-fade { display: none; }

/* Confetti rain layer — DOM-driven so pieces render ABOVE the dark
   backdrop. JS populates pieces with random left/delay/color. */
#game-over-screen .receipt-confetti {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 8;  /* above printer-front (6), below chip (12) */
}
#game-over-screen .receipt-confetti .confetti-piece {
    position: absolute;
    top: -24px;
    width: 8px; height: 12px;
    will-change: transform, opacity;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0%   { transform: translate3d(0, -24px, 0) rotate(0deg);    opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate3d(var(--cx, 0), 110vh, 0) rotate(var(--rot, 720deg)); opacity: 0; }
}

/* SKIP / TOP chip — same specificity bump as .r-stamp */
#game-over-screen .receipt-chip {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute; top: 12px; right: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px; letter-spacing: 1px;
    line-height: 1;
    min-width: 0; min-height: 0;
    z-index: 12;
}

/* Continue-options banner — sits above the printer area, top-center */
#game-over-screen #continue-options {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background: rgba(0,0,0,0.6);
    padding: 10px 14px;
    border-radius: 10px;
}

/* ----- Animations ----- */
@keyframes receiptOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes printerSlideIn {
    0%   { transform: translate(-50%, 110%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translate(-50%, 0);    opacity: 1; }
}
@keyframes receiptFeed {
    0%   { opacity: 0; transform: translateY(8px) skewY(0.8deg); filter: blur(0.4px); }
    50%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) skewY(0); filter: blur(0); }
}
@keyframes printerHead {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
}
@keyframes ledBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@keyframes starPop {
    0%   { opacity: 0; transform: scale(0.3) rotate(-30deg); }
    60%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ========================================
   LEVEL POPUP — STORYBOOK REDESIGN
   (design_handoff_start_and_popup)
   Appended last so .lp-* rules win over earlier .ls-* rules.
   ======================================== */

:root {
    --lp-ink:        #3A2417;
    --lp-inkSoft:    #7A5E48;
    --lp-cream:      #FFF1D4;
    --lp-creamHi:    #FFF8E5;
    --lp-creamShade: #F4DDB0;
    --lp-panel:      #FFEAB6;
    --lp-orange:     #F2A93B;
    --lp-orangeDark: #C67A1F;
    --lp-pink:       #FF8FAE;
    --lp-pinkDark:   #D9627E;
    --lp-green:      #7FC95E;
    --lp-greenDark:  #4F8F36;
    --lp-teal:       #54C6CC;
    --lp-yellow:     #FFD544;
}

.lp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(58, 36, 23, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    padding: 8px;
    /* Honor the iPhone notch / Dynamic Island insets on all four sides
       so the popup never gets clipped by the island when the phone is
       held with the island on the left. */
    padding-top: calc(8px + var(--safe-top, 0px));
    padding-bottom: calc(8px + var(--safe-bottom, 0px));
    padding-left: calc(8px + var(--safe-left, 0px));
    padding-right: calc(8px + var(--safe-right, 0px));
    box-sizing: border-box;
}
.lp-backdrop.hidden { display: none; }
.lp-backdrop:not(.hidden) { animation: overlayFadeIn 0.25s ease; }

.lp-card {
    position: relative;
    width: min(700px, 100%);
    height: min(516px, 100%);
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-style: solid;
    border-width: 12px;
    border-image-source: url('sprites/UI/panels/panel_storybook.png');
    border-image-slice: 4 fill;
    border-image-repeat: stretch;
    border-image-width: 12px;
    image-rendering: pixelated;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 0 var(--lp-ink)) drop-shadow(0 12px 16px rgba(58, 36, 23, 0.35));
    padding: 4px 0 0;
    box-sizing: border-box;
    overflow: visible;
}

/* === Top ribbon === */
.lp-ribbon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.lp-back-chip {
    all: unset;
    cursor: pointer;
    position: relative;
    width: 36px; height: 36px;
    background: var(--lp-cream);
    border-radius: 50%;
    border: 3px solid var(--lp-ink);
    box-shadow: 0 3px 0 var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* Invisible hit-area extension to reach the 48×48 target without changing visuals. */
.lp-back-chip::before {
    content: '';
    position: absolute;
    inset: -6px;
    pointer-events: auto;
}
.lp-back-chip:hover { transform: translateY(-1px); }
.lp-back-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lp-ink); }
.lp-back-chip:focus-visible,
.lp-tab.ls-nav-tab:focus-visible {
    outline: 3px solid var(--lp-yellow);
    outline-offset: 2px;
}

.lp-ribbon-pill {
    flex: 1;
    position: relative;
    height: 56px;
    background: transparent;
    /* Match the soft panels' pixel scale: source has 3px corner radius
       rendered at 9px (3× scale) — same source→screen pixel ratio as
       .lp-soft-panel's slice 4 / border-width 12 (also 3×). */
    border-style: solid;
    border-width: 9px;
    border-image-source: url('sprites/UI/ui_pill_banner.png');
    border-image-slice: 3 fill;
    border-image-repeat: stretch;
    border-image-width: 9px;
    image-rendering: pixelated;
    border-radius: 0;
    filter: drop-shadow(0 3px 0 var(--lp-ink));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    line-height: 1;
    box-sizing: border-box;
    min-width: 0;
}
.lp-ribbon-cart {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.lp-ribbon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
/* Decorative ribbon notches removed (rotated-square pseudo-elements that
   peeked out behind the back chip and currency pills — they read as small
   orange triangles). */

.lp-ribbon-chapter {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: var(--lp-creamHi);
    text-shadow: 1.5px 1.5px 0 var(--lp-orangeDark);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
}
.lp-ribbon-title {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--lp-creamHi);
    text-shadow: 2px 2px 0 var(--lp-orangeDark);
    letter-spacing: 0.5px;
    margin: 2px 0 0;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@media (max-width: 400px) {
    .lp-ribbon-title { font-size: 13px; }
}

.lp-currency-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.lp-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--lp-creamHi);
    border: 2px solid var(--lp-ink);
    border-radius: 12px;
    box-shadow: 0 2px 0 var(--lp-ink);
    padding: 2px 8px 2px 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--lp-ink);
    min-width: 70px;
    box-sizing: border-box;
}
.lp-coin-pill > span:not(.lp-pill-plus) {
    margin-left: auto;
}
.lp-pill-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin-left: -2px;
}
.lp-pill-plus {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lp-green);
    border: 1.5px solid var(--lp-ink);
    color: var(--lp-creamHi);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: -4px;
    box-sizing: border-box;
}

/* === Body === */
.lp-card .lp-body {
    flex: 1;
    display: flex;
    gap: 10px;
    min-height: 0;
    /* Small inset between the cream card frame and the red panels. */
    padding: 2px 2px 0;
    box-sizing: border-box;
}

.lp-card .lp-left {
    width: 420px;
    max-width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    /* min-height:0 lets the belt panel (flex:1) actually shrink when the
       card is height-constrained; without this the tab bar gets pushed
       below the card boundary on landscape phones. */
    min-height: 0;
    /* Cream background + red frame ::after now live here so the frame
       encompasses both the belt panel and the navigation tab bar below it.
       padding-bottom = frame thickness so the tabs sit just above the bottom
       frame border (not under it). */
    background: rgb(255, 246, 223);
    background-clip: border-box;
    padding: 0 0 28px;
    /* border-radius rounds the cream background's corners (so it tucks behind
       the frame's rounded red corners) WITHOUT overflow:hidden — which would
       clip the .lp-left-frame descendant. iOS/WKWebView refuses to paint a
       border-image on an element clipped by an ancestor's overflow+radius, so
       overflow:hidden here erased the red frame on device. The belt content is
       rounded by .lp-belt-panel's own overflow+radius instead. */
    border-radius: 16px;
    filter: none;
    image-rendering: pixelated;
}
/* Real element (not ::after) — iOS/WKWebView doesn't paint border-image on
   pseudo-elements, which left the panel with no red frame on device. */
.lp-card .lp-left .lp-left-frame {
    position: absolute;
    /* explicit longhand instead of `inset: 0` for older WKWebView support */
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 20; /* above belt (z-1) and tab bar (z-35 on tabs not bar), below the floating stickers (z-30) */
    /* NON-transparent border-color: iOS/WKWebView refuses to paint a
       border-image when border-color is `transparent` (Chrome ignores this).
       Using the frame's own red (#F96E46) means the border-image covers it
       normally, and any fallback/corner bleed matches the frame. */
    border: 28px solid #F96E46;
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 9 10 9 10;
    border-image-repeat: stretch;
    border-image-width: 28px;
    image-rendering: pixelated;
}

/* === 9-slice panel (panel_frame_red.png, 21×19, 5px corners) === */
.lp-soft-panel {
    position: relative;
    background: rgb(255, 246, 223);
    background-clip: padding-box;
    border-style: solid;
    border-width: 28px;
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 9 10 9 10;
    border-image-repeat: stretch;
    border-image-width: 28px;
    image-rendering: pixelated;
    filter: none;
    border-radius: 0;
}

/* The belt panel is now just a transparent flex region — the cream background
   and the red frame ::after overlay live on .lp-left (see below) so the frame
   encompasses both the belt panel and the navigation tab bar beneath it. The
   panel's own padding still insets the belt to the frame midline horizontally. */
.lp-card .lp-left .lp-belt-panel.ls-left-panel {
    border: 0;
    border-image: none;
    border-radius: 0;
    background: transparent;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 14px; /* half the 28px frame: belt edge lands at the border midline */
}
.lp-card .lp-right.ls-right-panel {
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 9 10 9 10;
    border-image-width: 28px;
    border-width: 28px;
    /* Match the left panel: cream fills the full border-box so the content
       area extends under the frame to its edge (border-box, not padding-box,
       which had left an inset margin ring). border-radius rounds the corners
       so the cream tucks behind the frame's rounded red corners. */
    border-radius: 16px;
    background: rgb(255, 246, 223);
    background-clip: border-box;
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Belt panel decorative dot pattern — removed per design. */
.lp-belt-panel::before { display: none; }

/* Red pixel banner centered on the left panel's top frame edge — shows the
   active tab name (Levels / Upgrades / Menu), updated by switchLeftPanel(). */
.lp-left-banner {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 31;
    background: #D94A3D;
    border: 2px solid var(--lp-ink);
    border-radius: 4px;
    box-shadow: 0 2px 0 var(--lp-ink);
    padding: 5px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--lp-creamHi);
    text-shadow: 1.5px 1.5px 0 rgba(58, 36, 23, 0.45);
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.lp-progress-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    background: var(--lp-creamHi);
    border: 2px solid var(--lp-ink);
    border-radius: 12px;
    padding: 2px 7px 2px 4px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
}

/* Belt scroll area inside the soft panel.
   padding-top must be tall enough that the lane-0 marker (whose center sits
   at ~LANE_OFFSET_TOP * scale ≈ 19px below the belt-wrap top, with ~36px of
   stars/sushi above its center) clears the top mask fade. */
.lp-belt-panel .lp-belt-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* top padding clears the lane-0 markers' star rows sitting above their
       centers plus the 24px top mask fade. Trimmed from 48px now that the
       ★ N/M progress chip moved into the header ribbon. */
    padding: 40px 0 44px;
    position: relative;
    scrollbar-width: thin;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.lp-card .ls-left-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: visible;
}
.lp-card .ls-left-content.active {
    display: block;
}

/* === Tab bar (storybook sprite buttons) === */
.lp-tab-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 0;
    height: auto;
}
/* Tab bar sits in normal flow as the row beneath the belt panel (.lp-left is a
   flex column with a 6px gap), so the scroll panel sits ABOVE the nav buttons
   instead of the buttons overlapping the panel. */
.lp-tab-bar.ls-left-tabs {
    z-index: 35;
    /* Inset the tab buttons inside the 28px red frame with a little breathing
       room on each side (frame width + ~8px), so they don't run under the
       border. The buttons flex-shrink to fill the remaining width. */
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
}
.lp-tab.ls-nav-tab {
    all: unset;
    cursor: pointer;
    position: relative;
    width: 112px;   /* scaled up for the ui_flat_button design */
    height: 60px;
    box-sizing: border-box;
    display: inline-block;
    background: none;
    color: var(--lp-creamHi);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 0 #B73363;
}
/* Invisible hit-area extension so tap targets reach Apple's 44px minimum
   without changing the visual tab height. */
.lp-tab.ls-nav-tab::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -6px; bottom: -6px;
    pointer-events: auto;
}
.lp-tab .lp-tab-art {
    position: absolute;
    left: 0; top: 0;
    /* Fill the button. The tab is a flex item that shrinks to fit the tab
       bar, so a fixed art width would overflow / overlap neighbours when the
       buttons are narrower than their basis (e.g. on the 50%-wide left panel
       at mobile). 100% keeps the sprite matched to the actual button size. */
    width: 100%; height: 100%;
    /* ui_flat_button is a 32×32 sprite — render via border-image 9-slice so the
       corners + orange bottom edge stay crisp at any tab size. _4 = idle,
       _2 = hover/selected, _3 = pressed (see :hover/.active and :active rules).
       border-width 12 = 3× the 4-px source slice so the pixel art matches the
       ~3× scale of the surrounding red panel frame (28px border / 9-px slice). */
    background: transparent;
    box-sizing: border-box;
    border-style: solid;
    border-width: 12px;
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_4.png');
    border-image-slice: 4 fill;
    border-image-repeat: stretch;
    border-image-width: 12px;
    image-rendering: pixelated;
    pointer-events: none;
}
.lp-tab .lp-tab-label {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6px;
    pointer-events: none;
}
/* Press animation: translate the art/label down rather than shrinking height —
   keeps the border-image rendering at a constant size so the pixel art doesn't
   get squashed when the button is pressed. */
.lp-tab.ls-nav-tab:hover .lp-tab-art,
.lp-tab.ls-nav-tab.active .lp-tab-art {
    transform: translateY(2px);
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_2.png');
}
.lp-tab.ls-nav-tab:hover .lp-tab-label,
.lp-tab.ls-nav-tab.active .lp-tab-label {
    transform: translateY(2px);
}
.lp-tab.ls-nav-tab:active .lp-tab-art {
    transform: translateY(4px);
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_3.png');
}
.lp-tab.ls-nav-tab:active .lp-tab-label {
    transform: translateY(4px);
}
.lp-tab.ls-nav-tab.active { filter: saturate(1.15); }
/* Yellow underline bar indicating active tab. */
.lp-tab.ls-nav-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 24px;
    height: 4px;
    background: var(--lp-yellow);
    border: 2px solid var(--lp-ink);
    box-sizing: content-box;
    pointer-events: none;
    z-index: 3;
}
/* Red badge dot for tabs that need user attention. */
.lp-tab-badge {
    position: absolute;
    top: -2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--lp-pink);
    border: 2px solid var(--lp-ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}

/* Icon-only tabs: pixel-art icon centered on the raised button face. The
   nudge offsets mirror the .lp-tab-art top shifts so the icon "depresses"
   along with the button on hover/active/press. */
.lp-tab .lp-tab-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Fits inside the 60px-tall button face (was 64, which poked out top and
       bottom). Still prominent. */
    width: 50px;
    height: 50px;
    /* Centered on the button face. Hover/active states nudge the icon down
       to mirror the button-press animation. */
    transform: translate(-50%, -50%);
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 2;
}
.lp-tab.ls-nav-tab:hover .lp-tab-icon,
.lp-tab.ls-nav-tab.active .lp-tab-icon {
    transform: translate(-50%, calc(-50% + 2px));
}
.lp-tab.ls-nav-tab:active .lp-tab-icon {
    transform: translate(-50%, calc(-50% + 4px));
}

/* === Sushi level marker ===
   Marker is sized to its sushi-wrap (60×60) with stars row and chip
   absolutely positioned around it, so `transform: translate(-50%, -50%)`
   centers the SUSHI exactly on lane-Y (rather than the marker's bbox
   center, which would otherwise be pulled down by the chip below). */
.lp-marker {
    display: block;
    cursor: pointer;
    z-index: 5;
}
.lp-marker.current-level {
    z-index: 15;
}
.lp-marker.selected { z-index: 20; }
.lp-marker.locked { cursor: not-allowed; }

.lp-marker-stars {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 1px;
    display: flex;
    gap: 1.5px;
    align-items: flex-end;
    white-space: nowrap;
}
.lp-mini-star-l { transform: translateY(1px) rotate(-12deg); display: inline-block; }
.lp-mini-star-m { transform: translateY(-2px); display: inline-block; }
.lp-mini-star-r { transform: translateY(1px) rotate(12deg); display: inline-block; }

.lp-marker-sushi-wrap {
    position: relative;
    width: 60px; height: 60px;
}
.lp-marker-sushi-canvas {
    width: 60px; height: 60px;
    image-rendering: pixelated;
    position: relative;
    z-index: 1;
}
.lp-marker.locked .lp-marker-sushi-canvas {
    filter: grayscale(0.95) brightness(0.65) opacity(0.75);
}
/* Stars row is only emitted for completed levels (stars > 0) — see
   conveyorLevelSelect.js _renderLevelMarker. No CSS hide rule needed. */

.lp-marker-halo-selected,
.lp-marker-halo-current {
    position: absolute;
    left: 50%; top: 55%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    z-index: 0;
}
.lp-marker-halo-selected {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,213,68,0.85) 0%, rgba(255,213,68,0) 65%);
}
.lp-marker-halo-current {
    width: 86px; height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,143,174,0.55) 0%, rgba(255,143,174,0) 70%);
    animation: lpPulse 1.4s ease-in-out infinite;
}
.lp-marker.selected .lp-marker-halo-selected { display: block; }
/* Layered glow under the next-up marker so it reads as the active step. */
.lp-marker.current-level .lp-marker-halo-current { display: block; }
/* Gentle bob to give the next-up sushi life. */
.lp-marker.current-level .lp-marker-sushi-wrap {
    animation: lpBob 1.6s ease-in-out infinite;
}
/* Downward chevron pointer above the next-up marker. */
.lp-marker-pointer {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    width: 16px;
    height: 12px;
    pointer-events: none;
    z-index: 6;
    animation: lpBobX 1.6s ease-in-out infinite;
}
.lp-marker-pointer svg { width: 16px; height: 12px; display: block; }

/* Lock overlay sits centered over the grayscaled sushi so it reads
   unambiguously as a padlock, not as a small corner indicator. */
.lp-marker-lock {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
/* Locked.png is a self-contained padlock icon (frame + lock), so the marker
   lock is just a sizing/centering wrapper — no drawn circle behind it. */
.lp-marker-lock-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.lp-marker-chip {
    position: absolute;
    left: 50%;
    top: 40px;          /* sit on lower portion of the 60px sushi-wrap, in front of plate */
    transform: translateX(-50%);
    z-index: 5;
    width: 26px; height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    line-height: 1;
    background-image: url('sprites/UI/level/level_card.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}
.lp-marker-chip-num { padding-bottom: 1px; position: relative; }

/* Current/Selected chip tints — multiply-blended pink/yellow over the chip,
   masked by the chip sprite alpha so it stays inside the chamfered shape. */
.lp-marker-chip.current::after,
.lp-marker.selected .lp-marker-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('sprites/UI/level/level_card.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    background-blend-mode: multiply;
    -webkit-mask-image: url('sprites/UI/level/level_card.png');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('sprites/UI/level/level_card.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
}
.lp-marker-chip.current::after { background-color: var(--lp-pink); }
.lp-marker.selected .lp-marker-chip::after { background-color: var(--lp-yellow); }

/* Belt geometry helpers */
.lp-belt-shadow {
    background: rgba(58, 36, 23, 0.10);
    filter: blur(6px);
    border-radius: 30px;
    pointer-events: none;
}

/* === Gift box markers on the belt === */
.lp-gift-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 6;
}
.lp-gift-img {
    width: 56px; height: 56px;
    image-rendering: pixelated;
    user-select: none;
    display: block;
}
.lp-gift-marker.gift-ready { cursor: pointer; }
.lp-gift-marker.gift-locked { opacity: 0.7; cursor: default; }
.lp-gift-marker.gift-opened { opacity: 0.8; cursor: default; }
.lp-gift-tag {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: var(--lp-creamHi);
    background: var(--lp-orangeDark);
    border: 1.5px solid var(--lp-ink);
    border-radius: 8px;
    padding: 1px 6px;
    letter-spacing: 0.3px;
    box-shadow: 0 1.5px 0 var(--lp-ink);
}
.lp-gift-marker.gift-highlight { animation: lpPulse 0.7s ease-in-out 2; }
/* Anticipation curve for gift boxes — escalates as the player nears completion. */
.lp-gift-marker.gift-warming .lp-gift-img {
    box-shadow: 0 0 8px rgba(255, 213, 68, 0.5);
    animation: lpBob 4s ease-in-out infinite;
}
.lp-gift-marker.gift-almost .lp-gift-tag {
    background: var(--lp-yellow);
    color: var(--lp-ink);
    animation: lpPulse 2s ease-in-out infinite;
}
.lp-gift-marker.gift-ready .lp-gift-img {
    animation: lpBob 1.4s ease-in-out infinite;
}

/* Chapter goal / clouds at end of belt */
/* Progressive reveal helpers (kept compatible with existing logic) */
.lp-marker.conveyor-hidden { display: none; }
.lp-marker.conveyor-preview { opacity: 0.55; filter: brightness(0.95); }
.lp-marker.level-unlock-pending { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.lp-marker.level-unlocking { animation: lpPopIn 0.7s ease-out forwards; }
.lp-marker.level-confirmed { animation: lpPulse 0.6s ease-in-out 2; }

@keyframes lpPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.09); }
}
@keyframes lpBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes lpBobX {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-6px); }
}
@keyframes lpArrive {
    0%   { transform: translate(-50%, -50%) scale(1); }
    40%  { transform: translate(-50%, -50%) scale(1.18); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.lp-marker.arrived { animation: lpArrive 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes lpPopIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* === Level detail (right pane) === */
.lp-card .lp-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 4px 4px;
    box-sizing: border-box;
    color: var(--lp-ink);
    text-align: left;
}
.lp-detail-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.lp-detail-tile {
    width: 44px; height: 44px;
    background: var(--lp-cream);
    border-radius: 10px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.lp-detail-tile-canvas {
    width: 40px; height: 40px;
    image-rendering: pixelated;
}
.lp-detail-title-wrap {
    flex: 1;
    min-width: 0;
}
.lp-detail-title {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--lp-ink);
    line-height: 1;
    letter-spacing: 0.2px;
    text-shadow: 0 1.5px 0 rgba(58, 36, 23, 0.15);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-detail-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
}
.lp-status-pill {
    flex-shrink: 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: var(--lp-creamHi);
    padding: 2px 7px;
    border-radius: 8px;
    border: 1.5px solid var(--lp-ink);
    letter-spacing: 0.5px;
}
.lp-status-current { background: var(--lp-pink); }
.lp-status-cleared { background: var(--lp-green); }
.lp-status-new     { background: var(--lp-teal); }
.lp-status-locked  { background: var(--lp-inkSoft); }

.lp-stat-card {
    background: var(--lp-cream);
    border-radius: 10px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
    padding: 2px 8px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}
.lp-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: var(--lp-ink);
    line-height: 1.3;
}
/* Dashed "ticket" dividers between objective rows (matches settings rows) */
.lp-stat-row + .lp-stat-row {
    border-top: 1.5px dashed rgba(58, 36, 23, 0.22);
}
.lp-stat-icon {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    flex-shrink: 0;
    color: var(--lp-ink);
}
.lp-stat-icon-coin { background: var(--lp-yellow); }
.lp-stat-icon-people { background: var(--lp-teal); font-size: 10px; }
.lp-stat-icon-clock { background: var(--lp-creamHi); font-size: 10px; }

/* Single segmented reward pill — three goals split by dashed dividers */
.lp-reward-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 5px;
    flex-shrink: 0;
    background: var(--lp-creamHi);
    border: 2px solid var(--lp-ink);
    border-radius: 12px;
    box-shadow: 0 2px 0 var(--lp-ink);
    overflow: hidden;
}
.lp-reward-chip {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 4px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--lp-ink);
    background: transparent;
    border: none;
    box-shadow: none;
}
.lp-reward-chip + .lp-reward-chip {
    border-left: 1.5px dashed rgba(58, 36, 23, 0.3);
}
.lp-reward-bubble {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--lp-ink);
    flex-shrink: 0;
}
.lp-reward-yellow .lp-reward-bubble { background: var(--lp-yellow); }
.lp-reward-pink   .lp-reward-bubble { background: var(--lp-pink); }
.lp-reward-teal   .lp-reward-bubble { background: var(--lp-teal); }

.lp-detail-spacer { flex: 1; min-height: 0; }
.lp-detail-play-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
    flex-shrink: 0;
    margin-top: auto;
}

/* Bright green PLAY in detail panel — bigger than the prior 170×40 and
   pushed brighter via stacked filters. Shimmer pseudo-element below
   sweeps two hard-edged pixel-art bands (matches bento-lid shine). */
.sprite-play-btn.lp-play-btn {
    width: 180px;
    height: 50px;
    overflow: hidden;
    border-radius: 4px; /* clip shimmer to sprite-art rectangle */
    animation: lpPlayBob 1.8s ease-in-out infinite;
}
.sprite-play-btn.lp-play-btn .sprite-play-art {
    width: 180px; height: 50px;
    /* Native green sprite — no hue-rotate hack. Stretch the 46-px source
       horizontally to fill the 180-px button while keeping the y-sliced
       hover/active offsets correct. */
    background-image: url('sprites/UI/buttons/button_green_sprite_3state.png');
    background-size: 180px 150px;
    background-position: 0 0;
    filter: none;
}
.sprite-play-btn.lp-play-btn:hover .sprite-play-art {
    top: 4px; height: 46px;
    background-position: 0 -53px;
}
.sprite-play-btn.lp-play-btn:active .sprite-play-art {
    top: 7px; height: 43px;
    background-position: 0 -107px;
}
.sprite-play-btn.lp-play-btn .sprite-play-label {
    height: 50px;
    color: #FFFFFF;
    text-shadow: 0 2px 0 #1F5C2A, 0 0 4px rgba(46, 122, 58, 0.6);
    padding-bottom: 7px;
    font-size: 16px;
    letter-spacing: 1.5px;
    z-index: 2;
}
.sprite-play-btn.lp-play-btn:hover .sprite-play-label { top: 4px; height: 46px; }
.sprite-play-btn.lp-play-btn:active .sprite-play-label { top: 7px; height: 43px; }
.sprite-play-btn.lp-play-btn .sprite-play-tri {
    border-left-color: #FFFFFF;
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 13px;
    filter: drop-shadow(0 2px 0 #1F5C2A);
}

/* Pixel-art shimmer sweep — two hard-edged skewed bands traveling across
   the button. Mirrors the bento-lid shine (chunky, no soft gradients). */
.sprite-play-btn.lp-play-btn::before,
.sprite-play-btn.lp-play-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    height: 120%;
    pointer-events: none;
    transform: skewX(-22deg);
    animation: lpPlayShimmer 3.2s linear infinite;
    z-index: 1;
}
.sprite-play-btn.lp-play-btn::before {
    width: 16px;
    background: rgba(255, 255, 255, 0.85);
    left: -30%;
}
.sprite-play-btn.lp-play-btn::after {
    width: 6px;
    background: rgba(255, 255, 255, 0.6);
    left: -34%;
    animation-delay: 0.08s;
}

@keyframes lpPlayShimmer {
    0%        { transform: translateX(0) skewX(-22deg); }
    65%, 100% { transform: translateX(310px) skewX(-22deg); }
}

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

/* Locked detail view */
.lp-locked-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 8px 6px;
}
.lp-locked-icon { font-size: 36px; }
.lp-locked-msg {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--lp-ink);
    line-height: 1.4;
}
.lp-locked-pill {
    background: var(--lp-cream);
    color: var(--lp-inkSoft);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 2px solid var(--lp-ink);
}

/* Locked-level blueprint card — preview of what's coming next. */
.lp-blueprint-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    position: relative;
}
.lp-blueprint-tile {
    width: 56px; height: 56px;
    background: var(--lp-cream);
    border-radius: 10px;
    border: 2px solid var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.lp-blueprint-tile canvas {
    width: 48px; height: 48px;
    image-rendering: pixelated;
    filter: brightness(0) opacity(0.4);
}
.lp-blueprint-caption {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--lp-inkSoft);
    text-align: center;
    letter-spacing: 0.5px;
}
.lp-blueprint-caption .lp-blueprint-name {
    display: block;
    font-size: 14px;
    color: var(--lp-ink);
    margin-top: 2px;
}
.lp-blueprint-rewards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.5;
}
.lp-blueprint-action {
    background: var(--lp-cream);
    color: var(--lp-ink);
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 14px;
    border: 2.5px solid var(--lp-ink);
    box-shadow: 0 2px 0 var(--lp-ink);
    text-align: center;
}
.lp-blueprint-sticker {
    position: absolute;
    top: 4px;
    right: 8px;
    transform: rotate(-3deg);
    background: var(--lp-yellow);
    color: var(--lp-ink);
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border: 2px solid var(--lp-ink);
    border-radius: 10px;
    box-shadow: 0 2px 0 var(--lp-ink);
    text-transform: uppercase;
}

/* Right-content visibility (preserved tab logic). overflow-y:auto so the
   detail card (icon → title → dots → desc → preview → buy button) can
   scroll when the right panel is shorter than the content — without this
   the bottom of the green button gets clipped on landscape phones. */
.lp-card .ls-right-content { display: none; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.lp-card .ls-right-content.active { display: flex; flex-direction: column; }

/* === Mobile-tightened detail card === so the icon → title → dots →
   description → preview → green buy button stack fits without scrolling
   when the right panel is short on landscape phones. */
@media (max-height: 420px), (max-width: 700px) {
    .ls-item-detail {
        gap: 5px;
        padding: 4px 8px 6px;
    }
    .ls-item-detail h3 { font-size: 13px; margin-bottom: 0; }
    .ls-item-detail-icon {
        width: 56px;
        height: 56px;
    }
    .ls-item-detail-icon img { width: 40px; height: 40px; }
    .ls-item-detail-level { font-size: 10px; }
    .ls-item-detail-desc { font-size: 10px; max-width: 100%; }
    .ls-detail-upgrade-preview { font-size: 10px; padding: 3px 10px; }
    /* Keep the base 48px-tall sprite sizing (the global button min-height forces
       48px here too); only shrink the label so it fits the narrower panel. */
    .ls-upgrade-btn { font-size: 12px; }
    .ls-ad-upgrade-btn { width: 138px; font-size: 9px; padding: 5px 8px; }
}

/* === Responsive: shrink for landscape phones === */
@media (max-height: 420px), (max-width: 700px) {
    .lp-card {
        width: 80%;                 /* narrower popup on mobile */
        max-width: 80%;
        height: calc(100% - 8px);   /* leave 8px for the chunky drop-shadow */
        max-height: calc(100% - 8px);
        margin-bottom: 8px;
        padding: 2px 0 0;
        border-width: 9px;
        border-image-width: 9px;
    }
    .lp-ribbon { gap: 6px; padding: 2px 4px; }
    /* Back chip: 36 = closer to Apple's 44 touch-target minimum without
       dominating the ribbon row. ::before extends the hit area further. */
    .lp-back-chip { width: 36px; height: 36px; }
    .lp-back-chip::before {
        content: '';
        position: absolute;
        inset: -6px;
    }
    /* Ribbon pill: bump height to 48 and drop border-width to 6 (2× scale of
       the 3px source slice — still pixel-clean) so the 8 + 13 px two-line
       title actually fits inside. Without this, "Grocery Store" was clipped
       at the bottom on every mobile size. */
    .lp-ribbon-pill {
        height: 48px;
        padding: 0 10px;
        border-width: 6px;
        border-image-width: 6px;
    }
    .lp-ribbon-title { font-size: 13px; line-height: 1; }
    .lp-ribbon-chapter { font-size: 8px; letter-spacing: 1px; line-height: 1; }
    .lp-coin-pill { font-size: 8px; min-width: 64px; padding: 2px 6px 2px 3px; }
    .lp-pill-icon { width: 16px; height: 16px; }
    .lp-card .lp-left { width: 50%; max-width: 50%; }
    /* Decorative frame on mobile: scaled up to 24px for a chunkier red border
       (closer to the 28px desktop frame) per design preference. */
    .lp-soft-panel,
    .lp-card .lp-right.ls-right-panel {
        border-width: 24px;
        border-image-width: 24px;
        border-radius: 14px;
    }
    /* Left column's red frame lives on .lp-left-frame (encompasses belt panel + tab bar). */
    .lp-card .lp-left .lp-left-frame {
        border-width: 24px;
        border-image-width: 24px;
    }
    /* padding-bottom = mobile frame thickness so the tab bar clears the bottom frame. */
    .lp-card .lp-left {
        padding: 0 0 24px;
        border-radius: 14px;
    }
    /* Half the 24px mobile frame so the belt edge lands at the border midline. */
    .lp-card .lp-left .lp-belt-panel.ls-left-panel {
        padding: 12px;
    }
    .lp-detail-title { font-size: 14px; }
    .lp-reward-chip { font-size: 10px; }
    /* Tighten the level-detail vertical rhythm so the full card (header +
       objectives + rewards + PLAY) fits inside the short landscape-phone panel
       without the PLAY button spilling past the bottom frame. */
    .lp-stat-row { font-size: 10px; padding: 2px 0; }
    .lp-detail-header { margin-bottom: 3px; }
    .lp-stat-card { margin-bottom: 3px; padding: 1px 8px; }
    .sprite-play-btn.lp-play-btn { width: 130px; height: 36px; max-width: 100%; }
    .sprite-play-btn.lp-play-btn .sprite-play-art { width: 130px; height: 36px; background-size: 130px 108px; }
    .sprite-play-btn.lp-play-btn:hover .sprite-play-art { top: 2px; height: 34px; background-position: 0 -38px; }
    .sprite-play-btn.lp-play-btn:active .sprite-play-art { top: 5px; height: 31px; background-position: 0 -77px; }
    .sprite-play-btn.lp-play-btn .sprite-play-label { height: 36px; font-size: 12px; padding-bottom: 5px; letter-spacing: 1px; }
    .sprite-play-btn.lp-play-btn:hover .sprite-play-label { height: 34px; }
    .sprite-play-btn.lp-play-btn:active .sprite-play-label { height: 31px; }
    .sprite-play-btn.lp-play-btn .sprite-play-tri {
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 10px;
    }
    /* Tab buttons: 32h visual + 7px font (readable). The base ::before on
       .lp-tab.ls-nav-tab gives a 44+ px hit-area without inflating the box.
       ui_flat_button is rendered via border-image (see base rule) so no
       background-size/position overrides are needed here. */
    /* Inset to clear the 24px mobile frame + a little padding. */
    .lp-tab-bar.ls-left-tabs { padding-left: 30px; padding-right: 30px; }
    .lp-tab.ls-nav-tab { width: 88px; height: 52px; font-size: 7px; letter-spacing: 0.5px; }
    /* Mobile border-width 8 = 2× the 4-px source slice (pixel-clean), matching
       the chunkier scale of the 24px mobile red panel frame. */
    .lp-tab .lp-tab-art { width: 100%; height: 100%; border-width: 8px; border-image-width: 8px; }
    .lp-tab .lp-tab-label { height: 100%; font-size: 7px; padding-bottom: 5px; }
    /* Mobile press animation uses translateY (no height/top changes) so the
       border-image stays uncompressed — see the base rule for the rationale. */
    .lp-tab.ls-nav-tab:hover .lp-tab-art,
    .lp-tab.ls-nav-tab.active .lp-tab-art {
        transform: translateY(2px);
    }
    .lp-tab.ls-nav-tab:hover .lp-tab-label,
    .lp-tab.ls-nav-tab.active .lp-tab-label {
        transform: translateY(2px);
    }
    .lp-tab.ls-nav-tab:active .lp-tab-art {
        transform: translateY(4px);
    }
    .lp-tab.ls-nav-tab:active .lp-tab-label {
        transform: translateY(4px);
    }
    .lp-tab .lp-tab-icon { width: 42px; height: 42px; }
}

/* === Ultra-small landscape (e.g. 568×320 / older devices in split view) ===
   Belt panel is too short to fit both the SUSHI CONVEYOR sticker AND the
   level markers without overlap, so the sticker is hidden and the progress
   chip shrinks into the corner. The belt scroll padding-top drops too so
   lane 0 reaches the visible region without scroll. */
@media (max-height: 360px) {
    .lp-progress-chip {
        font-size: 8px;
        padding: 1px 5px 1px 3px;
    }
    .lp-belt-panel .lp-belt-scroll { padding-top: 28px; }
    .lp-detail-title { font-size: 12px; }
    .lp-ribbon-pill { height: 42px; }
    .lp-ribbon-title { font-size: 12px; }
    .lp-ribbon-chapter { font-size: 7px; }
}

/* ========================================
   RESTAURANT SELECT — Storybook restyle
   Make the world-map header, currency pills, building banners, play pin,
   and Zen/Infinite mode buttons share the same visual language as the
   level-select popup (cream pills, ink borders, Fredoka 700, the
   --lp-* palette). High-specificity selectors override the legacy rules
   above. Source the variables from :root in the level-popup block.
   ======================================== */

/* Drop the dark gradient at the top of the map; cityscape provides ambiance */
#world-map-screen .map-header {
    background: transparent;
}

/* Title pill — same pixel-art belt look as the rest of the header. */
#world-map-screen .map-title {
    position: relative;
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--lp-ink);
    background: #2A1E3F;                 /* ink shell */
    padding: 6px 16px;
    text-shadow: none;
    letter-spacing: 0.3px;
    margin: 0;
    image-rendering: pixelated;
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
    filter: drop-shadow(0 3px 0 #2A1E3F);
}
#world-map-screen .map-title::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    background: var(--lp-creamHi, #FFF3D6);
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
}
#world-map-screen .map-title > span {
    position: relative;
    z-index: 1;
}

/* Currency pills — match .lp-coin-pill from the level popup */
/* Shared stepped pixel-corner clip (belt-btn defines its own copy; this lets
   the currency pills reuse the same shape). */
#world-map-screen {
    --bb-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
}
#world-map-screen .map-currency { display: flex; gap: 6px; }
/* Currency pills — same pixel-art belt look (ink shell, cream surface,
   stepped corners, hard shadow) as the header gear + mode buttons. */
#world-map-screen .map-currency .currency-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #2A1E3F;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--lp-ink);
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    margin: 0;
    image-rendering: pixelated;
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
    filter: drop-shadow(0 3px 0 #2A1E3F);
}
#world-map-screen .map-currency .currency-item::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    background: var(--lp-creamHi, #FFF3D6);
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
}
#world-map-screen .map-currency .currency-item > * {
    position: relative;
    z-index: 1;
}
/* The gem pill otherwise forces a purple background + border (.gem-currency
   !important) — keep it on the ink shell like the other pills here. */
#world-map-screen .map-currency .gem-currency {
    background: #2A1E3F !important;
    border-color: transparent !important;
}
#world-map-screen .map-currency .currency-icon {
    width: 20px; height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}
#world-map-screen .map-currency .gem-currency .gem-icon-display {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--lp-ink);
    background: var(--lp-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
/* Free-gem rewarded-ad pill next to the gem counter */
#world-map-screen .map-free-gems-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #2A1E3F;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--lp-ink);
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
#world-map-screen .map-free-gems-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    background: #C8B6FF;
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
}
#world-map-screen .map-free-gems-btn > * {
    position: relative;
    z-index: 1;
}
#world-map-screen .map-free-gems-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
#world-map-screen .map-free-gems-btn.hidden { display: none; }
.map-free-gems-tv { font-size: 12px; line-height: 1; }

/* ============================================================
   Pixel-art "conveyor belt" button — same look as the loading-bar:
   an ink shell with an inset coloured surface, pixel-art stepped
   (staircase) corners, and a hard offset drop-shadow. Set
   --belt-surface per button for the face colour.
   (clip-path eats border/box-shadow — so the "border" is the ink
   shell showing through the inset surface, and the drop is a filter.)
   ============================================================ */
.belt-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2A1E3F;                 /* ink shell → becomes the 3px border */
    color: var(--lp-creamHi, #FFF3D6);
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    image-rendering: pixelated;
    --belt-surface: #463AA8;
    --bb-clip: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px,
        3px 3px, 6px 3px
    );
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
    filter: drop-shadow(0 4px 0 #2A1E3F);
    transition: transform 0.08s;
}
/* Inset coloured surface (the "belt") inside the ink shell */
.belt-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    background: var(--belt-surface);
    clip-path: var(--bb-clip);
    -webkit-clip-path: var(--bb-clip);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
/* Label / icon sit above the surface */
.belt-btn > * { position: relative; z-index: 1; }
.belt-btn:hover { filter: drop-shadow(0 5px 0 #2A1E3F); }
.belt-btn:active {
    transform: translateY(3px);
    filter: drop-shadow(0 1px 0 #2A1E3F);
}
/* Re-assert the ink shell over `.overlay button` (gold gradient + wood border),
   which otherwise outranks the plain .belt-btn class. */
#world-map-screen .belt-btn {
    background: #2A1E3F;
    border: 0;
    box-shadow: none;
}

#world-map-screen .map-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Map header gear — belt style, square, cream face */
#world-map-screen .map-settings-button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    --belt-surface: var(--lp-creamHi, #FFF3D6);
}
#world-map-screen .map-settings-button img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}
/* Zen / Infinite mode buttons — belt style with distinct face colours */
#world-map-screen #zen-mode-btn.map-mode-btn,
#world-map-screen #infinite-mode-btn.map-mode-btn {
    padding: 8px 16px;
    font-size: 11px;
    letter-spacing: 0.3px;
}
#world-map-screen #zen-mode-btn { --belt-surface: #00B3AF; }      /* teal */
#world-map-screen #infinite-mode-btn { --belt-surface: #6C5CE7; } /* purple */

/* Building banners — soft cream pills with Fredoka, no triangle tail */
.map-building .mb-banner {
    min-width: 110px;
    padding: 5px 12px;
    background: var(--lp-creamHi);
    border: 2.5px solid var(--lp-ink);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--lp-ink);
    background-image: none;
}
.map-building .mb-banner::after { display: none; }
.map-building .mb-banner-title {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--lp-ink);
    margin-bottom: 2px;
    letter-spacing: 0.2px;
    text-transform: none;
}
.map-building .mb-banner-progress {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--lp-pinkDark);
    letter-spacing: 0.2px;
}
.map-building .mb-banner-soon {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: var(--lp-creamHi);
    background: var(--lp-inkSoft);
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: inline-block;
    border: 1.5px solid var(--lp-ink);
}

.map-building.coming-soon .mb-banner-title { color: var(--lp-ink); opacity: 0.85; }

/* Play pin — round cream chip with green play arrow, matches .lp-back-chip */
.map-building .mb-pin {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--lp-creamHi);
    border: 3px solid var(--lp-ink);
    box-shadow: 0 3px 0 var(--lp-ink);
    color: var(--lp-greenDark);
    font-family: 'Fredoka', sans-serif;
    font-size: 14px; font-weight: 700;
}
.map-building.coming-soon .mb-pin {
    background: var(--lp-inkSoft);
    color: var(--lp-creamHi);
    border-color: var(--lp-ink);
}

/* Zen / Infinite mode buttons — small cream pills with the orange ribbon
   accent, matching the level-popup tab vibe. */
/* Zen + Infinite container — force horizontal row even though the id-only
   rule on `#special-modes-container` defaults to column. z-index 25 so
   the buttons stay above the sidewalk foreground (z-index 20). */
#world-map-screen #special-modes-container.map-special-modes {
    flex-direction: row;
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    /* Foreground sidewalk renders at z-index 100; keep the mode buttons
       above it so they're tappable and visible. */
    z-index: 110;
}

#world-map-screen .map-mode-btn.zen-btn,
#world-map-screen .map-mode-btn.infinite-btn {
    background: var(--lp-creamHi) !important;
    color: var(--lp-ink) !important;
    border: 2px solid var(--lp-ink);
    border-radius: 10px;
    box-shadow: 0 2px 0 var(--lp-ink);
    padding: 4px 10px;
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
    gap: 4px;
}
#world-map-screen .map-mode-btn.zen-btn:hover,
#world-map-screen .map-mode-btn.infinite-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--lp-ink);
}
#world-map-screen .map-mode-btn:active {
    transform: translateY(3px) !important;
    filter: drop-shadow(0 1px 0 #2A1E3F) !important;
}
#world-map-screen .map-mode-btn .zen-icon,
#world-map-screen .map-mode-btn .infinite-icon {
    font-size: 15px;
}
#world-map-screen .map-mode-btn > span:nth-child(2) {
    font-size: 11px;
    color: var(--lp-creamHi);
}

/* ========================================
   PAUSE MENU — Storybook restyle
   Match the level-select popup look: warm-brown blurred backdrop, cream-
   shade card with ink border + chunky drop-shadow, Fredoka 700 typography,
   cream-pill secondary buttons, and a green primary Resume button. Scoped
   to #pause-screen so it doesn't leak into other overlays.
   ======================================== */

#pause-screen.overlay {
    background: rgba(58, 36, 23, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
/* Card frame — same red 9-slice panel sprite as the level-select popup
   panels (cream fill under the frame, rounded corners, ink drop-shadow). */
#pause-screen .overlay-content {
    background: rgb(255, 246, 223);
    background-clip: border-box;
    border-style: solid;
    border-width: 28px;
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 9 10 9 10;
    border-image-repeat: stretch;
    border-image-width: 28px;
    border-radius: 16px;
    box-shadow: none;
    filter: drop-shadow(0 6px 0 var(--lp-ink)) drop-shadow(0 12px 16px rgba(58, 36, 23, 0.35));
    image-rendering: pixelated;
    padding: 6px 16px 12px;
    min-width: 240px;
    max-width: 340px;
    /* auto (not hidden) so the card can scroll on very short viewports while
       still clipping to the rounded corners. */
    overflow: auto;
    animation: fadeInUp 0.25s ease;
}
#pause-screen h2 {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--lp-ink);
    text-shadow: none;
    margin: 4px 0 16px;
    text-align: center;
    letter-spacing: 0.3px;
}
#pause-screen .button-group.vertical { gap: 10px; }

/* Buttons use the same ui_flat_button sprite as the level-select nav tabs:
   border-image 9-slice with text labels centered on the raised face, and the
   _4 / _2 / _3 idle / hover / pressed frames. */
#pause-screen .button-group.vertical button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    width: 220px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;   /* lift text above the orange bottom bevel */
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--lp-ink);
    text-align: center;
    border-style: solid;
    border-width: 12px;
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_4.png');
    border-image-slice: 4 fill;
    border-image-repeat: stretch;
    border-image-width: 12px;
    background: transparent;
    image-rendering: pixelated;
    transition: transform 0.08s;
}
#pause-screen .button-group.vertical button:hover {
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_2.png');
}
#pause-screen .button-group.vertical button:active {
    border-image-source: url('sprites/UI/buttons/ui_flat_button/UI_Flat_Button02a_3.png');
    transform: translateY(3px);
}

/* ========================================
   SETTINGS MENU — gift-popup pixel restyle
   Follows the GIFT UNLOCK MODAL v2 recipe: red 9-slice frame on a cream
   board, hard inset ink outlines + highlight/shade rows + hard drop faces.
   No gradients, no soft shadows. Scoped to #settings-screen.
   ======================================== */

#settings-screen.overlay {
    /* Translucent + blurred so the screen underneath (world map / level
       select / pause) stays visible behind the card. */
    background: rgba(24, 10, 4, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px;
}
/* Card — built exactly like the gift unlock modal: a cream board (::before)
   tucked UNDER a slim red 9-slice frame (::after), so there is no gap
   between the frame art and the contents. */
#settings-screen .overlay-content {
    --gu-ink: #2E1A12; --gu-inkSoft: #6E5240;
    --gu-cream: #FFF1D4; --gu-creamHi: #FFFBEC; --gu-creamShade: #E8C893;
    box-sizing: border-box;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 8px 0 rgba(46, 26, 18, 0.35));
    padding: 18px 28px 22px;
    min-width: 340px;
    max-width: 460px;
    max-height: 100%;
    overflow: visible;
    animation: fadeInUp 0.25s ease;
}
/* cream board — slides under the frame, like .gu-cream (inset 13px @ 32px) */
#settings-screen .overlay-content::before {
    content: '';
    position: absolute; inset: 10px; z-index: 0;
    background: var(--gu-cream);
    border-radius: 12px;
    box-shadow: inset 0 4px 0 var(--gu-creamHi), inset 0 -6px 0 var(--gu-creamShade);
}
/* red 9-slice frame on top */
#settings-screen .overlay-content::after {
    content: '';
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-style: solid;
    border-width: 24px;
    border-color: transparent;
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 7;
    border-image-width: 24px;
    border-image-repeat: stretch;
    image-rendering: pixelated;
}
#settings-screen .overlay-content > * { position: relative; z-index: 1; }
#settings-screen h2 {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--gu-ink);
    text-shadow: 2px 2px 0 var(--gu-creamShade);
    margin: 0 0 8px;
    text-align: center;
    letter-spacing: 0.3px;
}

/* Inner panel containing the rows of settings — chamfer-less pixel panel */
#settings-screen .settings-list {
    background: var(--gu-creamHi);
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 -7.5px 0 -2.5px var(--gu-creamShade),
                0 3px 0 var(--gu-ink);
    padding: 3px 14px 6px;
    margin-bottom: 10px;
}
#settings-screen .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1.5px dashed rgba(46, 26, 18, 0.25);
}
#settings-screen .setting-item:last-child { border-bottom: none; }
#settings-screen .setting-label {
    font-family: 'Fredoka', 'Press Start 2P', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--gu-ink);
    letter-spacing: 0.2px;
    flex-shrink: 0;
}

/* Toggle — pixel recipe: green when ON, ink-soft when OFF */
#settings-screen .toggle-btn {
    background: #5FCE3E;
    color: #FFFBEC;
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255, 255, 255, 0.45),
                inset 0 -7.5px 0 -2.5px #2E8417,
                0 3px 0 var(--gu-ink);
    padding: 7px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 #2E8417;
    min-width: 60px;
    cursor: pointer;
    transition: transform 70ms, box-shadow 70ms;
}
#settings-screen .toggle-btn.off {
    background: var(--gu-inkSoft);
    color: var(--gu-creamHi);
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255, 255, 255, 0.25),
                inset 0 -7.5px 0 -2.5px #4A3526,
                0 3px 0 var(--gu-ink);
    text-shadow: 1px 1px 0 #4A3526;
}
#settings-screen .toggle-btn:active {
    transform: translateY(3px) !important;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255, 255, 255, 0.45),
                inset 0 -7.5px 0 -2.5px #2E8417 !important;
}
#settings-screen .toggle-btn.off:active {
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255, 255, 255, 0.25),
                inset 0 -7.5px 0 -2.5px #4A3526 !important;
}

/* Volume slider — square pixel track + thumb */
#settings-screen .volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    flex-shrink: 1;
    height: 14px;
    background: var(--gu-cream);
    border: none;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--gu-ink),
                inset 0 4px 0 -2px var(--gu-creamShade);
}
#settings-screen .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--gu-creamHi);
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 -5px 0 -2.5px var(--gu-creamShade);
    cursor: pointer;
}
#settings-screen .volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--gu-creamHi);
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 -5px 0 -2.5px var(--gu-creamShade);
    cursor: pointer;
}

/* Privacy policy link */
#settings-screen .settings-link {
    display: block;
    text-align: center;
    color: var(--gu-inkSoft);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin: 0 0 8px;
}
#settings-screen .settings-link:hover { color: var(--gu-ink); }

/* Back button — green pixel CTA, same recipe as the gift modal COLLECT.
   !important throughout to defeat the shared .secondary-btn rule. */
#settings-screen .secondary-btn {
    all: unset;
    /* all:unset outranks the generic "> *" layering rule, which would leave
       the button painted UNDERNEATH the ::before cream board — re-assert. */
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    cursor: pointer;
    width: 200px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: #fff !important;
    text-shadow: 2px 2px 0 #2E8417;
    background: #5FCE3E !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 3px var(--gu-ink),
                inset 0 6px 0 -3px rgba(255, 255, 255, 0.45),
                inset 0 -9px 0 -3px #2E8417,
                0 5px 0 var(--gu-ink) !important;
    transition: transform 70ms, box-shadow 70ms;
}
#settings-screen .secondary-btn:hover {
    background: #6FD84E !important;
    transform: none;
}
#settings-screen .secondary-btn:active {
    transform: translateY(5px);
    box-shadow: inset 0 0 0 3px var(--gu-ink),
                inset 0 6px 0 -3px rgba(255, 255, 255, 0.45),
                inset 0 -9px 0 -3px #2E8417 !important;
}

/* ========================================
   GIFT UNLOCK MODAL v2  (see giftUnlock.js)
   Pixel-art recipe everywhere: hard inset ink outlines + one highlight row +
   two shade rows + chamfered corners (.gu-ch) + hard drop faces. No gradients,
   no border-radius (cream board excepted), no blur. Per-rarity colors arrive
   as CSS vars on .gu-wrapper: --gu-c --gu-hi --gu-deep --gu-accent.
   Sunburst = canvas pixel shader (.gu-burst inside .gu-burst-card).
   ======================================== */
.gu-overlay {
    position: absolute; inset: 0; z-index: 320;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24, 10, 4, 0.66);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 8px;
}
.gu-wrapper {
    --gu-ink: #2E1A12; --gu-inkSoft: #6E5240;
    --gu-cream: #FFF1D4; --gu-creamHi: #FFFBEC; --gu-creamShade: #E8C893;
    position: relative; width: 608px; height: 346px; flex: none;
    transform-origin: center center;
    animation: guRise2 380ms cubic-bezier(.2,.9,.3,1.3) both;
    filter: drop-shadow(0 10px 0 rgba(46,26,18,0.35));
}
.gu-glow {
    position: absolute; inset: -50px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gu-c) 20%, transparent) 0%, transparent 62%);
}
.gu-cream {
    position: absolute; inset: 13px; z-index: 1; overflow: hidden; border-radius: 16px;
    background: var(--gu-cream);
    box-shadow: inset 0 4px 0 var(--gu-creamHi), inset 0 -6px 0 var(--gu-creamShade);
}
.gu-texture {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,165,80,0.06) 1px, transparent 1px);
    background-size: 8px 8px;
}
.gu-aura {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
    width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
    transition: top 400ms;
    background: radial-gradient(circle, color-mix(in srgb, var(--gu-c) 13%, transparent) 0%, transparent 60%);
}
.gu-aura.revealed { top: 46%; }
.gu-content { position: relative; z-index: 5; height: 100%; }
.gu-frame {
    position: absolute;
    /* explicit longhand instead of `inset: 0` for older WKWebView support */
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2; pointer-events: none;
    /* NON-transparent border-color: iOS/WKWebView refuses to paint a
       border-image when border-color is `transparent` (Chrome ignores this).
       The frame's own red (#F96E46) lets the image paint normally and any
       fallback/corner bleed matches the frame. See .lp-left-frame. */
    border: 32px solid #F96E46;
    border-image-source: url('sprites/UI/panel_frame_red.png');
    border-image-slice: 7; border-image-width: 32px; border-image-repeat: stretch;
    image-rendering: pixelated;
}
.gu-close {
    all: unset; cursor: pointer; position: absolute; top: 19px; right: 19px; z-index: 40;
    width: 30px; height: 30px; box-sizing: border-box; background: #E84D4D;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255,255,255,0.45),
                inset 0 -7.5px 0 -2.5px #9B2A2A,
                0 3px 0 var(--gu-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 70ms, box-shadow 70ms;
}
.gu-close:active {
    transform: translateY(3px);
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255,255,255,0.45),
                inset 0 -7.5px 0 -2.5px #9B2A2A;
}
.gu-close svg { position: relative; z-index: 3; display: block; }

/* chamfer pixels — knock the 4 corner cells out in the surrounding bg color */
.gu-ch { position: absolute; z-index: 6; pointer-events: none; }

/* ---- pixel-shader sunburst card ---- */
.gu-burst-card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    z-index: 0; box-sizing: border-box; background: var(--gu-cream);
    box-shadow: inset 0 0 0 3px var(--gu-ink), 0 4px 0 var(--gu-ink);
}
.gu-burst-clip { position: absolute; inset: 3px; overflow: hidden; }
.gu-burst {
    display: block; width: 100%; height: 100%;
    image-rendering: pixelated; image-rendering: crisp-edges;
}

/* pixel sparkles — blink in 2 hard steps like a sprite animation */
.gu-sparkle { position: absolute; pointer-events: none; z-index: 12; animation: guSparkle 1.7s steps(2, jump-none) infinite; }
.gu-sparkle svg { display: block; }
.gu-sparkle:nth-child(odd)  { animation-delay: .5s; }
.gu-sparkle:nth-child(3n)   { animation-delay: 1s; }

/* ---- closed / bursting ---- */
.gu-closed {
    height: 100%; padding: 14px 24px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gu-closed.bursting { cursor: default; }
.gu-kicker {
    font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gu-inkSoft);
    letter-spacing: 2px; margin-bottom: 6px; animation: guSlideUp 400ms ease both;
}
.gu-title {
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 30px; color: var(--gu-ink);
    line-height: 1; letter-spacing: 0.5px; margin-bottom: 4px;
    text-shadow: 2px 2px 0 var(--gu-creamShade), 4px 4px 0 rgba(46,26,18,0.14);
}
.gu-box-stage {
    position: relative; width: 230px; height: 175px; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
}
.gu-box {
    position: relative; z-index: 4;
    filter: drop-shadow(0 5px 0 rgba(46,26,18,0.3));
    animation: guShake 1.5s ease-in-out infinite;
}
.gu-box-img { display: block; width: 156px; height: auto; image-rendering: pixelated; }
/* the whole box pops on burst (real sprite — no separable lid) */
.gu-closed.bursting .gu-box { animation: guLidPop 560ms cubic-bezier(.3,1.5,.5,1) forwards; }
.gu-flash {
    position: absolute; left: 50%; top: 46%; width: 180px; height: 180px; border-radius: 50%;
    z-index: 8; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, #fff 0%, var(--gu-hi) 40%, transparent 72%);
}
.gu-closed.bursting .gu-flash { animation: guFlash 480ms ease-out forwards; }
.gu-tap {
    position: relative; z-index: 5; margin-top: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gu-ink); color: var(--gu-creamHi); padding: 9px 18px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3);
    font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
    animation: guTapPulse 1.1s steps(2, jump-none) infinite;
}
.gu-closed.bursting .gu-tap { display: none; }
.gu-tap-dot { width: 9px; height: 9px; background: var(--gu-c); }

/* ---- revealed ---- */
.gu-reveal { height: 100%; display: flex; flex-direction: column; }
.gu-banner {
    display: flex; justify-content: center; padding-top: 14px; margin-bottom: 2px;
    animation: guPop 480ms cubic-bezier(.2,.9,.3,1.4) both;
}
.gu-banner-wrap { position: relative; display: inline-flex; align-items: center; }
.gu-banner-core {
    position: relative; z-index: 2; display: inline-block; white-space: nowrap;
    background: var(--gu-c); padding: 12px 22px;
    box-shadow: inset 0 0 0 3px var(--gu-ink),
                inset 0 6px 0 -3px rgba(255,255,255,0.5),
                inset 0 -9px 0 -3px var(--gu-deep),
                0 4px 0 var(--gu-ink);
    font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: 0.5px;
    color: #fff; text-shadow: 1.5px 1.5px 0 var(--gu-deep);
}
.gu-gold .gu-banner-core { color: var(--gu-ink); text-shadow: 1px 1px 0 var(--gu-hi); }
/* stepped pixel ribbon tails — three hard slabs each side */
.gu-tail {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    display: flex; align-items: center;
}
.gu-tail-l { left: -15px; }
.gu-tail-r { right: -15px; }
.gu-tail i {
    display: block; width: 5px; background: var(--gu-deep);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}

.gu-reveal-body { flex: 1; display: flex; min-height: 0; padding: 6px 16px 0; }
.gu-spotlight {
    width: 232px; flex-shrink: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.gu-hero {
    position: relative; z-index: 3;
    animation: guRise 620ms cubic-bezier(.2,.9,.3,1.3) both;
    filter: drop-shadow(0 4px 0 rgba(46,26,18,0.3));
}
.gu-hero > * { animation: guBob 2.6s steps(2, jump-none) infinite 0.6s; }
.gu-hero img, .gu-hero .sushi-sprite-frame { height: 112px; width: auto; image-rendering: pixelated; }

.gu-info {
    flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
    padding-left: 8px; padding-right: 4px;
}
.gu-stagger { animation: guSlideUp 460ms ease both; }
.gu-pill {
    position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: var(--gu-c); padding: 6px 10px 6px 8px;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255,255,255,0.5),
                inset 0 -7.5px 0 -2.5px var(--gu-deep),
                0 2.5px 0 var(--gu-ink);
}
.gu-pill-stars { display: inline-flex; gap: 1px; position: relative; z-index: 2; }
.gu-star { display: inline-flex; }
.gu-star svg { display: block; }
.gu-pill-label {
    position: relative; z-index: 2;
    font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px;
    color: #fff; text-shadow: 1px 1px 0 var(--gu-deep);
}
.gu-gold .gu-pill-label { color: var(--gu-ink); text-shadow: none; }
.gu-name {
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 24px; color: var(--gu-ink);
    line-height: 1.05; margin-top: 8px; text-wrap: balance; text-shadow: 1.5px 1.5px 0 var(--gu-creamShade);
}
.gu-flavor {
    font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 12.5px; color: var(--gu-inkSoft);
    line-height: 1.35; margin-top: 6px; max-width: 250px; text-wrap: pretty;
}
.gu-plate-badge {
    position: relative; align-self: flex-start; margin-top: 10px; padding: 7px 12px;
    font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 0.5px;
    color: #fff; text-shadow: 1.5px 1.5px 0 var(--gu-deep);
    background: var(--gu-c);
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255,255,255,0.5),
                inset 0 -7.5px 0 -2.5px var(--gu-deep),
                0 2.5px 0 var(--gu-ink);
}
.gu-plate-badge span { position: relative; z-index: 2; }
.gu-gold .gu-plate-badge { color: var(--gu-ink); text-shadow: 1px 1px 0 var(--gu-hi); }
.gu-chip {
    position: relative; margin-top: 12px; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--gu-creamHi); padding: 6px 12px 6px 8px;
    box-shadow: inset 0 0 0 2.5px var(--gu-ink),
                inset 0 5px 0 -2.5px rgba(255,255,255,0.7),
                inset 0 -7.5px 0 -2.5px var(--gu-creamShade),
                0 2.5px 0 var(--gu-ink);
}
.gu-coin { position: relative; z-index: 2; display: block; image-rendering: pixelated; }
.gu-chip-text { display: flex; flex-direction: column; line-height: 1; }
.gu-chip-amt { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: var(--gu-ink); }
.gu-chip-sub { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: 1px; color: #9B6A0E; margin-top: 2px; }
.gu-cta {
    all: unset; cursor: pointer; position: relative; box-sizing: border-box;
    width: 100%; max-width: 230px; height: 46px; margin-top: 14px;
    background: #5FCE3E;
    box-shadow: inset 0 0 0 3px var(--gu-ink),
                inset 0 6px 0 -3px rgba(255,255,255,0.45),
                inset 0 -9px 0 -3px #2E8417,
                0 5px 0 var(--gu-ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform 70ms, box-shadow 70ms;
    animation: guBob 2.4s steps(2, jump-none) infinite;
}
.gu-cta:active {
    transform: translateY(5px); animation: none;
    box-shadow: inset 0 0 0 3px var(--gu-ink),
                inset 0 6px 0 -3px rgba(255,255,255,0.45),
                inset 0 -9px 0 -3px #2E8417;
}
.gu-cta-label {
    position: relative; z-index: 2;
    font-family: 'Press Start 2P', monospace; font-size: 15px; letter-spacing: 1px;
    color: #fff; text-shadow: 2px 2px 0 #2E8417;
}

/* ---- multi reveal (set of up to 3 dishes; dormant until wired) ---- */
.gu-multi-area {
    flex: 1; min-height: 0; padding: 4px 16px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gu-multi-row { display: flex; gap: 12px; align-items: flex-end; justify-content: center; }
.gu-card {
    width: 138px; display: flex; flex-direction: column; align-items: center;
    animation: guPop 520ms cubic-bezier(.2,.9,.3,1.4) both;
}
.gu-card-tile {
    position: relative; width: 132px; height: 132px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gu-cream); box-sizing: border-box;
    box-shadow: inset 0 0 0 3px var(--gu-ink), 0 4px 0 var(--gu-ink);
}
.gu-card-ribbon {
    position: absolute; top: 7px; left: 7px; z-index: 3;
    background: var(--gu-c); padding: 4px 6px;
    font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: 0.5px; color: #FFFBEC;
    box-shadow: inset 0 0 0 2px var(--gu-ink),
                inset 0 4px 0 -2px rgba(255,255,255,0.4),
                inset 0 -4px 0 -2px var(--gu-deep);
}
.gu-card-gold .gu-card-ribbon { color: var(--gu-ink); }
.gu-card-hero {
    position: relative; z-index: 2; animation: guBob 2.6s steps(2, jump-none) infinite;
    filter: drop-shadow(0 3px 0 rgba(46,26,18,0.3));
}
.gu-card-hero img, .gu-card-hero .sushi-sprite-frame { height: 64px; width: auto; image-rendering: pixelated; }
.gu-card-name {
    margin-top: 8px; min-height: 28px; text-align: center; line-height: 1.05; text-wrap: balance;
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px; color: var(--gu-ink);
}
.gu-multi-bottom { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.gu-cta-compact { width: 168px; max-width: 168px; margin-top: 0; }

/* ---- confetti (one-shot) ---- */
.gu-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 200; }
.gu-conf-piece { position: absolute; top: -16px; border: 1px solid #2E1A12; animation: guConfFall ease-in forwards; }

/* ---- keyframes ---- */
@keyframes guRise2 { from { transform: translateY(40px) scale(.7); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes guShake { 0%,100%{transform:translateY(0) rotate(-3deg);} 25%{transform:translateY(-4px) rotate(3deg);} 50%{transform:translateY(0) rotate(-2deg);} 75%{transform:translateY(-3px) rotate(2.5deg);} }
@keyframes guSparkle { 0%,100%{opacity:.12;transform:scale(.55);} 50%{opacity:1;transform:scale(1.15);} }
@keyframes guLidPop { 0%{transform:translateY(0) rotate(0);} 40%{transform:translateY(-46px) rotate(-14deg);} 100%{transform:translateY(-120px) rotate(-30deg);opacity:0;} }
@keyframes guFlash { 0%{opacity:0;transform:scale(.3);} 30%{opacity:.95;} 100%{opacity:0;transform:scale(2.6);} }
@keyframes guRise { 0%{transform:translateY(34px) scale(.5);opacity:0;} 55%{transform:translateY(-6px) scale(1.08);opacity:1;} 100%{transform:translateY(0) scale(1);opacity:1;} }
@keyframes guBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@keyframes guPop { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} }
@keyframes guSlideUp { from{transform:translateY(14px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes guTapPulse { 0%,100%{transform:scale(1);opacity:.92;} 50%{transform:scale(1.07);opacity:1;} }
@keyframes guConfFall { 0%{transform:translateY(-20px) rotate(0);opacity:0;} 10%{opacity:1;} 100%{transform:translateY(360px) rotate(540deg);opacity:0;} }

/* Plate-count upgrade previews (Upgrades tab) — the real belt formation drawn
   to a canvas, kept crisp with nearest-neighbor scaling. */
.plate-preview-canvas { image-rendering: pixelated; display: block; }
.plate-preview-slot, .plate-preview-slot-lg { display: flex; align-items: center; justify-content: center; }

/* ========================================
   STARTER OFFER MODAL
   ======================================== */
#starter-offer-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 28, 0.78);
}

.so-card {
    position: relative;
    background: linear-gradient(180deg, #FFF6E0 0%, #FFE9C2 100%);
    border: 3px solid #2E1A12;
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
    padding: 26px 28px 18px;
    text-align: center;
    max-width: 320px;
    width: 86%;
}

.so-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #E74C3C;
    color: #fff;
    border: 2px solid #2E1A12;
    border-radius: 6px;
    padding: 4px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.so-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: #2E1A12;
    margin: 8px 0 12px;
}

.so-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.so-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #2E1A12;
}

.so-timer {
    font-family: 'VT323', monospace;
    font-size: 17px;
    color: #C0392B;
    margin-bottom: 12px;
}

.so-buy-btn {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 50%, #B8962E 100%);
    color: #2E1A12;
    border: 2px solid #2E1A12;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #2E1A12;
}

.so-buy-btn:disabled { opacity: 0.6; cursor: default; }

.so-later-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: none;
    border: none;
    color: #8a7a66;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px;
}

/* ========================================
   PRE-LEVEL BOOST PICKER
   ======================================== */
#boost-picker-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 28, 0.78);
}

.bp-card {
    background: linear-gradient(180deg, #FFF6E0 0%, #FFE9C2 100%);
    border: 3px solid #2E1A12;
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
    padding: 16px 18px 14px;
    width: 92%;
    max-width: 420px;
    max-height: 86%;
    display: flex;
    flex-direction: column;
}

.bp-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: #2E1A12;
    text-align: center;
}

.bp-sub {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #8a7a66;
    text-align: center;
    margin: 4px 0 10px;
}

.bp-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.bp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255,255,255,0.6);
    border: 2px solid #D9C9A8;
    border-radius: 8px;
    padding: 6px 8px;
}

.bp-row.selected {
    border-color: #4CAF50;
    background: rgba(111, 207, 151, 0.25);
}

.bp-row-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bp-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.bp-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bp-row-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #2E1A12;
}

.bp-row-owned {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #8a7a66;
}

.bp-row-btn {
    flex-shrink: 0;
    border: 2px solid #2E1A12;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #2E1A12;
}

.bp-row-btn:disabled { opacity: 0.5; cursor: default; }

.bp-toggle-btn { background: #fff; color: #2E1A12; }
.bp-toggle-btn.on { background: #4CAF50; color: #fff; }
.bp-buy-btn {
    background: linear-gradient(180deg, #F2D06B 0%, #D4AF37 100%);
    color: #2E1A12;
}

.bp-actions {
    display: flex;
    gap: 8px;
}

.bp-skip-btn, .bp-start-btn {
    flex: 1;
    border: 2px solid #2E1A12;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #2E1A12;
}

.bp-skip-btn { background: #fff; color: #8a7a66; }
.bp-start-btn {
    background: linear-gradient(180deg, #6FCF97 0%, #4CAF50 100%);
    color: #fff;
}

/* ========================================
   GIFT STAR-GATE POPUP
   ======================================== */
#gift-star-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 28, 0.78);
}

.gs-card {
    background: linear-gradient(180deg, #FFF6E0 0%, #FFE9C2 100%);
    border: 3px solid #2E1A12;
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
    padding: 18px 20px 14px;
    width: 90%;
    max-width: 380px;
    max-height: 86%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.gs-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: #2E1A12;
}

.gs-sub {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #8a7a66;
    margin: 6px 0 10px;
}

.gs-levels {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.gs-level-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.6);
    border: 2px solid #D9C9A8;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #2E1A12;
    cursor: pointer;
}

.gs-row-stars { color: #D4AF37; font-size: 11px; }

.gs-close-btn {
    background: none;
    border: none;
    color: #8a7a66;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px;
}

/* ========================================
   MODES UNLOCKED CELEBRATION
   ======================================== */
#modes-unlocked-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 28, 0.78);
}

.mu-card {
    background: linear-gradient(180deg, #FFF6E0 0%, #FFE9C2 100%);
    border: 3px solid #2E1A12;
    border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
    padding: 22px 24px 14px;
    width: 88%;
    max-width: 340px;
    text-align: center;
}

.mu-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: #2E1A12;
    margin-bottom: 12px;
}

.mu-modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.mu-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'VT323', monospace;
    font-size: 19px;
    color: #2E1A12;
}

.mu-zen-btn {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #6FCF97 0%, #4CAF50 100%);
    color: #fff;
    border: 2px solid #2E1A12;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #2E1A12;
}

.mu-later-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: none;
    border: none;
    color: #8a7a66;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px;
}