/* Local palette: one-off colors for this page, named by role. Global tokens live in style.css. */
:root {
  --dl-bar-bg: #8fe07a;
  --dl-bar-bg-2: #b6ec8a;
  --dl-dc-stamp-ink: #c0162e;
  --dl-is-ready-ink: #1d7a34;
  --dl-fj-fill: #f7e2a8;
  --dl-fj-fill-2: #e9a93a;
  --dl-fj-fill-3: #b86a2a;
  --dl-fj-fill-4: #4a2c1a;
  --dl-fj-meter-bg: #fff4d6;
  --dl-pond-bg: #aeeaff;
  --dl-pond-bg-2: #3fc8e8;
  --dl-dive-bg: #9fe8ff;
  --dl-dive-bg-2: #4fb8e6;
  --dl-dive-bg-3: #2070b0;
  --dl-dive-bg-4: #13285a;
  --dl-sift-gold: #fff7d1;
  --dl-sift-gold-rule: #e0b400;
  --dl-sift-miss: #e6def8;
  --dl-sift-miss-line: #b8acdf;
  --dl-sift-stamp: #c0162e;
  --dl-jp-coins-bg: #d99a00;
}
/* Dailies, random-event results and quests. Loaded via page({head}) on those pages only. */
.daily-head .keeper svg { flex: none; }
.daily-result { scroll-margin-top: 12px; } /* a play redirects to #result */
.daily-result :where(form, .prize-row) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } /* double-taps on a board don't select text */
.daily-result :where(input, textarea) { user-select: text; -webkit-user-select: text; }
.daily-result h2 { margin-top: 0; }
.prize-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.prize-row > p, .prize-row > div:last-child { flex: 1 1 220px; font-weight: 700; }
.prize-tile { display: grid; justify-items: center; gap: 4px; padding: 10px 14px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm); font-weight: 800; text-align: center; }
.coin-pile { font: 700 1.6rem var(--display); background: var(--hi); min-width: 120px; }
.pop { animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.result-line { font-weight: 800; font-size: 1.1rem; text-align: center; }

/* Noticeboard (/daily) */
.bar { height: 22px; background: var(--card); border: var(--line) solid var(--ink); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; min-width: 0; background: repeating-linear-gradient(135deg, var(--dl-bar-bg) 0 12px, var(--dl-bar-bg-2) 12px 24px); }
.board-group { margin-top: 24px; }
.board-group > h2 { margin: 0 0 4px; }
.board-group > p { margin: 0 0 10px; }
.board-group > h2 + .daily-grid { margin-top: 10px; }
.board-rest-intro { margin: 32px auto 0; text-align: center; font-family: var(--display); }
.board-rest { margin-top: 24px; }
.board-rest-intro + .board-rest { margin-top: 10px; }
.board-rest-caret { display: inline-block; transition: transform .15s; }
.board-rest-load { margin: 16px 0 0; text-align: center; } /* the fold's cards on their way (shell.js), or the no-JS link to them */
.board-rest[open] .board-rest-caret { transform: rotate(180deg); }
.board-rest > summary { display: block; cursor: pointer; text-align: center; list-style: none; }
.board-rest > summary::-webkit-details-marker { display: none; }

.daily-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); }
.dc-art { position: relative; border-bottom: var(--line) solid var(--ink); }
.dc-art .scene > :is(svg, img) { aspect-ratio: 2.6; min-height: 0; }
.daily-card .scene * { animation: none !important; } /* 20 animated banners on one page is a lot of motion; the place pages keep theirs */
.dc-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 2px 16px;
  font: 700 1.7rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--dl-dc-stamp-ink);
  border: 4px solid var(--dl-dc-stamp-ink); border-radius: 10px; background: rgb(255 255 255 / .8); }
