:root {
    color-scheme: light;
    --ink: #64484c;
    --muted: #86686e;
    --cream: #fffaf7;
    --rose: #aa5872;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; font-size: 13px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; font: inherit; color: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #8f5265; outline-offset: 3px; }
button > * { pointer-events: none; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.cafe-shell { max-width: 450px; margin: auto; min-height: calc(100svh - 84px); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.cafe-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
h1 { display: flex; align-items: center; gap: 9px; font-size: 22px; letter-spacing: 2px; font-weight: 700; }
.brand-icon { width: 34px; height: 34px; flex: none; }
.level-badge { padding: 4px 0; color: #65775c; font-size: 11px; font-weight: 500; }
.cafe-stats { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.cafe-stats > span { display: flex; align-items: center; min-height: 24px; }
.cafe-stats strong { margin-left: 5px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 500; }
.cafe-stats small { margin-left: 3px; font-size: 9px; }
.hospitality-stat > span { color: #c77c8f; font-size: 13px; }
/* Guests share the page background; spacing groups each order. */
.orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.order { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 2px; }
.guest-frame { position: relative; flex: none; }
.guest-portrait { display: block; width: 74px; height: 74px; object-fit: cover; object-position: center top; border-radius: 50%; }
.guest-heart { position: absolute; right: -1px; bottom: 3px; color: #c78c9c; font-size: 16px; line-height: 1; }
.order.ready .guest-heart { color: var(--rose); }
.order-items { display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; min-height: 50px; margin-top: 3px; }
.order-item { position: relative; display: grid; place-items: center; }
.order-item svg { width: 40px; height: 40px; }
.item-check { position: absolute; right: -2px; bottom: -1px; color: #648350; font-size: 14px; font-weight: 700; line-height: 1; }
.serve-button { width: 100%; max-width: 94px; min-height: 44px; padding: 6px 8px; border-radius: 10px; background: var(--rose); color: white; font-size: 11px; font-weight: 600; }
.serve-button:disabled { visibility: hidden; }
.serve-button:active { opacity: .8; }
.worktop { position: relative; }
.board-caption { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 5px; }
.board-caption h2 { color: #825e59; font-size: 10px; font-weight: 500; letter-spacing: .6px; }
.text-button { display: grid; place-items: center; min-width: 40px; min-height: 40px; background: transparent; font-size: 18px; }
/* Only the playable cells have a surface; the board has no outer frame. */
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; user-select: none; -webkit-user-select: none; }
.cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 10px; background: #f3ebe5; }
.cell.occupied { background: #f9efdf; }
.cell[data-item^="sweet"] { background: #fae9e9; }
.cell.selected { outline: 2px solid var(--rose); outline-offset: -1px; z-index: 1; }
.cell svg { width: 94%; height: 94%; }
.cell-level { position: absolute; right: 4px; bottom: 3px; color: #94756a; font-size: 8px; font-weight: 500; line-height: 1; }
.cell.hinted { outline: 2px solid #789165; outline-offset: -1px; animation: hint-pulse 1s ease-in-out 3; }
.cell.popped { animation: menu-pop .32s ease-out; }
.selection-bar { display: flex; align-items: center; gap: 7px; min-height: 45px; }
.selection-bar p { flex: 1; min-width: 0; color: #896963; font-size: 10px; }
.selection-bar button { flex: none; min-height: 40px; padding: 8px 5px; background: transparent; color: #855c64; font-size: 10px; }
.selection-bar button:disabled { color: #b29b94; }
.generators { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.generator { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 59px; border-radius: 14px; background: #eaf0df; }
.generator svg { width: 47px; height: 47px; }
.generator b { color: #6c805e; font-size: 23px; font-weight: 400; }
.generator:active { opacity: .75; }
.sweet-source { background: #f8e5eb; }
.sweet-source b { color: #ad657a; }
.generator:disabled { opacity: .45; }
.action-message { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #986779; color: white; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.action-message.is-guest-comment { display: flex; align-items: center; gap: 10px; background: #f9edf0; color: #734d5c; text-align: left; line-height: 1.7; }
.is-guest-comment img { width: 44px; height: 44px; flex: none; object-fit: cover; object-position: center top; border-radius: 50%; }
.is-guest-comment span { min-width: 0; overflow-wrap: anywhere; }
.cafe-footer { display: flex; justify-content: center; margin-top: 10px; }
.cafe-footer button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px; background: transparent; color: #946473; font-size: 11px; }
.recipe-book-icon { width: 20px; height: 20px; }
.cafe-footer button span { margin-left: 4px; color: #9b6d7c; font-size: 10px; }
.save-warning { margin-top: 12px; padding: 10px 0; color: #855334; font-size: 11px; line-height: 1.7; }
.recipe-dialog { width: calc(100% - 24px); max-width: 420px; max-height: 85svh; padding: 20px 16px; border: 0; border-radius: 20px; background: var(--cream); color: var(--ink); }
.recipe-dialog::backdrop { background: #67465366; }
.recipe-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.recipe-heading h2 { color: #946473; font-size: 18px; letter-spacing: 2px; }
.recipe-heading button { width: 40px; height: 40px; background: transparent; color: #9b687a; font-size: 24px; }
.recipe-chain { margin-top: 20px; }
.recipe-chain h3 { margin: 0 0 9px; color: #94736d; font-size: 11px; }
.recipe-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.recipe-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; text-align: center; line-height: 1.5; }
.recipe-item svg { width: 100%; height: auto; aspect-ratio: 1; }
.recipe-item.locked svg { filter: grayscale(1); opacity: .18; }
.recipe-level { color: #9b7f7d; font-size: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes menu-pop { 0% { transform: scale(.75) rotate(-5deg); } 65% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes hint-pulse { 50% { background: #eaf0d7; } }
@media (max-width: 360px) {
    .cafe-shell { padding-left: 12px; padding-right: 12px; }
    h1 { font-size: 21px; gap: 6px; }
    .orders { gap: 10px; }
    .guest-portrait { width: 64px; height: 64px; }
    .order-item svg { width: 37px; height: 37px; }
    .board { gap: 4px; }
    .cell { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

.guest-talk { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; }
.guest-talk:focus-visible { outline: 2px solid #8c5974; outline-offset: 2px; }

/* Keep ranking secondary and its score feedback outside the action. */
.cafe-footer .game-ranking-open {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-shadow: none;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cafe-footer .game-ranking-open > span {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.cafe-footer [data-game-ranking-feedback] {
    width: 100%;
    color: var(--ink);
    text-align: center;
}

.cafe-footer [data-game-ranking-feedback]:not(:has(.game-ranking-feedback:not([hidden]))) {
    display: none;
}

.cafe-footer [data-game-ranking-feedback] .game-ranking-feedback {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.cafe-footer { flex-wrap: wrap; gap: 8px; }
.cafe-footer [data-game-ranking-feedback] { flex-basis: 100%; }

/* Keep guidance inside existing surfaces, without covering the touch targets. */
.sales-stat { flex-wrap: wrap; justify-content: flex-end; }
.sales-gain { margin-left: 5px; padding: 2px 6px; border-radius: 6px; background: #eaf0df; color: #425d35; font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.cell.merge-candidate { outline: 2px dashed #657e50; outline-offset: -3px; }
.cell-order-mark { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #eff6e7; color: #425d35; font-size: 11px; font-weight: 700; line-height: 1; }
.order.ready .order-items { border-radius: 10px; box-shadow: inset 0 0 0 1px #8a9c77; }
.selection-bar p { line-height: 1.5; overflow-wrap: anywhere; }