/* Pixel Korean font (Galmuri) + classic arcade Latin (Press Start 2P) */
@import url('https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+KR:wght@400;700&display=swap');

/* ============================================================= */
/*  Design tokens                                                */
/* ============================================================= */
:root {
    color-scheme: dark;

    /* Palette — slightly desaturated retro night-market tones */
    --ink: #0b0f1a;
    --ink-2: #141b2e;
    --ink-3: #1c2440;
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.25);

    --red: #c94a52;
    --red-deep: #6e2a33;
    --amber: #f2b632;
    --gold: #ffd66b;
    --cream: #fdf0d5;
    --green: #3ecf6f;
    --danger: #ef5350;

    --text: var(--cream);
    --text-dim: #9aa3b8;
    --text-faint: #6b7488;

    /* Pixel-friendly limited radius scale */
    --r-sm: 4px;   /* small buttons, badges */
    --r-md: 6px;   /* cards, panels */
    --r-lg: 8px;   /* modals */

    /* Hard pixel shadows (no blur) */
    --shadow-px: 2px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-px-lg: 3px 3px 0 rgba(0, 0, 0, 0.55);

    /* Typography */
    --font-body: 'Galmuri11', 'Noto Sans KR', sans-serif;
    --font-bold: 'Galmuri11 Bold', 'Galmuri11', 'Noto Sans KR', sans-serif;
    --font-display: 'Galmuri14', 'Galmuri11 Bold', 'Noto Sans KR', sans-serif;
    --font-arcade: 'Press Start 2P', 'Galmuri11', monospace;

    --dur-fast: 0.1s;
    --dur-med: 0.2s;
    --dur-slow: 0.3s;

    --touch: 44px;
}

/* ============================================================= */
/*  Base                                                         */
/* ============================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--ink);
    color: var(--text);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overflow-x: hidden;
    background-image:
        radial-gradient(120% 90% at 50% -10%, rgba(201, 74, 82, 0.12), transparent 60%),
        radial-gradient(90% 70% at 50% 110%, rgba(242, 182, 50, 0.08), transparent 55%);
    background-attachment: fixed;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400; /* pixel display font ships a single weight */
}

button {
    font-family: inherit;
    color: inherit;
}

/* Pixel-art sprites scale with hard edges; photos/logo stay smooth (auto). */
.px-svg {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

img {
    image-rendering: auto;
    max-width: 100%;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

/* Icon slot helpers (filled by PixelArt at runtime) */
[data-px-icon],
[data-px-mood] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.icon-12 { width: 12px; height: 12px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
[data-px-customer],
[data-px-food],
[data-px-upgrade] {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* ============================================================= */
/*  App shell                                                    */
/* ============================================================= */
.app {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    isolation: isolate;
    background-image:
        linear-gradient(to bottom, rgba(11, 15, 26, 0.84), rgba(11, 15, 26, 0.95)),
        url('assets/pocha_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    box-shadow: 0 0 0 3px #000, 0 0 40px rgba(0, 0, 0, 0.9);
}

/* Subtle static vignette on the frame (background only, not the UI) */
.app::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-shadow: inset 0 0 70px 0 rgba(0, 0, 0, 0.3);
}

#particle-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.screen {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ============================================================= */
/*  Buttons                                                      */
/* ============================================================= */
.pixel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch);
    padding: 10px 16px;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--ink-3);
    color: var(--text);
    font-family: var(--font-bold);
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: var(--shadow-px);
    transition: transform var(--dur-fast) steps(2), box-shadow var(--dur-fast) steps(2), background-color var(--dur-fast) linear;
}

/* Pixel press: shift 2px into the shadow. Active-first (mobile). */
.pixel-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}

