/* One illustration system: warm paper, fine cocoa lines, quiet sage accents. */
:root {
  font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-synthesis: none;
  color: #514c42;
  background: #eeeade;
  --ink: #514c42;
  --muted: #777166;
  --paper: #faf7ef;
  --line: #c9c2b1;
  --sage: #68775e;
  --sage-light: #e5e9dc;
  --rose: #ad8578;
  --rose-light: #f0e2da;
  --button-sage: url('./assets/button-sage.png');
  --button-cream: url('./assets/button-cream.png');
  --button-token: url('./assets/button-token.png');
  --prop-art: url('./assets/cafe-props.png');
  --cafe-art: url('./assets/cafe-interior.png');
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:not(:disabled):active { translate: 0 1px; }
[hidden] { display: none !important; }
.screen { height: 100dvh; width: 100%; position: relative; }
/* Whole illustrated café objects, with level live text over the empty center. */
.play-button,.secondary-button,.icon-button,.scene-button,.settings-list button {
  border:0; border-radius:0; box-shadow:none; background-color:transparent;
  background-position:center; background-repeat:no-repeat; background-size:100% 100%;
}
.play-button { min-height:62px; padding:15px 30px 15px 38px; background-image:var(--button-sage); color:#443a27; font:600 18px 'Songti TC',Georgia,serif; white-space:nowrap; }
.play-button > span { margin-left:8px; font-size:13px; }
.secondary-button,.settings-list button { background-image:var(--button-cream); color:#61543f; }
.secondary-button { min-height:54px; padding:12px 24px 12px 32px; font-size:14px; }
.icon-button { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; padding:0; background-image:var(--button-token); font-size:24px; color:#6f5a40; }
.play-button:not(:disabled):hover,.secondary-button:not(:disabled):hover,.mode-card:not(:disabled):hover { filter:brightness(1.07); }
.text-button { min-height: 44px; padding: 10px; border: 0; background: none; color: #756853; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; }
.game-logo { width: 156px; font-family: 'Songti TC', Georgia, serif; line-height: 1.25; letter-spacing: 1px; }
.game-logo > span { display: block; color: #8b826d; font-size: 15px; letter-spacing: 5px; }
.game-logo > strong { display: block; color: #655a46; font-size: 21px; font-weight: 600; }
.game-logo sup { color: #9b8273; margin-left: 3px; font-family: Georgia, serif; font-size: 12px; }
.sprite { display: block; width: 100%; height: 100%; flex-shrink: 0; background-image: url('./assets/coffee-items.png'); background-size: 400% 400%; background-position: var(--x) var(--y); pointer-events: none; }
.customer-portrait { display: block; flex-shrink: 0; width: 72px; height: 72px; background-image: url('./assets/cat-guests.png'); background-size: 400% 400%; background-position: var(--cx) var(--cy); }

/* Homepage: one registered world, cropped to cover every viewport. */
.home-screen { overflow:hidden; padding:0; background:#f2efe6; }
.home-city { position:relative; width:100%; height:100dvh; --scene-width:max(100vw,150dvh); --scene-height:max(100dvh,calc(100vw / 1.5)); --scene-top:calc((100dvh - var(--scene-height)) * .92); isolation:isolate; touch-action:pan-y; animation:home-arrive 1.3s ease-out both; }
.home-world { position:absolute; left:50%; top:var(--scene-top); width:var(--scene-width); height:var(--scene-height); transform:translateX(-50%); container-type:inline-size; }
.home-city-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* Sky is clipped above the roof and behind the surrounding city silhouette. */
.home-sky { position:absolute; inset:0; pointer-events:none; clip-path:polygon(30% 0,76% 0,76% 12%,70% 14%,69% 21%,65% 25%,60% 27%,54% 27%,50% 26%,45% 28%,39% 30%,34% 28%,31% 20%); }
.home-cloud { position:absolute; width:28%; height:auto; left:18%; top:1%; animation:home-cloud-drift 74s linear infinite; animation-delay:-22s; }
.cloud-far { width:22%; left:22%; top:9%; animation-duration:99s; animation-delay:-63s; }
@keyframes home-cloud-drift { 0% { transform:translateX(0); opacity:0; } 12% { opacity:.78; } 82% { opacity:.78; } 100% { transform:translateX(155%); opacity:0; } }
.home-city-title { position:absolute; top:max(6%,calc(12px + env(safe-area-inset-top))); left:15%; width:70%; margin:0; text-align:center; color:#685b45; font:600 clamp(28px,4.6vw,48px) 'Songti TC',Georgia,serif; letter-spacing:3px; text-shadow:0 2px 8px #fff9e3c9; pointer-events:none; }
.home-city-title > small { display:block; margin-bottom:5px; font-size:.65em; letter-spacing:8px; font-weight:500; }
.home-settings { position:absolute; right:calc(12px + env(safe-area-inset-right)); top:calc(12px + env(safe-area-inset-top)); z-index:5; }
/* One scene anchor owns both the sign and its controls in every orientation. */
.home-menu-anchor { position:absolute; z-index:3; left:50.5%; top:46.5%; width:min(18%,calc(100vw - 128px)); transform:translateX(-50%); }
.home-sign-rig { position:relative; width:100%; min-height:44px; aspect-ratio:2.67; transform-origin:center; transition:transform .34s ease,opacity .16s linear; }
.home-shop-sign { position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; border:0; padding:5% 8% 5% 16%; background:none; color:#443a27; font:600 clamp(16px,2.8cqw,28px) 'Songti TC',Georgia,serif; white-space:nowrap; }
.home-shop-sign > img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.home-shop-sign > span { position:relative; }
.home-shop-sign:disabled { opacity:1; cursor:wait; }
.home-shop-sign:not(:disabled):hover { filter:brightness(1.07); }
/* The world and every pose share the same (160,296) foot anchor. */
.home-shopkeeper { position:absolute; z-index:2; left:50.5%; top:85%; width:16%; aspect-ratio:1; background-image:url('./assets/home-shopkeeper.png'); background-size:400% 200%; background-position:var(--cat-x,0%) var(--cat-y,0%); transform:translate(-50%,-92.5%); pointer-events:none; }
/* Only small feathered eye patches use the blink frame. Body pixels never move. */
.cat-eye { position:absolute; inset:0; opacity:0; background-image:url('./assets/home-shopkeeper.png'); background-size:400% 200%; background-position:66.666667% 0%; }
.cat-eye-left { transform:translate(-.3125%,-2.5%); mask-image:radial-gradient(ellipse 4.2% 3.5% at 43% 32.5%,#000 76%,transparent 100%); }
.cat-eye-right { transform:translate(0,-3.5%); mask-image:radial-gradient(ellipse 4.5% 3.6% at 56.25% 32%,#000 76%,transparent 100%); }
.home-city[data-phase=idle] .cat-eye { animation:cat-eyes-blink 6.8s steps(1,end) infinite; }
@keyframes cat-eyes-blink { 0%,43%,46%,88%,91%,100% { opacity:0; } 44%,45%,89%,90% { opacity:1; } }
.home-city[data-phase=lift] .home-sign-rig { transform:translateY(-12%); }
.home-city[data-phase=lower] .home-sign-rig,.home-city[data-phase=swap] .home-sign-rig { transform:translateY(calc(var(--scene-height) * .238)); }
.home-city[data-phase=swap] .home-sign-rig { opacity:0; }
.home-city[data-phase=raise] .home-sign-rig { transform:translateY(85%); }
.home-city[data-phase=hang] .home-sign-rig,.home-city[data-phase=settle] .home-sign-rig { transform:translateY(0); }
/* Align each control to a sign edge; stay mounted while the sign animates. */
.home-mode-switch { position:absolute; z-index:4; left:0; right:0; bottom:calc(100% + 8px); display:flex; flex-direction:row; justify-content:space-between; gap:16px; }
.home-mode-switch > .home-pull-button { position:relative; display:grid; place-items:center; width:44px; height:56px; padding:0; border:0; background:none; }
.home-pull-art { position:relative; display:block; width:40px; height:54px; overflow:hidden; transform-origin:50% 8%; transition:transform .2s ease,filter .2s ease; pointer-events:none; }
.home-pull-art > img { position:absolute; top:0; left:-20px; width:80px; height:54px; max-width:none; object-fit:fill; }
.home-pull-art > svg { position:absolute; left:50%; top:64%; width:15px; height:15px; transform:translate(-50%,-50%); fill:none; stroke:#65513b; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) { .home-pull-button:hover .home-pull-art { transform:rotate(-4deg); filter:brightness(1.05); } }
.home-pull-button:active .home-pull-art { transform:translateY(4px) rotate(2deg); }
.home-pull-button:focus-visible { outline-offset:0; }
.home-street-note { position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:8%; right:8%; text-align:center; color:#514734; text-shadow:0 1px 4px #fcf5e6,0 0 8px #fcf5e6; }
.home-street-note > p { margin:0 0 5px; font-size:clamp(14px,1.5vw,17px); }
.home-street-note > span { font-size:clamp(12px,1.3vw,15px); }
.home-ranking { position:absolute; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); width:48px; height:48px; min-height:48px; padding:0; background:var(--button-token) center / 100% 100% no-repeat; color:#63543e; text-decoration:none; font-size:12px; }
.home-grasses { position:absolute; inset:0; z-index:1; pointer-events:none; }
.home-grass { position:absolute; width:8%; height:auto; transform-origin:50% 94%; animation:home-grass-wind 5.8s ease-in-out infinite; }
.grass-left { left:35%; top:72%; }
.grass-right { left:57%; top:72.8%; width:7%; animation-delay:-2.2s; animation-duration:6.7s; }
.grass-near { left:63%; top:75.5%; width:5%; animation-delay:-4.1s; animation-duration:5.3s; }
@keyframes home-grass-wind { 0%,100% { transform:skewX(-1deg) rotate(-1deg); } 35% { transform:skewX(3deg) rotate(2deg); } 68% { transform:skewX(.5deg) rotate(.5deg); } }
@keyframes home-arrive { from { opacity:0; } to { opacity:1; } }
@media (orientation:landscape) and (max-height:550px) {
 .home-city-title { top:calc(8px + env(safe-area-inset-top)); font-size:20px; line-height:1.2; }.home-city-title > small { display:inline; font-size:14px; margin:0 8px 0 0; letter-spacing:3px; }
 .home-street-note { bottom:calc(8px + env(safe-area-inset-bottom)); }.home-street-note > p { margin-bottom:2px; }
}
@media (prefers-reduced-motion:reduce) { .home-city[data-phase=idle] .cat-eye,.home-grass,.home-cloud { animation:none; }.home-cloud { opacity:.65; transform:translateX(85%); }.home-pull-art { transition:none; }.cat-eye { opacity:0; } }

/* Campaign: numbered paper stamps and a continuous route. */
/* A quiet, responsive shelf of ten levels. */
.map-screen { display:flex; flex-direction:column; background:#f7f5ee; }
.map-header { display:flex; align-items:center; flex-shrink:0; gap:14px; min-height:calc(80px + env(safe-area-inset-top)); padding:calc(12px + env(safe-area-inset-top)) max(24px,calc((100% - 1000px)/2)) 12px; }
.map-screen .icon-button { width:44px; height:44px; background:none; border-radius:50%; color:#666d5d; }
.map-screen .icon-button:hover { background:#eaece2; }
.map-brand { font:600 17px 'Songti TC',Georgia,serif; letter-spacing:2px; }
.star-total { display:flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap; }
.star-total > span { color:#a68a50; font-size:19px; }
.star-total b { font-size:16px; font-weight:500; }
.star-total small { color:var(--muted); font-size:12px; }
.map-scroll { flex:1; min-height:0; position:relative; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b7beaa transparent; }
.map-world { width:100%; max-width:1048px; min-height:100%; margin:0 auto; padding:32px 24px 20px; display:flex; flex-direction:column; justify-content:center; }
.map-intro { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.map-eyebrow { margin:0 0 12px; color:var(--sage); font-size:13px; letter-spacing:3px; }
.map-intro h1 { margin:0 0 14px; font:500 clamp(28px,4vw,38px) 'Songti TC',Georgia,serif; letter-spacing:2px; }
#map-progress { margin:0; font-size:13px; color:var(--muted); }
#map-welcome .customer-portrait { width:100px; height:100px; }
.level-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.map-node { display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:164px; padding:20px 18px 16px; text-align:left; border:1px solid #dfdfd2; border-radius:16px; background:#fdfcf8; transition:border-color .15s,background-color .15s; }
.node-top { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.node-number { font:400 32px Georgia,serif; color:#68745e; }
.node-state { font-size:11px; color:var(--sage); white-space:nowrap; }
.node-state svg { display:block; width:18px; height:18px; }
.node-title { margin:20px 0 10px; font-size:15px; font-weight:500; line-height:1.5; }
.node-stars { margin-top:auto; font-size:13px; line-height:20px; color:#94773d; letter-spacing:2px; }
.node-stars .empty { color:#d6d4c9; }
.map-node.current { background:#e9eddf; border-color:#7d8b70; }
.map-node.current .node-stars { letter-spacing:0; color:#526447; }
.map-node.complete { border-color:#c8d0ba; }
.map-node.locked { background:transparent; border-color:#e3e1d8; color:#838276; }
.map-node.locked .node-number,.map-node.locked .node-state { color:#939687; }
.map-node.locked .node-stars { color:#838276; font-size:11px; letter-spacing:0; }
@media (hover:hover) { .map-node:hover { border-color:#8b987c; background:#eff1e7; } }
.map-note { margin:24px 0 0; text-align:center; font-size:12px; color:#898779; letter-spacing:2px; }
.map-dock { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:20px; padding:18px max(24px,calc((100% - 1000px)/2)) calc(18px + env(safe-area-inset-bottom)); background:#f7f5ee; border-top:1px solid #e2e1d6; }
.map-dock > div { min-width:0; }
.map-dock > div > span { display:block; margin-bottom:6px; font-size:11px; color:var(--muted); }
.map-dock > div > strong { font-size:15px; font-weight:500; }
.map-dock .play-button { min-height:52px; padding:14px 26px; background:#68775e; border-radius:12px; color:#fffdf6; font:500 16px 'PingFang TC','Microsoft JhengHei',sans-serif; }
@media (max-width:899px) and (min-width:700px) {
  .level-grid { gap:10px; }
  .map-node { padding:16px 12px; }
  .node-number { font-size:28px; }
  .node-state { font-size:10px; }
  .node-title { font-size:14px; }
}
@media (max-width:699px) {
  .map-header { min-height:calc(68px + env(safe-area-inset-top)); padding:calc(10px + env(safe-area-inset-top)) 16px 10px; gap:8px; }
  .map-brand { font-size:15px; letter-spacing:1px; }
  .map-world { padding:24px 24px 20px; justify-content:flex-start; }
  .map-intro { margin-bottom:24px; }
  #map-welcome .customer-portrait { width:80px; height:80px; }
  .level-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .map-node { min-height:144px; padding:16px; }
  .node-title { margin-top:16px; }
  .map-dock { padding:14px 24px calc(14px + env(safe-area-inset-bottom)); gap:12px; }
  .map-dock > div > strong { font-size:13px; }
  .map-dock .play-button { padding:14px 18px; font-size:14px; }
}
@media (max-width:479px) {
  .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map-world { padding-left:20px; padding-right:20px; }
  .map-dock { padding-left:20px; padding-right:20px; }
}
@media (max-width:359px) {
  .map-header { padding-left:8px; padding-right:8px; gap:4px; }
  .map-brand { font-size:13px; }
  .map-intro h1 { font-size:26px; }
  #map-welcome .customer-portrait { width:64px; height:64px; }
  .map-world,.map-dock { padding-left:16px; padding-right:16px; }
  .map-dock .play-button { padding:14px; }
}

/* Play is staged inside the café, without a navigation bar or stacked cards. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cafe-prop { display:block; background-image:var(--prop-art); background-size:400% 200%; background-position:var(--px) var(--py); width:100%; height:100%; pointer-events:none; }
/* Briefings, recipes, results and business records use the same paper surfaces. */
dialog { width: min(480px,calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 35px 23px 24px; border: 1px solid #bdb198; border-radius: 7px 21px 8px 18px; color: var(--ink); background: var(--paper); box-shadow: 0 12px 45px #51463222; }
dialog::backdrop { background: #524c3c66; }
.modal-close { position: absolute; z-index: 1; right: 8px; top: 8px; width: 40px; height: 40px; font-size: 23px; }
.modal-heading { text-align: center; }
.modal-eyebrow { color: #85775d; font-size: 12px; letter-spacing: 2px; }
.modal-heading h2 { margin: 8px 0; font: 600 28px 'Songti TC', Georgia, serif; color: #655842; }
.modal-heading p { margin: 9px 0 13px; font-size: 14px; line-height: 1.6; color: #80725b; }
.difficulty { display: inline-flex; padding: 4px 11px; border-radius: 6px; background: #e7ebdc; color: #6d7859; font-size: 12px; }
.difficulty.challenge { background: #eee0d5; color: #8e725b; }
.brief-stars, .result-stars { display: flex; justify-content: center; align-items: center; gap: 0; margin: 8px 0; }
.brief-stars .sprite { width: 40px; height: 40px; }
.unearned { filter: grayscale(1); opacity: .25; }
.guest-heading { text-align: center; font-size: 14px; font-weight: 500; color: #817158; margin: 12px 0 0; }
.guest-line { display: flex; justify-content: center; gap: 17px; margin: 10px 0; }
.guest-line > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.guest-line .customer-portrait { width: 78px; height: 78px; }
.guest-line strong { font-size: 14px; font-weight: 500; color: #73634c; margin-top: 3px; }
.guest-line > div > span:last-child { font-size: 12px; color: #86795f; margin-top: 4px; }
.brief-grid { display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 12px; margin: 18px 0; }
.brief-goals { padding:14px 10px; border:0; border-top:1px dashed #c2ae8b; border-bottom:1px dashed #c2ae8b; background:#fdfaf188; }
.brief-goals h3 { font-size: 14px; font-weight: 500; color: #817155; margin: 0 0 6px; }
.brief-goal { display: flex; align-items: center; gap: 5px; color: #70624d; font-size: 13px; }
.brief-goal .sprite { width: 35px; height: 35px; }
.brief-goal b { margin-left: auto; font: 18px Georgia, serif; color: #92724c; }
.mini-board { display: grid; grid-template-columns: repeat(var(--cols),1fr); gap: 2px; padding: 5px; width: 104px; border: 1px solid #b5a88d; border-radius: 6px; background: #cfc3a9; }
.mini-cell { aspect-ratio: 1; background: #f8f3e5; border-radius: 2px; }
.mini-cell.void { visibility: hidden; }
.mini-cell.flower { background: #d3dfbd; }
.mini-cell.frost { background: #eed6c9; }
.brief-board > span { display: block; text-align: center; margin-top: 6px; font-size: 12px; color: #88795e; }
.brief-moves { margin-top: 9px; text-align: center; font-size: 14px; color: #78694f; }
.brief-moves b { font: 25px Georgia, serif; color: #8f704b; }
.terrain-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.terrain-chips span { padding:3px 7px; border-bottom:1px dotted #c7bba0; color: #767653; font-size: 12px; }
.brief-tip { padding:8px 5px; margin:13px 0; border:0; background:none; color: #756c51; font-size: 14px; line-height: 1.65; }
.starting-tools { display: flex; justify-content: center; gap: 19px; margin: 10px 0; }
.starting-tools > span { position: relative; }
.starting-tools .sprite { width: 42px; height: 42px; }
.starting-tools b { position: absolute; right: -7px; bottom: 0; padding: 2px 5px; background: #e8dfc9; color: #7f6c46; border-radius: 5px; font-size: 12px; }
.free-tools-label { text-align: center; font-size: 12px; color: #86775b; margin: 13px 0 3px; }
.lock-message { padding: 12px; margin: 15px 0 0; border-radius: 7px; background: #eae5d8; color: #7f715c; font-size: 14px; text-align: center; }
.modal-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; text-align: center; }
.modal-actions .play-button { width:100%; max-width:280px; min-height:82px; align-self:center; }
.modal-actions .secondary-button { width:100%; max-width:280px; min-height:68px; align-self:center; }
.result-art { width: 120px; height: 120px; margin: 0 auto; }
.result-art .customer-portrait { width: 100%; height: 100%; }
.result-guests .customer-portrait { width: 92px; height: 92px; }
.result-stars { height: 78px; }
.result-stars .sprite { width: 67px; height: 67px; animation: star-pop .55s ease both; }
.result-stars .sprite:nth-child(2) { width: 77px; height: 77px; animation-delay: .1s; }
.result-stars .sprite:nth-child(3) { animation-delay: .2s; }
.result-stars .unearned { animation: none; }
.result-metrics { display: flex; justify-content: center; gap: 30px; text-align: center; color: #89765c; font-size: 13px; }
.result-metrics strong { display: block; font: 27px Georgia, serif; color: #8e7047; margin-bottom: 5px; }
.settings-list { display: grid; justify-items:center; gap: 10px; margin: 20px 0; }
.settings-list button { width:min(100%,320px); min-height:70px; padding:12px 22px 12px 32px; font-size:15px; }
.recipe-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 20px 0; }
.recipe-list > div { text-align: center; color: #7b6d55; font-size: 12px; }
.recipe-list .sprite { width: 80px; height: 80px; max-width: 100%; margin: auto; }
.recipe-list strong { display: block; color: #92764f; font-size: 13px; font-weight: 500; margin: 5px 0; }
.rules, .business-rules { padding-left: 22px; color: #71634d; font-size: 15px; line-height: 1.8; }
.rules li { margin: 12px 0; }
.modal-note { text-align: center; color: #85755b; font-size: 13px; line-height: 1.7; }
.settings-list .danger-button { color: #9e7059; }
.owner-label { display: block; margin: 15px 0; color: #7f6e51; font-size: 14px; }
.owner-label input { display: block; width: 100%; min-height: 46px; margin-top: 8px; padding: 10px; border: 1px solid #bcb095; border-radius: 7px; background: #fdf9ee; color: var(--ink); font-size: 16px; }
.resume-note { padding: 12px; border: 1px solid #b9c29f; border-radius: 8px; background: #e8eddb; text-align: center; font-size: 14px; line-height: 1.6; }
.business-days { text-align: center; padding: 9px 0 18px; }
.business-days strong { display: block; font: 64px Georgia, serif; color: #91734f; }
.business-days span { font-size: 14px; color: #857052; }
.business-ranks { list-style: none; padding: 0; margin: 20px 0; }
.business-ranks li { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid #d5c8ae; }
.business-ranks li > b { font: 22px Georgia, serif; color: #a18a5b; width: 22px; }
.business-ranks li > span { flex: 1; overflow-wrap: anywhere; font-size: 16px; }
.business-ranks small { display: block; font-size: 12px; margin-top: 5px; color: #88785d; }
.business-ranks strong { font-size: 20px; color: #6d7b53; white-space: nowrap; }
.business-ranks .empty-rank { justify-content: center; font-size: 14px; color: #8a755b; }
@keyframes merge-pop { 0% { transform: scale(.7); } 65% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes star-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes guest-thanks { 35% { transform: translateY(-2px) rotate(-2deg); } 70% { transform: rotate(2deg); } }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Short, optional lessons live beside the board after the shop opens. */
.business-coach { flex-shrink:0; width:min(100%,440px); margin:0 0 10px; padding:10px 14px 4px; background:#fbf4e8; border:1px solid #c8b591; border-radius:7px 17px 9px 14px; color:#65533d; }
.business-coach-copy > strong { font:600 17px 'Songti TC',Georgia,serif; }
.business-coach-copy > small { float:right; font-size:12px; color:#8a7b61; }
.business-coach-copy > p { margin:5px 0 0; font-size:14px; line-height:1.5; }
.business-coach-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.business-coach-actions > button { min-height:44px; }
.business-coach-actions > .secondary-button { min-width:96px; padding:8px 20px; font-size:14px; }
.lesson-focus { outline:2px dashed #8d9a62; outline-offset:5px; }



/* The play screen is a little café stage: characters, crockery, and tabletop. */
.game-screen { overflow:auto; background:#f0e5cc; color:#665138; isolation:isolate; }
.cafe-scenery { position:absolute; inset:0; min-height:100%; overflow:hidden; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 50% 8%,#fff9e4 0,#f1e8ce 65%); }
.cafe-awning { position:absolute; top:-9px; left:0; right:0; height:34px; background:repeating-linear-gradient(90deg,#8c9e7b 0 64px,#f5e6c6 64px 128px); border-radius:0 0 40% 40% / 0 0 15px 15px; box-shadow:0 5px 0 #b4a37b22; }
.cafe-window { position:absolute; left:50%; top:48px; transform:translateX(-50%); width:530px; height:224px; border:12px solid #e2d1ad; border-radius:180px 180px 8px 8px; background:linear-gradient(#bdd4cc99,#e6ecce80); box-shadow:inset 0 0 0 3px #f8f0da,0 0 0 2px #bfaa7d55; }
.cafe-window::before { content:''; position:absolute; left:49%; top:0; width:8px; height:100%; background:#e2d1ad; box-shadow:2px 0 0 #f6edd5; }
.cafe-window::after { content:''; position:absolute; top:52%; width:100%; height:7px; background:#e2d1ad; box-shadow:0 2px 0 #f6edd5; }
.cafe-window i { position:absolute; top:18%; left:12%; width:26%; height:16%; background:#fff9e7aa; border-radius:50%; filter:blur(7px); }.cafe-window i+i { top:34%; left:65%; width:19%; }
.cafe-table { position:absolute; top:272px; bottom:0; left:0; right:0; border-top:8px solid #ba9261; background:repeating-linear-gradient(0deg,transparent 0 128px,#a77b4520 129px,#ffedc755 131px,transparent 133px),linear-gradient(90deg,#d8ba8e,#ead3a9 22%,#ecd7b1 50%,#ead3a9 78%,#d8ba8e); box-shadow:inset 0 8px 12px #80582b21; }
.game-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:96px 180px 35px minmax(310px,1fr) 117px 28px; gap:3px; max-width:880px; height:100%; min-height:800px; margin:auto; padding:0 14px max(10px,env(safe-area-inset-bottom)); }
.play-header { position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:27px 18px 0; }
.scene-button { display:grid; place-items:center; width:48px; height:48px; padding:0; background-image:var(--button-token); font:30px Georgia,serif; filter:drop-shadow(0 3px 1px #73532722); }
#pause-button { font-size:18px; }
.shop-sign { position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:220px; height:125px; text-align:center; padding-top:67px; }
.shop-sign svg { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 4px 2px #62492828); }
.shop-sign strong,#level-title { position:relative; display:block; color:#fff2cb; text-shadow:0 1px 1px #42432b; }
.shop-sign strong { font:600 18px 'Songti TC',Georgia,serif; margin-top:3px; white-space:nowrap; }
#level-title { font-size:11px; letter-spacing:2px; }
.cafe-stage { position:relative; width:min(100%,570px); height:100%; justify-self:center; }
.orders { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; height:100%; padding:0 16px; }
.customer-order { position:relative; min-width:0; height:100%; animation:guest-arrive .42s cubic-bezier(.2,.8,.3,1.2); transition:opacity .16s,transform .16s; }
.guest-info { z-index:2; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); }
.guest-info .customer-portrait { width:126px; height:126px; transform-origin:50% 100%; animation:cat-breathe 4.4s ease-in-out infinite; animation-delay:var(--guest-delay); filter:drop-shadow(0 3px 1px #795a3930); }
.customer-name { position:absolute; bottom:-17px; left:50%; transform:translateX(-50%); z-index:3; color:#fff0cc; font-size:11px; white-space:nowrap; letter-spacing:2px; text-shadow:0 1px 2px #4e3519; }
.order-request { position:absolute; z-index:2; top:0; right:0; width:70px; height:67px; padding:5px; border:2px solid #bca783; border-radius:48% 48% 44% 43%; background:#fffbee; box-shadow:0 3px 0 #a38b6122; transform:rotate(5deg); }
.order-request::before,.order-request::after { content:''; position:absolute; border-radius:50%; background:#fffbee; border:1px solid #bca783; }
.order-request::before { width:11px; height:9px; left:9px; bottom:-9px; }.order-request::after { width:5px; height:4px; left:3px; bottom:-15px; }
.order-request > .sprite { width:100%; height:100%; transform:rotate(-5deg); }
.order-tier { position:absolute; bottom:2px; right:5px; font:12px Georgia,serif; color:#7e633e; }
.customer-thanks { display:none; position:absolute; top:16px; left:50%; transform:translateX(-50%) rotate(-5deg); white-space:nowrap; z-index:4; padding:9px 12px; border-radius:40% 40% 45% 20%; background:#fff2c2; border:2px solid #c5a569; font:600 13px 'Songti TC',Georgia,serif; color:#87713e; }
.customer-order.served .customer-thanks { display:block; }.customer-order.served .order-request { opacity:0; }.customer-order.served .customer-portrait { animation:guest-thanks .4s ease; }
.customer-order.leaving { opacity:0; transform:translateX(32px) rotate(6deg); }
.counter-ledge { position:absolute; z-index:1; pointer-events:none; bottom:1px; left:0; width:100%; height:33px; filter:drop-shadow(0 4px 2px #8b622e2e); }
.counter-heading { position:absolute; left:10px; right:10px; bottom:-20px; display:flex; justify-content:space-between; align-items:center; font:11px 'Songti TC',Georgia,serif; color:#8a6941; }.counter-heading small { font-size:10px; }.counter-heading b { color:#6e7f4b; }
.table-objectives { display:flex; justify-content:center; align-items:flex-end; min-width:0; }
.moves-badge { position:absolute; left:28px; top:302px; width:112px; height:112px; display:flex; flex-direction:column; align-items:center; padding-top:31px; transform:rotate(-6deg); color:#fcf1d1; }
.moves-badge > .cafe-prop { position:absolute; inset:0; z-index:-1; filter:drop-shadow(1px 5px 2px #805b3a33); }.moves-badge > span:not(.cafe-prop) { font-size:11px; letter-spacing:2px; }.moves-badge strong { font:34px Georgia,serif; line-height:1.2; text-shadow:1px 2px #ffffff22; }.moves-badge.low strong { color:#ffd097; animation:low-moves 1s ease-in-out infinite; }
.shift-goals { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; max-width:100%; }
.frost-objective { display:flex; align-items:center; gap:2px; font-size:11px; white-space:nowrap; }.frost-objective .sprite { width:26px; height:26px; }
.challenge { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; color:#87673d; font-size:11px; }.challenge b { font:600 11px Georgia,serif; color:#7d6c3f; }.challenge.complete { color:#577344; }.challenge.complete b { color:inherit; }
.board-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; justify-self:center; width:min(100%,540px); min-width:0; min-height:0; position:relative; }
.board-caption { position:absolute; top:-4px; left:0; right:0; height:0; text-align:center; z-index:4; pointer-events:none; }
#combo-label:not(:empty) { display:inline-block; transform:translateY(-50%) rotate(-3deg); background:#f5d77e; border:2px solid #d0a85d; padding:5px 14px; border-radius:4px 12px 6px 10px; color:#946633; font-weight:600; font-size:12px; box-shadow:0 3px 0 #987d4122; animation:star-pop .3s ease both; }
.board-wrap { position:relative; padding:10px; border:0; border-radius:18px 23px 20px 16px; background:repeating-linear-gradient(0deg,#ffffff05 0 3px,#80643b08 3px 4px),#b5b98c; outline:2px solid #8a9362; outline-offset:-1px; box-shadow:inset 0 0 0 5px #d7d8ae,inset 0 0 0 7px #9ca577,0 5px 0 #8b895b,0 10px 0 #c49e6b66,0 14px 20px #79532522; }
.board { display:grid; grid-template-columns:repeat(var(--cols),var(--cell,50px)); grid-auto-rows:var(--cell,50px); gap:4px; isolation:isolate; }
.cell { position:relative; width:var(--cell,50px); height:var(--cell,50px); padding:0; border:1px solid #e3d7b9; border-radius:11px 13px 10px 12px; background:#f3ebd7; box-shadow:inset 0 2px 2px #a58c5430,0 1px #ffffff55; }
.cell:nth-child(even) { background:#ece5cf; border-radius:13px 10px 12px 9px; }.cell .sprite { width:100%; height:100%; filter:drop-shadow(0 2px 1px #775c3325); }
.cell.occupied { background:#fff6df; border-color:#e4d5b3; box-shadow:inset 0 -2px #ddcba233; }.cell:not(:disabled):hover { background:#fff9db; outline:2px solid #c5a060; outline-offset:-2px; }
.cell.void { visibility:hidden; }.cell.flower { background:#b5bf8c; border-color:#a3b37a; opacity:1; box-shadow:inset 0 2px 4px #55633622; }.cell.frost { background:#dce5dd; border-color:#bbcfc3; }
.cell.match { box-shadow:inset 0 0 0 2px #a0b976; }.cell.spoon-target { outline:2px dashed #b2814e; outline-offset:-4px; }.cell.magic-target { outline:2px dashed #c29b46; outline-offset:-4px; background:#fff0b8; }
.board.show-open .cell.open:not(.occupied) { background:#f9edc4; border-color:#c9b376; }.cell.preview-match { outline:2px solid #7f9858; outline-offset:-2px; background:#e2e9ba; }
.cell[data-preview]::after { content:attr(data-preview); position:absolute; z-index:3; bottom:3px; left:50%; transform:translateX(-50%); padding:4px 6px; border-radius:5px; background:#728649; color:#fff8d9; font-size:10px; white-space:nowrap; }
.tier { position:absolute; right:4px; bottom:3px; min-width:15px; height:15px; display:grid; place-items:center; color:#927b51; font:10px Georgia,serif; text-shadow:0 1px #fff; pointer-events:none; }
.sprite.food-art { background:none; object-fit:contain; }
.game-controls { display:flex; align-items:center; justify-content:center; min-width:0; }
.prep-station { position:relative; width:350px; max-width:100%; align-self:stretch; }
.queue { display:flex; justify-content:center; align-items:center; gap:4px; height:100%; padding-bottom:12px; }
.supply-choice { position:relative; width:110px; height:94px; border:0; padding:0; background:none; flex-shrink:1; transition:transform .18s; }
.supply-choice > .supply-saucer { position:absolute; left:0; top:15px; width:100%; height:70px; filter:drop-shadow(0 5px 2px #89683c35); }
.supply-choice > .sprite { position:absolute; width:77px; height:77px; left:50%; top:-1px; transform:translateX(-50%); transition:top .2s; filter:drop-shadow(0 4px 2px #785b332c); }
.supply-choice strong { position:absolute; left:0; right:0; bottom:-1px; font-size:11px; font-weight:500; color:#7e6645; }.supply-key { position:absolute; left:18px; top:54px; font:9px Georgia,serif; color:#a38f67; }
.supply-pointer { display:none; position:absolute; left:50%; top:-13px; transform:translateX(-50%); color:#7d925a; font-size:23px; line-height:1; text-shadow:0 1px #fff0c3; animation:choose-bob 1.2s ease-in-out infinite; }
.supply-choice.selected .supply-pointer { display:block; }.supply-choice.selected > .sprite { top:-6px; }.supply-choice.selected .supply-saucer { filter:drop-shadow(0 0 3px #fef4bd) drop-shadow(0 4px 2px #7b8c4b77); }.supply-choice.selected strong { color:#52693c; font-weight:600; }.supply-choice:hover > .sprite { top:-8px; }
.prep-hint { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; color:#957849; letter-spacing:2px; }
.magic-button { position:absolute; top:320px; right:25px; width:114px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 0 4px; border:0; background:none; color:#80643c; }
.magic-button:disabled { opacity:1; cursor:default; }.magic-cup { position:absolute; top:3px; left:8px; width:100px; height:100px; filter:sepia(.2) drop-shadow(0 5px 2px #79512c33); }.magic-button strong { position:relative; font:600 14px 'Songti TC',Georgia,serif; }.magic-button small { position:relative; margin-top:3px; font-size:10px; }
.magic-aura { position:absolute; width:96px; height:96px; top:0; left:10px; border-radius:50%; background:radial-gradient(ellipse,#fff7c188,transparent 70%); }
.magic-meter { position:absolute; inset:0; pointer-events:none; }.magic-meter i { position:absolute; width:7px; height:11px; left:calc(15px + var(--bean) * 16px); top:88px; border:1px solid #a99769; border-radius:60% 40%; background:#b8a480; transform:rotate(35deg); box-shadow:inset 2px 0 #eee2b6; }.magic-meter i.filled { background:#8a9a52; border-color:#778948; box-shadow:inset 2px 0 #dce29b; }
.magic-button.ready .magic-aura { background:radial-gradient(ellipse,#fff8b4,#f5d77b66 48%,transparent 70%); animation:magic-glow 1.5s ease-in-out infinite; }.magic-button.ready .magic-cup { animation:magic-float 2s ease-in-out infinite; }.magic-button.ready small { color:#8d7026; font-weight:600; }.magic-button[aria-pressed=true] { filter:drop-shadow(0 0 5px #fff49b); }
.cafe-tools { position:absolute; left:38px; top:440px; display:flex; flex-direction:column; gap:8px; }
.cafe-tools > button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:78px; height:69px; padding:0 0 3px; border:0; background:var(--button-token) center 0 / 69px 59px no-repeat; filter:drop-shadow(0 3px 1px #82603725); }
.booster-icon { display:block; width:52px; height:52px; }.cafe-tools strong { font-size:10px; font-weight:500; margin-top:-4px; color:#7c613e; }.cafe-tools b { position:absolute; top:1px; right:4px; display:grid; place-items:center; min-width:19px; height:19px; border-radius:50%; border:1px solid #9a784c; background:#869467; color:#fff8d9; font:11px Georgia,serif; box-shadow:0 1px #6f7348; }.cafe-tools button[aria-pressed=true] { filter:drop-shadow(0 0 5px #fff9a8); transform:rotate(-8deg); }
.recipe-book { position:absolute; right:38px; top:483px; width:80px; height:100px; border:0; padding:0; background:none; transform:rotate(9deg); filter:drop-shadow(2px 5px 2px #7f602c33); }.recipe-book > .cafe-prop { position:absolute; top:0; width:80px; height:90px; }.recipe-book > span:last-child { position:absolute; bottom:-3px; left:0; right:0; font:12px 'Songti TC',Georgia,serif; color:#7c603d; }.recipe-book:hover { transform:rotate(3deg) translateY(-3px); }
.game-message { align-self:center; font:12px 'Songti TC',Georgia,serif; line-height:1.5; color:#846d48; text-align:center; }
.board.busy { pointer-events:none; }.ghost { position:fixed; z-index:10; pointer-events:none; }.particle { position:fixed; z-index:11; pointer-events:none; color:#d4a349; font-size:24px; text-shadow:0 0 4px #fff6bc; }.pop > .sprite { animation:merge-pop .3s ease; }
.brief-challenge { font-size:12px; color:#8c7851; text-align:center; }
@keyframes cat-breathe { 0%,100% { transform:rotate(-1deg) scaleY(1); } 50% { transform:rotate(1deg) scaleY(1.018); } }
@keyframes guest-arrive { from { opacity:0; transform:translateX(-25px) rotate(-5deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
@keyframes choose-bob { 50% { margin-top:-4px; } }
@keyframes magic-float { 50% { transform:translateY(-5px) rotate(3deg); } }
@keyframes magic-glow { 50% { transform:scale(1.1); opacity:.7; } }
@keyframes low-moves { 50% { opacity:.6; } }
.game-screen.is-learning .game-layout { min-height:940px; }
@media (max-width:879px), (orientation:landscape) and (max-height:550px) {
  .game-layout { max-width:550px; padding:0 9px 8px; grid-template-rows:84px 151px 51px minmax(294px,1fr) 191px 30px; gap:3px; min-height:824px; }
  .cafe-table { top:234px; }.cafe-window { top:45px; width:min(530px,110vw); height:190px; border-width:9px; }.cafe-awning { height:28px; background-size:96px 100%; background-image:repeating-linear-gradient(90deg,#8c9e7b 0 48px,#f5e6c6 48px 96px); }
  .play-header { padding:22px 4px 0; }.scene-button { width:44px; height:44px; }.shop-sign { width:180px; height:107px; top:-12px; padding-top:58px; }.shop-sign strong { font-size:15px; margin-top:2px; }#level-title { font-size:10px; }
  .orders { gap:0; padding:0 5px; }.guest-info { bottom:20px; }.guest-info .customer-portrait { width:104px; height:104px; }.order-request { width:59px; height:56px; top:0; right:0; padding:3px; }.order-tier { font-size:10px; }.customer-name { font-size:10px; bottom:-15px; }.counter-ledge { height:30px; }.counter-heading { left:9px; right:9px; bottom:-16px; font-size:10px; }.counter-heading small { font-size:9px; }.customer-thanks { font-size:11px; padding:8px 9px; }
  .table-objectives { align-items:center; padding-left:67px; }.moves-badge { left:5px; top:246px; width:68px; height:72px; padding-top:20px; z-index:4; }.moves-badge > span:not(.cafe-prop) { font-size:8px; letter-spacing:0; }.moves-badge strong { font-size:24px; }.shift-goals { gap:7px; padding-top:11px; }.challenge { font-size:10px; gap:4px; }.challenge b { font-size:10px; }.frost-objective { font-size:10px; }.frost-objective .sprite { width:23px; height:23px; }
  .board-zone { width:100%; }.board-caption { top:0; }#combo-label:not(:empty) { font-size:10px; padding:4px 9px; }
  .game-controls { display:grid; grid-template-columns:78px minmax(0,1fr) 53px; grid-template-rows:108px 80px; column-gap:2px; width:100%; justify-self:center; max-width:410px; }.prep-station { grid-column:1/-1; width:100%; }.queue { padding-bottom:10px; }.supply-choice { width:105px; height:90px; }.supply-choice > .sprite { width:71px; height:71px; }.supply-choice strong { font-size:10px; }.supply-choice > .supply-saucer { top:12px; height:67px; }.prep-hint { font-size:9px; }
  .magic-button { position:relative; top:auto; right:auto; width:78px; height:79px; padding-bottom:0; }.magic-cup { top:-9px; left:10px; width:60px; height:60px; }.magic-button strong { font-size:10px; }.magic-button small { font-size:9px; margin-top:1px; }.magic-aura { width:65px; height:65px; top:-13px; left:7px; }.magic-meter i { width:5px; height:7px; left:calc(12px + var(--bean) * 10px); top:44px; }
  .cafe-tools { position:static; flex-direction:row; gap:1px; justify-content:center; align-items:center; }.cafe-tools > button { width:60px; max-width:33.33%; height:67px; background-size:54px 51px; }.booster-icon { width:43px; height:43px; }.cafe-tools strong { font-size:9px; margin-top:0; }.cafe-tools b { right:0; top:2px; min-width:17px; height:17px; font-size:10px; }
  .recipe-book { position:relative; right:auto; top:auto; width:50px; height:69px; }.recipe-book > .cafe-prop { width:50px; height:57px; }.recipe-book > span:last-child { font-size:10px; bottom:1px; }
  .game-message { font-size:11px; padding:0 7px; }.game-screen.is-learning .game-layout { min-height:980px; }
}
@media (max-width:360px) {
  .game-layout { padding-left:0; padding-right:0; }.cafe-stage { width:100%; }.orders { padding:0 3px; }.guest-info .customer-portrait { width:94px; height:100px; }.order-request { width:54px; height:53px; right:0; }.play-header { padding-left:7px; padding-right:7px; }.shop-sign { width:169px; }.shop-sign strong { font-size:14px; }.challenge { font-size:9px; gap:3px; }.frost-objective { font-size:9px; }.shift-goals { gap:4px; }.game-controls { padding:0 3px; }.supply-choice { width:97px; }.cafe-tools > button { min-width:44px; }.moves-badge { left:0; }
}


.game-cheer { position:fixed; z-index:12; pointer-events:none; white-space:nowrap; color:#b27728; font:800 25px 'Songti TC',Georgia,serif; text-shadow:2px 2px #fff5c5,-2px -2px #fff5c5,2px -2px #fff5c5,-2px 2px #fff5c5,0 4px 0 #94714133; }
[data-tool=change] .booster-icon::after { content:'↔'; position:absolute; left:10px; top:22px; color:#6c824b; text-shadow:0 1px #ffefcb; font-size:20px; font-weight:bold; }
@media (orientation:landscape) and (max-height:550px) and (min-width:620px) {
  .game-layout { max-width:960px; padding:0 12px 5px; min-height:390px; grid-template-columns:minmax(270px,1fr) minmax(304px,1.15fr); grid-template-rows:43px 130px 35px 148px 17px; grid-template-areas:'header header' 'guests board' 'goals board' 'supplies board' 'message message'; gap:3px 16px; }
  .play-header { grid-area:header; padding:7px 0 0; }.shop-sign { left:23%; top:-30px; width:158px; height:86px; padding-top:48px; }.shop-sign strong { font-size:13px; }#pause-button { width:44px; height:44px; }
  .cafe-window { left:23%; top:48px; width:285px; height:140px; }.cafe-table { top:183px; }.cafe-stage { grid-area:guests; padding-top:7px; }.orders { padding:0; }.guest-info .customer-portrait { width:87px; height:87px; }.order-request { top:3px; width:48px; height:46px; }.guest-info { bottom:17px; }.customer-name { font-size:9px; bottom:-13px; }.counter-ledge { height:26px; }.counter-heading { bottom:-13px; font-size:9px; }.counter-heading small { font-size:8px; }
  .table-objectives { grid-area:goals; padding-left:61px; }.moves-badge { top:186px; left:10px; width:61px; height:65px; padding-top:17px; }.moves-badge strong { font-size:23px; }.shift-goals { padding-top:8px; gap:5px; }.challenge { font-size:9px; gap:3px; }.frost-objective { font-size:9px; }.frost-objective .sprite { width:20px; height:20px; }
  .board-zone { grid-area:board; width:100%; }.game-controls { grid-area:supplies; grid-template-rows:79px 68px; grid-template-columns:66px minmax(0,1fr) 48px; }.prep-station { width:100%; }.queue { padding-bottom:1px; }.supply-choice { width:86px; height:73px; }.supply-choice > .sprite { width:59px; height:59px; top:0; }.supply-choice > .supply-saucer { top:14px; height:51px; }.supply-choice strong { bottom:-1px; font-size:9px; }.supply-pointer { top:-11px; font-size:18px; }.supply-key { top:47px; left:14px; }.prep-hint { display:none; }.magic-button { width:65px; height:65px; }.magic-cup { width:51px; height:51px; left:8px; top:-12px; }.magic-meter i { left:calc(6px + var(--bean) * 10px); top:33px; }.magic-button strong { font-size:9px; }.magic-button small { font-size:8px; }.magic-aura { width:59px; height:59px; left:3px; }.cafe-tools > button { height:61px; }.cafe-tools strong { font-size:9px; }.recipe-book { width:43px; height:59px; }.recipe-book > .cafe-prop { width:43px; height:48px; }.recipe-book > span:last-child { font-size:9px; }
  .game-message { grid-area:message; font-size:10px; }.game-screen.is-learning .game-layout { min-height:510px; grid-template-rows:43px 150px 45px 190px 22px; }
}