.dc-body { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px 14px; }
.dc-body > svg { flex: none; width: 56px; height: 56px; margin: -32px 0 0 -4px; position: relative; } /* keeper peeks up over the scene edge */
.daily-card h3 { font-size: 1.1rem; margin: 0 0 2px; }
.daily-card p { margin: 0 0 6px; font-size: var(--fs-sm); }
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--hi); font: 600 var(--fs-xs)/1.6 var(--display); }
.chip-land { background: var(--tint); }
.dc-state { font-family: var(--display); }
.is-ready .dc-state b { color: var(--dl-is-ready-ink); }
.is-wait .dc-state { color: var(--muted); }
.dc-note { color: var(--muted); font-weight: 700; margin: 0; }
.daily-card.is-done { background: var(--tint); }
.daily-card.is-done .scene > :is(svg, img), .daily-card.is-done .dc-body > svg { filter: saturate(.35); opacity: .7; }

@media (max-width: 560px) {
  .dc-art .scene > :is(svg, img) { aspect-ratio: 3.4; }
}

/* Kettle pet list */
.soup-pets { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.soup-pets li { display: grid; justify-items: center; padding: 6px 12px; border: 2px solid var(--ink); border-radius: var(--r-tile); background: var(--tint); }
.soup-pets span { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }

/* Flapjack griddle: the needle crosses the meter while the batter browns; flip in the golden band */
.fj { display: grid; justify-items: center; gap: 8px; }
.fj .griddle-svg { width: min(260px, 100%); height: auto; }
.fj[data-stage="pale"] .fj-cake { fill: var(--dl-fj-fill); }
.fj[data-stage="golden"] .fj-cake { fill: var(--dl-fj-fill-2); }
.fj[data-stage="crispy"] .fj-cake { fill: var(--dl-fj-fill-3); }
.fj[data-stage="burnt"] .fj-cake { fill: var(--dl-fj-fill-4); }
.fj-meter { position: relative; width: min(320px, 100%); height: 22px; border: var(--line) solid var(--ink); border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, var(--dl-fj-meter-bg), var(--dl-fj-fill) 40%, var(--dl-fj-fill-3) 80%, var(--dl-fj-fill-4)); }
.fj-gold { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); background: var(--sun); box-shadow: 0 0 0 2px var(--ink); }
.fj-needle { position: absolute; top: -2px; bottom: -2px; left: 0; width: 4px; margin-left: -2px; background: var(--pink); }
.fj-stage { margin: 0; font: 700 1.1rem var(--display); }
.fj ~ .btn-row, .mould-pick ~ .btn-row { justify-content: center; }
.daily-result .fj .griddle-svg { width: 140px; }

/* Pudding molds */
.mould-pick { width: 150px; }
.mould-pick small { color: var(--muted); font: 600 var(--fs-xs) var(--body); text-align: center; }

/* Kettle clues */
.clues { padding-left: 1.2em; margin: 0 0 12px; }
.clues li { margin-bottom: 4px; }

/* Duck pond: ducks bob; the picked one sits in a gold ring once flipped */
.pond { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; padding: 14px; margin: 0 0 12px;
  background: radial-gradient(ellipse at 50% 40%, var(--dl-pond-bg), var(--dl-pond-bg-2)); border: var(--line) solid var(--ink); border-radius: 999px; }
.duck { display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 50%; animation: bob 2.4s calc(var(--i) * -.3s) ease-in-out infinite alternate; }
button.duck { cursor: pointer; }
button.duck:hover, button.duck:focus-visible { background: rgb(255 255 255 / .45); outline: 3px solid var(--ink); }
button.duck:focus-visible { box-shadow: 0 0 0 6px var(--sky); }
.duck svg { width: 72px; height: 72px; }
.duck.is-pick { background: rgb(255 255 255 / .6); box-shadow: 0 0 0 3px var(--sun); }
.duck-legend { display: flex; flex-wrap: wrap; gap: 6px; }