@media (hover: hover) {
    .pixel-btn--secondary:hover { background: #253052; }
    .pixel-btn--tertiary:hover { background: rgba(255, 255, 255, 0.06); }
}

/* Primary: the only loud button on screen */
.pixel-btn--primary {
    background: linear-gradient(to bottom, var(--gold), var(--amber));
    border-color: #8a5a12;
    color: #241a06;
    box-shadow: var(--shadow-px-lg);
    font-size: 15px;
}

.pixel-btn--primary:active {
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

.pixel-btn--lg {
    min-height: 56px;
    font-size: 17px;
}

/* Secondary: quiet dark panel button */
.pixel-btn--secondary {
    background: var(--ink-3);
    border-color: var(--line-strong);
    color: var(--gold);
}

/* Tertiary: nearly flat */
.pixel-btn--tertiary {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-dim);
    box-shadow: none;
}
.pixel-btn--tertiary:active {
    transform: translate(1px, 1px);
}

.pixel-btn--danger {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.5);
    color: #f2a0a0;
}

.pixel-btn--icon {
    width: var(--touch);
    height: var(--touch);
    min-height: var(--touch);
    padding: 0;
}
.pixel-btn--icon [data-px-icon] {
    width: 20px;
    height: 20px;
}

.pixel-btn:disabled {
    background: #232838;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-faint);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Shimmer: one stepped sweep on screen entry, then done */
.btn-shimmer-once {
    position: relative;
    overflow: hidden;
}
.btn-shimmer-once::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-100%) rotate(30deg);
    animation: shimmerSweep 1.1s steps(14) 0.4s 1 forwards;
    pointer-events: none;
}
@keyframes shimmerSweep {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

/* ============================================================= */
/*  Badges / chips / cards                                       */
/* ============================================================= */
.pixel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, 0.4);
    font-family: var(--font-bold);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

.pixel-badge--gold {
    color: var(--gold);
    border-color: rgba(242, 182, 50, 0.45);
    background: rgba(242, 182, 50, 0.1);
}

.pixel-badge [data-px-icon] {
    width: 12px;
    height: 12px;
}

.pixel-badge--red {
    color: #f2a0a0;
    border-color: rgba(239, 83, 80, 0.45);
    background: rgba(239, 83, 80, 0.1);
}

.pixel-badge--green {
    color: var(--green);
    border-color: rgba(62, 207, 111, 0.45);
    background: rgba(62, 207, 111, 0.1);
}

.pixel-card {
    background: var(--ink-2);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px);
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-bold);
    font-size: 12px;
}
.stat-chip__label {
    font-family: var(--font-arcade);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 1px;
}
.stat-chip__value {
    color: var(--gold);
}

/* ============================================================= */
/*  Title screen                                                 */
/* ============================================================= */
.screen--title {
    justify-content: space-between;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}

/* Tent banner: desaturated red stripes, hard edges */
.tent-header {
    margin: 0 -16px 12px;
    padding: 12px 16px 16px;
    background: repeating-linear-gradient(
        90deg,
        var(--red) 0,
        var(--red) 20px,
        var(--red-deep) 20px,
        var(--red-deep) 40px
    );
    border-bottom: 4px solid var(--amber);
    box-shadow: var(--shadow-px-lg), inset 0 -4px 0 rgba(0, 0, 0, 0.3);
    position: relative;
}
.tent-header::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 12px;
    background:
        linear-gradient(-45deg, var(--red) 50%, transparent 50%) 0 0 / 24px 24px repeat-x,
        linear-gradient(45deg, var(--red) 50%, transparent 50%) 0 0 / 24px 24px repeat-x;
    pointer-events: none;
}

.tent-header__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* HTML-text logo sign (single source of the title, no image text behind it) */
.sign-board {
    text-align: center;
    background: rgba(11, 15, 26, 0.82);
    border: 3px solid var(--amber);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px-lg), inset 0 0 0 2px rgba(0, 0, 0, 0.6);
    padding: 9px 8px 8px;
}
.sign-board__title {
    font-size: 27px;
    line-height: 1.2;
    color: var(--gold);
    letter-spacing: 2px;
    /* restrained sign glow: hard offset + one soft accent, no animation */
    text-shadow: 2px 2px 0 var(--red-deep), 0 0 10px rgba(201, 74, 82, 0.45);
}
.sign-board__title .accent {
    color: #ff8a90;
}
.sign-board__sub {
    margin-top: 6px;
    font-family: var(--font-arcade);
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--amber);
}

