/* A compact customer counter above a generous, tactile merge board. */
:root {
  color-scheme: light;
  --ink: #55406f;
  --green: #219e94;
  --rose: #e64b98;
  --paper: #fffcf2;
  --blue: #92bbed;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: #ffe1ef;
  font: 13px/1.5 "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
button { border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #d56a97; outline-offset: 3px; }
[hidden] { display: none !important; }
.academy {
  max-width: 440px;
  margin: auto;
  padding: 6px 9px max(9px, env(safe-area-inset-bottom));
  border-left: 1px solid #fff8e9;
  border-right: 1px solid #fff8e9;
  background: radial-gradient(circle at 6px 6px,#fff 3px,transparent 3.5px) 0 0 / 25px 25px,linear-gradient(#fff1a7 0%,#ffe1ee 29%,#ffc6e2 72%,#baf5e7 100%);
}
.game-hud { padding: 0 3px; display: flex; align-items: center; gap: 9px; min-height: 46px; margin-bottom: 4px; }
.level-medal {
  flex: 0 0 43px;
  height: 45px;
  border: 3px solid #fff;
  border-radius: 17px;
  background: linear-gradient(#fff3a0 0 42%,#ffd04c 43% 100%);
  box-shadow: 0 3px 0 #edaa36, 0 0 0 2px #ffd878, inset 0 2px #fff;
  text-align: center;
  color: #9a5a29;
}
.level-medal small { display: block; font-size: 8px; line-height: 13px; }
.level-medal strong { display: block; font-size: 23px; line-height: 24px; }
.chapter-progress { flex: 1; min-width: 0; padding: 4px 8px 7px; border: 2px solid #fff; border-radius: 19px; background: #fff7fc; box-shadow: 0 3px 0 #e8a4c2,inset 0 2px #fff; }
.chapter-progress > div { display: flex; justify-content: flex-end; gap: 5px; font-size: 10px; margin-bottom: 3px; }
.chapter-progress b { color: #b84984; white-space: nowrap; }
.chapter-progress progress { display: block; appearance: none; width: 100%; height: 12px; border: 2px solid #fffbdd; border-radius: 9px; background: #f1c5df; overflow: hidden; }
.chapter-progress progress::-webkit-progress-bar { background: #f1c5df; }
.chapter-progress progress::-webkit-progress-value { background: repeating-linear-gradient(115deg,#ffb2d0 0 7px,#f870ac 7px 14px); border-radius: 8px; }
.chapter-progress progress::-moz-progress-bar { background: #f870ac; border-radius: 8px; }
.relationship-button { min-width: 44px; min-height: 44px; padding: 5px 7px; border: 2px solid #fff8f2; border-radius: 50%; background: linear-gradient(#ffbfe2,#ff83bd 48%,#ef5aa3 49%,#ff96cb); color: #915775; box-shadow: 0 3px 0 #c14f8d,inset 0 2px #ffe6f4; font-size: 11px; font-weight: 700; }
.relationship-button svg { display: block; width: 27px; height: 27px; margin: auto; filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 5px #fffbdf); }
.story-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 42px; padding: 5px 10px 5px 13px; margin: 3px 0 0; background: linear-gradient(#fff5a1,#ffdc56 46%,#ffca39 47%,#ffe574); border: 2px solid white; border-left: 4px solid #cb9e4c; border-radius: 10px; box-shadow: 0 3px 0 #e7a65f; color: #90613d; text-align: left; }
.story-button small { display: block; font-size: 8px; color: #99885e; letter-spacing: .5px; }
.story-button b { font-size: 12px; }
.story-button > span:last-child { font-size: 10px; flex-shrink: 0; }
.story-button.ready { background: linear-gradient(#dfffaa, #a5db5c 47%, #7aba3e 52%, #94ca4b); border-color: #5a913c; color: #fff; box-shadow: 0 3px 0 #5c8a36, 0 0 15px #e5ec9c99, inset 0 1px #f1ffd2; }
.story-button.ready small { color: #f6ffe1; }
/* One shared scene: people behind serving trays, directly above the board. */
.customer-counter { position:relative; margin:0 -1px; padding:5px 9px 8px; border:3px solid #fff; border-bottom:0; border-radius:22px 22px 0 0; background:linear-gradient(#70efd345,#c8ffe126),url('./greenhouse.svg?v=9') center 42% / cover; overflow:hidden; }
.customer-counter::after { content:''; position:absolute; bottom:0; left:0; right:0; height:32px; border-top:3px solid #fff; border-bottom:3px solid #e16aa2; background:repeating-linear-gradient(90deg,#ff82b5 0 23px,#fff1a0 23px 46px); box-shadow:0 -3px 7px #d97f9c25; }
.orders { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.order { position:relative; min-width:0; height:146px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.order > img { position:absolute; top:0; width:82%; height:91px; object-fit:cover; object-position:center 16%; border:3px solid #fff; border-radius:30px 30px 18px 18px; box-shadow:0 4px 0 #e683b0,0 0 0 2px #ffa4ce; }
.order .name { position:absolute; z-index:2; top:64px; padding:1px 7px; max-width:100%; border:2px solid white; border-radius:12px; color:#734e9a; background:#e6d8ff; font-size:9px; font-weight:800; box-shadow:0 2px 0 #b997de; white-space:nowrap; }
.order .name small { display:none; }
.order .dish { position:absolute; left:0; right:0; bottom:29px; height:53px; display:flex; align-items:center; justify-content:center; padding-bottom:6px; border:2px solid #fffef4; border-radius:50% / 24%; background:radial-gradient(ellipse,#fff 49%,#f3dbef 66%,#fff5fc 71%); box-shadow:0 3px 0 #d99fc4,0 5px 5px #bc689a25; }
.order .dish svg { width:58px; height:58px; margin-top:-12px; filter:saturate(1.3) drop-shadow(0 3px 1px #675b4830); }
.order .dish .recipe-track { position:absolute; bottom:3px; }
.order > button:not(.dish) { position:relative; z-index:3; width:100%; min-height:44px; padding:3px; border:2px solid #fff; border-radius:19px; color:white; background:linear-gradient(#ff98c2 0%,#f768a5 46%,#df3c89 47%,#f461a0 100%); box-shadow:0 3px 0 #b73d7d,inset 0 2px #ffcee5; font-size:12px; font-weight:800; text-shadow:0 1px #ae2c6a; overflow:hidden; }
.order > button:not(.dish):disabled { visibility:hidden; }
.order.ready .dish::after { content:'✓'; position:absolute; right:5px; top:-4px; width:23px; height:23px; border:2px solid white; border-radius:50%; background:#23bc91; color:white; text-align:center; font:700 15px/19px sans-serif; }
.order .done-label { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:3px; width:100%; height:44px; margin-bottom:0; border-radius:14px; background:#fff4f8ed; color:#ce6694; text-align:center; font-size:20px; border:2px solid white; box-shadow:0 2px 0 #e5abc5; }
.order.visitor > .gossip-button { border:2px solid white; color:#fff; background:linear-gradient(#ff99c1,#f374aa); box-shadow:0 3px 0 #cf5888; text-shadow:none; }
.order.visitor.done > .done-label { display:none; }
.order.visitor > img { box-shadow:0 4px 0 #34bcab,0 0 0 2px #84e8ce; }
.order:nth-child(2) .name { background:#fff091; color:#8f632e; box-shadow:0 2px 0 #e4bb52; }
.order.visitor .name { background:#aff3dc; color:#327a6c; box-shadow:0 2px 0 #61bba7; }
.campus-queue { position:relative; z-index:2; display:flex; justify-content:flex-end; align-items:center; gap:5px; height:24px; margin-bottom:1px; }
.queue-person { display:flex; align-items:center; gap:1px; padding:0 3px 0 0; height:23px; border:1px solid #fff; border-radius:12px; background:#fffff4cc; color:#b49cae; font-size:10px; }
.queue-person img { width:22px; height:22px; object-fit:cover; object-position:center 15%; border-radius:50%; }
.queue-person.current { border:2px solid #ff84b1; color:#f0609d; background:#fff0f7; transform:rotate(-4deg); }
.queue-person.visited { color:#259e84; background:#e0fff0; }
.worktop { position: relative; padding: 6px; border: 4px solid #fff; border-radius: 19px 19px 24px 24px; background: linear-gradient(135deg,#ff9bc5,#f16caf 58%,#be8bea); box-shadow:0 5px 0 #c45394,0 8px 0 #fff,0 11px 15px #c773a626,inset 0 2px #ffd4e9; }
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; padding: 2px; border: 2px solid #fff; border-radius: 12px; background: #68d2d4; box-shadow: inset 0 1px 4px #547aa13d; touch-action: none; user-select: none; -webkit-user-select: none; }
.cell { position: relative; min-width: 0; padding: 1px; aspect-ratio: 1; border: 1px solid #eaf6ff4d; border-radius: 5px; background: linear-gradient(145deg,#e6fffa,#b6f3eb); touch-action: none; box-shadow: inset 0 1px #edf7ff66, inset 0 -1px #82a7cf26; }
.cell:nth-child(12n+2), .cell:nth-child(12n+4), .cell:nth-child(12n+6), .cell:nth-child(12n+7), .cell:nth-child(12n+9), .cell:nth-child(12n+11) { background: linear-gradient(145deg,#b2eee7,#83e0da); }
.cell.occupied { background-image: radial-gradient(ellipse at 50% 35%, #fffcebb3, #fff9df22 58%, transparent 80%); }
.cell svg { display: block; width: 100%; height: 100%; pointer-events: none; filter: saturate(1.5) contrast(1.04) drop-shadow(0 2px 0 #fff8d933) drop-shadow(0 4px 2px #47658d55); }
.cell small { position: absolute; bottom: 2px; right: 3px; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 5px; background: #678bbb; color: #fff; font-size: 9px; line-height: 12px; pointer-events: none; }
.cell.selected { outline: 3px solid #a64c89; outline-offset: -2px; z-index: 1; box-shadow: inset 0 0 15px #ffe37e99, 0 0 10px #fff8c388; }
.cell.hinted { outline: 3px solid #ffd65b; outline-offset: -3px; }
.cell.drop { outline: 3px solid #fff3a2; outline-offset: -3px; transform: scale(.95); }
.cell.dragging svg { opacity: .25; }
.drag-preview { position: fixed; top: 0; left: 0; z-index: 20; width: 60px; height: 60px; padding: 2px; border-radius: 50%; background: radial-gradient(#fffbe299, #fffbe200 72%); pointer-events: none; }
.drag-preview svg { width: 100%; height: 100%; filter: saturate(1.4) drop-shadow(0 7px 4px #2c456b66); }
.cell.wanted::after { content: '✓'; position: absolute; right: 1px; top: 1px; width: 15px; height: 15px; background: #79c256; border: 1px solid #f6ffe7; border-radius: 50%; color: #fff; font: 700 10px/13px sans-serif; pointer-events: none; }
.cell.pop svg { animation: pop .35s ease-out; }
.cell.pop::before { content: ''; position: absolute; z-index: 3; inset: -19px; background: url('./sparkle.svg') center / contain no-repeat; pointer-events: none; animation: merge-spark .65s ease-out forwards; }
.item-inspector { display: flex; align-items: center; gap: 7px; min-height: 58px; margin: 11px 1px 0; padding: 5px 7px; border: 2px solid #fff; border-radius: 17px; background: linear-gradient(#fff,#fff3df); box-shadow: 0 3px 0 #e4a4c4, inset 0 1px #fff; }
.item-preview { width: 43px; height: 43px; flex-shrink: 0; border-radius: 10px; background: radial-gradient(#fff,#d6fff0); }
.item-preview svg { width: 100%; height: 100%; filter: saturate(1.2) drop-shadow(0 2px 1px #59744425); }
.item-description { flex: 1; min-width: 0; }
.item-description strong { display: block; font-size: 11px; color: #825b88; }
.item-description span { display: block; font-size: 9px; color: #8a9481; line-height: 1.4; }
.next-preview { display: flex; align-items: center; flex-shrink: 0; color: #8caa76; }
.next-preview span { font-size: 25px; }
.next-preview svg { width: 35px; height: 35px; }
.item-inspector button { width: 44px; flex-shrink: 0; min-height: 44px; padding: 4px 6px; border: 1px solid #d2d7c7; border-radius: 9px; background: linear-gradient(#fffef7, #eee8d9); color: #7a856d; font-size: 9px; }
.item-inspector button svg { display: block; width: 25px; height: 25px; margin: auto; }
.item-inspector button:disabled { opacity: .4; }
/* Production stations and tools belong to the board's own bottom row. */
.station-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 4px; padding: 6px 2px 2px; }
.sources, .tools { display: contents; }
.sources button { position: relative; align-self: stretch; min-width: 0; min-height: 63px; padding: 1px 0 3px; border: 2px solid #fff; border-radius: 17px; color: #216e69; background: linear-gradient(#c5fff0,#72e9ce 46%,#35c5ae 47%,#7de5ce); box-shadow: 0 3px 0 #259c8f, inset 0 2px #e9fff7; text-align: center; }
.sources button[data-source="sweet"] { border-color: #fff; background: linear-gradient(#ffe3f3,#ffb5db 46%,#f582bd 47%,#ffc1e3); color: #a33e78; box-shadow: 0 3px 0 #c8609a, inset 0 2px #fff; }
.sources svg { display: block; width: 100%; height: 43px; filter: drop-shadow(0 2px 1px #526c6638); }
.sources button > span { display: block; font-size: 8px; font-weight: 700; white-space: nowrap; }
.sources b { position: absolute; right: -3px; top: -3px; width: 19px; height: 19px; background: #80bc4e; border: 1px solid #efffcf; border-radius: 50%; color: #fff; font: 700 17px/16px sans-serif; text-align: center; }
.sources button:active { transform: translateY(2px); box-shadow: 0 0 0 #84a17b; }
.merge-count { grid-column: span 2; text-align: center; color: #8c507e; font-size: 11px; font-weight:800; text-shadow: 0 1px #ffedf6; }
.tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; padding: 3px; border: 2px solid #fff; border-radius: 18px; background: linear-gradient(#ece1ff,#bda3ed); color: #735298; box-shadow: 0 3px 0 #9863c3; font-size: 8px; }
.tools button svg { display: block; width: 28px; height: 28px; filter: drop-shadow(0 2px 1px #627b8733); }
.tools button:disabled { opacity: .42; }
.story-emblem svg { display: block; width: 100%; height: 100%; }
.story-emblem { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: transparent; color: #a07c3d; text-align: center; font: 23px/30px Georgia, serif; }
.story-button > span:nth-child(2) { flex: 1; }
/* Routine feedback stays available to screen readers; hints/errors appear briefly. */
.status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status.is-visible { position: fixed; z-index: 25; left: 50%; bottom: max(78px, calc(env(safe-area-inset-bottom) + 78px)); transform: translateX(-50%); width: max-content; max-width: min(390px, calc(100vw - 26px)); height: auto; min-height: 0; margin: 0; padding: 9px 14px; border: 1px solid #fff3c8; border-radius: 15px; background: #45645aef; color: #fffbe9; font-size: 11px; line-height: 1.6; text-align: center; white-space: normal; overflow: visible; clip-path: none; pointer-events: none; box-shadow: 0 4px 16px #34504435; }
.bottom-nav { display: grid; grid-template-columns: 61px minmax(0, 1fr) 48px; align-items: stretch; gap: 6px; padding-top: 5px; border-top: 1px solid #fff; }
.nav-tool { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 4px 0; background: none; color: #5f7c6d; font-size: 8px; white-space: nowrap; }
.nav-tool > svg { display: block; width: 29px; height: 29px; filter: drop-shadow(0 2px 1px #a29b7c44); }
.bottom-nav .story-button { border-radius: 22px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 7px; min-height: 56px; margin: 0; padding: 5px 8px; border-left-width: 1px; }
.bottom-nav .story-emblem { grid-row: span 2; width: 28px; height: 31px; }
.bottom-nav .story-button > span:nth-child(2) { min-width: 0; }
.bottom-nav .story-button b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bottom-nav .story-button > span:last-child { grid-column: 2; font-size: 9px; }
.save-warning { padding: 8px; background: #fff1d5; border-radius: 7px; font-size: 11px; }
dialog{width:calc(100% - 28px);max-width:410px;max-height:85dvh;padding:16px;border:3px solid #fff;border-radius:24px;background:radial-gradient(circle at 6px 6px,#fff 2px,transparent 2.5px) 0 0/20px 20px,#fff1f7;color:var(--ink);box-shadow:0 20px 80px #1d392d40}dialog::backdrop{background:#1d362c91;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}.dialog-top h2{font-size:16px;margin:0}.dialog-top button{background:#eeeee3;border-radius:50%;width:44px;height:44px;font-size:21px;color:#66765d;flex-shrink:0}.dialog-note{font-size:11px;color:#808a76}.dialog-scene{background:#e4ebdd url('./greenhouse.svg?v=9') center/cover;height:158px;border-radius:12px;overflow:hidden;margin-bottom:12px}.dialog-scene img{display:block;height:100%;width:130px;margin:auto;object-fit:cover;object-position:center 15%}.speaker{font-size:12px;color:var(--green);font-weight:700}.dialog-text{font-size:14px;line-height:1.95;min-height:106px;margin:7px 0 15px;white-space:pre-line}.primary,.choice{display:block;width:100%;padding:12px 10px;border-radius:16px;background:var(--green);color:#fff;text-align:center;margin-top:8px;min-height:45px}.choice{background:#ffedf5;color:#965675;border:2px solid #ffd1e2;text-align:left;font-size:12px}.person{display:flex;align-items:center;gap:12px;margin:14px 0}.person img{width:63px;height:72px;border-radius:12px;object-fit:cover;object-position:center 15%}.person strong{display:block}.person small{font-size:10px;color:#8a927e}.hearts{color:var(--rose);letter-spacing:3px}.note{padding:12px 0;border-bottom:1px solid #e9e7da}.note b{font-size:12px}.note p{font-size:12px;line-height:1.8;margin:5px 0}.recipe-row{display:flex;align-items:center;gap:2px;margin:14px 0}.recipe-row svg{width:17%;height:auto}.recipe-row span{color:#9caa8b}.danger{display:block;margin:20px auto 0;border:1px solid #d7bcb5;background:transparent;border-radius:9px;padding:10px;color:#a16f67}.ending{padding:12px;border-radius:10px;background:#f1ead8;line-height:1.9;font-size:13px}
/* Story scenes retain their own spacious reading layout. */
.note .reply { padding: 9px 11px; border-left: 3px solid #ce97a6; border-radius: 0 8px 8px 0; background: #f7eeee; color: #805b6b; }
.replay-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.replay-nav button:disabled { opacity: .4; cursor: default; }
.dialog-scene { border: 3px solid #fff; box-shadow: inset 0 2px #fff; }
.dialog-scene img { border-radius: 65px 65px 0 0; border: 3px solid #fff; border-bottom: 0; box-shadow: 0 0 12px #f8e9b566; }
.primary { background: linear-gradient(#59d6b8, #29ae99); box-shadow: 0 3px 0 #238f80; font-weight: 700; }
.choice { background: #ffe1ef; border-color:#fff; box-shadow: 0 3px 0 #ef9ec4; font-weight: 600; }
/* Gloss and small stars share the same visual language as the rewards. */
.order .dish .recipe-track { display: flex; justify-content: center; align-items: center; gap: 4px; height: 7px; margin-top: 1px; }
.recipe-track i { display: block; width: 6px; height: 6px; border: 1px solid #ddcfaf; border-radius: 50%; background: #e9e2d3; box-shadow: inset 0 1px #fff9; }
.recipe-track i.reached { border-color: #a9c470; background: linear-gradient(#e9ffac, #a4d15d); box-shadow: 0 0 4px #d6eb9999, inset 0 1px #fff9; }
.recipe-track i:last-child { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); }
.order.ready .recipe-track i:last-child { border-color: #d6ae54; background: linear-gradient(135deg, #fff9ca, #efc25d); box-shadow: 0 0 6px #f4d776; }
.cell.merge-match { outline: 2px dashed #268a73; outline-offset: -3px; box-shadow: inset 0 0 9px #b3f2e077; }
.reward-tag { position: absolute; z-index: 5; top: 28%; left: -3px; right: -3px; margin: auto; width: max-content; padding: 2px 7px; border: 1px solid #fff5ba; border-radius: 12px; background: linear-gradient(#fffde3, #ffe09b); color: #b57a2d; font: 800 12px/17px -apple-system, sans-serif; text-shadow: 0 1px #fff; box-shadow: 0 2px 5px #80592c30; opacity: 0; pointer-events: none; }
.cell.pop .reward-tag { animation: level-rise 1.1s ease-out forwards; }
.cell.pop[data-rank="3"] .reward-tag, .cell.pop[data-rank="4"] .reward-tag { background: linear-gradient(#fff1ff, #f3bfec); color: #a363a2; border-color: #fff1e3; box-shadow: 0 0 13px #fff4c8; }
.cell[data-rank="3"] svg, .cell[data-rank="4"] svg { filter: saturate(1.5) drop-shadow(0 3px 1px #7460414d); }
.cell.wanted { background-image: radial-gradient(ellipse at 50% 40%, #fffad3c9, #e5f5cd59 65%, transparent); }
.order.ready > button:not(.dish) { animation: ready-lift .65s ease-out 2; }
.story-button.ready { animation: story-unlock .9s ease-out 2; }
@keyframes level-rise { 0% { opacity: 0; transform: translateY(9px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 60% { opacity: 1; transform: translateY(-5px) scale(1); } 100% { opacity: 0; transform: translateY(-21px) scale(.9); } }
@keyframes ready-lift { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-2px); box-shadow: 0 5px 0 #b73d7d, 0 0 12px #ffe2f0; } }
@keyframes story-unlock { 0%, 100% { box-shadow: 0 3px 0 #5c8a36, inset 0 1px #f1ffd2; } 45% { box-shadow: 0 3px 0 #5c8a36, 0 0 18px #fff4a8cc, inset 0 1px #f1ffd2; } }
.level-medal, .sources button, .story-button { position: relative; }
.order.ready::after, .order.done::after { content: '✧'; position: absolute; z-index: 2; top: -4px; left: 45%; color: #fff8cf; font-size: 24px; text-shadow: 0 0 2px #dba642, 0 0 8px #fff3a6; pointer-events: none; animation: reward-glint .8s ease-out 2; }
.order.ready > button:not(.dish)::before { content: ''; position: absolute; inset: 0; transform: translateX(-130%); background: linear-gradient(110deg, transparent 25%, #fff9 50%, transparent 75%); pointer-events: none; animation: gloss-pass .85s ease-out .15s; }
.story-button.ready .story-emblem { color: #b8812a; background: linear-gradient(#fff9d6, #f7d579); box-shadow: 0 0 10px #fff9ba; }
@keyframes gloss-pass { to { transform: translateX(130%); } }
@keyframes reward-glint { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes merge-spark { 0% { transform: scale(.45) rotate(-12deg); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.15) rotate(10deg); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.6); } 55% { transform: scale(1.23); } 100% { transform: scale(1); } }
@keyframes merge-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
/* Recipe guidance uses the existing play area; no extra toolbar. */
.order .dish { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.order.recipe-focus .dish { border-color:#ff83b6; box-shadow:0 3px 0 #d884ab,0 0 0 3px #fff5fa,0 0 13px #ffbdde; }
.order.recipe-focus .name { background:#ffd2e8; }
.cell.recipe-material { background-color:#fff0b4; background-image:radial-gradient(#fffbd0e6,#ffe2a680); }
.cell.recipe-muted svg { opacity:.4; filter:saturate(.65); }
.sources button.recipe-source { outline:3px solid #fff3a0; outline-offset:1px; box-shadow:0 3px 0 #659c80,0 0 15px #fff7ae; }
.next-preview.focused-recipe span { font-size:13px; font-weight:800; white-space:nowrap; }
.order .done-label small { max-width:75%; font-size:9px; line-height:1.4; }
.order.arriving > img { animation:guest-arrival .45s ease-out; }
.order.served-now::after { content:'♡'; top:13px; left:calc(50% - 12px); color:#ff80b4; font-size:32px; animation:thank-heart 1.2s ease-out forwards; }
@keyframes guest-arrival { from { opacity:0; transform:translateX(16px) rotate(5deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
@keyframes thank-heart { 0% { opacity:0; transform:translateY(17px) scale(.4); } 25% { opacity:1; transform:translateY(0) scale(1.15); } 100% { opacity:0; transform:translateY(-28px) scale(.85); } }
/* Candy colors and sticker edges keep the existing compact layout. */
.tools #hint { background:linear-gradient(#fff4aa,#ffd45b); box-shadow:0 3px 0 #dbab47; }
.merge-count { border:2px solid #fff9; border-radius:20px; padding:3px 0; background:#fff0f8a8; color:#b54388; }
.nav-tool > svg { padding:3px; width:32px; height:32px; border:2px solid white; border-radius:12px; background:#d4fff0; box-shadow:0 2px 0 #7ccbbb; }
.nav-tool:last-child > svg { background:#e9dcff; box-shadow:0 2px 0 #b293de; }
.order .dish svg { filter:saturate(1.4) drop-shadow(0 2px 0 white) drop-shadow(0 3px 1px #ba81a32e); }
.order .dish:active, .order > button:not(.dish):active, .relationship-button:active, .story-button:active { transform:translateY(2px); }
@media (max-width: 350px) {
  .academy { padding-left: 6px; padding-right: 6px; }
  .customer-counter { padding-left: 8px; padding-right: 8px; }
  .orders { gap: 6px; }
  .order .name { font-size: 8px; }
  .order .dish svg { width: 44px; height: 44px; }
  .cell { border-radius: 3px; }
  .item-inspector { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .item-preview { width: 35px; height: 35px; }
  .item-description strong { font-size: 10px; }
  .next-preview svg { width: 28px; height: 28px; }
}
@media (max-height: 740px) {
  .game-hud { margin-bottom:1px; }
  .campus-queue { height:20px; }
  .order { height:116px; }
  .order > img { height:68px; }
  .order .name { top:41px; }
  .sources button { min-height: 57px; }
  .sources svg { height: 38px; }
  .item-inspector { min-height: 47px; margin-top: 6px; padding-top:2px; padding-bottom:2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .cell.pop::before { display: none; }
  .reward-tag { display: none; }
}

/* Guidance stays in the existing inspector; no extra band above the board. */
.item-description span { font-size:10px; color:#66556b; }
.recipe-mark { position:absolute; right:4px; top:2px; display:grid; place-items:center; width:17px; height:17px; border:1px solid #cc8baa; border-radius:50%; background:#fff9fc; color:#874b75; font:700 16px/1 sans-serif; }
.order.recipe-focus .recipe-mark { background:#965675; color:white; }
.customer-counter::before { content:''; position:absolute; inset:0; pointer-events:none; background-position:center 42%; background-size:cover; }
.customer-counter[data-level="2"]::before { background-image:url('./greenhouse-growth.svg?v=1#flowers'); }
.customer-counter[data-level="3"]::before { background-image:url('./greenhouse-growth.svg?v=1#lights'); }
@media (max-height:740px) {
  .order.done:not(.visitor) > img { width:53px; height:53px; border-radius:50%; }
  .order.done:not(.visitor) .name { top:40px; }
  .order.done:not(.visitor) .done-label { font-size:16px; }
}