/* Not My Event: the look of "The Great Turkey Roundup" (public/templates/great-turkey-roundup.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 moves only transform and opacity (see the scroll-performance rule); the sprites are few (at most six, plus the ones
   leaving) and each is one element. Reduced motion (the phone's setting, or "Perfectly still" from the host) keeps the game playable and turns off every decorative loop. */
:root {
  --accent: #F2A33A; --deep: #C2551B; --ink: #3B2210; --cream: #FFF3D6; --barn: #9C2B22; --wood: #7A4A26; --gold: #FFD36A; --paper: #FFF8E6; --ok: #3C8A2E; --bad: #B3261E; --muted: #7A5A3A;
  --display: 'Chewy', 'Arial Rounded MT Bold', system-ui, sans-serif; --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --top: calc(54px + env(safe-area-inset-top, 0px));
  /* the width of the game's field: the whole width of the screen on a phone, or as much as the height allows (the field is 5 wide and 7 tall) on a wide screen */
  --fw: min(100vw, calc(100vh / 1.4));
}
@supports (height: 100svh) { :root { --fw: min(100vw, calc(100svh / 1.4)); } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2A1208; 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); }

/* ---- the picture behind every screen ---- */
#bg { position: fixed; inset: 0; z-index: 0; background: #4B2A66; overflow: hidden; }
/* the farm is laid over the screen at the field's size, at the bottom in the middle; its sky, hills and grass run on past the edges, so there is no frame anywhere */
#stage { position: absolute; left: 50%; bottom: 0; width: var(--fw); height: calc(var(--fw) * 1.4); margin-left: calc(var(--fw) / -2); }
#stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
#bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,18,8,.35), rgba(42,18,8,.55)); pointer-events: none; }
body[data-scene-now="intro"] #bg::after { background: linear-gradient(180deg, rgba(42,18,8,.12), rgba(42,18,8,.5)); }
body[data-scene-now="game"] #bg::after { background: none; }
.a-cloud { animation: drift 60s linear infinite alternate; }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(50px); } }