.title-hero {
    flex: 1 1 auto;
    max-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 12px 0;
    min-height: 0;
}

.title-hero__bubble {
    background: var(--cream);
    color: #241a2e;
    font-family: var(--font-bold);
    font-size: 13px;
    padding: 8px 14px;
    border: 2px solid #241a2e;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px);
    position: relative;
}
.title-hero__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #241a2e;
}

.title-hero__cast {
    display: flex;
    gap: 14px;
}
.title-hero__cast [data-px-customer] {
    width: 72px;
    height: 72px;
    filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.5));
}
.title-hero__cast [data-px-customer]:nth-child(1) { animation: idleBob 2s steps(2) infinite; }
.title-hero__cast [data-px-customer]:nth-child(2) { animation: idleBob 2s steps(2) 0.66s infinite; }
.title-hero__cast [data-px-customer]:nth-child(3) { animation: idleBob 2s steps(2) 1.33s infinite; }

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

.title-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-arcade);
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px 10px;
}

.title-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.title-actions__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.settings-version {
    margin: 4px 0 0;
    text-align: center;
    font-size: 10px;
    color: var(--text-faint);
}

@media (max-height: 640px) {
    .sign-board__title { font-size: 24px; }
    .title-hero { padding: 8px 0; gap: 10px; }
    .title-hero__cast [data-px-customer] { width: 48px; height: 48px; }
}

/* ============================================================= */
/*  Game screen — HUD                                            */
/* ============================================================= */
.screen--game {
    padding-bottom: env(safe-area-inset-bottom);
}

.hud {
    background: rgba(11, 15, 26, 0.92);
    border-bottom: 2px solid var(--line);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-px);
}

.hud__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 1st priority: time left */
.hud__timer {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 82px;
    padding: 6px 10px;
    background: var(--ink-3);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--gold);
}
.hud__timer [data-px-icon] {
    align-self: center;
}
.hud__timer-num {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    min-width: 32px;
    text-align: right;
}
.hud__timer-unit {
    font-size: 11px;
    color: var(--text-dim);
}

/* Urgent (≤10s): red chip, numbers stay fully readable.
   One short 2px shake when entering the state, then still. */
.hud__timer.is-urgent {
    background: rgba(239, 83, 80, 0.18);
    border-color: var(--danger);
    color: #ffb4b2;
    animation: urgentShake 0.3s steps(2) 1;
}
.hud__timer.is-urgent .hud__timer-num {
    color: var(--danger);
}
@keyframes urgentShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Blink used by the customer mood badge in the critical stage */
@keyframes urgentStep {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* 2nd priority: revenue vs goal */
.hud__sales {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.hud__revenue {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.2;
    color: var(--gold);
}
.hud__goal {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hud__goal b {
    font-family: var(--font-bold);
    font-weight: 400;
    color: var(--text);
}

.hud__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.bar__fill {
    height: 100%;
    width: 100%;
    transition: width 1s linear;
}
.bar--time .bar__fill { background: var(--amber); }
.bar--goal .bar__fill { background: var(--green); width: 0; }

/* 3rd priority: combo chip */
.combo-chip {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--amber);
    color: #241a06;
    border: 2px solid #8a5a12;
    border-radius: var(--r-sm);
    font-family: var(--font-bold);
    font-size: 12px;
    box-shadow: var(--shadow-px);
}

/* ============================================================= */
/*  Game screen — customer counter                               */
/* ============================================================= */
.counter {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    min-height: 0;
    overflow-y: auto;
}

.counter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-bold);
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 8px;
}
.counter__head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.counter__hint {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-faint);
}

