/* tookcook — warm, round, toy-like */
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
:root {
  --ink: #3d2c3e;
  --coral: #ff7a59;
  --coral-d: #d9573a;
  --yellow: #ffd166;
  --yellow-d: #e0a92e;
  --green: #4cc35a;
  --green-d: #2f9a3c;
  --blue: #4aa3f0;
  --blue-d: #2c7cc4;
  --cream: #fff8ef;
  --shadow: 0 10px 24px rgba(61, 44, 62, .18);
  --font: 'Fredoka', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--ink); background: #ffe9d6; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: default; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- buttons ---------- */
.btn {
  font-size: 20px; font-weight: 600; padding: 12px 26px; border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 6px 0 #e3d6cf, 0 12px 20px rgba(61, 44, 62, .15); transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #e3d6cf; }
.btn-go { background: linear-gradient(#ff8d6e, var(--coral)); color: #fff; box-shadow: 0 6px 0 var(--coral-d), 0 12px 20px rgba(217, 87, 58, .35); text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.btn-go:active:not(:disabled) { box-shadow: 0 2px 0 var(--coral-d); }
.btn-xl { font-size: 28px; padding: 16px 42px; border-radius: 26px; }
.btn-sm { font-size: 16px; padding: 8px 14px; border-radius: 14px; }
.btn:disabled { opacity: .45; }
.chip { font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 0 #e3d6cf; }
.pill { background: rgba(255, 255, 255, .92); padding: 6px 14px; border-radius: 16px; font-weight: 600; font-size: 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.card { background: var(--cream); border-radius: 30px; padding: 26px 28px; box-shadow: 0 20px 50px rgba(61, 44, 62, .3), inset 0 -6px 0 rgba(0, 0, 0, .05); text-align: center; }

/* ---------- title ---------- */
#title { display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 18% 14%, #fff7c2 0 46px, #ffd84a 47px 64px, transparent 65px), linear-gradient(#7cc7ff, #bfe5ff 55%, #ffe9d6 55.2%, #ffd9bd); }
.title-sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse 70px 26px at 70% 18%, #fff 98%, transparent), radial-gradient(ellipse 50px 20px at 74% 15%, #fff 98%, transparent),
  radial-gradient(ellipse 60px 22px at 12% 46%, rgba(255,255,255,.9) 98%, transparent); animation: drift 30s linear infinite alternate; }
@keyframes drift { to { transform: translateX(40px); } }
.title-card { position: relative; text-align: center; padding: 20px; max-width: 760px; }
.logo { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 700; font-size: clamp(66px, 13vw, 128px); line-height: 1; letter-spacing: -1px; transform: rotate(-3deg); }
.logo .hat { font-size: .55em; margin-right: 8px; transform: translateY(-4px) rotate(-12deg); display: inline-block; animation: bob 2.4s ease-in-out infinite; }
.logo .l1 { color: var(--coral); text-shadow: 0 5px 0 #fff, 0 9px 0 var(--coral-d), 0 18px 24px rgba(0, 0, 0, .2); }
.logo .l2 { color: var(--yellow); text-shadow: 0 5px 0 #fff, 0 9px 0 var(--yellow-d), 0 18px 24px rgba(0, 0, 0, .2); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-6deg); } }
.tagline { font-size: 20px; font-weight: 500; margin: 18px 0 6px; color: #5a4350; }
#title-food { display: flex; justify-content: center; gap: 4px; margin: 10px 0 6px; flex-wrap: wrap; }
#title-food .tf { width: clamp(56px, 9vw, 86px); aspect-ratio: 1; animation: hop 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
#title-food svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .12)); }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px) rotate(-4deg); } }
.small-row .stat { font-size: 20px; font-weight: 600; background: rgba(255, 255, 255, .8); padding: 6px 14px; border-radius: 14px; }
.credit { margin-top: 18px; font-size: 16px; color: #7a6070; }

/* ---------- game layout ---------- */
#game { display: grid; grid-template-rows: 42% 58%; }
#scene { position: relative; overflow: hidden; }
#scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
#sun .rays { animation: spin 40s linear infinite; transform-origin: 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.cloud { animation: cloud 60s linear infinite; }
.cloud.c1 { transform: translate(520px, 70px); animation-duration: 70s; }
.cloud.c2 { transform: translate(860px, 120px); animation-duration: 90s; animation-delay: -30s; }
@keyframes cloud { from { transform: translate(1100px, 80px); } to { transform: translate(-200px, 80px); } }
#awning { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 6;
  background: repeating-linear-gradient(90deg, #ff6b5b 0 48px, #fff6ee 48px 96px); box-shadow: 0 6px 12px rgba(0, 0, 0, .12); }
#awning::after { content: ''; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px;
  background: radial-gradient(circle at 24px 0, #ff6b5b 23px, transparent 24px) 0 0 / 96px 16px repeat-x,
    radial-gradient(circle at 72px 0, #fff6ee 23px, transparent 24px) 0 0 / 96px 16px repeat-x; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .1)); }
#neon { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 5; font-weight: 700; font-size: 30px; color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 14px #ff4fa3, 0 0 28px #ff4fa3, 0 0 42px #ff4fa3; animation: neon 3s infinite; letter-spacing: 2px; }
@keyframes neon { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .5; } 50% { opacity: 1; } }

#hud { position: absolute; top: 46px; left: 12px; z-index: 7; display: flex; gap: 8px; align-items: center; }
.hud-btn { width: 44px; height: 44px; border-radius: 14px; background: #fff; font-size: 22px; box-shadow: 0 4px 0 #e3d6cf; }

/* Cecilia's "Pissa 7$29¢" board, as a chalkboard on an easel */
#menuboard { position: absolute; left: 2.5%; bottom: 17%; width: min(22%, 230px); z-index: 2; padding: 10px 12px 12px; border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, #3f6152, #2a4237); color: #f4f7f2; border: 7px solid #b9834e;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), 0 12px 20px rgba(0, 0, 0, .25); transform: rotate(-2deg); }
#menuboard::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -46px; height: 40px; border-left: 7px solid #a0703f; border-right: 7px solid #a0703f; z-index: -1; }
.mb-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed rgba(255, 255, 255, .4); padding-bottom: 4px; margin-bottom: 4px; }
.mb-special { font-size: clamp(18px, 2.4vw, 28px); font-weight: 700; color: #ffe7a3; }
.mb-price { font-size: clamp(16px, 2vw, 24px); font-weight: 700; color: #fff; }
.mb-row { display: flex; justify-content: space-between; font-size: clamp(11px, 1.25vw, 14px); padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.mb-row b { color: #ffe7a3; font-weight: 600; }

#queue { position: absolute; bottom: 17%; left: 27%; height: 36%; display: flex; z-index: 1; }
.qn { height: 100%; aspect-ratio: 200/260; margin-left: -22px; opacity: .85; filter: saturate(.8) brightness(.97); transform: scale(calc(1 - var(--i) * .1)); transform-origin: bottom; }
.qn svg { width: 100%; height: 100%; }

#cust-wrap { position: absolute; left: 50%; bottom: 9%; height: 68%; aspect-ratio: 200/260; transform: translateX(-50%); z-index: 3; }
#cust { width: 100%; height: 100%; }
#cust svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .15)); }
#cust-wrap.enter { animation: enter .85s cubic-bezier(.3, 1.3, .5, 1) both; }
#cust-wrap.enter #cust { animation: walk .85s ease-in-out; }
#cust-wrap.leave { animation: leave .8s ease-in both; }
#cust-wrap.shake { animation: shake .45s; }
@keyframes enter { from { transform: translateX(calc(-50% + 60vw)); } to { transform: translateX(-50%); } }
@keyframes leave { to { transform: translateX(calc(-50% - 70vw)); } }
@keyframes walk { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-14px); } }
@keyframes shake { 20%, 60% { transform: translateX(calc(-50% - 10px)); } 40%, 80% { transform: translateX(calc(-50% + 10px)); } }

#patience { margin: 8px auto 0; width: 86%; height: 10px; border-radius: 8px; background: rgba(255, 255, 255, .85); box-shadow: 0 2px 0 rgba(0, 0, 0, .1); overflow: hidden; }
#patience i { display: block; height: 100%; width: 100%; border-radius: 8px; transition: width .1s linear; }

/* the thought bubble from the sheet */
#bubble { position: absolute; left: 84%; top: -2%; z-index: 4; min-width: 150px; padding: 14px 18px; border-radius: 50% / 46%;
  background: #fff; box-shadow: 0 10px 24px rgba(61, 44, 62, .2); }
#bubble::before, #bubble::after { content: ''; position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(61, 44, 62, .15); }
#bubble::before { width: 22px; height: 22px; left: 2px; bottom: -14px; }
#bubble::after { width: 12px; height: 12px; left: -14px; bottom: -30px; }
#bubble.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 0 100%; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
#bubble-items { display: flex; gap: 6px; align-items: flex-end; }
.b-item { position: relative; width: clamp(76px, 10.5vw, 128px); }
#bubble.multi .b-item { width: clamp(64px, 8.6vw, 106px); }
.b-item svg { width: 100%; height: auto; display: block; }
.b-item.done { opacity: .45; }
.b-size { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 var(--blue-d); }
.b-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--green); text-shadow: 0 3px 0 #fff, 0 0 10px #fff; }

#say { position: absolute; left: 50%; top: 10%; transform: translateX(-130%); z-index: 6; background: #fff; padding: 10px 16px; border-radius: 18px; font-weight: 600; font-size: 18px; box-shadow: var(--shadow); white-space: nowrap; }
#say::after { content: ''; position: absolute; right: -10px; top: 50%; border: 10px solid transparent; border-left-color: #fff; transform: translateY(-50%); }
#say.pop { animation: pop .3s ease-out; transform-origin: 100% 50%; }

/* the $10 / ¢70 money box */
#wallet { position: absolute; right: 2.5%; bottom: 18%; z-index: 2; width: min(17%, 170px); padding: 10px 12px 12px; border-radius: 18px;
  background: linear-gradient(#ffb37a, #f08a4b); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 12px 20px rgba(0, 0, 0, .2); color: #fff; }
.w-label { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-align: center; opacity: .9; }
.w-row { display: flex; align-items: baseline; justify-content: space-between; background: #2b2a3a; border-radius: 10px; padding: 2px 10px; margin-top: 6px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.w-row b { font-size: clamp(22px, 3vw, 34px); font-weight: 700; color: #7dffa0; text-shadow: 0 0 8px rgba(125, 255, 160, .6); }
.w-row.cents b { font-size: clamp(18px, 2.4vw, 26px); }
.w-sym { font-size: 18px; font-weight: 700; color: #ffe7a3; }
#wallet.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.12) rotate(2deg); } }

#counter-top { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 4;
  background: linear-gradient(#fff 0 5px, #ffc59a 5px 9px, #ff9f63 9px, #f08a4b); box-shadow: 0 -4px 10px rgba(0, 0, 0, .12); }
#counter-top::after { content: ''; position: absolute; inset: 9px 0 0; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(0, 0, 0, .06) 120px 124px); }

.receipt { position: absolute; left: 50%; top: 30%; z-index: 8; transform: translateX(-50%); background: #fff; border-radius: 16px; padding: 8px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; animation: rise 2.2s ease-out forwards; }
.receipt b { font-size: 30px; color: var(--green-d); }
.receipt span { font-size: 16px; color: #b07a1a; font-weight: 600; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px); } }

/* ---------- kitchen ---------- */
#kitchen { position: relative; display: grid; gap: 10px; padding: 12px; min-height: 0;
  grid-template-columns: minmax(220px, 25%) 1fr minmax(200px, 23%); grid-template-rows: 1fr auto;
  grid-template-areas: "shelf station menu" "actions station menu";
  background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, #e9e2dc 2px, transparent 2px) 0 0 / 46px 46px, linear-gradient(#e9e2dc 2px, transparent 2px) 0 0 / 46px 46px, #fbf7f3; }
#kitchen::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(#c9ced6, #eef1f5); box-shadow: 0 3px 6px rgba(0, 0, 0, .12); }
.panel { background: rgba(255, 255, 255, .92); border-radius: 24px; box-shadow: var(--shadow); padding: 10px; min-height: 0; display: flex; flex-direction: column; }
.panel-title { font-weight: 700; font-size: 16px; text-align: center; color: #8a6a7a; letter-spacing: .5px; margin-bottom: 6px; text-transform: uppercase; }
#shelf { grid-area: shelf; }
#ings { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; padding: 2px; }
.ing { position: relative; aspect-ratio: 1 / 1.08; border-radius: 18px; background: linear-gradient(#fff, #f6f0f4); box-shadow: 0 4px 0 #e6dbe2; padding: 6px 4px 18px; display: flex; align-items: center; justify-content: center; transition: transform .08s; }
.ing svg { width: 82%; height: 82%; }
.ing small { position: absolute; bottom: 3px; left: 2px; right: 2px; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing:active { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 #e6dbe2; }
.ing.on { background: linear-gradient(#fffbe6, #fff0c2); box-shadow: 0 4px 0 #f0d58a, inset 0 0 0 3px var(--yellow); }
.ing.off { opacity: .35; }
.ing i { position: absolute; top: 4px; right: 4px; font-style: normal; font-weight: 700; font-size: 13px; background: var(--green); color: #fff; border-radius: 10px; padding: 1px 6px; }
.shelf-empty { grid-column: 1 / -1; font-size: 46px; text-align: center; padding-top: 6px; animation: nudge 1.2s ease-in-out infinite; }
.ing.ghost { opacity: .28; filter: grayscale(.4); pointer-events: none; box-shadow: none; }
@keyframes nudge { 50% { transform: translateX(14px); } }

#station { grid-area: station; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#ticket { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow); }
#t-dish { width: 52px; height: 52px; flex: none; border-radius: 14px; background: #fff3e6; display: flex; align-items: center; justify-content: center; }
#t-dish svg { width: 90%; height: 90%; }
.size { flex: 1; height: 52px; font-size: 26px; font-weight: 700; border-radius: 14px; background: #f3eef2; color: #8a6a7a; box-shadow: 0 4px 0 #e2d8df; }
.size.on { background: linear-gradient(#6cb8ff, var(--blue)); color: #fff; box-shadow: 0 4px 0 var(--blue-d); }
.size:disabled { opacity: .35; }
#board { position: relative; flex: 1; min-height: 0; border-radius: 32px; overflow: hidden;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, .25), transparent 60%),
    repeating-linear-gradient(3deg, rgba(120, 70, 30, .07) 0 3px, transparent 3px 22px), linear-gradient(#e7b277, #cf8f50);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .35), var(--shadow); display: flex; align-items: center; justify-content: center; }
#board.bounce { animation: bump .35s; }
#board-dish { width: 92%; height: 92%; display: flex; align-items: center; justify-content: center; }
#board-dish svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .12)); }
#board-dish.toss { animation: toss .28s ease-in forwards; }
@keyframes toss { to { transform: translate(40%, 60%) rotate(40deg) scale(.3); opacity: 0; } }
#board-empty { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, .95); font-weight: 600; font-size: 18px; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); pointer-events: none; }
.be-plate { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e2e8ef); box-shadow: 0 8px 14px rgba(0, 0, 0, .15), inset 0 0 0 12px rgba(255, 255, 255, .6); }
#trash { position: absolute; right: 12px; bottom: 12px; width: 54px; height: 54px; border-radius: 18px; font-size: 26px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }

/* the oven / grill / fryer */
#oven { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 8px; padding: 12px;
  background: linear-gradient(#4a4458, #2c2838); border-radius: 32px; }
#oven.verb-grill { background: linear-gradient(#55434a, #2d2226); }
#oven.verb-fry { background: linear-gradient(#5a5a6a, #333342); }
#oven.verb-pop { background: linear-gradient(#c23a3a, #7a1f2a); }
.oven-window { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #ffb347 0%, #e8622a 45%, #5a1f12 100%);
  box-shadow: inset 0 0 0 6px #1d1a26, inset 0 0 30px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; }
#oven-dish { width: 86%; height: 86%; display: flex; align-items: center; justify-content: center; }
#oven-dish svg { height: 100%; width: auto; max-width: 100%; }
.oven-window .glow { position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(255, 140, 40, .45)); animation: flicker .25s infinite alternate; pointer-events: none; }
@keyframes flicker { to { opacity: .6; } }
#oven[data-state="perfect"] .oven-window { box-shadow: inset 0 0 0 6px #5fd068, inset 0 0 30px rgba(0, 0, 0, .4); }
#oven[data-state="burnt"] .oven-window { box-shadow: inset 0 0 0 6px #e04848, inset 0 0 30px rgba(0, 0, 0, .6); }
#gauge { width: clamp(90px, 12vw, 140px); align-self: center; }
#oven-label { grid-column: 1 / -1; color: #fff; text-align: center; font-weight: 600; font-size: 17px; }

#menu { grid-area: menu; }
#dishes { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start; padding: 4px; }
.dish-btn { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #f6eef2); box-shadow: 0 5px 0 #e6dbe2, 0 10px 16px rgba(61, 44, 62, .1); padding: 10% 10% 22%; transition: transform .1s; }
.dish-btn svg { width: 100%; height: 100%; }
.dish-btn small { position: absolute; bottom: 9%; left: 0; right: 0; font-size: 12.5px; font-weight: 600; text-align: center; }
.dish-btn:active { transform: scale(.94); }
.dish-btn.on { background: radial-gradient(circle at 40% 30%, #fffbe6, #ffe9a8); box-shadow: 0 5px 0 #f0c45a, inset 0 0 0 4px var(--yellow); }

/* Serving | Lunch change | COOK */
#actions { grid-area: actions; display: grid; grid-template-columns: 1.15fr .9fr 1.15fr; gap: 8px; }
.act { height: 76px; border-radius: 22px; font-size: 24px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: transform .08s; position: relative; }
.act:active { transform: translateY(4px); }
.act-serve { background: linear-gradient(#6fdc7a, var(--green)); box-shadow: 0 6px 0 var(--green-d), 0 12px 18px rgba(47, 154, 60, .3); }
.act-period { background: linear-gradient(#7cc0ff, var(--blue)); box-shadow: 0 6px 0 var(--blue-d); font-size: 19px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.act-period small { font-size: 13px; font-weight: 500; opacity: .9; margin-top: 4px; text-decoration: underline; }
.act-cook { background: linear-gradient(#ff9a6a, var(--coral)); box-shadow: 0 6px 0 var(--coral-d), 0 12px 18px rgba(217, 87, 58, .35); font-size: 28px; letter-spacing: 1px; }
.act-cook.dim { filter: saturate(.5); opacity: .75; }
.act-cook.stopping { background: linear-gradient(#ff6b6b, #e03b3b); animation: throb .5s infinite; }
@keyframes throb { 50% { transform: scale(1.06); } }

/* the glowing "do this next" hint */
.hint { animation: hint 1.1s ease-in-out infinite !important; z-index: 2; }
.hint::after { content: '👆'; position: absolute; right: -6px; bottom: -14px; font-size: 30px; animation: tapme 1.1s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); text-shadow: none; }
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .0), 0 4px 0 #e6dbe2; } 50% { box-shadow: 0 0 0 7px rgba(255, 209, 102, .9), 0 4px 0 #e6dbe2; } }
@keyframes tapme { 50% { transform: translate(-4px, -8px); } }

/* ---------- open card / modal / toast / fx ---------- */
#open-card { position: absolute; inset: 0; z-index: 20; background: rgba(61, 44, 62, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
#open-card .card { max-width: 460px; animation: pop .4s cubic-bezier(.3, 1.5, .5, 1); }
.oc-day { font-size: 40px; font-weight: 700; color: var(--coral); }
.oc-period { font-size: 24px; font-weight: 600; margin-top: 4px; }
.oc-dishes { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.oc-dishes span { width: 64px; height: 64px; }
.oc-dishes svg { width: 100%; height: 100%; }
#oc-goal { font-size: 18px; color: #6a5260; margin: 12px 0 18px; }

#modal { position: fixed; inset: 0; z-index: 40; background: rgba(61, 44, 62, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#modal-card { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; animation: pop .35s cubic-bezier(.3, 1.4, .5, 1); }
#modal-card h2 { margin: 0 0 8px; font-size: 30px; }
.stars { font-size: 60px; letter-spacing: 6px; margin: 4px 0 10px; }
.stars span { color: #e8dde4; display: inline-block; }
.stars span.got { color: #ffc23a; text-shadow: 0 4px 0 #e09a12; animation: starin .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(.3s + var(--i) * .25s); }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } }
.sum-row { display: flex; justify-content: space-between; font-size: 19px; padding: 6px 4px; border-bottom: 2px solid #f1e6ea; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; font-weight: 700; margin-top: 10px; padding: 10px 14px; background: #eafbe9; border-radius: 16px; }
.sum-total b { font-size: 32px; color: var(--green-d); }
.have { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.ups { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.up-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 #efe4ea; }
.up-icon { font-size: 34px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #fff3e6; border-radius: 14px; }
.up-txt { flex: 1; display: flex; flex-direction: column; }
.up-txt b { font-size: 18px; }
.up-txt small { font-size: 14px; color: #7a6070; }
.dots { display: flex; gap: 4px; margin-top: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #eadde4; }
.dots i.on { background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-d); }

#toast { position: fixed; left: 50%; top: 42%; z-index: 50; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; transition: all .2s;
  background: rgba(61, 44, 62, .92); color: #fff; font-weight: 600; font-size: 20px; padding: 12px 22px; border-radius: 20px; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.flyer { position: fixed; display: flex; align-items: center; justify-content: center; }
.flyer svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.coin { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc93a 55%, #e09a12); color: #b86f00; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.spark { position: fixed; font-size: 22px; }

/* ---------- phones / portrait ---------- */
@media (max-aspect-ratio: 1/1) {
  #game { grid-template-rows: 34% 66%; }
  #kitchen { grid-template-columns: 1fr 1fr; grid-template-rows: 40% 1fr auto; grid-template-areas: "station station" "shelf menu" "actions actions"; padding: 8px; gap: 8px; }
  #menuboard { width: 27%; bottom: 20%; padding: 5px 7px; border-width: 5px; }
  #menuboard::after { display: none; }
  .mb-grid { display: none; }
  .mb-top { border: 0; margin: 0; padding: 0; flex-direction: column; align-items: center; }
  #wallet { width: 25%; padding: 5px 7px 7px; bottom: 20%; }
  .w-label { font-size: 10px; }
  #queue { display: none; }
  #cust-wrap { height: 62%; left: 40%; bottom: 11%; }
  #bubble { left: 74%; top: -8%; padding: 8px 10px; min-width: 0; }
  .b-item, #bubble.multi .b-item { width: 50px; }
  .b-size { width: 20px; height: 20px; font-size: 12px; }
  .b-check { font-size: 30px; }
  #open-card .card { padding: 20px 16px; }
  .oc-dishes { flex-wrap: wrap; }
  .oc-dishes span { width: 46px; height: 46px; }
  .oc-day { font-size: 32px; }
  #ings { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ing small { font-size: 9.5px; }
  #dishes { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .dish-btn small { font-size: 9.5px; }
  .panel { padding: 6px; border-radius: 18px; }
  .panel-title { font-size: 12px; margin-bottom: 4px; }
  .act { height: 60px; font-size: 20px; }
  .act-cook { font-size: 22px; }
  .act-period { font-size: 16px; }
  #ticket { padding: 5px; }
  #t-dish { width: 40px; height: 40px; }
  .size { height: 40px; font-size: 20px; }
  #hud { top: 40px; left: 6px; }
  .pill { font-size: 13px; padding: 4px 10px; }
  #say { font-size: 15px; top: 4%; transform: translateX(-115%); }
  #oven { padding: 8px; }
}