/* Not My Event: the look of "The Gravy Disaster" (public/templates/the-gravy-disaster.html). Mobile first. One screen at a time (intro, game, board, seats, final), each a fixed full-window
   panel that scrolls by itself, so nothing here depends on page scroll. The game is the kitchen itself: a field 1 wide and 1.6 tall (the shape of the drawing in gravy-art.js) laid at the bottom of the
   screen, with five stations on it as real buttons (so the keyboard and a screen reader can play too). While the game runs only transform and opacity move (see the scroll-performance rule): the pie,
   the dog, the needle and the timer bars. Reduced motion (the phone's setting, or "Perfectly still" from the host) keeps the game playable and turns off every decorative loop. */
:root {
  --accent: #F4A53A; --deep: #B4541C; --ink: #2E170B; --cream: #FFF1D6; --paper: #FFF8E8; --wood: #6E3F22; --gold: #FFD36A; --ok: #3C8A2E; --bad: #B3261E; --muted: #7A5A3A; --wall: #2E150C;
  --display: 'Chewy', 'Arial Rounded MT Bold', system-ui, sans-serif; --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --top: calc(58px + env(safe-area-inset-top, 0px));
  /* the width of the kitchen field: the whole width of the screen on a phone, or as much as the height allows (the field is 5 wide and 8 tall) on a wide screen */
  --fw: min(100vw, calc(100vh / 1.6));
}
@supports (height: 100svh) { :root { --fw: min(100vw, calc(100svh / 1.6)); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--wall); color: var(--ink); font-family: var(--body); font-weight: 600; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; touch-action: manipulation; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 800; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--deep); }

#bg { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, #1B0C06, var(--wall) 40%, #3A1A0E); overflow: hidden; }