.seats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 116px;
}

.seat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    min-height: 104px;
    background: rgba(20, 27, 46, 0.92);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px);
    animation: seatIn var(--dur-slow) steps(4) both;
}
@keyframes seatIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.seat--urgent {
    border-color: rgba(239, 83, 80, 0.6);
}

/* Served: quick green pop, then the seat floats out. Opacity only drops
   in the final quarter so the "맛있어요!" line stays readable. */
.seat--happy {
    border-color: var(--green);
    pointer-events: none;
    animation: happyPop 250ms steps(4) both;
}
.seat--happy .seat__avatar {
    transform: translateY(-2px);
}
.seat--happy .seat__bubble {
    background: #fff2bd;
    border-color: var(--green);
}
.seat--happy .seat__order {
    color: #1d7a40;
}
@keyframes happyPop {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.025); opacity: 1; }
    75% { transform: translateY(-2px); opacity: 1; }
    100% { transform: translateY(-4px); opacity: 0; }
}

.seat__portrait {
    position: relative;
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.seat__ring {
    width: 64px;
    height: 64px;
    transform: rotate(-90deg);
}
.seat__avatar {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    border-radius: 50%; /* circular so it nests in the round patience ring */
    background: var(--ink);
    border: 1px solid rgba(242, 182, 50, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.seat__avatar [data-px-customer] {
    width: 40px;
    height: 40px;
}
.seat__mood {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 22px;
    height: 22px;
    background: var(--cream);
    border: 2px solid #241a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.seat__mood [data-px-mood] {
    width: 14px;
    height: 14px;
}
.seat--urgent .seat__mood {
    animation: urgentStep 0.8s steps(2) infinite;
}
.seat__name {
    margin-top: 2px;
    font-size: 10px;
    color: var(--gold);
    max-width: 72px;
    text-align: center;
    line-height: 1.25;
}

/* Speech bubble: the order is the loudest text on screen */
.seat__bubble {
    flex: 1;
    min-width: 0;
    background: var(--cream);
    color: #241a2e;
    border: 2px solid #241a2e;
    border-radius: var(--r-md);
    border-top-left-radius: 0;
    padding: 10px;
    position: relative;
}
.seat__bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 8px;
    border-top: 8px solid #241a2e;
    border-left: 9px solid transparent;
}

.seat__order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.seat__order {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.35;
    color: #a8323a;
    word-break: keep-all;
}

.listen-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 6px 10px;
    background: var(--red);
    color: #fff;
    border: 2px solid var(--red-deep);
    border-radius: var(--r-sm);
    font-family: var(--font-bold);
    font-size: 11px;
    cursor: pointer;
    box-shadow: var(--shadow-px);
    transition: transform var(--dur-fast) steps(2), box-shadow var(--dur-fast) steps(2);
}
.listen-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
.listen-btn [data-px-icon] {
    width: 14px;
    height: 14px;
}

/* Very narrow screens: stack the order text above the LISTEN button */
@media (max-width: 350px) {
    .seat__order-row {
        flex-direction: column;
        align-items: stretch;
    }
    .listen-btn {
        align-self: flex-end;
    }
}

.seat__hints {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(36, 26, 46, 0.2);
    font-size: 11px;
    color: #5c4a3a;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.seat__hints .hint-en {
    color: #6b7488;
    font-size: 10px;
}

/* Empty state: static panel, only the dots move */
.empty-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 116px;
    padding: 18px 12px;
    background: rgba(20, 27, 46, 0.6);
    border: 2px dashed var(--line);
    border-radius: var(--r-md);
    text-align: center;
}
.empty-seat [data-px-icon] {
    width: 28px;
    height: 28px;
}
.empty-seat__title {
    font-family: var(--font-bold);
    font-size: 13px;
    color: var(--gold);
}
.empty-seat__sub {
    font-size: 11px;
    color: var(--text-dim);
}
.loading-dots {
    display: inline-flex;
    gap: 4px;
}
.loading-dots i {
    width: 5px;
    height: 5px;
    background: var(--amber);
}
.loading-dots i:nth-child(1) { animation: dotStep 0.9s steps(2) infinite; }
.loading-dots i:nth-child(2) { animation: dotStep 0.9s steps(2) 0.3s infinite; }
.loading-dots i:nth-child(3) { animation: dotStep 0.9s steps(2) 0.6s infinite; }
@keyframes dotStep {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* ============================================================= */
/*  Game screen — kitchen                                        */
/* ============================================================= */
.kitchen {
    background: rgba(11, 15, 26, 0.94);
    border-top: 2px solid var(--line);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kitchen__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-bold);
    font-size: 12px;
    color: var(--gold);
}
.kitchen__head small {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-faint);
}

