:root {
  --bg: #fff4e0; --bg2: #ffe3b8; --card: #fffaf0; --ink: #3b2a20; --accent: #e5484d; --accent2: #46b07a;
  --line: #e8cfa6; --shelf: #c99a63;
}
body[data-theme="mint"]   { --bg: #e6f7ee; --bg2: #bfe9d1; --card: #f7fffb; --line: #a9d9bf; --shelf: #7fb99a; }
body[data-theme="sunset"] { --bg: #ffe6dc; --bg2: #ffc3a6; --card: #fff6f1; --line: #f0b79b; --shelf: #d98a6a; --accent: #d9452f; }
body[data-theme="night"]  { --bg: #232846; --bg2: #151a33; --card: #2f3560; --ink: #f4eefc; --line: #4a5191; --shelf: #3b4278; --accent: #ff7aa8; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--ink);
  background: url("../images/misc/bg_kitchen.png") center/cover fixed, linear-gradient(180deg, var(--bg), var(--bg2));
  background-blend-mode: normal; display: flex; flex-direction: column; min-height: 100%;
}
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px 14px; }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: #fff; border-color: transparent; font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }
.sprite { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.sprite img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; background: var(--card); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 5; }
#topbar .brand { font-weight: 800; flex: 1 1 auto; white-space: nowrap; }
#topbar .right { display: flex; gap: 6px; align-items: center; }
.pill { border-radius: 999px; padding: 5px 12px; font-size: .9rem; background: var(--card); border: 2px solid var(--line); }
#partnerPill.on { border-color: var(--accent2); background: #d7f3e1; color: #1b4d32; font-weight: 700; }
.chef { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: .85rem; background: var(--hat); box-shadow: 0 0 0 3px var(--apron); margin-right: 6px; vertical-align: middle; }

main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 12px; }
.screen { display: none; }
.screen.active { display: block; }

/* profile */
#screen-profile { text-align: center; padding-top: 4vh; }
.logo { height: 140px; margin: 0 auto 6px; font-size: 90px; }
.logo .sprite { height: 100%; }
h1 { margin: 6px 0; font-size: clamp(1.6rem, 6vw, 2.6rem); }
.sub { margin: 0 0 16px; opacity: .8; }
.profiles { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.profile { width: min(300px, 44vw); min-width: 150px; padding: 18px 10px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 1.1rem; }
.profile .sprite { width: 120px; height: 120px; font-size: 90px; }
.profile:hover { border-color: var(--accent); }
.tiny { font-size: .78rem; opacity: .7; margin-top: 18px; }

/* hub */
.hubcard { background: var(--card); border: 2px solid var(--line); border-radius: 22px; padding: 18px; margin-top: 12px; }
.hubcard h2 { margin: 0 0 8px; }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.big { padding: 14px; font-size: 1.05rem; border-radius: 16px; }
.weekly { background: var(--bg); border: 2px dashed var(--line); border-radius: 14px; padding: 10px 12px; font-size: .9rem; }
.bar { height: 14px; border-radius: 99px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a56, var(--accent)); transition: width .3s; }