/* Windfall Orchard */
.orchard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.tree { display: grid; justify-items: center; padding: 4px; border: 2px solid transparent; border-radius: var(--r-tile); font: 600 var(--fs-sm) var(--display); text-align: center; }
label.tree { cursor: pointer; }
.tree svg { width: 100%; max-width: 110px; height: auto; }
label.tree:has(input:checked), .tree.is-pick { background: var(--hi); border-color: var(--ink); box-shadow: 0 0 0 3px var(--pink); }
label.tree:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 8px var(--sky); }
label.tree:has(input:checked):has(input:focus-visible) { box-shadow: 0 0 0 3px var(--pink), 0 0 0 8px var(--sky); }
label.tree:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* Whispering Sundial: the hours ring the dial; picking one swings the shadow round */
.riddle { margin: 0 0 12px; padding: 10px 16px; border-left: 6px solid var(--sun); background: var(--tint); font: 600 1.15rem var(--display); }
.dial { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto 10px; }
.dial .dial-svg { position: absolute; inset: 13%; width: 74%; height: 74%; }
.dial-shadow { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.dial-hour { position: absolute; translate: -50% -50%; cursor: pointer; }
.dial-hour input { position: absolute; opacity: 0; }
.dial-hour span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); font: 700 1rem var(--display); }
.dial-hour:has(input:checked) span { background: var(--sun); box-shadow: 0 0 0 3px var(--pink); }
.dial-hour:has(input:focus-visible) span { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 8px var(--sky); }
.dial-hour:has(input:checked):has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--pink), 0 0 0 8px var(--sky); }
.dial ~ .btn-row, .sundial-form .btn-row { justify-content: center; }
.dial-done .dial-svg { width: 120px; height: 120px; }

/* Whirligig of Wishes: the clock-tower wheel (src/art/daily-props.js whirligigSvg) beside the wish tickets on tablets and up.
   Phones tap the wheel, then step one ticket with ‹ › (the page script adds .wl-js; without it the ticket radios show everywhere). */