.kitchen__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 236px;
    overflow-y: auto;
    padding-bottom: 2px;
}

.food-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 96px;
    padding: 8px 6px;
    background: var(--ink-2);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px);
    cursor: pointer;
    transition: transform var(--dur-fast) steps(2), box-shadow var(--dur-fast) steps(2), border-color var(--dur-fast) linear;
}
.food-card:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
    border-color: var(--gold);
}
@media (hover: hover) {
    .food-card:not(:disabled):hover { border-color: var(--gold); background: var(--ink-3); }
}

.food-card [data-px-food] {
    width: 40px;
    height: 40px;
}
.food-card__name {
    font-family: var(--font-bold);
    font-size: 14px;
    color: var(--gold);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.food-card__romaja {
    font-size: 9px;
    color: var(--text-faint);
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.food-card__price {
    font-size: 11px;
    color: var(--gold);
    background: rgba(242, 182, 50, 0.12);
    border: 1px solid rgba(242, 182, 50, 0.35);
    border-radius: var(--r-sm);
    padding: 1px 6px;
}

/* Correct-serve flash on the tapped kitchen card */
.food-card.is-correct {
    border-color: var(--green);
    background: rgba(62, 207, 111, 0.14);
    animation: correctFood 250ms steps(3);
}
@keyframes correctFood {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Wrong-dish shake on the tapped kitchen card only */
.food-card.is-wrong {
    border-color: var(--danger);
    background: rgba(239, 83, 80, 0.12);
    animation: wrongShake 240ms steps(4);
}
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.food-card--locked {
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.food-card--locked:active {
    transform: none;
}
.food-card--locked [data-px-food] {
    opacity: 0.25;
    filter: grayscale(1);
}
.food-card__lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.66);
    border-radius: var(--r-md);
    font-family: var(--font-bold);
    font-size: 11px;
    color: var(--gold);
}
.food-card__lock [data-px-icon] {
    width: 18px;
    height: 18px;
}

/* ============================================================= */
/*  Order tray (quantity days and beyond)                        */
/* ============================================================= */
.tray {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    background: var(--ink-2);
    border: 2px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-px);
    min-height: 72px;
}

.tray__items {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tray__empty {
    font-size: 11px;
    color: var(--text-faint);
    padding: 0 4px;
}

.tray-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    background: var(--ink);
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.tray-item [data-px-food] {
    width: 28px;
    height: 28px;
}
.tray-item__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.tray-item__name {
    font-family: var(--font-bold);
    font-size: 12px;
    color: var(--gold);
    line-height: 1.2;
    white-space: nowrap;
}
.tray-item__counter {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.2;
    white-space: nowrap;
}
.tray-item__opt {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    min-height: 20px;
}
.tray-item__opt.has-opt {
    color: var(--gold);
    border-color: rgba(242, 182, 50, 0.45);
    background: rgba(242, 182, 50, 0.12);
}

.tray-item__qty {
    display: flex;
    align-items: center;
    gap: 2px;
}
.qty-btn {
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-3);
    color: var(--cream);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-family: var(--font-bold);
    font-size: 15px;
    cursor: pointer;
}
.qty-btn:active {
    transform: translate(1px, 1px);
}
.tray-item__num {
    min-width: 16px;
    text-align: center;
    font-family: var(--font-bold);
    font-size: 13px;
    color: var(--cream);
}
.tray-item__remove {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--line);
}