/* game */
#g-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#g-head .pill b { font-variant-numeric: tabular-nums; }
#rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; min-height: 92px; }
.tk { flex: 0 0 auto; width: 118px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 6px; text-align: center; position: relative; }
.tk.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tk .sprite { width: 52px; height: 52px; font-size: 34px; }
.tk .sprite img, .ticket-card .cust img { object-fit: cover; object-position: top; border-radius: 12px; }
.tk .st { font-size: .72rem; opacity: .85; }
.pbar { height: 7px; border-radius: 9px; background: var(--bg2); overflow: hidden; margin-top: 4px; }
.pbar i { display: block; height: 100%; background: var(--accent2); }
.pbar i.warn { background: #f0a030; } .pbar i.bad { background: var(--accent); }
#kitchen { position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 10px; min-height: 360px; }
#decor { display: flex; gap: 10px; min-height: 40px; padding: 4px 8px 8px; border-bottom: 6px solid var(--shelf); margin-bottom: 10px; font-size: 30px; align-items: flex-end; }
#decor .sprite { height: 40px; min-width: 40px; }
.ticket-card { display: flex; gap: 12px; align-items: center; background: var(--bg); border: 2px dashed var(--line); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.ticket-card .cust { width: 110px; height: 128px; font-size: 64px; flex: 0 0 auto; transition: filter .3s; }
.ticket-card .cust.upset, .tk.upset .sprite { filter: drop-shadow(0 0 6px #e5484d) saturate(1.3); animation: shake .4s infinite; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.ticket-card .oi { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px 2px 5px; font-size: .82rem; }
.chip .sprite { width: 22px; height: 22px; font-size: 17px; }
.chip.done { background: #d7f3e1; border-color: var(--accent2); color: #1b4d32; }
.tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ing { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: .78rem; border-radius: 14px; }
.ing .sprite { width: 48px; height: 48px; font-size: 36px; }
.board { margin: 10px 0; min-height: 120px; border-radius: 16px; border: 2px solid var(--line); background: radial-gradient(circle at 50% 40%, #f7dba0, #e8bc72); padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; position: relative; }
.board .base { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 80px; opacity: .25; pointer-events: none; }
.board .base .sprite { width: 100%; height: 100%; }
.layer { width: 46px; height: 46px; font-size: 32px; background: rgba(255,255,255,.55); border-radius: 50%; position: relative; animation: pop .18s; }
.layer .sprite { width: 100%; height: 100%; }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
.hint { margin: 0 0 8px; font-size: .85rem; opacity: .8; text-align: center; }
.buildwrap { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.buildwrap .tray { flex: 1 1 300px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); touch-action: pan-y; }
.ing { user-select: none; -webkit-user-select: none; touch-action: none; }
.ing.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: #fff1f1; }
.ing small { font-size: .68rem; opacity: .8; }
.boardcol { flex: 0 1 360px; width: min(360px, 100%); }
.covbars { margin-top: 8px; font-size: .8rem; }
.covrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.covrow > span { flex: 0 0 auto; min-width: 104px; }
.covrow b { width: 38px; text-align: right; } .covrow b.ok { color: #1b7a4a; }
.bar2 { position: relative; flex: 1; height: 14px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.bar2 i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #e8b730; transition: width .08s; }
.bar2 i.ok { background: #8bc34a; } .bar2 i.great { background: var(--accent2); }
.bar2 u { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.45); }
.bar2 u.great { background: rgba(0,0,0,.2); }
.ing small.cnt.done { color: #1b7a4a; font-weight: 700; opacity: 1; }
.chip b { font-variant-numeric: tabular-nums; }
.board2 { width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; container-type: inline-size; touch-action: none; user-select: none; cursor: crosshair;
  background: radial-gradient(circle at 50% 45%, #f6d9a0, #e2b46c); border: 4px solid #c99a63; box-shadow: inset 0 0 20px rgba(120,70,20,.25); }
.board2 .disc, .board2 canvas, .board2 .items { position: absolute; inset: 0; width: 100%; height: 100%; }
.board2 .disc .sprite { width: 100%; height: 100%; }
.board2 canvas { pointer-events: none; }
.board2 .items { pointer-events: none; }
.piece { position: absolute; width: 15%; aspect-ratio: 1; font-size: 11cqw; pointer-events: auto; cursor: grab; display: flex; align-items: center; justify-content: center; }
.piece .sprite { width: 100%; height: 100%; }
.piece.lifted { opacity: .25; }
.ghost { position: fixed; z-index: 40; width: 56px; height: 56px; font-size: 44px; transform: translate(-50%, -50%); pointer-events: none; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.ghost.wide { width: 130px; height: 65px; }
.ghost .sprite { width: 100%; height: 100%; }
.slicer { position: fixed; inset: 0; z-index: 50; background: rgba(30,20,10,.6); display: flex; align-items: center; justify-content: center; padding: 10px; }
.scard { background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 14px; text-align: center; width: min(420px, 100%); }
.scard h3 { margin: 0 0 4px; } .scard p { margin: 0 0 8px; font-size: .85rem; opacity: .8; }
.sstage { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 0 auto; border-radius: 16px; container-type: inline-size; overflow: hidden;
  background: repeating-linear-gradient(90deg, #d9b27a 0 14px, #cfa56c 14px 28px); border: 3px solid #a87b46; touch-action: none; cursor: crosshair; }
.slayers, .sstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl { position: absolute; inset: 0; transition: transform .25s; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.sitem { position: absolute; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 30cqw; }
.sitem .sprite { width: 100%; height: 100%; } .sitem .sprite img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.sitem:has(img) { background: none !important; border-radius: 0 !important; overflow: visible; }
.scount { margin: 8px 0; font-weight: 700; }
.slicer.done .scount { color: #1b7a4a; }
.actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.panbox, .cutbox, .readybox { text-align: center; padding: 6px 0; }
.heat { position: relative; height: 34px; border-radius: 99px; border: 2px solid var(--line); background: var(--bg2); overflow: hidden; margin: 12px auto; max-width: 560px; }
.heat .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd27d, #ff8a3d, #6b2d12); width: 0; }
.heat .zone { position: absolute; top: 0; bottom: 0; background: rgba(70,176,122,.55); border-inline: 3px solid #1b7a4a; }
.heat .cursor { position: absolute; top: -2px; bottom: -2px; width: 6px; background: var(--ink); border-radius: 3px; left: 0; }
.heat .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: #1b7a4a; }
.pizza { font-size: 80px; height: 100px; } .pizza .sprite { height: 100%; width: 140px; }
.sizz { animation: sizz .25s infinite alternate; }
@keyframes sizz { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.tiny-btn { margin-top: 10px; font-size: .8rem; padding: 4px 10px; }

/* summary */
.stars { font-size: 1.6rem; letter-spacing: 2px; }
.stat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }

/* modal + toasts */
#modal { position: fixed; inset: 0; background: rgba(30,20,10,.55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 10px; z-index: 20; overflow: auto; }
#modalBody { background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 16px; width: min(640px, 100%); }
#modalBody h3 { margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs button.on { background: var(--accent); color: #fff; }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.row .sprite { width: 40px; height: 40px; font-size: 28px; flex: 0 0 auto; }
.row .grow { flex: 1; } .row small { opacity: .75; display: block; }
.row.locked { opacity: .55; }
input[type=text] { font: inherit; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
#toasts { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 99px; animation: pop .2s; box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 92vw; text-align: center; }
@media (max-width: 560px) { #topbar .brand span { display: none; } .ticket-card .cust { width: 76px; height: 90px; font-size: 46px; } }