.wl-booth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.wl-stage { position: relative; width: min(440px, 100%); margin-inline: auto; aspect-ratio: 1; }
.wl-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wl-spinner { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(var(--turn)); }
.wl-stage.spinning .wl-spinner { animation: wl-spin 4.2s cubic-bezier(.12, .8, .22, 1) both; }
@keyframes wl-spin { from { transform: rotate(0deg); } }
.wl-slice[role=button] { cursor: pointer; }
.wl-slice[role=button]:hover .wl-fill, .wl-slice:focus-visible .wl-fill { filter: brightness(1.08); }
.wl-slice:focus { outline: none; }
.wl-slice:focus-visible .wl-fill { stroke: var(--pink); stroke-width: 5; }
.wl-bulb { animation: wl-bulb 1.2s steps(1) infinite; }
.wl-bulb.b2 { animation-delay: .6s; }
.wl-stage.spinning .wl-bulb { animation-duration: .3s; }
@keyframes wl-bulb { 50% { fill: var(--sun-cream); } }
.wl-glint { animation: wl-glint 1.6s ease-in-out infinite alternate; }
@keyframes wl-glint { to { opacity: .25; } }
.wl-cog, .wl-key { transform-box: fill-box; transform-origin: 50% 50%; }
.wl-key { transform-origin: 0% 50%; }
.wl-stage.spinning .wl-cog { animation: wl-cog 1s linear 4; }
.wl-stage.spinning .wl-cog.rev { animation-direction: reverse; }
.wl-stage.spinning .wl-key { animation: wl-key .5s ease-in-out 3; }
@keyframes wl-cog { to { transform: rotate(360deg); } }
@keyframes wl-key { 50% { transform: scaleY(-1); } }
.reduce-motion :is(.wl-spinner, .wl-bulb, .wl-glint, .wl-cog, .wl-key) { animation: none !important; }
.wl-panel { display: grid; gap: 14px; }
.wl-step { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wl-step-h { padding: 0; font: 600 var(--fs-xs) var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.wl-panel .btn-row { justify-content: flex-start; margin: 0; }
.wl-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
/* tickets: Whirligig ride tickets with notched ends and a perforated stub; the wish tilts and gets a pink ring */
.wl-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.wl-ticket, .wl-one-ticket { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; min-height: 52px; padding: 6px 12px 6px 10px;
  background: radial-gradient(circle at 0 50%, var(--card) 0 7px, transparent 8px), radial-gradient(circle at 100% 50%, var(--card) 0 7px, transparent 8px), var(--sw, var(--tint));
  border: 2.5px solid var(--ink); border-radius: 6px; font: 600 .82rem/1.15 var(--display); cursor: pointer; }
.wl-ticket::after, .wl-one-ticket::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 42px; border-left: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.wl-ticket .ic, .wl-one-ticket .ic { grid-row: span 2; width: 26px; height: 26px; }
.wl-ticket .lb, .wl-ticket .odd, .wl-one-ticket .lb, .wl-one-ticket .odd { padding-left: 4px; }
.wl-ticket .odd, .wl-one-ticket .odd { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-ticket:has(input:checked) { box-shadow: 0 0 0 3px var(--pink), 3px 3px 0 3px var(--ink); transform: rotate(-2deg); }
.wl-ticket:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 9px var(--sky); }
.wl-ticket:has(input:checked):has(input:focus-visible) { box-shadow: 0 0 0 3px var(--pink), 3px 3px 0 3px var(--ink), 0 0 0 9px var(--sky); }
.wl-one { display: none; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.wl-one-ticket { min-height: 60px; cursor: auto; }
.wl-one-ticket.empty { grid-template-columns: 1fr; border-style: dashed; color: var(--muted); text-align: center; }
.wl-one-ticket.empty::after { display: none; }
.wl-nudge { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--card); box-shadow: 2px 2px 0 var(--ink); font: 700 1.3rem/1 var(--display); color: var(--ink); cursor: pointer; }
.wl-nudge:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
/* the result: the wish line, the choose-one tray, Madame Twirl's aside */
.wl-up { display: table; margin: 0 auto 8px; padding: 2px 14px; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(110deg, var(--sun-cream), var(--pink-soft)); font: 700 1rem var(--display); color: var(--gain); }
.wl-twirl { margin: 10px 0 0; font-style: italic; color: var(--muted); text-align: center; }
.wl-result h2 { text-align: center; }
.wl-result .prize-tile { margin: 10px auto 0; width: fit-content; }
.wl-pick { margin-top: 12px; text-align: center; }
.wl-pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; max-width: 440px; margin-inline: auto; } /* three treats in a row at 320 */
.wl-pick-btn svg { width: 100%; max-width: 72px; height: auto; }
.wl-pick-btn { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 44px; padding: 8px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm); font: 700 var(--fs-sm) var(--display); color: var(--ink); cursor: pointer; }
.wl-pick-btn:hover { background: var(--hi); }
.wl-odds .sw { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 4px; vertical-align: -2px; }
.wl-odds td.num { white-space: nowrap; }
.wl-prize-sm { display: none; }
.prize-tile + p { margin-top: 10px; }

.depth { transition: transform .15s var(--ease-out), background-color .15s, filter .15s; } /* the hover lift eases, not snaps */

/* Rummage Stump parcels */
.parcels .parcel { cursor: pointer; font: inherit; color: var(--ink); }
.parcels .parcel:not(:has(input:disabled)):hover { transform: rotate(-2deg) translateY(-2px); }
.parcels .parcel:has(input:disabled) { cursor: default; opacity: .7; }
.parcels .parcel:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px var(--pink); transform: rotate(-2deg); }
.parcels .parcel:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: var(--shadow-sm), 0 0 0 8px var(--sky); }
.parcels .parcel:has(input:checked):has(input:focus-visible) { box-shadow: 0 0 0 3px var(--pink), 0 0 0 8px var(--sky); }
.parcel.sniffed { background: var(--hi); }
.parcel small { color: var(--muted); font-weight: 700; }
.stump-go { position: sticky; bottom: calc(var(--bar-h, 0px) + env(safe-area-inset-bottom) + 10px); z-index: 2; } /* stays in reach while picking down the list */
.parcel { min-width: 0; overflow-wrap: anywhere; } /* long usernames ("From dragonmaster2001") no longer spill out of the tile */