.tray-item.is-wrong {
    border-color: var(--danger);
    background: rgba(239, 83, 80, 0.12);
    animation: wrongShake 240ms steps(4);
}

.tray__serve {
    flex-shrink: 0;
    min-width: 82px;
    font-size: 14px;
}

/* Toasts sit above the taller kitchen (tray adds ~80px) */
body.has-tray .toast-container {
    bottom: calc(372px + env(safe-area-inset-bottom));
}

/* ============================================================= */
/*  Post-answer learning card & listen hints                     */
/* ============================================================= */
.learning-card {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(62, 207, 111, 0.08);
    border: 2px solid rgba(62, 207, 111, 0.4);
    border-radius: var(--r-md);
    animation: modalIn var(--dur-med) steps(5) both;
}
.learning-card__ko {
    font-family: var(--font-bold);
    font-size: 14px;
    color: var(--cream);
}
.learning-card__en {
    font-size: 12px;
    color: #8fe8b0;
    margin-top: 2px;
}
.learning-card__note {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    border-top: 1px solid rgba(62, 207, 111, 0.25);
    padding-top: 4px;
}

.seat__listen-hint {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(36, 26, 46, 0.25);
    font-size: 11px;
    color: #6b5a2e;
}

.result-learning {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(242, 182, 50, 0.08);
    border: 1px solid rgba(242, 182, 50, 0.35);
    border-radius: var(--r-md);
    font-size: 11px;
    color: var(--text-dim);
}
.result-learning__title {
    font-family: var(--font-arcade);
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--gold);
}
.result-learning b {
    font-family: var(--font-bold);
    font-weight: 400;
    color: var(--text);
}

/* Word book expandable study section */
.wb-more {
    margin-top: 6px;
    border-top: 1px solid var(--line);
    padding-top: 6px;
}
.wb-more summary {
    cursor: pointer;
    font-family: var(--font-bold);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--gold);
    min-height: 24px;
    display: flex;
    align-items: center;
}
.wb-more p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-dim);
}
.wb-more__ko {
    font-family: var(--font-bold);
    color: var(--cream) !important;
}
.wb-more__en {
    color: #8fe8b0 !important;
}
.wb-more b {
    font-family: var(--font-bold);
    font-weight: 400;
    color: var(--gold);
}

/* Review explanation card */
.review-expl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 10px;
    background: rgba(62, 207, 111, 0.08);
    border: 1px solid rgba(62, 207, 111, 0.35);
    border-radius: var(--r-md);
    font-size: 11px;
    color: var(--text-dim);
    text-align: left;
}
.review-expl__ko {
    margin: 0;
    font-family: var(--font-bold);
    font-size: 15px;
    color: var(--cream);
}
.review-expl__en {
    color: #8fe8b0;
    font-size: 12px;
}
.review-expl__note b {
    font-family: var(--font-bold);
    font-weight: 400;
    color: var(--gold);
}