/* ---- the top bar: Event Details and Skip are always here ---- */
#b-details, #b-skip { position: fixed; z-index: 60; top: calc(8px + env(safe-area-inset-top, 0px)); min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid #fff3; background: rgba(30,12,6,.78); color: var(--cream); font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
#b-details { left: 10px; }
#b-skip { left: 130px; background: var(--accent); color: #2B1608; border-color: #fff6; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
@media (max-width: 380px) { #b-details { padding: 0 11px; font-size: 13px; } #b-skip { left: 114px; padding: 0 11px; font-size: 13px; } }
#b-details:hover { background: rgba(30,12,6,.92); }
#dots { position: fixed; z-index: 55; top: calc(54px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; display: flex; gap: 8px; pointer-events: none; }
#dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff5; }
#dots i.on { background: var(--gold); box-shadow: 0 0 0 2px #0004; }
body[data-scene-now="game"] #dots { display: none; }
body[data-scene-now="final"] #b-skip { display: none; }

/* ---- screens ---- */
.scene { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--top) + 14px) 14px calc(28px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; animation: sceneIn .4s ease both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card { width: min(100%, 560px); margin: 0 auto; padding: 22px 18px 20px; background: var(--paper); border: 3px solid var(--wood); border-radius: 22px; box-shadow: 0 8px 0 rgba(0,0,0,.32), 0 18px 36px rgba(0,0,0,.4); color: var(--ink); }
.card + .card { margin-top: 18px; }
.card h2 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(28px, 7vw, 38px); line-height: 1.05; font-weight: 400; color: var(--deep); }
.card h3 { margin: 18px 0 6px; font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--deep); }
.card p { margin: 0 0 10px; line-height: 1.45; }
.card .small, .small { font-size: 14px; color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,0) 55%), var(--accent); color: #2B1608; font-weight: 900; font-size: 17px; cursor: pointer; text-decoration: none; box-shadow: inset 0 -4px 6px rgba(0,0,0,.2), 0 5px 0 var(--deep), 0 8px 14px rgba(0,0,0,.3); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 5px rgba(0,0,0,.2), 0 2px 0 var(--deep); }
.btn.big { min-height: 62px; padding: 0 34px; font-size: 21px; }
.btn.ghost { background: rgba(255,248,230,.14); color: var(--cream); box-shadow: inset 0 0 0 2px #fff6, 0 5px 0 rgba(0,0,0,.35); }
.card .btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--wood), 0 5px 0 rgba(0,0,0,.18); }
.btn[disabled] { opacity: .55; cursor: default; }
.link { background: none; border: 0; padding: 8px 4px; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; width: min(100%, 560px); margin: 16px auto 0; }
.nav .link { color: var(--cream); text-shadow: 0 2px 0 #0007; }

/* ---- the opening: the house, the doorbell, the swoop into the kitchen, the recipe card ---- */
#s-intro { padding: 0; overflow: hidden; display: block; animation: none; }
.in-layer { position: absolute; inset: 0; overflow: hidden; }
.in-layer svg { position: absolute; left: 50%; bottom: 0; width: max(100%, calc(100vh / 1.6)); height: auto; min-height: 100%; translate: -50% 0; display: block; }
#in-house { z-index: 2; transform-origin: 50% 63%; animation: housePush 7s ease-out both; }
#in-kitchen { z-index: 1; opacity: 0; transform: scale(1.25); }
@keyframes housePush { from { transform: scale(1); } to { transform: scale(1.1); } }
#in-head { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--top) + 18px); padding: 0 14px; text-align: center; pointer-events: none; }
#in-head h1 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 13vw, 88px); line-height: .92; color: var(--cream); -webkit-text-stroke: 2px #3A1708; paint-order: stroke fill; text-shadow: 0 5px 0 #3A1708, 0 12px 24px rgba(0,0,0,.45); animation: rise .8s .2s both; pointer-events: auto; }
#in-note { margin: 0 auto; max-width: 20em; font-size: clamp(17px, 4.6vw, 24px); font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 #000b, 0 0 14px rgba(0,0,0,.6); animation: rise .8s .9s both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
#in-bell { position: absolute; z-index: 5; left: 50%; top: 52%; translate: -50% -50%; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--ink); font: 400 22px var(--display); box-shadow: 0 4px 0 rgba(0,0,0,.3); opacity: 0; pointer-events: none; }
.i-ring #in-bell { animation: bell .9s ease-out both; }
@keyframes bell { 0% { opacity: 0; transform: scale(.5) rotate(-8deg); } 20% { opacity: 1; transform: scale(1.1) rotate(6deg); } 40% { transform: scale(1) rotate(-6deg); } 70% { opacity: 1; transform: rotate(4deg); } 100% { opacity: 0; transform: translateY(-14px); } }
.i-swoop #in-house { animation: swoop 1.5s cubic-bezier(.6,.05,.7,.4) forwards; }
@keyframes swoop { from { transform: scale(1.1); opacity: 1; } 70% { opacity: 1; } to { transform: scale(7); opacity: 0; } }
.i-swoop #in-kitchen, .i-card #in-kitchen, .i-done #in-kitchen { animation: kitchenIn 1.5s ease-out forwards; }
@keyframes kitchenIn { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
.i-swoop #in-head, .i-card #in-head, .i-done #in-head { opacity: 0; transition: opacity .5s; }
.i-card #in-head, .i-done #in-head { display: none; }
#rc { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(92vw, 520px); translate: -50% -50%; perspective: 1200px; opacity: 0; pointer-events: none; }
.i-card #rc, .i-done #rc { opacity: 1; pointer-events: auto; }
#rc-in { position: relative; padding: 24px 20px 22px; border-radius: 18px; background: repeating-linear-gradient(#FFFDF4 0 31px, #E8D4A8 31px 32px), #FFFDF4; border: 3px solid var(--wood); box-shadow: 0 10px 0 rgba(0,0,0,.32), 0 24px 44px rgba(0,0,0,.5); text-align: center; color: var(--ink); transform-origin: 50% 50%; }
.i-card #rc-in { animation: flip 1.1s cubic-bezier(.3,.1,.2,1) both; }
@keyframes flip { 0% { transform: rotateY(90deg) scale(.8); opacity: 0; } 60% { transform: rotateY(-8deg) scale(1.03); opacity: 1; } 100% { transform: none; opacity: 1; } }
.rc-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#rc-big { margin: 0 0 10px; font: 400 clamp(30px, 8.4vw, 46px)/1 var(--display); color: var(--deep); text-transform: uppercase; }
#rc-in .sub { margin: 0 0 6px; font-weight: 800; }
#rc-in .when { margin: 2px 0 0; font-weight: 800; color: var(--muted); }
#rc-in .btns { justify-content: center; margin-top: 16px; }
#rc-in .btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--wood), 0 5px 0 rgba(0,0,0,.18); }
#b-skipanim { position: fixed; z-index: 61; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; color: #fff; text-shadow: 0 2px 0 #000a; }
.i-done #b-skipanim, .i-card #b-skipanim { display: none; }
.g-chimney circle { animation: puff 4s ease-in-out infinite alternate; }
@keyframes puff { from { transform: translateY(0); opacity: .75; } to { transform: translateY(-22px); opacity: .35; } }
.g-shape { animation: pace 3.2s ease-in-out infinite alternate; }
@keyframes pace { from { transform: translateX(-14px); } to { transform: translateX(46px); } }
.g-steam circle { animation: puff 3s ease-in-out infinite alternate; }

/* ---- the game ---- */
#s-game { padding: 0; overflow: hidden; animation: none; }
#g-pre, #g-end { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--top) + 14px) 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
.how { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.how li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
.how .pic { width: 64px; height: 56px; display: grid; place-items: center; }
.how .pic svg { max-width: 100%; max-height: 100%; }
.how b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--deep); }
.how span.d { font-size: 14px; color: var(--muted); display: block; }
.how span.k { font-size: 13px; color: #8A6A44; display: block; margin-top: 2px; }
.field-row { display: grid; gap: 6px; margin: 12px 0; }
.field-row label { font-weight: 800; font-size: 14px; color: var(--muted); }
input[type="text"], textarea, input[type="search"] { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid #D9C196; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
textarea { min-height: 84px; resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-weight: 700; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--deep); flex: none; }
.chip-note { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #EAD7B0; font-weight: 800; font-size: 13px; }
.chip-note.ok { background: #CFE8BF; color: #1F5A15; } .chip-note.bad { background: #F6C7C2; color: #7A1812; }
.status { text-align: center; margin: 6px 0 12px; }

#g-play { position: absolute; inset: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#g-play.live { touch-action: none; }          /* only while the minute runs, so the page can still be scrolled everywhere else */
.hud { position: absolute; z-index: 700; top: var(--top); left: 50%; translate: -50% 0; width: min(100%, max(var(--fw), 420px)); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 60px 4px 10px; color: var(--cream); }
.hud .box { display: grid; gap: 1px; padding: 3px 10px; border-radius: 12px; background: rgba(30,12,6,.82); border: 2px solid #fff3; min-height: 44px; align-content: center; text-align: center; }
.hud .big { font: 400 26px/1 var(--display); min-width: 2ch; }
.hud .lab { font-size: 10px; font-weight: 900; letter-spacing: .1em; opacity: .8; text-transform: uppercase; }
#h-time.low { color: #FFB29A; }
#h-combo { font: 400 15px/1 var(--display); color: var(--gold); min-width: 5.4em; }
.chaos { flex: 1; min-width: 56px; }
.chaos .bar { height: 10px; border-radius: 6px; background: #0006; overflow: hidden; }
.chaos .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #6EC24A, #F4C93A, #E0452D); transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s; }
#h-pause { min-width: 44px; min-height: 44px; border-radius: 14px; border: 2px solid #fff3; background: rgba(30,12,6,.82); color: var(--cream); font-weight: 900; cursor: pointer; }
#quote { position: absolute; z-index: 690; left: 50%; top: calc(var(--top) + 52px); translate: -50% 0; width: min(92%, 420px); padding: 7px 14px; border-radius: 14px; background: rgba(255,248,232,.96); color: var(--ink); text-align: center; font: 400 17px/1.15 var(--display); box-shadow: 0 4px 0 rgba(0,0,0,.3); pointer-events: none; animation: quoteIn .25s ease-out both; }
#quote.bad { background: #FBE2DD; color: #7A1812; }
@keyframes quoteIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* the kitchen: the field is exactly the picture, and every station is placed on it in percent (public/assets/gravy-art.js LAYOUT) */
#field { position: absolute; left: 50%; bottom: env(safe-area-inset-bottom, 0px); width: var(--fw); height: calc(var(--fw) * 1.6); margin-left: calc(var(--fw) / -2); }
#field:focus-visible { outline: none; box-shadow: none; }
#field-art { position: absolute; inset: 0; }
#field-art svg, #field-art .g-kitchen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#field::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16%; z-index: 1; background: linear-gradient(180deg, var(--wall), rgba(46,21,12,0)); pointer-events: none; }
#field::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(255,110,40,0) 40%, rgba(255,70,20,.38)); transition: opacity .4s; }
#field.hot::after { opacity: 1; }
.st { position: absolute; z-index: 5; padding: 0; margin: 0; border: 0; background: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.st > .g-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.st.alert { cursor: pointer; z-index: 8; }
.st.alert::after { content: ''; position: absolute; inset: -3% -3%; border: 4px solid var(--gold); border-radius: 22px; background: rgba(255,211,106,.12); animation: pulse .55s ease-in-out infinite alternate; pointer-events: none; }
@keyframes pulse { from { opacity: .45; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } }
.st .bang { position: absolute; left: 50%; top: -10px; translate: -50% -100%; width: 30px; height: 30px; border-radius: 50%; background: #E0452D; color: #fff; font: 400 22px/30px var(--display); text-align: center; display: none; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.st.alert .bang { display: block; animation: bounce .5s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.tbar { position: absolute; left: 6%; right: 6%; bottom: -8px; height: 7px; border-radius: 4px; background: #0007; overflow: hidden; display: none; }
.st.alert .tbar { display: block; }
.tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #F4C93A, #E0452D); transform-origin: 0 50%; }
.lane .tbar { left: 8%; right: 8%; bottom: 0; } .lane.alert .tbar { display: block; }
#lane-dog.alert::after { content: ''; position: absolute; inset: 0; border: 4px solid var(--gold); border-radius: 18px; background: rgba(255,211,106,.08); animation: pulse .55s ease-in-out infinite alternate; pointer-events: none; }
.ring { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 12px; border-radius: 6px; background: #0008; overflow: hidden; display: none; }
.st.alert .ring { display: block; }
.ring i { display: block; height: 100%; width: 100%; background: #7CCB62; transform-origin: 0 50%; transform: scaleX(0); }
#st-gravy .g-boat { transform-origin: 50% 90%; transition: transform .15s; }
#st-gravy.holding .g-boat { transform: rotate(0) !important; }
#st-gravy.alert .g-drip { animation: drip .7s ease-in infinite; }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
.g-smoke { opacity: 0; } #st-oven.alert .g-smoke { opacity: 1; animation: smoke 1.4s ease-in-out infinite alternate; } #st-oven.open .g-smoke { opacity: 0; animation: none; }
@keyframes smoke { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.g-fire { opacity: 0; } #st-oven.alert .g-fire { opacity: 1; animation: glow .5s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .35; } to { opacity: .9; } }
#st-oven .g-door { transform-origin: 50% 100%; transition: transform .25s; } #st-oven.open .g-door { transform: perspective(500px) rotateX(-52deg); }
#tray { position: absolute; z-index: 9; touch-action: none; cursor: grab; display: none; padding: 0; border: 0; background: none; }
#tray.on { display: block; animation: slideOut .3s ease-out both; } #tray.drag { cursor: grabbing; animation: none; z-index: 20; }
#tray svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes slideOut { from { transform: translateY(-14%) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
#st-rack.alert::after { border-style: dashed; }
.lane { position: absolute; z-index: 5; }
#lane-pie.alert::after { content: ''; position: absolute; inset: 0; border: 4px solid var(--gold); border-radius: 18px; background: rgba(255,211,106,.1); animation: pulse .55s ease-in-out infinite alternate; pointer-events: none; }
#pie-hit { position: absolute; inset: 0; border: 0; background: none; padding: 0; cursor: default; }
#lane-pie.alert #pie-hit { cursor: pointer; }
#pie { position: absolute; left: 0; top: -6%; width: 20%; height: 112%; will-change: transform; pointer-events: none; display: none; }
#pie.on { display: block; } #pie svg { width: 100%; height: 100%; display: block; overflow: visible; }
#pie.wob svg { animation: wob .3s ease-in-out infinite alternate; } @keyframes wob { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
#st-bowl { cursor: default; }
#st-bowl .g-bowl-in { transform-origin: 50% 90%; }
#meter { position: absolute; z-index: 6; left: 24%; right: 24%; top: 71.2%; height: 12px; border-radius: 8px; background: #0008; display: none; box-shadow: 0 0 0 2px #fff4; }
#meter.on { display: block; } #meter .zone { position: absolute; left: 36%; right: 36%; top: 0; bottom: 0; background: #7CCB62; opacity: .85; border-radius: 6px; }
#needle { position: absolute; left: 50%; top: -6px; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px #2E170B; will-change: transform; }
.nudge { position: absolute; z-index: 6; padding: 0; border: 0; background: none; cursor: default; } .nudge.on { cursor: pointer; } .nudge svg { width: 100%; height: auto; display: block; opacity: .5; } .nudge.on svg { opacity: 1; animation: pulse .55s ease-in-out infinite alternate; }
#dog { position: absolute; left: 0; width: 22%; will-change: transform; pointer-events: none; display: none; z-index: 6; } #dog.on { display: block; } #dog svg { width: 100%; height: auto; display: block; overflow: visible; }
#dog.on .g-tail { transform-origin: 14% 60%; animation: wag .25s ease-in-out infinite alternate; } @keyframes wag { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
#thought { position: absolute; left: 30%; top: -78%; width: 52%; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3); display: none; } #thought.on { display: block; } #thought svg { width: 100%; height: auto; display: block; }
.toy { position: absolute; z-index: 7; padding: 0; border: 0; background: none; cursor: default; } .toy.on { cursor: pointer; } .toy svg { width: 100%; height: 100%; display: block; overflow: visible; opacity: .6; } .toy.on svg { opacity: 1; animation: bounce .5s ease-in-out infinite alternate; }
.toy.on::after { content: ''; position: absolute; inset: -4% -2%; border: 4px solid var(--gold); border-radius: 18px; background: rgba(255,211,106,.1); pointer-events: none; }
#turkey { position: absolute; z-index: 5; pointer-events: none; } #turkey svg { width: 100%; height: auto; display: block; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.pop { position: absolute; z-index: 450; transform: translate(-50%, -50%); font: 400 26px var(--display); color: var(--gold); -webkit-text-stroke: 1.5px #3A1708; paint-order: stroke fill; text-shadow: 0 3px 0 #3A1708; white-space: nowrap; animation: popUp .95s ease-out forwards; }
.pop.bad { color: #FFB29A; font-size: 20px; } .pop.small { font-size: 18px; color: #fff; }
@keyframes popUp { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 20% { transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(1); } }
.splat { position: absolute; z-index: 300; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50% 42% 55% 45%; background: radial-gradient(circle at 40% 40%, var(--sp, #7A4A26), var(--sp2, #4A2113)); opacity: 0; animation: splat 1.8s ease-out forwards; }
@keyframes splat { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.3); } 18% { opacity: .95; transform: translate(-50%, -50%) scale(1.1); } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
.bit { position: absolute; z-index: 310; font-size: 22px; animation: bit 1s ease-out forwards; }
@keyframes bit { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.shake { animation: shake .3s ease-in-out; } @keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }

/* a family member speaks: a bubble at the top of the kitchen, over the window and the clock (where no station is) */
#bubble { position: absolute; z-index: 720; left: 50%; top: calc(var(--top) + 52px); translate: -50% 0; width: min(94%, 440px); padding: 10px 12px 12px; border-radius: 18px; background: #FFF8E8; border: 3px solid var(--wood); box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 16px 28px rgba(0,0,0,.4); animation: bubIn .25s ease-out both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
#bubble .who { display: grid; grid-template-columns: 44px 1fr 34px; gap: 10px; align-items: center; }
#bubble .g-face { width: 44px; height: 44px; display: block; }
#bubble b { font: 400 17px var(--display); color: var(--deep); display: block; }
#bubble .q { font-weight: 800; line-height: 1.2; font-size: 15px; }
#ib-x { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--wood); background: #fff; font-weight: 900; cursor: pointer; line-height: 1; }
#bubble .ans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#bubble .ans button { min-height: 48px; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--wood); background: #fff; font-weight: 900; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
#bubble .ans button:active { transform: translateY(2px); }
#bubble .react { margin: 6px 0 0; font-weight: 800; color: var(--deep); min-height: 1.3em; }
#bubble .ibar { height: 5px; margin-top: 8px; border-radius: 3px; background: #E8D4A8; overflow: hidden; } #bubble .ibar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; }

#g-count, #g-pause, #g-tut { position: absolute; inset: 0; z-index: 800; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(20,8,2,.62); color: var(--cream); text-align: center; padding: 20px; }
#g-count b { font: 400 min(34vw, 190px)/1 var(--display); color: var(--gold); -webkit-text-stroke: 3px #3A1708; paint-order: stroke fill; text-shadow: 0 8px 0 #3A1708; animation: cnt .9s ease-out both; }
@keyframes cnt { from { opacity: 0; transform: scale(2.2); } 35% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
#g-tut h3 { margin: 0; font: 400 30px var(--display); color: var(--gold); } #g-tut .tut-card { display: grid; justify-items: center; gap: 8px; max-width: 320px; } #g-tut .tut-card svg { width: 120px; height: 90px; } #g-tut .tut-card p { margin: 0; font-weight: 800; font-size: 18px; }
#g-tut .tut-hand { font-size: 40px; animation: tap .7s ease-in-out infinite alternate; } @keyframes tap { from { transform: translateY(-6px); } to { transform: translateY(6px) scale(.9); } }
.kbd-hint { position: absolute; left: 0; right: 0; top: calc(var(--top) + 46px); margin: 0; padding: 0 12px; text-align: center; font-size: 12px; color: #FFE9C8; text-shadow: 0 2px 0 #000a; pointer-events: none; opacity: .0; }

/* the finale: the oven dings, the kitchen doors swing open, the family comes in, the lights come up, the camera glides to the table */
#g-fin { position: absolute; inset: 0; z-index: 900; overflow: hidden; background: #000; }
#g-fin .f-table { position: absolute; inset: 0; opacity: 0; display: grid; align-items: end; } #g-fin .f-table svg { width: 100%; height: auto; display: block; }
#g-fin .f-family { position: absolute; inset: 0; opacity: 0; transform: translateY(30px); } #g-fin .f-family svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#g-fin .g-door-leaf { position: absolute; top: 0; width: 50%; height: 100%; display: block; z-index: 3; }
#g-fin .g-door-l { left: 0; transform-origin: 0 50%; } #g-fin .g-door-r { right: 0; transform-origin: 100% 50%; }
#g-fin .f-light { position: absolute; inset: 0; z-index: 4; background: #FFE2A0; opacity: 0; mix-blend-mode: soft-light; pointer-events: none; }
#g-fin .f-line { position: absolute; z-index: 5; left: 0; right: 0; bottom: 16%; text-align: center; font: 400 34px var(--display); color: var(--gold); text-shadow: 0 4px 0 #3A1708; opacity: 0; padding: 0 16px; }
#g-fin.go .g-door-l { animation: doorL 1.6s .5s ease-in forwards; } #g-fin.go .g-door-r { animation: doorR 1.6s .5s ease-in forwards; }
@keyframes doorL { to { transform: perspective(900px) rotateY(-100deg); } } @keyframes doorR { to { transform: perspective(900px) rotateY(100deg); } }
#g-fin.go .f-table { animation: tableIn 3.2s .4s ease-out forwards; } @keyframes tableIn { from { opacity: 0; transform: scale(1.15); } 30% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
#g-fin.go .f-family { animation: famIn 1.8s 1.4s ease-out forwards; } @keyframes famIn { to { opacity: 1; transform: none; } }
#g-fin.go .f-light { animation: lightUp 2.4s 1.2s ease-in forwards; } @keyframes lightUp { to { opacity: .7; } }
#g-fin.go .f-line { animation: lineIn .8s 2.2s ease-out forwards; } @keyframes lineIn { to { opacity: 1; } }
#g-fin .f-skip { position: absolute; z-index: 6; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.score-big { font: 400 min(26vw, 120px)/1 var(--display); text-align: center; color: var(--deep); margin: 4px 0; }
.ending { text-align: center; font: 400 clamp(26px, 7vw, 38px)/1.05 var(--display); color: var(--deep); margin: 0 0 4px; }
.announce { text-align: center; font: 400 22px/1.2 var(--display); color: var(--ink); margin: 0 0 12px; }
.tally { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.tally span { display: grid; justify-items: center; gap: 2px; padding: 6px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; font: 400 20px var(--display); } .tally small { font: 700 12px var(--body); color: var(--muted); }

/* ---- the board ---- */
.prize { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #FFE9A8, #FFD36A); box-shadow: inset 0 0 0 2px #D9A030; margin: 8px 0 12px; }
.prize b { font: 400 22px var(--display); color: var(--deep); display: block; }
.board { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
.board li.you { background: #FFF1C2; box-shadow: inset 0 0 0 2px var(--accent); }
.board .rk { font: 400 22px var(--display); color: var(--deep); text-align: center; } .board .nm { font-weight: 800; overflow-wrap: anywhere; } .board .sc { font: 400 22px var(--display); }
details.terms { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
details.terms summary { cursor: pointer; font-weight: 900; } details.terms li { margin: 6px 0; }
.review { margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: #FFF1C2; box-shadow: inset 0 0 0 2px var(--accent); }
.review h3 { margin: 0 0 6px; } .review ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.review li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fff; font-size: 14px; } .review li.dq { opacity: .6; text-decoration: line-through; }
.review li small { display: block; color: var(--muted); } .review button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--wood); background: #fff; font-weight: 800; cursor: pointer; }

/* ---- the seats ---- */
.stepper { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.stepper button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--wood); background: #fff; font: 400 26px var(--display); cursor: pointer; }
.stepper output { min-width: 2ch; text-align: center; font: 400 26px var(--display); }
.a-table { display: block; width: 100%; max-width: 520px; margin: 4px auto; overflow: visible; }
.a-chair { cursor: pointer; outline: none; }
.a-chair .a-seat { fill: #D49A55; stroke: #7A4A26; stroke-width: .7; } .a-chair .a-back { fill: #9A6234; stroke: #7A4A26; stroke-width: .5; }
.a-chair .a-num { font: 700 4.2px var(--body); fill: #2E170B; pointer-events: none; }
.a-chair.a-mine .a-seat { fill: #7CCB62; stroke: #2C6E1D; stroke-width: 1; } .a-chair.a-mine .a-back { fill: #4C9B3C; }
.a-chair.a-taken { cursor: not-allowed; } .a-chair.a-taken .a-seat, .a-chair.a-taken .a-back { fill: #A89F95; } .a-chair.a-taken .a-num { fill: #fff; }
.a-chair.a-kept { cursor: not-allowed; } .a-chair.a-kept .a-seat, .a-chair.a-kept .a-back { fill: #B58AC8; } .a-chair.a-kept .a-num { fill: #fff; }
.a-chair.a-off { opacity: .22; cursor: not-allowed; }
.a-chair:focus-visible .a-seat { stroke: #fff; stroke-width: 1.6; } .a-chair:hover:not(.a-taken):not(.a-off):not(.a-kept) .a-seat { filter: brightness(1.12); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; font-weight: 800; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.seatlist { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.seatlist li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
.seatlist li.mine { background: #E6F6DB; box-shadow: inset 0 0 0 2px #6BBF59; }
.seatlist button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--wood); background: #fff; font-weight: 800; cursor: pointer; } .seatlist button[disabled] { opacity: .5; cursor: default; }
#seat-now { min-height: 44px; font-weight: 800; text-align: center; margin: 6px 0; }

/* ---- details, reply, sheets ---- */
.det { margin: 8px 0 0; display: grid; gap: 8px; }
.det div { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
.det dt { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.det dd { margin: 2px 0 0; font-weight: 800; overflow-wrap: anywhere; } .det dd small { display: block; font-weight: 600; color: var(--muted); }
.maps { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .maps a { color: var(--deep); font-weight: 800; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--wood); background: #fff; font-weight: 900; cursor: pointer; }
.radios input { accent-color: var(--deep); width: 18px; height: 18px; } .radios label:has(input:checked) { background: var(--accent); }
.err { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #F6C7C2; color: #7A1812; font-weight: 800; }
.done { margin: 8px 0; padding: 14px; border-radius: 16px; background: #E6F6DB; box-shadow: inset 0 0 0 2px #6BBF59; } .done h3 { margin-top: 0; }
.sheet { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px; background: rgba(20,8,2,.74); }
.sheet-in { width: min(100%, 520px); max-height: calc(100svh - 32px); overflow-y: auto; padding: 18px 16px; border-radius: 20px; border: 3px solid var(--wood); background: var(--paper); color: var(--ink); }
.sheet-in h2 { margin: 0 0 8px; font: 400 30px var(--display); color: var(--deep); }
#dlg-dishes .sheet-in { --cream: #2E170B; --muted: #7A5A3A; --line: rgba(46,23,11,.28); --chip-bg: rgba(46,23,11,.06); --row-bg: rgba(46,23,11,.06); --f-bg: #fff; --f-ink: #2E170B; --accent: #F4A53A; --ok: #2C6E1D; --bad: #B3261E; --p1: #F4A53A; --p2: #E8B93C; --p4: #FFF1D6; }

/* ---- motion off: the phone's setting, or "Perfectly still" from the host. The game stays playable; every decorative loop stops. ---- */
html.rm .g-chimney circle, html.rm .g-shape, html.rm .g-steam circle, html.rm #in-house, html.rm .scene, html.rm .st.alert::after, html.rm .st .bang, html.rm .toy.on svg, html.rm .nudge.on svg, html.rm #dog.on .g-tail, html.rm #g-play *, html.rm .g-smoke, html.rm .g-fire { animation: none !important; }
html.rm .in-layer { transition: none; } html.rm #b-skipanim { display: none; }
html.rm #g-fin * { animation-duration: .01ms !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .g-chimney circle, .g-shape, .g-steam circle, #in-house, .scene, .st.alert::after, .st .bang, .toy.on svg, .nudge.on svg, #dog.on .g-tail, .g-smoke, .g-fire { animation: none !important; } #b-skipanim { display: none; } #g-fin * { animation-duration: .01ms !important; animation-delay: 0s !important; } }

/* ---- looks the host can pick ---- */
body[data-palette="cranberry"] { --accent: #E0566B; --deep: #8E1F35; --ink: #2F0F18; --cream: #FFE9EC; --paper: #FFF5F6; --gold: #FFC4CC; }
body[data-palette="sage"] { --accent: #A9BF63; --deep: #4F6B2A; --ink: #1F2A12; --cream: #F4F6DE; --paper: #FBFCEF; --gold: #E5EEA8; }
@media (min-width: 760px) { .scene { padding-left: 28px; padding-right: 28px; } .card { padding: 26px 26px 24px; } }