/* Local palette: one-off colours 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-tideline-bg: #7fd8e6;
  --dl-tideline-bg-2: #e3b865;
  --dl-tideline-bg-3: #f7d58a;
  --dl-tideline-bg-4: #2a4a8a;
  --dl-tideline-bg-5: #a88a5a;
  --dl-tideline-bg-6: #c9ae78;
  --dl-dive-bg: #9fe8ff;
  --dl-dive-bg-2: #4fb8e6;
  --dl-dive-bg-3: #2070b0;
  --dl-dive-bg-4: #13285a;
  --dl-tablet-bg: #5b5a86;
  --dl-tablet-bg-2: #3b3a66;
  --dl-tablet-bg-3: #e8dcc4;
  --dl-tablet-bg-4: #cbbd9f;
  --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: #fff; 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: #fff; 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 { margin-top: 24px; }
.board-rest > summary { display: block; cursor: pointer; text-align: center; list-style: none; }
.board-rest > summary::-webkit-details-marker { display: none; }
.pick-bonus { font-family: var(--display); margin: 12px 0 0; }

.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 > svg { 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 > svg, .daily-card.is-done .dc-body > svg { filter: saturate(.35); opacity: .7; }

@media (max-width: 560px) {
  .dc-art .scene > svg { 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 moulds */
.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); }
.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(--sky); outline-offset: 2px; }
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: #fff; 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(--sky); outline-offset: 2px; }
.dial ~ .btn-row, .sundial-form .btn-row { justify-content: center; }
.dial-done .dial-svg { width: 120px; height: 120px; }

/* Whirligig of Wishes */
.wheel { position: relative; width: min(320px, 100%); margin: 0 auto 14px; aspect-ratio: 1; filter: drop-shadow(6px 6px 0 var(--ink)); }
.wheel-turn { width: 100%; height: 100%; }
.wheel-svg { display: block; width: 100%; height: 100%; }
.wheel.spinning .wheel-turn { animation: wheel-spin 3.6s cubic-bezier(.12, .8, .25, 1) both; }
@keyframes wheel-spin { from { transform: rotate(0deg); } }
.wheel ~ .btn-row { justify-content: center; } /* the button sits under the centred wheel */
.wheel-legend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; font-size: var(--fs-sm); }
.wheel-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 2px solid var(--ink); border-radius: 4px; vertical-align: -2px; }
.prize-tile + p { margin-top: 10px; }
.wheel-pointer { position: absolute; top: -8px; left: 50%; translate: -50% 0; border: 16px solid transparent; border-top: 30px solid var(--pink); filter: drop-shadow(0 3px 0 var(--ink)); }

/* Tideline Combing: the hour's shore, one button per find */
.tideline { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; padding: 14px; margin: 0 0 12px;
  border: var(--line) solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, var(--dl-tideline-bg) 0 18%, var(--dl-tideline-bg-2) 18% 30%, var(--dl-tideline-bg-3) 30%); }
.tideline.is-night { background: linear-gradient(180deg, var(--dl-tideline-bg-4) 0 18%, var(--dl-tideline-bg-5) 18% 30%, var(--dl-tideline-bg-6) 30%); }
.shell-spot { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; background: rgb(255 255 255 / .55); border: 2px solid var(--ink); border-radius: var(--r-tile);
  font: 600 var(--fs-sm) var(--display); color: var(--ink); cursor: pointer; }
.shell-spot:not(:disabled):hover, .shell-spot:focus-visible { background: #fff; transform: translateY(-2px); }
.shell-spot, .depth { transition: transform .15s var(--ease-out), background-color .15s, filter .15s; } /* the hover lift eases, not snaps */
.shell-spot:disabled { cursor: default; opacity: .8; }
.shell-spot.glint svg { animation: glint-twinkle 1.6s ease-in-out infinite alternate; } /* the glinting spot catches the light */
@keyframes glint-twinkle { to { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 0 7px var(--sun-soft)) brightness(1.12); } }