/* ============================================================= */
/*  Review mode                                                  */
/* ============================================================= */
.review-prompt {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}
.review-play {
    align-self: center;
    padding: 10px 18px;
    font-size: 13px;
}
.review-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.review-choice.is-wrong {
    border-color: var(--danger);
    background: rgba(239, 83, 80, 0.12);
    animation: wrongShake 240ms steps(4);
}
.review-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.wordbook-card__counter,
.wordbook-card__options {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.wordbook-card__counter b {
    color: var(--gold);
    font-family: var(--font-bold);
    font-weight: 400;
}

/* ============================================================= */
/*  Modals                                                       */
/* ============================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pixel-modal {
    width: 100%;
    max-width: 400px;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    background: #10162a;
    border: 3px solid var(--amber);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-px-lg);
    overflow: hidden;
    animation: modalIn var(--dur-med) steps(5) both;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

.pixel-modal__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 8px 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid var(--line);
    flex-shrink: 0;
}
.pixel-modal__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--gold);
}
.pixel-modal__close {
    width: var(--touch);
    height: var(--touch);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) linear;
}
.pixel-modal__close:active {
    background: rgba(255, 255, 255, 0.1);
}
.pixel-modal__close [data-px-icon] {
    width: 16px;
    height: 16px;
}

.pixel-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pixel-modal__footer {
    flex-shrink: 0;
    padding: 12px;
    border-top: 2px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================= */
/*  Word book                                                    */
/* ============================================================= */
.wordbook-card {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--ink-2);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
}
.wordbook-card--locked {
    opacity: 0.55;
}
.wordbook-card__sprite {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.wordbook-card__sprite [data-px-food],
.wordbook-card__sprite [data-px-icon] {
    width: 40px;
    height: 40px;
}
.wordbook-card__sprite [data-px-icon] {
    width: 24px;
    height: 24px;
}
.wordbook-card__info {
    flex: 1;
    min-width: 0;
    /* reserve space for the listen button pinned top-right */
    padding-right: 52px;
}
.wordbook-card__word {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--gold);
    line-height: 1.3;
}
.wordbook-card__english {
    font-size: 12px;
    color: var(--text);
}
.wordbook-card__romaja {
    font-size: 11px;
    color: var(--text-dim);
}
.wordbook-card__meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Same position on every card */
.wordbook-card .listen-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px;
    min-width: var(--touch);
    min-height: var(--touch);
    justify-content: center;
}

/* ============================================================= */
/*  Upgrade shop                                                 */
/* ============================================================= */
.upgrade-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--ink-2);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
}
.upgrade-card__sprite {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: 1px solid rgba(242, 182, 50, 0.4);
    border-radius: var(--r-sm);
}
.upgrade-card__sprite [data-px-upgrade] {
    width: 40px;
    height: 40px;
}
.upgrade-card__info {
    flex: 1;
    min-width: 0;
}
.upgrade-card__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.upgrade-card__name {
    font-family: var(--font-bold);
    font-size: 14px;
    color: var(--text);
}
.upgrade-card__desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.upgrade-card__effects {
    margin-top: 4px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.upgrade-card__effects .fx-now { color: var(--text-dim); }
.upgrade-card__effects .fx-next { color: var(--green); font-family: var(--font-bold); }

.upgrade-card__buy {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 76px;
    min-height: 52px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    border: 2px solid #8a5a12;
    background: linear-gradient(to bottom, var(--gold), var(--amber));
    color: #241a06;
    font-family: var(--font-bold);
    font-size: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-px);
    transition: transform var(--dur-fast) steps(2), box-shadow var(--dur-fast) steps(2);
}
.upgrade-card__buy:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
.upgrade-card__buy:disabled {
    background: #232838;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-faint);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.upgrade-card__buy .cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
}
.upgrade-card__buy .cost [data-px-icon] {
    width: 12px;
    height: 12px;
}
.upgrade-card__buy:disabled .cost {
    color: var(--danger);
}
.upgrade-card__buy.is-max .cost {
    color: inherit;
}

/* ============================================================= */
/*  Result modal                                                 */
/* ============================================================= */
.result-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--gold);
}
.result-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px;
    border-radius: var(--r-md);
    text-align: center;
    font-family: var(--font-bold);
    font-size: 13px;
}
.result-banner--win {
    background: rgba(62, 207, 111, 0.1);
    border: 2px solid rgba(62, 207, 111, 0.5);
    color: #8fe8b0;
}
.result-banner--lose {
    background: rgba(239, 83, 80, 0.1);
    border: 2px solid rgba(239, 83, 80, 0.5);
    color: #f2a0a0;
}
.result-banner__line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.result-banner__unlock {
    font-size: 11px;
    color: var(--gold);
    font-family: var(--font-body);
}