/* ---- the top bar: Event Details is always here ---- */
#b-details { position: fixed; z-index: 60; top: calc(8px + env(safe-area-inset-top, 0px)); left: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff3; background: rgba(42,18,8,.72); color: var(--cream); font-weight: 800; font-size: 15px; cursor: pointer; }
#b-details:hover { background: rgba(42,18,8,.88); }
#dots { position: fixed; z-index: 55; top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; display: flex; gap: 8px; pointer-events: none; }
#dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff5; }
#dots i.on { background: var(--gold); box-shadow: 0 0 0 2px #0004; }
@media (max-width: 420px) { #dots { display: none; } }

/* ---- screens ---- */
.scene { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain; padding: var(--top) 14px calc(28px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; animation: sceneIn .45s ease both; }
@keyframes sceneIn { from { opacity: 0; transform: translateY(14px); } 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,.35); 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 { font-size: 14px; color: var(--muted); }
.eyebrow { margin: 0 0 6px; font-weight: 900; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 #0006; }
.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; 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 intro ---- */
#s-intro { display: grid; align-content: center; justify-items: center; text-align: center; }
.intro-copy { position: relative; z-index: 3; max-width: 640px; padding-bottom: 8vh; }
.intro-copy h1 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 13vw, 92px); line-height: .92; color: #FFF3D6; -webkit-text-stroke: 2px #5A2410; paint-order: stroke fill; text-shadow: 0 5px 0 #5A2410, 0 12px 24px rgba(0,0,0,.4); }
.intro-copy .sub { margin: 0 auto 6px; max-width: 30em; font-size: clamp(17px, 4.4vw, 22px); font-weight: 800; color: #FFF3D6; text-shadow: 0 2px 0 #0008; }
.intro-copy .when { margin: 4px 0 0; font-weight: 800; color: var(--gold); text-shadow: 0 2px 0 #0008; }
.intro-copy .btns { justify-content: center; margin-top: 22px; }
.intro-copy > * { animation: rise .7s both; }
.intro-copy > .eyebrow { animation-delay: .2s; } .intro-copy > h1 { animation-delay: .35s; } .intro-copy > .sub { animation-delay: .8s; } .intro-copy > .when { animation-delay: 1s; } .intro-copy > .btns { animation-delay: 1.5s; } .intro-copy > .warn { animation-delay: 1.9s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.warn { margin: 18px 0 0; font-size: 14px; font-weight: 800; color: #FFE9C8; opacity: .9; text-shadow: 0 2px 0 #0008; }
#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; }
#runners { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.runner { position: absolute; left: 50%; top: 58%; width: 24vmin; max-width: 150px; min-width: 76px; aspect-ratio: 1; margin: -12vmin 0 0 -12vmin; opacity: 0; animation: scatter 2.3s cubic-bezier(.18,.7,.3,1) var(--d, 0s) forwards; }
@keyframes scatter { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 10% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
.i-done .runner, .i-done .intro-copy > *, .i-done #runners { animation: none !important; }
.i-done .runner { display: none; }
.i-done .intro-copy > * { opacity: 1; transform: none; }

/* ---- turkeys (the intro runners and the game's sprites share these) ---- */
.tk { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; transform-origin: 50% 56%; }
.tk-in, .runner > .tk-in { width: 100%; height: 100%; animation: tk-bob .3s ease-in-out infinite; }
.tk-svg, .tk-icon { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes tk-bob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-4%) rotate(1.6deg); } }
.tk-l1 { animation: tk-leg .3s steps(2, jump-none) infinite; } .tk-l2 { animation: tk-leg .3s steps(2, jump-none) infinite reverse; }
@keyframes tk-leg { from { transform: translateY(0); } to { transform: translateY(-3.5px); } }
.tk-dizzy { display: none; } .tk.stunned .tk-dizzy { display: inline; } .tk.stunned .tk-eyes { display: none; }
.tk.stunned .tk-in { animation: tk-wob .2s linear infinite; }
@keyframes tk-wob { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.tk[data-k="golden"] .tk-glow, .runner[data-k="golden"] .tk-glow { animation: glow .7s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }
.tk .bubble { position: absolute; left: 50%; top: -22%; translate: -50% 0; padding: 4px 10px; border-radius: 12px; background: #fff; color: var(--ink); font: 400 15px var(--display); white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: bub 1.1s ease-out forwards; }
@keyframes bub { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.tele { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle, #FFF6B8, rgba(255,210,74,.0) 70%); animation: tele .5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes tele { from { transform: scale(.7); opacity: .5; } to { transform: scale(1.25); opacity: 1; } }

/* ---- the game ---- */
#s-game { padding: 0; overflow: hidden; }
#g-pre, #g-end { position: absolute; inset: 0; overflow-y: auto; padding: var(--top) 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
.kinds { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.kinds li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #EAD7B0; }
.kinds .tk-icon { width: 52px; height: 52px; }
.kinds b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--deep); }
.kinds span.d { font-size: 14px; color: var(--muted); }
.kinds .pts { font-family: var(--display); font-size: 24px; color: var(--ink); }
.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; }
#g-play { position: absolute; inset: 0; touch-action: none; cursor: none; user-select: none; -webkit-user-select: none; }
#g-play button { cursor: pointer; }
.hud { position: absolute; z-index: 700; top: var(--top); left: 50%; translate: -50% 0; width: min(100%, max(var(--fw), 440px)); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 60px 8px 10px; color: var(--cream); }
.hud .box { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 14px; background: rgba(42,18,8,.78); border: 2px solid #fff3; min-height: 44px; }
.hud .big { font: 400 28px/1 var(--display); min-width: 2ch; text-align: center; }
.hud .lab { font-size: 11px; font-weight: 900; letter-spacing: .1em; opacity: .8; text-transform: uppercase; }
#h-time.low { color: #FFB29A; }
.catches { display: flex; gap: 6px; }
.catches span { display: grid; justify-items: center; font: 400 13px/1 var(--display); }
.catches .tk-icon { width: 26px; height: 26px; }
.a-barn-i { width: 34px; height: 32px; }
#h-pause { min-width: 44px; min-height: 44px; border-radius: 14px; border: 2px solid #fff3; background: rgba(42,18,8,.78); color: var(--cream); font-weight: 900; cursor: pointer; }
/* the field has no look of its own: no frame, no shadow, no background. It is only the place where taps and turkeys are measured, laid exactly over the dirt road in the picture. */
#field { position: absolute; left: 50%; bottom: 0; width: var(--fw); height: calc(var(--fw) * 1.4); margin-left: calc(var(--fw) / -2); touch-action: none; }
#field:focus-visible { outline: 3px dashed var(--gold); outline-offset: -6px; box-shadow: none; }
#sprites { position: absolute; inset: 0; pointer-events: none; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 400; }
.net { position: absolute; left: 0; top: 0; z-index: 500; pointer-events: none; will-change: transform; transform-origin: 50% 26%; }
.net-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 26%; }
.net.swing .net-svg { animation: swing .2s ease-out; }
@keyframes swing { 0% { transform: rotate(0) scale(1); } 35% { transform: rotate(-32deg) scale(1.16); } 100% { transform: rotate(0) scale(1); } }
.net.cool { opacity: .6; }
.pop { position: absolute; z-index: 450; transform: translate(-50%, -50%); font: 400 24px var(--display); color: var(--gold); -webkit-text-stroke: 1.5px #5A2410; paint-order: stroke fill; text-shadow: 0 3px 0 #5A2410; white-space: nowrap; animation: pop .85s ease-out forwards; }
.pop.miss { font-size: 17px; color: #fff; opacity: .9; } .pop.stun { color: #FFB29A; }
@keyframes pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 20% { transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.fth { position: absolute; z-index: 440; width: 11px; height: 20px; margin: -10px 0 0 -5px; animation: fth .8s ease-out forwards; }
.fth svg { display: block; width: 100%; height: 100%; }
@keyframes fth { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
#g-count, #g-pause { position: absolute; inset: 0; z-index: 600; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(20,8,2,.5); color: var(--cream); text-align: center; }
#g-count b { font: 400 min(34vw, 190px)/1 var(--display); color: var(--gold); -webkit-text-stroke: 3px #5A2410; paint-order: stroke fill; text-shadow: 0 8px 0 #5A2410; animation: cnt .9s ease-out both; }
@keyframes cnt { from { opacity: 0; transform: scale(2.2); } 35% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.kbd-hint { position: absolute; left: 0; right: 0; bottom: calc(2px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 12px; text-align: center; font-size: 12px; color: #FFE9C8; text-shadow: 0 2px 0 #000a; pointer-events: none; }
.score-big { font: 400 min(26vw, 120px)/1 var(--display); text-align: center; color: var(--deep); margin: 4px 0; }
.announce { text-align: center; font: 400 24px/1.15 var(--display); color: var(--ink); margin: 0 0 12px; }
.tally { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 12px; }
.tally span { display: grid; justify-items: center; gap: 2px; font: 400 18px var(--display); }
.tally .tk-icon { width: 44px; height: 44px; }
.status { text-align: center; margin: 6px 0 12px; }

/* ---- 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; }

/* ---- 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: #3B2210; 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-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) .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); }
.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: 900; display: grid; place-items: center; padding: 16px; background: rgba(20,8,2,.72); }
.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: #3B2210; --muted: #7A5A3A; --line: rgba(59,34,16,.28); --chip-bg: rgba(59,34,16,.06); --row-bg: rgba(59,34,16,.06); --f-bg: #fff; --f-ink: #3B2210; --accent: #F2A33A; --ok: #2C6E1D; --bad: #B3261E; --p1: #F2A33A; --p2: #E8B93C; --p4: #FFF3D6; }

/* ---- motion off: the phone's setting, or "Perfectly still" from the host. The game stays playable; every decorative loop stops. ---- */
html.rm .a-cloud, html.rm .tk-in, html.rm .tk-l1, html.rm .tk-l2, html.rm .tk .tk-glow, html.rm .runner, html.rm #runners, html.rm .tele, html.rm .scene, html.rm .intro-copy > * { animation: none !important; }
html.rm .runner { display: none; } html.rm .intro-copy > * { opacity: 1; transform: none; }
html.rm #b-skipanim { display: none; } html.rm .net.swing .net-svg { animation: none; transform: scale(1.1); } html.rm .pop, html.rm .fth { animation-duration: .01ms; }
@media (prefers-reduced-motion: reduce) { .a-cloud, .tk-in, .tk-l1, .tk-l2, .tk .tk-glow, .runner, .tele, .scene, .intro-copy > * { animation: none !important; } .runner { display: none; } .intro-copy > * { opacity: 1; transform: none; } #b-skipanim { display: none; } }

/* ---- looks the host can pick ---- */
body[data-palette="maple"] { --accent: #E5573A; --deep: #9F2C1E; --ink: #34150F; --cream: #FFEFE0; --paper: #FFF3E8; --barn: #7E1F1A; --gold: #FFC48A; }
body[data-palette="harvest"] { --accent: #B8C24A; --deep: #5F7A2F; --ink: #2A3314; --cream: #F8F2D4; --paper: #FBF6DE; --barn: #8A3224; }

@media (min-width: 760px) { .scene { padding-left: 28px; padding-right: 28px; } .card { padding: 26px 26px 24px; } }