/* 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(--sky); outline-offset: 2px; }
.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: colour 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: colour 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%; } }

/* Stardust Tablets: a 4x4 glimmerstone tablet; dust comes off each rubbed patch in turn, then the constellation lines draw */
.tablet { position: relative; display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; width: fit-content; margin: 6px auto 12px; padding: 10px;
  background: var(--dl-tablet-bg); border: var(--line) solid var(--ink); border-radius: 14px; }
.tablet .cell { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; background: var(--dl-tablet-bg-2); overflow: hidden; }
.tablet .cell svg { width: 40px; height: 40px; }
.tablet .dust, .cell.foil, .revealed .shown::after { background: radial-gradient(circle at 30% 30%, var(--dl-tablet-bg-3) 0 2px, transparent 3px) 0 0 / 12px 12px, var(--dl-tablet-bg-4); }
.cell.foil { cursor: pointer; }
.cell.foil:has(input:checked) { background: var(--dl-tablet-bg-2); box-shadow: inset 0 0 0 3px var(--sun); }
.cell.foil:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cell.foil:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }
.revealed .shown::after { content: ''; position: absolute; inset: 0; animation: scratch-off .5s calc(.3s + var(--i) * .35s) ease-in both; }
@keyframes scratch-off { to { clip-path: inset(0 0 0 100%); } }
.revealed .win { box-shadow: inset 0 0 0 3px var(--sun); }
.star-lines { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; }
.star-lines path { fill: none; stroke: var(--sun-glow); stroke-width: .07; stroke-linecap: round; stroke-dasharray: 8; stroke-dashoffset: 8;
  filter: drop-shadow(0 0 .08px #fff); animation: star-lines 1s calc(.5s + var(--rubs) * .35s) ease-out forwards; }
@keyframes star-lines { to { stroke-dashoffset: 0; } }
.constellations { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.constellations li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.constellations svg { width: 40px; height: 40px; background: var(--dl-tablet-bg-2); border-radius: 8px; }

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

/* style.css already stops all motion under reduced-motion; the dust must also go, or it would never come off, and the lines must show */
@media (prefers-reduced-motion: reduce) { .revealed .shown::after { display: none; } .star-lines path { stroke-dashoffset: 0; } }
@media (max-width: 480px) {
  .tablet { grid-template-columns: repeat(4, 56px); }
  .tablet .cell { width: 56px; height: 56px; }
}

/* 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: #fff; 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; }
.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); filter: drop-shadow(0 0 16px var(--sun)); } }
@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; } }
/* near misses creep: the wheel slows over the top prize */
.wheel.spinning.creep .wheel-turn { animation: wheel-creep 5s both; }
@keyframes wheel-creep { from { transform: rotate(0deg); animation-timing-function: cubic-bezier(.12, .8, .3, 1); }
  78% { transform: rotate(var(--hold)); animation-timing-function: cubic-bezier(.5, 0, .5, 1); } }

/* Streak glimmerbloom and mystery box on the home strip (src/routes/streak.js) */
.streak-plant { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.streak-plant > div { flex: 1 1 160px; }
.streak-plant .glimmerbloom { flex: none; }
.streak-box { margin: 0 0 10px; }
.streak-box .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.streak-box svg { width: 44px; height: 44px; animation: box-nudge 2.6s ease-in-out infinite; }
.streak-box.is-rare .btn { box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px var(--sun), var(--shadow-sm); }
.streak-box.is-opening svg { animation: jp-shake .14s linear infinite; }
@keyframes box-nudge { 0%, 78%, 100% { transform: none; } 84% { transform: rotate(-9deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }

/* Phone/tablet pass: 12px between stacked picks, 44px targets, centred reward blocks */
@media (max-width: 767px) {
  .pond, .orchard, .tideline { gap: 12px; }
  .depths, .brew-shelf { 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 neighbours sit ~50px apart at 320 */
  .pick-row:has(.mould-pick) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* 2x2 moulds, not four in a column */
  .mould-pick { width: auto; min-height: 44px; }
  .mould-pick svg { width: 84px; height: auto; }
  .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; }
}

/* Phone: the login-streak plant stacks, art centred above the text, instead of squeezing the text beside it */
@media (max-width: 1024px) { /* the home grid keeps this card in a narrow column on tablets too */
  .streak-plant { justify-content: center; text-align: center; }
  .streak-plant > div { flex-basis: 100%; }
}