.result-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    font-size: 12px;
}
.result-stats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.result-stats__row dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    margin: 0;
}
.result-stats__row dd {
    margin: 0;
    font-family: var(--font-bold);
    color: var(--text);
}
.result-stats__row dd.gold { color: var(--gold); font-size: 15px; }
.result-stats__row dd.green { color: var(--green); }
.result-stats__divider {
    border-top: 1px solid var(--line);
}

/* ============================================================= */
/*  Settings & pause                                             */
/* ============================================================= */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--touch);
    padding: 8px 12px;
    background: var(--ink-2);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: var(--font-bold);
    font-size: 12px;
}
.toggle-row__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}
.toggle-row input[type='checkbox'] {
    width: 20px;
    height: 20px;
    accent-color: var(--amber);
    flex-shrink: 0;
}

/* 3-level English Help segmented control */
.toggle-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: default;
}
.seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.seg__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-height: var(--touch);
    padding: 6px 2px;
    background: var(--ink);
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    cursor: pointer;
}
.seg__btn b {
    font-family: var(--font-bold);
    font-weight: 400;
    font-size: 11px;
}
.seg__btn small {
    font-size: 8px;
    line-height: 1.2;
    text-align: center;
}
.seg__btn[aria-pressed='true'] {
    background: rgba(242, 182, 50, 0.14);
    border-color: var(--amber);
    color: var(--gold);
}

.pause-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
}

/* ============================================================= */
/*  Toasts & floating text                                       */
/* ============================================================= */
.toast-container {
    position: fixed;
    /* Anchored just above the kitchen panel (284px tall): toasts never
       cover the HUD timer or the customer order cards */
    bottom: calc(292px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 32px);
    max-width: 390px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 2px solid var(--amber);
    background: rgba(11, 15, 26, 0.96);
    color: var(--text);
    font-family: var(--font-bold);
    font-size: 12px;
    box-shadow: var(--shadow-px);
    animation: modalIn var(--dur-med) steps(5) both;
    transition: opacity var(--dur-slow) linear, transform var(--dur-slow) linear;
}
.toast--error {
    border-color: var(--danger);
    background: rgba(58, 15, 20, 0.96);
    color: #f2c0be;
}
.toast--success {
    border-color: var(--green);
    background: rgba(10, 43, 24, 0.96);
    color: #b8ecc9;
}
.toast.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}
.toast [data-px-icon] {
    width: 14px;
    height: 14px;
}
.toast__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
/* Customer flavor line (e.g. their happy/angry quote) — no TTS, text only */
.toast__sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-dim);
}

.float-text {
    position: fixed;
    left: 50%;
    top: 45%;
    z-index: 55;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
    animation: floatUp 1s steps(12) forwards;
}
.float-text--bad {
    color: var(--danger);
}
@keyframes floatUp {
    0% { opacity: 1; transform: translate(-50%, -30%); }
    40% { opacity: 1; transform: translate(-50%, -110%); }
    100% { opacity: 0; transform: translate(-50%, -170%); }
}

/* ============================================================= */
/*  Scrollbars                                                   */
/* ============================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ink);
}
::-webkit-scrollbar-thumb {
    background: var(--amber);
    border: 2px solid var(--ink);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--amber) var(--ink);
}

/* ============================================================= */
/*  CRT overlay — title screen only, user-toggleable             */
/* ============================================================= */
body.crt-on .screen--title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.09) 0,
        rgba(0, 0, 0, 0.09) 1px,
        transparent 1px,
        transparent 4px
    );
}

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