/* The Pearl Drop: depth buttons get darker as they go down; the dive shows the pet sinking to the chosen band */
.depths { display: grid; gap: 8px; }
.depth { display: grid; text-align: left; gap: 2px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: var(--r-tile); cursor: pointer; font: inherit;
  color: var(--ink); background: hsl(200 70% calc(85% - var(--i) * 15%)); } /* style-ok: color computed from a per-element custom property */
.depth:nth-child(n+3) { color: #fff; background: hsl(210 70% calc(78% - var(--i) * 20%)); } /* style-ok: color computed from a per-element custom property */
.depth b { font-family: var(--display); }
.depth:not(:disabled):hover, .depth:focus-visible { filter: brightness(1.1); transform: translateX(4px); }
.depth:disabled { cursor: default; opacity: .6; }
.dive { position: relative; height: 200px; max-width: 360px; margin: 0 auto 12px; overflow: hidden; border: var(--line) solid var(--ink); border-radius: 18px;
  background: linear-gradient(var(--dl-dive-bg) 0 25%, var(--dl-dive-bg-2) 25% 50%, var(--dl-dive-bg-3) 50% 75%, var(--dl-dive-bg-4) 75%); }
.dive svg { position: absolute; left: 50%; top: calc(var(--depth) * 25% + 12.5%); translate: -50% -50%;
  filter: drop-shadow(0 0 calc(var(--glow) * 1.4px) var(--sun-soft)) drop-shadow(0 0 calc(var(--glow) * .8px) var(--sun-soft)); animation: dive-down 2s cubic-bezier(.45, 0, .25, 1) both; } /* sinks, then settles at its depth instead of stopping dead */
@keyframes dive-down { from { top: -20%; } }

/* Mote's Star Sifter (/daily/stardust): three dust piles to pick from, the sieve while it sifts, the charm bracelet panel */
.sift-grid { display: grid; gap: 18px; align-items: start; margin-top: 18px; }
.sift-play { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 900px) { .sift-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.pet-line { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.pet-line > svg { flex: none; }
.pet-line .speech { max-width: none; }
.piles { display: grid; gap: 12px; }
.pile-pick { position: relative; display: flex; align-items: stretch; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; min-height: 44px;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s; }
.pile-pick:hover, .pile-pick:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.pile-art { position: relative; flex: none; width: 116px; display: grid; place-items: end center; padding: 24px 6px 4px;
  background: linear-gradient(180deg, var(--from), var(--to)); border-right: var(--line) solid var(--ink); }
.pile-svg { width: 100%; height: auto; display: block; }
.pile-body { display: grid; gap: 4px; align-content: center; padding: 10px 12px; min-width: 0; }
.pile-land { font: 600 1.15rem/1.1 var(--display); }
.pile-have { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.pile-slots { display: flex; gap: 4px; }
.pile-mini { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); border: 2px solid var(--rule); }
.pile-pick.is-lean { outline: 3px solid var(--sun); outline-offset: 2px; }
.pile-pick.is-finished .pile-art { filter: saturate(.5); }
/* the pet's pick ribbon: on phones it sits above the land name, straddling the art panel's edge, so a long name fits (inside the
   116px panel it got clipped); from 640px it rides the top of the pile's column again. Names too long for one line wrap. */
.lean-tag { justify-self: start; margin-left: -24px; max-width: calc(100% + 24px); transform: rotate(-3deg); display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere;
  padding: 1px 8px 1px 2px; background: var(--sun); border: 2px solid var(--ink); border-radius: 12px; font: 600 .7rem/1.1 var(--display); box-shadow: 2px 2px 0 var(--ink); }
.lean-tag svg { width: 22px; height: 22px; }
.lean-note { margin: 12px 0 0; font-size: var(--fs-sm); }
@media (min-width: 640px) {
  .piles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pile-pick { flex-direction: column; }
  .pile-art { width: auto; border-right: 0; border-bottom: var(--line) solid var(--ink); padding: 32px 18px 6px; }
  .lean-tag { position: absolute; top: 4px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: max-content; max-width: calc(100% - 8px); margin: 0; }
  .pile-body { padding: 10px 12px 12px; }
}
/* the sieve: shakes while the result is held back (.jp-out hidden), then steps aside */
.sift-stage { display: none; text-align: center; }
.sieve { width: min(240px, 100%); height: auto; display: block; margin: 0 auto 6px; overflow: visible; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { body:not(.reduce-motion) .jp:not(.is-done) .sift-stage { display: block; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { body:not(.reduce-motion) .jp:not(.is-done) .sift-stage + .jp-out { position: absolute; inset: 0; } }
.sv-sieve { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-shake .2s ease-in-out infinite alternate; }
@keyframes sv-shake { from { transform: translateX(-5px) rotate(-2deg); } to { transform: translateX(5px) rotate(2deg); } }
.sv-grains circle { animation: sv-fall 1.2s linear infinite; animation-delay: var(--d); }
@keyframes sv-fall { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
.sv-pile { transform-box: fill-box; transform-origin: 50% 100%; animation: sv-grow 2.4s ease-out both; }
@keyframes sv-grow { from { transform: scaleY(.25); } }
.sv-glint { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-glint 2.4s ease-out both; }
@keyframes sv-glint { 0%, 62% { transform: scale(0) rotate(0); opacity: 0; } 78% { transform: scale(1.3) rotate(45deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
.tw { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-tw 1.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes sv-tw { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.1); opacity: 1; } }
.sift-result.rare { background: linear-gradient(160deg, var(--card) 40%, var(--sun-cream)); }
.rare-pill { display: table; margin: 0 auto 8px; background: var(--sun); }
.prize-tile.shine { background: radial-gradient(circle, var(--sun-cream), var(--card) 70%); }
.sift-result .prize-row > p { max-width: 60ch; }
/* done for today */
.sift-done { position: relative; }
.sift-done h2 { padding-right: 96px; }
.done-stamp { position: absolute; top: 16px; right: 16px; transform: rotate(-10deg); padding: 0 12px; font: 700 1.2rem var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dl-sift-stamp); border: 3px solid var(--dl-sift-stamp); border-radius: 8px; background: rgba(255, 255, 255, .85); }
.countdown { font: 600 1.15rem var(--display); }
.countdown b { font-variant-numeric: tabular-nums; color: var(--grape); font-size: 1.4rem; }
.sift-tablets { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sift-tablets > svg { flex: none; }
.sift-tablets p { flex: 1 1 160px; margin: 0; font-size: var(--fs-sm); }
/* the bracelet panel */
.bracelet-card .meter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bracelet-card .meter .stat-bar { flex: 1; }
.bracelet-card .meter b { font: 600 1.15rem var(--display); white-space: nowrap; }
.lands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.land-set { min-width: 0; padding: 6px 8px 8px; border: 2px solid var(--rule); border-top: 6px solid var(--acc); border-radius: var(--r-sm); background: var(--tint); }
.land-set.full { background: var(--dl-sift-gold); border-color: var(--dl-sift-gold-rule); border-top-color: var(--acc); }
.ls-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: var(--fs-xs); }
.ls-head b { font: 600 .86rem/1.2 var(--display); }
.ls-head span { color: var(--muted); font-weight: 700; white-space: nowrap; }
.ls-slots { display: flex; gap: 4px; margin-top: 4px; }
.charm-slot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card); border: 2px dashed var(--rule); }
.charm-slot.own { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.charm-slot.just { background: var(--sun-cream); animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) 2.6s both; }
.perk { margin: 14px 0 0; font-size: var(--fs-sm); }
.bracelet-card .btn-row { margin-top: 12px; }
.bracelet-card .btn-row + p { margin: 6px 0 0; font-size: var(--fs-sm); }
.charm-art.miss * { fill: var(--dl-sift-miss) !important; stroke: var(--dl-sift-miss-line) !important; }
.charm-art.miss [fill="none"] { fill: none !important; }
.charm-art.miss .hl, .charm-art.miss .dt { display: none; }
/* phones: the piles stay a list; the title row centers, the lists stay left */
@media (max-width: 767px) {
  .sift-choose > h2, .bracelet-card > h2, .sift-done > h2 { text-align: center; }
  .sift-done h2 { padding: 0 0 0 0; margin-top: 40px; }
  .sift-done > p, .sift-done .countdown { text-align: center; }
  .done-stamp { left: 50%; right: auto; transform: translateX(-50%) rotate(-6deg); }
  .bracelet-card .perk, .bracelet-card .btn-row + p { text-align: center; }
  .bracelet-card .btn-row { justify-content: center; }
}
@media (max-width: 380px) { .ls-slots { gap: 2px; } .charm-slot { width: 40px; height: 40px; } .charm-slot svg { width: 32px; height: 32px; } }

/* Quests */
.faerie-tile { display: flex; gap: 10px; align-items: center; }
.faerie-tile small { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } /* <small> alone was 12.8px */
.faerie { animation: bob 3s ease-in-out infinite alternate; }


/* Keeper talk: after a win or miss your active pet answers the keeper (shell() in src/routes/dailies.js) */
.daily-head .keeper { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
.pet-reply { grid-column: 2; display: flex; gap: 6px; align-items: center; margin: 4px 0 0 20px; }
.keeper .pet-reply svg { width: 48px; height: 48px; }
.pet-reply .speech { max-width: 240px; padding: 6px 12px; background: var(--card); font-size: var(--fs-sm); }
.pet-reply .speech::before { top: 12px; }
@media (max-width: 767px) { .daily-head .keeper { grid-template-columns: minmax(0, 1fr); justify-items: center; } .pet-reply { grid-column: 1; margin-left: 0; justify-content: center; } }

/* Jackpot moments (public/jackpot.js). While a result builds up, .jp-out (the result, the pet's reply) stays hidden and
   the keeper says a .jp-wait line. Only with scripts on and motion allowed, and a failsafe shows it anyway after 8s. */
.jp { position: relative; overflow: hidden; }
.jp-wait, .jp-tease { display: none; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  body:not(.reduce-motion):has(.jp:not(.is-done)) .jp-out { visibility: hidden; animation: jp-failsafe 0s 8s forwards; }
  body:not(.reduce-motion):has(.jp:not(.is-done)) .say-now { display: none; }
  body:not(.reduce-motion):has(.jp:not(.is-done)) :is(.jp-wait, .jp-tease) { display: grid; }
}
@keyframes jp-failsafe { to { visibility: visible; } }
.jp.is-done .jp-out { animation: pop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
.jp[data-ms] { cursor: pointer; }
.jp.is-done { cursor: auto; }
.jp-tease { position: absolute; inset: 0; z-index: 1; place-content: center; justify-items: center; } /* over the held-back result, so the card keeps its size when it lands */
.jp-tease svg { width: 96px; height: 96px; }
.jp-shake svg { animation: jp-shake .3s ease-in-out infinite; }
.jp-flip svg { animation: jp-flip .55s ease-in-out infinite; }
.jp-wobble svg { animation: jp-wobble .5s ease-in-out infinite; }
.jp-glow svg { animation: jp-glow .8s ease-in-out infinite alternate; }
/* its glow is a sun halo behind the art that fades and grows with it (a drop-shadow filter repainted every frame) */
.jp-glow::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 104px; height: 104px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sun) 50%, transparent) 0 30%, color-mix(in srgb, var(--sun) 18%, transparent) 62%, transparent);
  opacity: 0; animation: jp-glow-halo .8s ease-in-out infinite alternate; }
.jp-dig svg { animation: jp-dig .4s ease-in infinite; }
.jp-crack svg { animation: jp-shake .22s linear infinite; }
@keyframes jp-shake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes jp-flip { 50% { transform: translateY(-26px) scaleY(-1); } }
@keyframes jp-wobble { 50% { transform: scale(1.15, .85); } }
@keyframes jp-glow { to { transform: scale(1.1); } }
@keyframes jp-glow-halo { to { opacity: 1; transform: scale(1.1); } }
@keyframes jp-dig { 50% { transform: translateY(12px) rotate(-14deg); } }
.jp-near { display: table; margin: 0 auto 10px; padding: 2px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--hi); font: 700 1rem var(--display); }
.jp.is-done .jp-near { animation: jp-shake .25s 3; }
.revealed .pair { background: var(--pink-soft); }
/* the coin shower: count set by tier in jackpot.js */
.jp-coins { position: absolute; inset: 0; pointer-events: none; }
.jp-coins i { position: absolute; top: -24px; left: var(--x); width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle at 35% 35%, var(--sun-cream), var(--sun) 45%, var(--dl-jp-coins-bg)); animation: jp-fall 1.7s var(--d) cubic-bezier(.45, 0, .8, .6) forwards; }
@keyframes jp-fall { to { transform: translateY(560px) rotate(var(--r)); opacity: .3; } }

/* Phone/tablet pass: 12px between stacked picks, 44px targets, centered reward blocks */
@media (max-width: 767px) {
  .pond, .orchard { gap: 12px; }
  .depths { gap: 12px; }
  .duck svg { width: 64px; height: 64px; }
  .duck { min-height: 72px; }
  .swatch { min-height: 44px; }
  .dial-hour { display: grid; place-items: center; width: 44px; height: 44px; }
  .dial-hour span { width: 36px; height: 36px; } /* 44px hit box, 36px disc: ring neighbors sit ~50px apart at 320 */
  .pick-row:has(.mould-pick) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 2x2 molds, not four in a column */
  .mould-pick { width: auto; min-height: 44px; }
  .mould-pick svg { width: 84px; height: auto; }
  .kettle-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 2x2 secret ingredients */
  .kettle-picks .pick { width: auto; }
  fieldset:has(.kettle-picks) + .btn-row { justify-content: center; }
  form:has(.kettle-picks) + .soup-pets { margin-top: 16px; justify-content: center; } /* gap under "That's the one!", Glimlings centered */
  .daily-result .prize-row { justify-content: center; text-align: center; }
  .daily-result h2, .daily-result .result-line, .daily-result .jp-out > p, .daily-result > p { text-align: center; }
  .prize-tile { margin-inline: auto; }
  /* the shared checkbox-label rule (inline-flex row) would lay each tree out as art beside its name */
  .orchard label.tree:has(input) { display: grid; align-content: start; min-height: 44px; }
  /* Whirligig: the wheel on top, then the wish. With the page script the tickets give way to one ticket and its arrows. */
  .wl-booth { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wl-js .wl-tickets { display: none; }
  .wl-js .wl-one { display: grid; }
  .wl-step-h, .wl-note { text-align: center; }
  .wl-panel .btn-row { justify-content: center; }
  .wl-odds h2, .wl-odds > p { text-align: center; }
  .wl-odds .wl-col-prize { display: none; } /* the prize rides under the slice name, so the table fits at 320 */
  .wl-prize-sm, .wl-odd-sm { display: block; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
  .wl-odds th, .wl-odds td { padding: 8px; }
  .wl-odds .table-wrap .table { min-width: 0; } /* three columns fit without the shared 460px scroller width */
}

/* Daily head: one line under the title, the rules in a closed How it works (DAILIES[].how) */
.dl-how { margin: 12px 0 0; text-align: left; }
.dl-how ul { margin: 4px 0 0; padding-left: 20px; }

/* Noticeboard: a "Resets in 4h 46m" pill under the title (routes/dailies.js resetPill, 2026-10-15 pick A) */
.rs-under { text-align: center; margin: 4px 0 8px; }
.rs-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--sun); color: var(--ink); font-size: var(--fs-sm); }
.rs-pill svg { flex: none; }