/* Bloomday: a cozy-game HUD floating over a live 3D garden. Chunky pressable buttons, frosted petal-paper panels. */
:root {
  --ink: #213a2b;
  --ink-soft: #5a7063;
  --paper: #fffdf6;
  --paper-2: #f2f8ec;
  --paper-glass: rgba(255, 253, 246, 0.82);
  --leaf: #3c9a50;
  --leaf-d: #2a7539;
  --leaf-l: #d9f0d4;
  --gold: #f5b52a;
  --gold-d: #c98a0a;
  --gold-l: #fff0c4;
  --coral: #f2785a;
  --coral-d: #b04a31; /* (round 25) 5.3:1 on the cards, AA for the small kickers (was #c9553a, 4.26:1) */
  --sky: #4ea6f5;
  --lilac: #b79ceb;
  --line: rgba(33, 58, 43, 0.12);
  --shadow: 0 10px 30px rgba(20, 40, 30, 0.18), 0 2px 6px rgba(20, 40, 30, 0.12);
  --f-display: "DynaPuff", "Nunito", ui-rounded, system-ui, sans-serif;
  --f-body: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #56acff; color: var(--ink); font-family: var(--f-body); font-weight: 600; }
body { overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; user-select: text; -webkit-user-select: text; }
[hidden] { display: none !important; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(130% 95% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(10, 30, 60, .22) 100%); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; touch-action: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- loading ---------- */
.loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; z-index: 50;
  background: radial-gradient(120% 80% at 50% 0%, #bfe4ff 0%, #8ccbff 45%, #56acff 100%); transition: opacity .6s ease; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-sprout img { width: 120px; animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(20, 60, 40, .25)); }
.loading-word { font-family: var(--f-display); font-size: 2.6rem; color: #fff; margin: 0; text-shadow: 0 3px 0 rgba(30, 80, 140, .35); letter-spacing: .01em; }
.loading-sub { margin: 0; color: rgba(255, 255, 255, .9); font-weight: 700; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* ---------- HUD ---------- */
.hud { position: fixed; left: 0; right: 0; top: 0; padding: calc(var(--safe-t) + 12px) 14px 0; z-index: 10; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.hud-row { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hud-right { display: flex; gap: 8px; align-items: center; }
.hud-row, .hud-right { pointer-events: none; }
.hud-row > .chip, .hud-right > *, .hud > .focus-pill, .hud-row2 > * { pointer-events: auto; }
.chip { border: 0; border-radius: 18px; background: var(--paper-glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow); padding: 8px 14px; display: grid; text-align: left; transition: transform .15s ease; }
.chip:active { transform: scale(.96); }
.chip-name { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.1; font-weight: 600; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-sub { font-size: .82rem; color: var(--ink-soft); font-weight: 800; letter-spacing: .02em; transition: opacity .3s ease; }
.chip-streak { display: flex; align-items: center; gap: 5px; padding: 8px 12px; color: var(--gold-d); }
.chip-streak svg { width: 20px; height: 20px; }
.chip-streak b { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip-streak.risk { background: linear-gradient(180deg, #fff1e6, #ffd9c2); color: var(--coral-d); animation: glowpulse 1.8s ease-in-out infinite; }
.chip-streak.hot { background: linear-gradient(180deg, #fff6d6, #ffe08a); animation: glowpulse 2.4s ease-in-out infinite; }
@keyframes glowpulse { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 90, .35), var(--shadow); } }
.round { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--paper-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); display: grid; place-items: center; font-weight: 900; font-size: 1rem; transition: transform .15s ease; }
.round:active { transform: scale(.92); }
.round svg { width: 22px; height: 22px; }
.round-small { width: 34px; height: 34px; font-size: .85rem; box-shadow: none; background: rgba(33, 58, 43, .08); }
.avatar { font-family: var(--f-display); background: linear-gradient(160deg, #ffd27a, #f59a4a); color: #4a2405; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.focus-pill { border: 0; border-radius: 999px; padding: 8px 14px 8px 10px; background: var(--paper-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); display: flex; gap: 8px; align-items: center; min-width: 0; flex: 0 1 auto; max-width: min(calc(100% - 96px), 520px); font-weight: 800; font-size: .9rem; }
.focus-pill .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-l); color: var(--leaf-d); flex: none; font-size: .8rem; }
.focus-pill .ft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-pill.empty { color: var(--leaf-d); }
.focus-pill.done .dot { background: var(--leaf); color: #fff; }

/* ---------- dock ---------- */
/* (round 19) while a card is up the dock steps aside (the reward card's foot sat over its half-cut words), and
   comes back as the card fades. Where :has() isn't known the dock simply stays. */
body:has(> .overlay:not(.closing)) .dock { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); }
.dock { transition: opacity 0.22s ease, transform 0.22s ease; }
.dock { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); z-index: 10; display: flex; align-items: flex-end; gap: 10px; width: min(560px, calc(100vw - 20px)); justify-content: space-between; }
.dock-side { border: 0; width: 64px; height: 64px; border-radius: 22px; background: var(--paper-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; gap: 1px; color: var(--leaf-d); font-size: .7rem; font-weight: 900; transition: transform .15s ease; }
.dock-side svg { width: 26px; height: 26px; }
.dock-side span { color: var(--ink); font-size: .74rem; letter-spacing: -.025em; padding: 0; max-width: 100%; } /* 'Almanac' fits inside the 58 px button with room to spare */
.dock-side:active { transform: translateY(2px) scale(.96); }
.action { flex: 1; border: 0; min-height: 68px; border-radius: 24px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #fff; background: linear-gradient(180deg, #2f8c49 0%, #236e39 100%); box-shadow: 0 6px 0 #17502a, 0 14px 28px rgba(20, 70, 35, .35);
  transform: translateY(-6px); transition: transform .12s ease, box-shadow .12s ease; text-align: left; position: relative; overflow: hidden; }
.action::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); border-radius: 24px 24px 0 0; pointer-events: none; }
.action:active { transform: translateY(0); box-shadow: 0 0 0 #17502a, 0 6px 14px rgba(20, 70, 35, .3); }
.action b { font-family: var(--f-display); font-weight: 600; font-size: 1.18rem; display: block; line-height: 1.1; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.action small { display: block; font-weight: 800; font-size: .82rem; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.action-icons { display: flex; }
.action-icons img { width: 40px; height: 40px; object-fit: contain; margin-left: -12px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); animation: wobble 2.2s ease-in-out infinite; }
.action-icons img:first-child { margin-left: 0; }
.action-icons img:nth-child(2) { animation-delay: .3s; }
.action-icons svg { width: 34px; height: 34px; }
.action.gold { background: linear-gradient(180deg, #ffc94a 0%, #f5a91a 100%); box-shadow: 0 6px 0 var(--gold-d), 0 14px 28px rgba(140, 90, 10, .35); color: #4a2f05; }
.action.gold b { text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.action.gold:active { box-shadow: 0 0 0 var(--gold-d), 0 6px 14px rgba(140, 90, 10, .3); }
.action.calm { background: linear-gradient(180deg, #5a68b8 0%, #46529c 100%); box-shadow: 0 6px 0 #343d78, 0 14px 28px rgba(40, 50, 110, .35); }
.action.calm:active { box-shadow: 0 0 0 #343d78; }
.action.pulse { animation: actionpulse 1.8s ease-in-out infinite; }
.action.gold small { text-shadow: none; }
@keyframes actionpulse { 50% { transform: translateY(-9px) scale(1.02); } }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } }

/* ---------- planting + visiting bars ---------- */
.plant-bar, .visit-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 12px); z-index: 12; display: flex; align-items: center; gap: 10px;
  background: var(--paper); border-radius: 22px; padding: 8px 8px 8px 10px; box-shadow: var(--shadow); width: min(560px, calc(100vw - 20px)); animation: drop .4s cubic-bezier(.2, 1.4, .4, 1); }
.plant-bar img { width: 44px; height: 44px; object-fit: contain; animation: wobble 1.6s ease-in-out infinite; }
.plant-text { flex: 1; display: grid; min-width: 0; }
.plant-text b { font-family: var(--f-display); font-weight: 600; }
.plant-text span { font-size: .82rem; color: var(--ink-soft); }
.visit-bar { justify-content: space-between; padding-left: 16px; font-weight: 800; }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }

/* ---------- build mode ---------- */
.build-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 12; width: min(620px, 100vw); background: var(--paper); border-radius: 26px 26px 0 0;
  padding: 12px 14px calc(var(--safe-b) + 12px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); display: grid; gap: 10px; animation: riseC .35s cubic-bezier(.2, 1.15, .35, 1); }
.build-head { display: flex; align-items: center; gap: 10px; }
.build-hint { flex: 1; font-size: .82rem; color: var(--ink-soft); font-weight: 700; line-height: 1.25; min-width: 0; }
.petal-pill { display: flex; align-items: center; gap: 4px; background: #ffe6ee; color: #a3405f; border-radius: 99px; padding: 6px 12px 6px 8px; font-family: var(--f-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; flex: none; }
.petal-pill svg { width: 20px; height: 20px; }
.petal-pill.bump { animation: bumpy .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bumpy { 40% { transform: scale(1.25); } }
.shop { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; touch-action: pan-x; scrollbar-width: none; }
.shop::-webkit-scrollbar { display: none; }
.shop-item { flex: none; width: 92px; border: 0; background: #fff; border-radius: 18px; padding: 6px 6px 8px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 3px 0 #e5eedf; scroll-snap-align: start; transition: transform .12s ease; }
.shop-item:active { transform: translateY(2px) scale(.97); }
.shop-item img { width: 62px; height: 62px; object-fit: contain; }
.shop-item b { font-size: .76rem; line-height: 1.1; text-align: center; }
.shop-item .cost { display: flex; align-items: center; gap: 2px; font-size: .74rem; font-weight: 900; color: #a3405f; }
.shop-item .cost svg { width: 12px; height: 12px; }
.shop-item.poor { opacity: .45; }
.shop-item.poor .cost { color: var(--ink-soft); }
.ghost-row { display: flex; gap: 8px; align-items: center; }
.ghost-row .btn-small { padding: 10px 12px; white-space: nowrap; min-width: 44px; }
.ghost-row #gGrid[aria-pressed="true"] { background: #e3f4da; color: var(--leaf-d); }
.ghost-row #gPlace { min-width: 104px; }
.shop-item { position: relative; }
.shop-item.mine { background: #fff7de; box-shadow: 0 3px 0 #f1dfa6; }
.shop-item.mine .cost { color: #9a6b12; font-size: .78rem; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.shop-item .count { position: absolute; top: 4px; right: 6px; background: var(--leaf); color: #fff; border-radius: 99px; font-size: .7rem; font-weight: 900; padding: 1px 6px; }
@media (max-width: 400px) { .ghost-row { gap: 6px; } .ghost-row .btn-small { padding: 10px 9px; font-size: .92rem; } .ghost-row #gPlace { min-width: 56px; } }

/* ---------- visiting a friend ---------- */
.visit-sub { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.visit-acts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 14px); z-index: 12; display: flex; gap: 8px; width: min(520px, calc(100vw - 20px));
  background: var(--paper); border-radius: 24px; padding: 8px; box-shadow: var(--shadow); animation: riseC .35s cubic-bezier(.2, 1.15, .35, 1); }
.visit-acts .act { flex: 1; border: 0; background: #fff; border-radius: 18px; padding: 8px 4px 9px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 3px 0 #e5eedf; font-weight: 800; font-size: .86rem; color: var(--ink); }
.visit-acts .act span.ico { font-size: 1.5rem; line-height: 1.1; }
.visit-acts .act small { font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.visit-acts .act:active { transform: translateY(2px); }
.visit-acts .act:disabled { opacity: .55; }
.visit-acts .act.done { background: #e3f4da; box-shadow: 0 3px 0 #c8e5b9; }
.visit-note { font-size: .8rem; color: var(--ink-soft); font-weight: 700; text-align: center; margin: 2px 0 0; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 12px 0; }
.gift-grid .shop-item { width: auto; }
.gift-grid .shop-item[aria-pressed="true"] { outline: 3px solid var(--leaf); }
.guest { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 #e5eedf; }
.guest .acct-av { flex: none; }
.guest div { display: grid; gap: 2px; min-width: 0; }
.guest b { font-size: .92rem; }
.guest q { font-style: italic; color: var(--ink); quotes: "“" "”"; overflow-wrap: anywhere; }
.guest small { color: var(--ink-soft); font-size: .74rem; font-weight: 700; }
.mail-list { display: grid; gap: 8px; margin: 14px 0 16px; text-align: left; }
.friend-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px 8px 8px 12px; box-shadow: 0 3px 0 #e5eedf; }
.friend-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .x { border: 0; background: none; color: var(--ink-soft); font-weight: 900; min-width: 44px; min-height: 44px; font-size: 1.05rem; border-radius: 12px; }

/* ---------- buttons ---------- */
/* (round 21) the green button is a shade deeper (#2e8540): white "Next" on #3c9a50 measured about 3.5:1, now 4.6:1 */
.btn { border: 0; border-radius: 16px; padding: 14px 18px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: #fff; background: #2e8540;
  box-shadow: 0 4px 0 #22672f; transition: transform .1s ease, box-shadow .1s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--leaf-d); }
/* (graphics H9) tactile: a soft sheen across the top of every chunky button (light from above, like the garden's),
   and a press that squashes a hair as it sinks onto its lip */
.btn:not(.link) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 58%); }
.btn:active:not(:disabled) { transform: translateY(3px) scale(.985, .97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-wide { width: 100%; }
.btn-small { padding: 9px 13px; font-size: .9rem; border-radius: 13px; box-shadow: 0 3px 0 var(--leaf-d); }
.btn-gold { background: var(--gold); color: #4a2f05; box-shadow: 0 4px 0 var(--gold-d); }
.btn-gold.btn-small { box-shadow: 0 3px 0 var(--gold-d); }
.btn-gold:active { box-shadow: 0 1px 0 var(--gold-d); }
.btn-ghost { background: var(--paper-2); color: var(--ink); box-shadow: 0 4px 0 #d7e4d0; }
.btn-ghost:active { box-shadow: 0 1px 0 #d7e4d0; }
.btn-danger { background: #fbe4dd; color: var(--coral-d); box-shadow: 0 4px 0 #efc3b6; }
.link { border: 0; background: none; color: var(--leaf-d); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }

/* ---------- sheets ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(15, 30, 25, .32); animation: fade .25s ease; }
.sheet { position: relative; width: min(560px, 100vw); max-height: min(88vh, 860px); overflow: auto; background: var(--paper);
  border-radius: 30px 30px 0 0; padding: 8px 20px calc(var(--safe-b) + 22px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); animation: rise .38s cubic-bezier(.2, 1.15, .35, 1);
  background-image: radial-gradient(rgba(60, 154, 80, .05) 1px, transparent 1.2px); background-size: 14px 14px; touch-action: pan-y; user-select: none; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 30px; padding-bottom: 24px; } }
.sheet-wrap.closing .sheet { animation: sink .25s ease forwards; }
/* (round 27) swipe to close: the finger owns the sheet, so its own open/close animation steps aside */
.sheet.swiping, .overlay .swiping { animation: none !important; will-change: transform; }
.sheet-wrap.closing .sheet.swiped { animation: none; }
.sheet-scrim, .overlay { opacity: var(--swipe-fade, 1); }
.sheet-grip { cursor: grab; }
.sheet-wrap.closing .sheet-scrim { animation: fade .25s ease reverse forwards; }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes riseC { from { transform: translate(-50%, 100%); } }
@keyframes sink { to { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; } }
.sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 4px auto 12px; }
.sheet h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.65rem; line-height: 1.15; margin: 0 0 4px; text-wrap: balance; }
.sheet .lead { color: var(--ink-soft); margin: 0 0 16px; font-weight: 600; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.steps { display: flex; gap: 6px; margin: 2px 0 14px; }
.steps i { height: 6px; flex: 1; border-radius: 9px; background: var(--line); }
.steps i.on { background: var(--leaf); }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { min-width: 0; }
.spacer { flex: 1; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }

/* time dial */
.dial { display: grid; justify-items: center; gap: 4px; padding: 6px 0 2px; }
.dial-time { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dial-seed { width: 96px; height: 96px; object-fit: contain; transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .15)); }
.dial-seed.bump { transform: scale(1.18) rotate(-6deg); }
.verdict { border-radius: 16px; padding: 10px 14px; text-align: center; font-weight: 800; width: 100%; }
.verdict b { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; display: block; }
.verdict.golden { background: var(--gold-l); color: #7a5205; }
.verdict.daily { background: var(--leaf-l); color: var(--leaf-d); }
.verdict.rest { background: #e7e9f6; color: #4a5290; }
.range-wrap { position: relative; padding: 14px 0 4px; }
.range-zones { position: absolute; left: 19px; right: 19px; top: 14px; height: 18px; border-radius: 99px; overflow: hidden; display: flex; pointer-events: none; }
.range-zones i:nth-child(1) { background: linear-gradient(90deg, #ffd65a, #ffc23a); width: 20%; }
.range-zones i:nth-child(2) { background: linear-gradient(90deg, #8fd49a, #5fbf6f); width: 20%; }
.range-zones i:nth-child(3) { background: linear-gradient(90deg, #c7cbe6, #a9aed6); flex: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; position: relative; margin: 0; touch-action: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); margin-top: -10px; }
input[type=range]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); }
.range-marks { position: relative; height: 1.1em; font-size: .8rem; font-weight: 900; color: var(--ink-soft); margin: 10px 19px 0; }
.range-marks span { position: absolute; transform: translateX(-50%); }
.nudge { display: flex; gap: 8px; justify-content: center; }
.hint { background: var(--paper-2); border-radius: 14px; padding: 10px 14px; font-size: .86rem; color: var(--ink-soft); }
.hint b { color: var(--ink); }

/* choice cards */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { border: 3px solid transparent; border-radius: 20px; background: var(--paper-2); padding: 14px 10px; display: grid; justify-items: center; gap: 6px; font-weight: 800; transition: transform .15s ease, border-color .15s ease; box-shadow: 0 4px 0 #dde9d6; }
.choice img { width: 64px; height: 64px; object-fit: contain; }
.choice .big { font-size: 2.6rem; line-height: 64px; }
.choice[aria-pressed=true] { border-color: var(--leaf); background: #eaf7e6; transform: translateY(-2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
#wtypes { margin-bottom: 6px; } /* breathing room above Back / Next */
.choices .choice { align-content: start; }
.pill { border: 2px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; min-height: 44px; font-weight: 800; font-size: .88rem; }
.pill[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; font-size: .9rem; }
.field input, .field textarea { border: 2px solid var(--line); border-radius: 14px; padding: 13px 14px; background: #fff; color: var(--ink); font-weight: 700; outline: none; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--leaf); }
.err { color: var(--coral-d); font-weight: 800; font-size: .88rem; min-height: 1.2em; margin: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--paper-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; border-radius: 10px; padding: 8px 4px; font-weight: 800; font-size: .82rem; }
.seg button[aria-pressed=true] { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }

/* almanac */
.alm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.alm-card { background: #fff; border-radius: 18px; padding: 6px 6px 10px; text-align: center; box-shadow: 0 3px 0 #e5eedf; position: relative; display: grid; gap: 2px; }
.alm-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.alm-card b { font-size: .82rem; line-height: 1.15; }
.alm-card span { font-size: .76rem; color: var(--ink-soft); line-height: 1.2; }
.alm-card.locked img { filter: brightness(0) saturate(0); opacity: .13; }
.alm-card.locked b { color: var(--ink-soft); }
.alm-card .new { position: absolute; top: 6px; right: 6px; background: var(--coral); color: #fff; font-size: .62rem; font-weight: 900; padding: 2px 7px; border-radius: 99px; }
.progress { height: 10px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-bottom: 14px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--coral)); border-radius: 99px; }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .dow { font-size: .68rem; font-weight: 900; color: var(--ink-soft); text-align: center; }
.day { aspect-ratio: 1; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; position: relative; font-size: .7rem; font-weight: 900; color: var(--ink-soft); border: 0; padding: 0; }
.day img { width: 76%; height: 76%; object-fit: contain; }
.day .n { position: absolute; top: 3px; left: 5px; font-size: .6rem; }
.day .acorn { position: absolute; right: 2px; bottom: 2px; width: 34%; height: 34%; }
.day.today { box-shadow: inset 0 0 0 2.5px var(--leaf); }
.day.rest { background: #eceef8; }
.day.golden { background: var(--gold-l); }
.day.out { opacity: 0; pointer-events: none; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.stat { background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 #e5eedf; }
.stat b { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; display: block; font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; color: var(--ink-soft); font-weight: 800; }
.day-detail { margin-top: 12px; }

/* profile */
.me-card { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.me-card .avatar { width: 58px; height: 58px; font-size: 1.5rem; flex: none; }
.code { font-family: var(--f-display); font-size: 1.8rem; letter-spacing: .12em; background: var(--gold-l); color: #6b4705; border-radius: 16px; padding: 8px 14px; text-align: center; }
.section-t { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; margin: 18px 0 8px; }
.friends { display: flex; flex-wrap: wrap; gap: 8px; }

/* tip */
.tip { position: fixed; z-index: 15; transform: translate(-50%, calc(-100% - 14px)); background: var(--paper); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow);
  text-align: center; pointer-events: none; animation: tipin .3s cubic-bezier(.2, 1.5, .4, 1); max-width: 220px; }
.tip b { font-family: var(--f-display); font-weight: 600; display: block; font-size: 1rem; }
.tip span { font-size: .78rem; color: var(--ink-soft); font-weight: 800; text-wrap: balance; }
.tip b, .tip span { white-space: nowrap; } /* "Planted Fri, Oct 2" stays on one line */
.tip span { display: block; }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--paper); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
@keyframes tipin { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(.8); } }

/* toasts */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 104px); z-index: 25; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 440px); }
.toast { background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 16px; font-weight: 800; box-shadow: var(--shadow); animation: toastin .35s cubic-bezier(.2, 1.4, .4, 1); text-align: center; }
.toast.out { animation: toastout .3s ease forwards; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes toastout { to { opacity: 0; transform: translateY(8px); } }

body.building .toasts { bottom: calc(var(--safe-b) + 200px); }
body.visiting .toasts { bottom: calc(var(--safe-b) + 112px); }

/* reward + reveal overlays */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 42%, rgba(255, 240, 190, .55), rgba(20, 35, 30, .62) 70%); animation: fade .3s ease; }
.overlay.closing { animation: fade .25s ease reverse forwards; }
/* a card owns the screen: the HUD chips fade out behind it instead of peeking through under the seed and acorn art */
.hud, .sky-tags { transition: opacity .25s ease; }
body:has(> .overlay:not(.closing)) .hud, body:has(> .overlay:not(.closing)) .sky-tags { opacity: 0; }
.burst { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; color: #fff; max-width: 420px; }
.rays { position: absolute; width: 520px; height: 520px; top: 50%; left: 50%; margin: -330px 0 0 -260px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(var(--ray, 255, 236, 160), .38) 0 10deg, rgba(var(--ray, 255, 236, 160), 0) 10deg 22deg); border-radius: 50%;
  mask: radial-gradient(circle, #000 18%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.burst h2 { font-family: var(--f-display); font-weight: 700; font-size: 2.2rem; margin: 0; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); position: relative; text-wrap: balance; }
.petal-gain { background: rgba(255, 230, 238, .95); color: #a3405f !important; text-shadow: none !important; border-radius: 99px; padding: 4px 14px; font-family: var(--f-display); }
.burst-copy { position: relative; display: grid; justify-items: center; gap: 8px; width: min(380px, 100%); padding: 16px 18px 14px; border-radius: 24px;
  background: rgba(18, 38, 27, .62); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.burst-copy .next-gift, .burst-copy .gift-got, .burst-copy .streak-ms { background: rgba(255, 255, 255, .12); }
.burst p { margin: 0; font-weight: 800; font-size: 1.05rem; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.loot { display: flex; gap: 14px; justify-content: center; position: relative; min-height: 130px; align-items: center; }
.loot figure { margin: 0; display: grid; justify-items: center; gap: 4px; animation: lootin .7s cubic-bezier(.2, 1.6, .35, 1) backwards; }
.loot figure:nth-child(2) { animation-delay: .25s; }
.loot figure:nth-child(3) { animation-delay: .5s; }
.loot img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); animation: wobble 2s ease-in-out infinite; }
.loot figcaption { font-family: var(--f-display); font-weight: 600; font-size: 1rem; background: rgba(255, 255, 255, .92); color: var(--ink); padding: 3px 12px; border-radius: 99px; }
@keyframes lootin { from { transform: translateY(80px) scale(.2) rotate(-40deg); opacity: 0; } }
.reveal-card { background: var(--paper); color: var(--ink); border-radius: 28px; padding: 22px; width: min(420px, 100%); min-width: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: grid; gap: 12px; animation: cardin .5s cubic-bezier(.2, 1.3, .35, 1) both; position: relative; }
/* (round 18) a card is solid almost at once and springs into place (it faded in over half a second, the island
   showing through it for a moment) */
@keyframes cardin { 0% { transform: translateY(24px) scale(.88); opacity: 0; } 22% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.reveal-card h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; margin: 0; }
.reveal-list { display: grid; gap: 8px; }
.reveal-item { display: flex; align-items: center; gap: 12px; background: var(--paper-2); border-radius: 16px; padding: 8px 12px; font-weight: 800; }
.reveal-item img { width: 46px; height: 46px; object-fit: contain; }
.reveal-new { display: grid; justify-items: center; gap: 4px; background: linear-gradient(180deg, var(--gold-l), #fff); border-radius: 20px; padding: 10px; }
.reveal-new img { width: 130px; height: 130px; object-fit: contain; animation: wobble 2.4s ease-in-out infinite; }
.reveal-card > .ribbon { justify-self: start; }
.reveal-new .ribbon, .reveal-card > .ribbon { background: var(--coral); color: #fff; font-weight: 900; font-size: .75rem; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; }
.reveal-new b { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }

/* confetti */
/* under toasts (25), sheets (30), the welcome (35) and cards (40): falling petals never cover words or buttons */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 22; overflow: hidden; }
.petal { position: absolute; top: -20px; width: 14px; height: 10px; border-radius: 60% 0 60% 0; animation: fall linear forwards; opacity: .95; }
.float-gain { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 3px; background: rgba(255, 245, 248, .96); color: #a3405f;
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; padding: 4px 12px 4px 8px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); animation: gainup 1.4s cubic-bezier(.2, .9, .3, 1) forwards; }
.float-gain svg { width: 20px; height: 20px; }
@keyframes gainup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.12); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .float-gain { animation-duration: .01s; animation-delay: 1s; } }
@keyframes fall { to { transform: translate(var(--dx), var(--fall, 110vh)) rotate(var(--r)); } }

/* welcome */
.welcome { position: fixed; inset: 0; z-index: 35; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(var(--safe-b) + 16px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(14, 32, 22, .45) 100%); }
.welcome-card { width: min(460px, 100%); background: var(--paper); border-radius: 30px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); display: grid; gap: 14px; animation: rise .5s cubic-bezier(.2, 1.15, .35, 1); max-height: calc(100dvh - 40px); overflow: auto; }
.invited { margin: -4px 0 0; background: var(--gold-l); color: #6b4705; border-radius: 12px; padding: 7px 12px; font-weight: 800; font-size: .9rem; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand b { font-family: var(--f-display); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.welcome-card h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 0; text-wrap: balance; }
.rules { display: grid; gap: 8px; }
.rule { display: flex; gap: 12px; align-items: center; background: var(--paper-2); border-radius: 16px; padding: 6px 12px 6px 6px; }
.rule img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.rule b { display: block; font-size: .95rem; }
.rule span { font-size: .82rem; color: var(--ink-soft); }
.acct-row { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 18px; box-shadow: 0 3px 0 #e5eedf; }
.acct-row .x { border: 0; background: none; color: var(--ink-soft); font-weight: 900; padding: 10px 12px; min-width: 44px; min-height: 44px; font-size: 1rem; }
.acct { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 4px 10px 10px; text-align: left; color: var(--ink); font: inherit; }
.acct-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #4a2f05; font-weight: 900; font-size: 1.15rem; }
.acct-t { flex: 1; min-width: 0; display: grid; }
.acct-t b, .acct-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-t small { font-size: .8rem; color: var(--ink-soft); }
.acct-go { flex: none; font-weight: 800; color: var(--leaf-d); font-size: .9rem; }
.acct:disabled { opacity: .5; }
.fine { font-size: .78rem; color: var(--ink-soft); text-align: center; margin: 0; }

@media (max-width: 420px) { .action { padding: 10px 12px; gap: 8px; } .action b { font-size: 1.04rem; white-space: nowrap; } .action small { font-size: .78rem; } .action-icons img { width: 34px; height: 34px; } .dock-side { width: 58px; } .chip-name { max-width: 46vw; } }
@media (max-height: 640px) { .dial-time { font-size: 2.6rem; } .dial-seed { width: 70px; height: 70px; } .loot img { width: 90px; height: 90px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- my year ---------- */
.visit-btns { display: flex; gap: 6px; flex: none; }
.year-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 12px); z-index: 12; display: flex; align-items: center; gap: 10px;
  background: var(--paper-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; padding: 8px 10px; box-shadow: var(--shadow);
  width: min(560px, calc(100vw - 20px)); animation: drop .5s cubic-bezier(.2, 1.4, .4, 1); }
.year-title { flex: 1; display: grid; min-width: 0; }
.year-title b { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.year-title small { font-size: .8rem; color: var(--ink-soft); font-weight: 800; }
.year-nav { display: flex; gap: 6px; }
.round-small:disabled { opacity: .35; }
.year-card { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 12px); z-index: 12; width: min(520px, calc(100vw - 20px));
  background: var(--paper); border-radius: 26px; padding: 14px 16px; box-shadow: var(--shadow); animation: riseC .45s cubic-bezier(.2, 1.15, .35, 1); touch-action: pan-y; }
.yc-row { display: flex; align-items: center; gap: 12px; }
.yc-totals { flex: 1; font-weight: 800; font-size: .95rem; line-height: 1.3; min-width: 0; }
.yc-totals b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.yc-totals small { display: block; color: var(--ink-soft); font-size: .78rem; }
.yc-head { display: flex; align-items: center; gap: 10px; }
.yc-head h2 { flex: 1; margin: 0; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; }
.yc-now { font-family: var(--f-body); font-size: .72rem; font-weight: 900; background: var(--gold-l); color: #8a5a00; border-radius: 99px; padding: 2px 8px; vertical-align: middle; }
.yc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.yc-stat { background: #fff; border-radius: 14px; padding: 8px 6px; text-align: center; box-shadow: 0 3px 0 #e5eedf; }
.yc-stat b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.yc-stat span { font-size: .72rem; color: var(--ink-soft); font-weight: 800; }
.yc-line { margin: 4px 0 0; text-align: center; font-size: .82rem; color: var(--ink-soft); font-weight: 800; }
.yc-note { margin: 12px 4px 4px; text-align: center; color: var(--ink-soft); font-weight: 800; }
.yc-finds { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.yc-finds span { font-size: .75rem; font-weight: 900; color: var(--ink-soft); width: 100%; text-align: center; }
.yc-finds img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 2px 0 #e5eedf; }
.yc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.yc-actions .btn { flex: 1; max-width: 220px; }
.poster { width: 100%; border-radius: 18px; margin: 10px 0 14px; box-shadow: 0 6px 18px rgba(20, 40, 30, .18); display: block; }
a.btn { text-decoration: none; }
body.in-year .toasts { bottom: calc(var(--safe-b) + 150px); }
@media (max-width: 400px) { .yc-stat b { font-size: 1.2rem; } .year-card { padding: 12px; } .visit-btns .btn-small { padding: 9px 11px; } }
.seg button svg { width: 16px; height: 16px; vertical-align: -3px; }

/* playtest polish */
.toast.has-act { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast-act { border: 0; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 900; border-radius: 12px; padding: 8px 16px; min-height: 44px; min-width: 64px; }
.year-bar .round-small, .yc-head .round-small { width: 44px; height: 44px; font-size: 1.1rem; }
.yc-stat span { font-size: .78rem; }
.year-card.swap { animation: cardswap .32s ease; }
@keyframes cardswap { from { opacity: .35; transform: translate(-50%, 10px); } }

.yc-months { display: flex; gap: 6px; overflow-x: auto; margin: 12px -4px 0; padding: 2px 4px 4px; scrollbar-width: none; touch-action: pan-x; }
.yc-months::-webkit-scrollbar { display: none; }
.yc-m { flex: none; min-width: 48px; min-height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #e5eedf; display: grid; place-items: center; padding: 4px 6px; line-height: 1.05; }
.yc-m b { font-size: .8rem; font-weight: 900; }
.yc-m span { font-size: .72rem; color: var(--ink-soft); font-weight: 800; }
.yc-m.now { background: var(--gold-l); box-shadow: 0 2px 0 #f1dfa6; }
.yc-m.future, .yc-m.empty { opacity: .55; }
.round.new { position: relative; }
.round.new::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px #fff; }
.shop-item.tidy { background: #f2f8ec; }
.shop-item.tidy[aria-disabled="true"] { opacity: .55; }
.shop-item.tidy svg { width: 62px; height: 62px; }

/* how to play */
.guide-watch { width: 100%; border: 0; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 8px 14px 8px 8px; margin: 2px 0 12px; box-shadow: 0 3px 0 #e5eedf; text-align: left; }
.guide-watch img { width: 58px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; flex: none; background: #cfe9ff; }
.guide-watch .gw-t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.guide-watch .gw-t b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.guide-watch .gw-t small { color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
.guide-watch .gw-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; font-size: 1rem; padding-left: 3px; flex: none; box-shadow: 0 3px 0 var(--leaf-d); }
.guide-watch:active { transform: translateY(2px); }
.video-card { display: grid; gap: 12px; justify-items: center; }
.video-card video { height: min(calc(100dvh - 150px), 160vw); aspect-ratio: 9 / 16; max-width: 92vw; border-radius: 22px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.guide { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; touch-action: pan-x pan-y; }
.guide::-webkit-scrollbar { display: none; }
.g-card { flex: none; width: 82%; max-width: 320px; scroll-snap-align: start; background: #fff; border-radius: 18px; padding: 12px 14px 14px; box-shadow: 0 3px 0 #e5eedf; display: grid; gap: 6px; align-content: start; }
.g-art { display: flex; gap: 6px; align-items: flex-end; min-height: 56px; }
.g-art img { width: 52px; height: 52px; object-fit: contain; }
.g-emoji { font-size: 2.2rem; line-height: 1; }
.g-cal svg { width: 52px; height: 52px; }
.g-card b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.g-n { width: 24px; height: 24px; border-radius: 50%; background: var(--leaf-l); color: var(--leaf-d); display: grid; place-items: center; font-family: var(--f-body); font-size: .8rem; font-weight: 900; flex: none; }
.g-card p { margin: 0; font-size: .9rem; line-height: 1.35; color: var(--ink-soft); font-weight: 700; }
.g-card p b { display: inline; font-family: var(--f-body); font-size: inherit; color: var(--ink); font-weight: 900; }
.g-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.g-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(33, 58, 43, .18); transition: background .2s, transform .2s; }
.g-dots i.on { background: var(--leaf); transform: scale(1.25); }
.reveal-card.qs { width: min(440px, 100%); }
.reveal-card.qs .g-card { width: 88%; }

/* dev-only time travel banner (localhost ?dayshift) */
.tt-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 92px); z-index: 60; background: #6a3bd1; color: #fff; font-weight: 900; font-size: .78rem; padding: 6px 12px; border-radius: 99px; pointer-events: none; box-shadow: var(--shadow); }
.verdict.pending { background: var(--paper-2); color: var(--ink-soft); }
input[type=range].untouched::-webkit-slider-thumb { opacity: .55; }
input[type=range].untouched::-moz-range-thumb { opacity: .55; }
.reveal-many { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reveal-many figure { margin: 0; display: grid; justify-items: center; gap: 2px; width: 84px; }
.reveal-many img { width: 76px; height: 76px; object-fit: contain; animation: wobble 2.4s ease-in-out infinite; }
.reveal-many figcaption { font-weight: 800; font-size: .76rem; text-align: center; line-height: 1.15; }

/* ---- audit polish (2026-10-21) ---- */
:focus-visible { outline: 3px solid #213a2b; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(245, 181, 42, .55); }
/* after a tap, focus moved into a new card by code shows no ring (it's for keyboards); a key press brings it back */
html.by-touch :focus-visible { outline: none; box-shadow: none; }
.chip-streak, .focus-pill { min-height: 44px; }
.round { width: 44px; height: 44px; }
.btn-small { min-height: 44px; }
.link { min-height: 44px; padding: 8px 10px; }
.chip-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; display: block; }
.overlay { background: radial-gradient(circle at 50% 42%, rgba(255, 240, 190, .32), rgba(16, 30, 24, .74) 70%); }
.burst p, .burst h2 { text-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.overlay.video-overlay { background: rgba(10, 20, 16, .88); }
/* confetti over a card falls behind it, so the words stay readable */
.petal-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.overlay > :not(.petal-layer) { position: relative; z-index: 1; }
.friend-sub { display: block; font-family: var(--f-body, inherit); font-weight: 800; font-size: .78rem; color: var(--ink-soft); }
/* (section C/F) the big Invite button (your own link, with your friend count), requests sent, and remove's second tap */
.invite-big { display: grid; gap: 2px; justify-items: center; padding: 14px 16px 12px; font-size: 1.15rem; }
.invite-big small { font-family: var(--f-body, inherit); font-weight: 800; font-size: .8rem; opacity: .78; }
.friend-row.out-row { background: #f6f8f2; box-shadow: 0 3px 0 #e8ede2; }
.friend-row.out-row b { font-weight: 800; }
.friend-row .x.sure { color: #b5452f; font-size: .88rem; padding: 0 10px; background: #fdecea; }
/* almanac sections, rare and seasonal finds */
.alm-h { font-family: var(--f-display); font-weight: 600; font-size: 1rem; margin: 16px 2px 8px; display: flex; justify-content: space-between; align-items: baseline; }
.alm-h span { font-family: inherit; font-size: .85rem; color: var(--ink-soft); }
.alm-card .tag { position: absolute; top: 6px; left: 6px; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: #eef3ea; color: #3c5a44; z-index: 1; }
.alm-card .tag.rare { background: linear-gradient(135deg, #ffe08a, #f6b73c); color: #5a3a05; }
.alm-card .tag.season.now { background: #2f8c49; color: #fff; }
.alm-card.shiny { box-shadow: 0 3px 0 #f0d58a, 0 0 0 2px #ffe08a inset; background: linear-gradient(180deg, #fffaf0, #fff); }
.reveal-new.special { background: linear-gradient(180deg, #fff2c2, #fffaf0); box-shadow: 0 0 0 2px #ffd45a inset, 0 0 30px rgba(255, 212, 90, .55); }
.reveal-new.special .ribbon { background: linear-gradient(135deg, #f6b73c, #e98a1a); }
.reveal-item.soon { color: #3d4a8a; }
/* big builds and the ones that unlock with time */
.shop-item { position: relative; }
.shop-item.big { background: linear-gradient(180deg, #fff8e6, #fff); box-shadow: 0 3px 0 #f0d58a; }
.shop-item.locked img { filter: grayscale(.7) opacity(.55); }
.shop-item.locked .cost { color: var(--ink-soft); font-size: .78rem; } /* (round 18) every shop sub-line at 12.5 px or more */
.shop-item .lock { position: absolute; top: 4px; right: 6px; font-size: .8rem; }
.unlock-bar { display: block; width: 70px; height: 5px; border-radius: 9px; background: #eee6d6; overflow: hidden; }
.unlock-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3c9a50, #8fd49a); }
.streak-ms { display: grid; justify-items: center; gap: 0; background: rgba(255, 255, 255, .16); border-radius: 18px; padding: 8px 18px; margin: 6px auto 0; }
.streak-ms .flame { font-size: 1.8rem; line-height: 1; }
.streak-ms b { font-family: var(--f-display); font-size: 1.3rem; }
.streak-ms span:last-child { font-weight: 800; font-size: .85rem; }
.streak-line, .lucky, .soon-line { font-weight: 800; margin: 4px 0 0; }
.soon-line { opacity: .92; font-size: .9rem; }
.milestone .ms-num { font-family: var(--f-display); font-size: 4.2rem; line-height: 1; color: #2f8c49; text-shadow: 0 4px 0 #d8f0dc; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shop-item .cost { font-size: .78rem; }
.alm-card .tag { font-size: .7rem; }

/* offline notice: a real element (screen readers hear it), sitting in the HUD's own flow under the focus pill */
.offline-pill { display: none; margin: 0; background: #4a5290; color: #fff; font-weight: 900; font-size: .8rem; padding: 6px 12px; border-radius: 99px; box-shadow: var(--shadow); pointer-events: none; }
body.offline .offline-pill { display: inline-block; }
.seg button { min-height: 44px; }
.act img.ico { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 2px; }
.choice .big-img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }
.g-art img { width: 54px; height: 54px; object-fit: contain; }
body.building .toasts { bottom: calc(var(--safe-b) + 250px); }
#plantTitle, #visitText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 52vw; }
.dock-side { font-size: .8rem; }
.guest small { font-size: .8rem; }

.recenter { position: fixed; right: 14px; bottom: calc(var(--safe-b) + 96px); z-index: 11; width: 48px; height: 48px; font-size: 1.4rem; font-weight: 900; display: grid; place-items: center; padding: 0; background: var(--paper-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
body.building .recenter { bottom: calc(var(--safe-b) + 250px); }
/* a phone on its side: a slimmer header and dock so the garden gets the room, and cards that scroll */
@media (orientation: landscape) and (max-height: 520px) {
  .hud { padding-top: calc(var(--safe-t) + 6px); gap: 6px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .chip-name { font-size: 1rem; }
  .focus-pill { padding: 5px 12px 5px 8px; font-size: .85rem; }
  .dock { bottom: calc(var(--safe-b) + 6px); width: min(520px, calc(100vw - 40px)); }
  .action { min-height: 52px; padding: 6px 14px; border-radius: 20px; }
  .action b { font-size: 1rem; }
  .action-icons img { width: 30px; height: 30px; }
  .dock-side { width: 52px; height: 52px; border-radius: 18px; }
  .dock-side span { font-size: .64rem; } /* "Almanac" inside the 52 px button */
  .sheet { max-height: 94vh; width: min(620px, 100vw); }
  .reveal-card, .burst, .welcome-card { max-height: 92vh; overflow-y: auto; }
  .build-bar { max-height: 58vh; }
  body.building .toasts, body.building .recenter { bottom: calc(var(--safe-b) + 200px); }
  .toasts { bottom: calc(var(--safe-b) + 70px); }
  .recenter { bottom: calc(var(--safe-b) + 70px); }
}
.ctx-lost { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; }

/* small drawn icons inline with text */
.ico-s { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.streak-ms .flame .ico-s { width: 34px; height: 34px; }
.ms-svg .ico-s { width: 72px; height: 72px; }
.big-svg { display: block; line-height: 0; }
.big-svg svg { width: 64px; height: 64px; display: block; } /* a block, not text on a baseline: both workout cards line up */
.g-svg svg { width: 26px; height: 26px; }
/* narrow phones: the planting bar puts its buttons on a second row so the title reads in full */
@media (max-width: 420px) {
  .plant-bar { flex-wrap: wrap; }
  .plant-bar .plant-text { flex: 1 1 calc(100% - 64px); }
  #plantTitle { max-width: none; white-space: normal; }
  .plant-bar #plantAuto { flex: 1; }
  .visit-bar { gap: 6px; padding-left: 12px; }
  .visit-bar > span:first-child { min-width: 0; flex: 1; }
  #visitText { max-width: 100%; }
  .visit-btns .btn-small { padding-left: 10px; padding-right: 10px; }
}
.visit-btns { display: flex; gap: 6px; flex: none; }
body.visiting .toasts { bottom: calc(var(--safe-b) + 128px); }
.reveal-card.qs .g-card { width: 100%; }
@media (orientation: landscape) and (max-height: 520px) {
  .video-card video { height: calc(100dvh - 112px); }
  .year-card { max-height: 38vh; overflow-y: auto; }
}
.gift-got { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.16); border-radius: 16px; padding: 8px 12px; margin: 6px auto 0; text-align: left; max-width: 340px; }
.gift-got img { width: 48px; height: 48px; object-fit: contain; }
.gift-got b { display: block; }
img[src*="img/ui/"] { filter: drop-shadow(0 4px 5px rgba(40, 30, 20, .18)); }

/* an empty focus: a little shake and a word on what to do */
.field input.shake { animation: shake .36s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.field-tip { margin: 6px 2px 0; color: #a3405f; font-weight: 800; }

/* a phone on its side: the shop becomes a column down the right, so the whole island stays in view on the left */
@media (orientation: landscape) and (max-height: 520px) {
  .build-bar { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: min(318px, 42vw); max-height: none; border-radius: 26px 0 0 26px;
    padding: calc(var(--safe-t) + 10px) max(12px, env(safe-area-inset-right)) calc(var(--safe-b) + 10px) 12px; grid-template-rows: auto 1fr auto; align-content: start;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .18); animation: riseR .35s cubic-bezier(.2, 1.15, .35, 1); }
  .build-head { flex-wrap: wrap; }
  .build-hint { order: 3; flex-basis: 100%; }
  .build-head #buildDone { margin-left: auto; }
  .shop { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; scroll-snap-type: y proximity; align-content: flex-start; min-height: 0; }
  .shop-item { width: calc((100% - 16px) / 3); padding: 4px 4px 6px; }
  .shop-item img, .shop-item.tidy svg { width: 50px; height: 50px; }
  .ghost-row { flex-wrap: wrap; align-self: end; }
  .ghost-row .spacer { display: none; }
  .ghost-row #gPlace { flex: 1 1 100%; }
  body.building .toasts { left: calc((100vw - min(318px, 42vw)) / 2); width: min(56vw, 440px); bottom: calc(var(--safe-b) + 16px); }
  body.building .recenter { right: calc(min(318px, 42vw) + 12px); bottom: calc(var(--safe-b) + 14px); }
  body.building .tip { max-width: 50vw; }
}
@keyframes riseR { from { transform: translateX(100%); } }

/* the morning card's almanac progress, and the card that slides up when a new flower opens */
.alm-progress { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: .85rem; color: var(--ink-soft); }
.alm-progress > i, .fc-bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(33, 58, 43, .1); overflow: hidden; display: block; }
.alm-progress > i > i, .fc-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f6a0b8, #f5b52a); }
.alm-progress b { color: var(--ink); font-variant-numeric: tabular-nums; }
.find-card { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 112px); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px;
  background: var(--paper); border-radius: 22px; padding: 10px 16px 10px 10px; box-shadow: var(--shadow); width: min(340px, calc(100vw - 32px)); pointer-events: none;
  animation: findin .55s cubic-bezier(.2, 1.4, .4, 1); }
.find-card.rare { background: linear-gradient(180deg, #fff6d6, var(--paper)); box-shadow: 0 0 0 3px rgba(245, 181, 42, .55), var(--shadow); }
.find-card img { width: 62px; height: 62px; object-fit: contain; flex: none; animation: wobble 2.4s ease-in-out infinite; }
.find-card span { display: grid; gap: 3px; min-width: 0; flex: 1; }
.find-card small { font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-d); }
.find-card b { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; }
.find-card em { font-style: normal; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.find-card.out { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translate(-50%, 16px); }
@keyframes findin { from { opacity: 0; transform: translate(-50%, 40px) scale(.9); } }
@keyframes findside { from { opacity: 0; transform: translateX(40px) scale(.9); } }
/* the next first-week gift, pictured on the reward card */
.next-gift { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .16); border-radius: 16px; padding: 8px 14px 8px 8px; margin: 4px auto 0; text-align: left; max-width: 340px; }
.next-gift img { width: 54px; height: 54px; object-fit: contain; flex: none; animation: giftbob 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.next-gift b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.next-gift span { font-weight: 800; font-size: .9rem; }
@keyframes giftbob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }

/* friends' names over their islands in the sky: real text, so it stays sharp and readable on a phone */
.sky-tags { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.sky-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; opacity: 0; visibility: hidden;
  background: rgba(255, 253, 246, .92); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1;
  padding: 6px 11px; border-radius: 99px; box-shadow: 0 3px 10px rgba(20, 40, 30, .18); will-change: transform; }
/* (round 19) a real button: the pill is the look, an invisible 44 px box round it the target
   (round 20) the button itself is 44 px tall (a clear border round the pill, which is painted inside it), so the
   tap target is the element's own box; the shadow follows the pill, not the clear border */
button.sky-tag { border: 9.5px solid transparent; background-clip: padding-box; box-shadow: none; filter: drop-shadow(0 3px 5px rgba(20, 40, 30, .2));
  min-height: 44px; pointer-events: auto; cursor: pointer; margin: 0; }
.sky-tag::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(255, 253, 246, .92); }
.sky-tag.hush { opacity: 0 !important; pointer-events: none; transition: opacity .2s; } /* (round 28) under an item's label */
.sky-tag.below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 6px solid rgba(255, 253, 246, .92); }
.sky-tag.night::after { border-top-color: rgba(236, 239, 255, .9); }
.sky-tag.night.below::after { border-top-color: transparent; border-bottom-color: rgba(236, 239, 255, .9); }
.sky-tag:focus-visible { outline: 3px solid #2e7d4f; outline-offset: -6px; }
.sky-tag:active { filter: drop-shadow(0 3px 5px rgba(20, 40, 30, .2)) brightness(.95); }
.sky-tag svg { width: 14px; height: 14px; flex: none; display: none; }
.sky-tag .lit { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #ffc94a; box-shadow: 0 0 0 2px rgba(255, 201, 74, .28), 0 0 8px 2px rgba(255, 190, 60, .55); }
.sky-tag.both .lit { display: none; } /* the beating heart already says you both did */
.sky-tag.both svg { display: block; animation: heartbeat 2.4s ease-in-out infinite; }
@keyframes heartbeat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(.95); } }
/* (round 21) background-color, never the background shorthand: the shorthand resets background-clip, and the
   night pill then painted its clear 9.5 px border too, a fat 44 px slab over the friend's islet */
.sky-tag.night { background-color: rgba(236, 239, 255, .9); color: #1d2752; }
body.in-year .sky-tags, body.visiting .sky-tags { display: none; }

/* a phone on its side: the year's card becomes a column on the right and the title bar sits top left, so the
   farm gets the whole left of the screen instead of a strip between them */
@media (orientation: landscape) and (max-height: 520px) {
  .year-bar { left: calc(var(--safe-l, 0px) + 10px); transform: none; width: auto; max-width: calc(100vw - min(360px, 44vw) - 44px); top: calc(var(--safe-t) + 8px); padding: 6px 8px; animation: none; }
  .year-card { left: auto; right: calc(var(--safe-r, 0px) + 10px); transform: none; top: calc(var(--safe-t) + 8px); bottom: auto; max-height: calc(100vh - var(--safe-t) - var(--safe-b) - 16px);
    width: min(360px, 44vw); max-height: none; overflow-y: auto; animation: riseR .4s cubic-bezier(.2, 1.15, .35, 1); }
  .year-card .yc-row { flex-wrap: wrap; }
  .year-card .yc-row .btn { width: 100%; }
  .year-card.swap { animation: fade .3s ease; }
}
@keyframes riseR { from { opacity: 0; transform: translateX(40px); } }

/* ---- round 9 polish (2026-10-21) ---- */
/* falling petals with no card on screen go behind the top bar and the dock (z 10), never over a button */
.fx.petals-fx { z-index: 9; }
/* the reward card holds its own buttons, so the petals falling behind it never cross one */
.burst-copy .burst-acts { justify-content: center; margin-top: 4px; }
.burst-copy .link { color: #fff; justify-self: center; }
.burst-copy > .btn { justify-self: center; margin-top: 4px; }
/* a toast never peeks out from behind a card */
.toasts { transition: opacity .2s ease; }
body:has(> .overlay:not(.closing)) .toasts { opacity: 0; }
/* the dock's labels read at 13 px */
.dock-side { width: 66px; }
.dock-side span { font-size: 13px; letter-spacing: -.02em; }
@media (max-width: 420px) { .dock-side { width: 64px; } }
/* (round 21) a little wider on a phone on its side: "Almanac" touched its button's edge at 62 px */
@media (orientation: landscape) and (max-height: 520px) { .dock-side { width: 68px; } .dock-side span { font-size: 13px; letter-spacing: -.025em; } }
/* "Golden seed bloomed · +1" stays on one line, or breaks evenly */
.ribbon { text-wrap: balance; }
/* the gift sheet's send button stays put at the bottom, clear of the home indicator */
.sheet-foot { position: sticky; bottom: calc(-1 * (var(--safe-b) + 22px)); margin: 6px -20px calc(-1 * (var(--safe-b) + 22px)); padding: 10px 20px max(16px, calc(var(--safe-b) + 14px));
  background: linear-gradient(180deg, rgba(255, 253, 246, 0), var(--paper) 22%); display: grid; gap: 6px; z-index: 2; }
@media (min-width: 700px) { .sheet-foot { bottom: -24px; margin-bottom: -24px; padding-bottom: 18px; } }
/* the welcome card arrives quickly (a tap on "Start my garden" straight away lands on the button, not on air) */
.welcome-card { animation: cardin .3s cubic-bezier(.2, 1.1, .35, 1); }
.welcome-card.intro { display: grid; gap: 14px; }
.wc-pitch, .wc-cta { display: grid; gap: 14px; min-width: 0; }
@keyframes cardin { from { opacity: 0; transform: translateY(28px); } }
/* a phone on its side: the pitch on the left, the buttons on the right, nothing below the fold */
@media (orientation: landscape) and (max-height: 520px) {
  .welcome { align-items: center; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .welcome-card.intro { width: min(800px, 100%); grid-template-columns: 1.25fr 1fr; align-items: center; gap: 22px; padding: 18px 22px; }
  .welcome-card.intro h1 { font-size: 1.3rem; }
  .welcome-card.intro .brand img { width: 40px; height: 40px; }
  .welcome-card.intro .brand b { font-size: 1.7rem; }
  .welcome-card.intro .rules { gap: 6px; }
  .welcome-card.intro .rule { padding: 3px 10px 3px 4px; }
  .welcome-card.intro .rule img { width: 36px; height: 36px; }
  .welcome-card.intro .wc-pitch { gap: 10px; }
  .welcome-card.auth { width: min(800px, 100%); grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 10px; align-items: start; }
  .welcome-card.auth > .brand, .welcome-card.auth > h1, .welcome-card.auth > p.fine { grid-column: 1; }
  .welcome-card.auth > :not(.brand):not(h1):not(p.fine) { grid-column: 2; }
  .welcome-card.auth > .brand { grid-row: 1; } .welcome-card.auth > h1 { grid-row: 2; }
}
/* Build: the piece in your hand is named first in the hint */
.held-name { color: var(--ink); font-family: var(--f-display); font-weight: 600; }
/* (G) the grid button: a grid icon and its on/off switch */
#gGrid { display: inline-flex; align-items: center; gap: 7px; }
#gGrid .gi { width: 20px; height: 20px; flex: none; opacity: .45; transition: opacity .15s; }
#gGrid[aria-pressed="true"] .gi { opacity: 1; }
#gGrid .sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #c9d6c3; display: inline-block; flex: none; transition: background .15s; }
#gGrid .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
#gGrid[aria-pressed="true"] .sw { background: var(--leaf); }
#gGrid[aria-pressed="true"] .sw::after { transform: translateX(12px); }

/* ---------- loop round 1: FarmVille + Duolingo, the healthy way ---------- */
/* the HUD's second row: today's focus on the left, the petal counter on the right */
.hud-row2 { align-items: center; }
.chip-petals { display: flex; align-items: center; gap: 4px; margin-left: auto; min-height: 44px; padding: 6px 12px 6px 9px; background: linear-gradient(180deg, #fff4f7, #ffe1ea); color: #a3405f; }
.chip-petals svg { width: 20px; height: 20px; }
.chip-petals b, .card-petals b { font-family: var(--f-display); font-size: 1.08rem; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: left; }
.chip-petals.bump, .card-petals.bump, .chip.bump { animation: bumpy .42s cubic-bezier(.2, 1.8, .4, 1); }
/* the streak chip: a living flame and the shields beside the number */
.chip-title { min-width: 0; }
.hud-row:has(.chip-shield:not([hidden])) .chip-name { max-width: 38vw; }
.chip-streak .flame { width: 21px; height: 21px; overflow: visible; transform-origin: 50% 92%; }
.chip-streak .fl-o { fill: var(--fl1, #f08a3c); } .chip-streak .fl-i { fill: var(--fl2, #ffd45a); }
.chip-streak.hot .flame { animation: flicker 1.5s ease-in-out infinite; }
.chip-streak[data-tier="7"] { --fl1: #ff6a1a; --fl2: #ffc23a; }
.chip-streak[data-tier="30"] { --fl1: #ff5fa2; --fl2: #ffd0e6; }
.chip-streak[data-tier="100"] { --fl1: #f2a50c; --fl2: #fff3b0; }
.chip-streak[data-tier="100"] .flame { filter: drop-shadow(0 0 4px rgba(255, 200, 60, .9)); }
.chip-streak[data-tier="365"] .flame { animation: flicker 1.5s ease-in-out infinite, rainbow 5s linear infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 30% { transform: scale(1.07, .95) rotate(3deg); } 55% { transform: scale(.96, 1.06) rotate(-1deg); } 80% { transform: scale(1.03, .98) rotate(1deg); } }
@keyframes rainbow { to { filter: hue-rotate(360deg) drop-shadow(0 0 3px rgba(255, 255, 255, .8)); } }
.chip-shield { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; padding-left: 6px; border-left: 1.5px solid rgba(33, 58, 43, .14); }
.chip-shield[hidden] { display: none; }
.chip-shield svg { width: 16px; height: 16px; }
.chip-shield b { font-size: .92rem !important; color: #2f5d8a !important; }
@media (prefers-reduced-motion: reduce) { .chip-streak .flame { animation: none !important; } }

/* the ritual ring: a badge on the action button's corner, one segment per step, a tick when it's all done */
.action { overflow: visible; }
.action-text { min-width: 0; }
/* the badge sits above the button's corner, clear of the title: the title never runs under it */
.action:has(.ritual) { padding-right: 40px; }
.ritual { position: absolute; top: -22px; right: -6px; width: 34px; height: 34px; border-radius: 50%; background: #fffdf6; box-shadow: 0 3px 0 rgba(20, 60, 35, .25), 0 4px 10px rgba(0, 0, 0, .18); display: grid; place-items: center; pointer-events: none; transition: background .3s ease; }
.ritual svg { width: 32px; height: 32px; }
.ritual circle:not(.sun) { fill: none; stroke: #dfe8d9; stroke-width: 4; stroke-linecap: round; transition: stroke .35s ease; }
.ritual circle.on { stroke: #3c9a50; }
.ritual.evening circle.on { stroke: #6a78d0; }
.ritual .sun { fill: #f5b52a; }
.ritual .moon { fill: #8e98e0; }
.ritual .tick { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw .45s .1s ease-out forwards; }
.ritual.done { background: linear-gradient(180deg, #5fbf6f, #3c9a50); }
.ritual.done.evening { background: linear-gradient(180deg, #7d8ae0, #5a68b8); }
.ritual.done circle { stroke: rgba(255, 255, 255, .55); }
.ritual.bump { animation: bumpy .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (orientation: landscape) and (max-height: 520px) { .ritual { top: -9px; width: 30px; height: 30px; } .ritual svg { width: 28px; height: 28px; } }

/* petals in flight (above cards, so they can fly into a card's counter), and the "+1 · 12/31" chip */
.doob-fx { z-index: 46; }
.doober { position: absolute; left: 0; top: 0; width: 22px; height: 22px; will-change: transform; opacity: 0; filter: drop-shadow(0 2px 2px rgba(120, 30, 60, .25)); }
.doober svg { width: 22px; height: 22px; display: block; }
/* (round 24) the HUD count a "+1" chip is flying to fades out while it lands, and back in counted up */
.fly-wait { opacity: 0 !important; transition: opacity .18s ease; }
.fly-chip { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; background: #fffdf6; color: #2f8c49; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; padding: 5px 12px; border-radius: 99px; box-shadow: 0 3px 0 #cfe3c8, 0 8px 18px rgba(0, 0, 0, .2); }
.float-gain .pips { display: inline-flex; gap: 3px; margin-left: 4px; }
.float-gain .pips i { width: 8px; height: 8px; border-radius: 50%; background: #f3d3de; box-shadow: inset 0 0 0 1.5px #e7aabe; }
.float-gain .pips i.on { background: #59b6f0; box-shadow: none; }
.float-gain .pips.full i { background: #3c9ae0; animation: bumpy .4s cubic-bezier(.2, 1.8, .4, 1); }

/* confetti, disciplined: inside the card (over its background, under its words), themed */
.has-petals { isolation: isolate; }
.has-petals > .petal-layer { z-index: -1; border-radius: inherit; }
.petal.leaf { width: 12px; height: 16px; border-radius: 0 80% 0 80%; }
.petal.star { width: 14px; height: 14px; border-radius: 0; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.petal.snow, .petal.dew { width: 9px; height: 9px; border-radius: 50%; }

/* the reward, one beat at a time */
.staged .beat { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.staged .beat.in { opacity: 1; transform: none; pointer-events: auto; }
.staged .burst-copy { gap: 6px; }
.week { display: grid; justify-items: center; gap: 4px; }
.wk-dots { display: flex; gap: 6px; }
.wk { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); font-style: normal; }
.wk span { position: absolute; top: 28px; font-size: .6rem; font-weight: 900; opacity: .7; letter-spacing: .04em; }
.wk svg { width: 16px; height: 16px; }
.wk.kept { background: #5fbf6f; box-shadow: 0 2px 0 #2f7d3f; }
.wk.kept svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk.shield { background: #dcecfb; box-shadow: 0 2px 0 #9fc3e6; }
.wk.future { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.wk.now { outline: 2.5px solid #ffd45a; outline-offset: 2px; }
.beat.in .wk.now { animation: bumpy .5s .1s cubic-bezier(.2, 1.8, .4, 1) backwards; }
.week small { margin-top: 12px; font-weight: 900; font-size: .82rem; opacity: .9; }
.flame-up { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.flame-up .flame .ico-s { width: 30px; height: 30px; animation: flicker 1.5s ease-in-out infinite; transform-origin: 50% 90%; }
.flame-up b { font-family: var(--f-display); font-size: 1.6rem; font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.flame-up.big { background: rgba(255, 255, 255, .12); border-radius: 18px; padding: 4px 14px; }
.flame-up.big .flame .ico-s { width: 38px; height: 38px; }
.flame-up small { display: block; font-size: .8rem; }
.flame-up.bump { animation: bumpy .5s cubic-bezier(.2, 1.8, .4, 1); }
.petal-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* (round 24) the pill swells away from its "+30 petals", never over it */
.petal-row .card-petals { transform-origin: 100% 50%; }
.card-petals { padding: 5px 12px 5px 8px; box-shadow: 0 3px 0 #f3c3d2; }
.pr-plus { font-family: var(--f-display); font-weight: 600; }
.reveal-card .pr-plus { color: #a3405f; }
.burst .pr-plus { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.staged .loot { min-height: 116px; }
.staged .loot img { width: 108px; height: 108px; }
@media (max-height: 760px) { .staged .loot { min-height: 96px; } .staged .loot img { width: 88px; height: 88px; } .staged .burst-copy p { font-size: .95rem; } .burst h2 { font-size: 1.9rem; } }

/* the stop cue: a goodbye, not a reward */
.cue { justify-items: center; text-align: center; }
.cue h2 { font-size: 1.8rem; }
.cue-mark { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.cue-mark > svg { position: absolute; inset: 0; width: 108px; height: 108px; }
.cue-mark > svg circle { fill: #eaf6e6; stroke: #3c9a50; stroke-width: 4; stroke-dasharray: 170; stroke-dashoffset: 170; animation: draw .7s .15s ease-out forwards; }
.cue-mark > svg path { fill: none; stroke: #3c9a50; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .75s ease-out forwards; }
.cue-mark img, .cue-moon { position: absolute; right: -34px; bottom: -8px; width: 54px; height: 54px; display: grid; place-items: center; object-fit: contain; animation: lootin .6s .9s cubic-bezier(.2, 1.6, .35, 1) backwards; }
.cue-moon svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 3px rgba(40, 50, 110, .35)); }
.cue-moon svg path { fill: #ffe7a0; }
.cue.evening .cue-mark > svg circle { fill: #eceefb; stroke: #5a68b8; }
.cue.evening .cue-mark > svg path { stroke: #5a68b8; }
.btn-calm { background: #5a68b8; box-shadow: 0 4px 0 #343d78; }
.btn-calm:active { box-shadow: 0 1px 0 #343d78; }
.reveal-item.water small { display: block; font-size: .78rem; color: #2f6fa0; }
.reveal-item.water { background: linear-gradient(90deg, #e6f4ff, var(--paper-2)); }
@media (prefers-reduced-motion: reduce) { .staged .beat { transition: none; } .cue-mark *, .ritual .tick { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* tactile 3D everywhere: everything you press has a darker lip and sinks 3 px into it */
.choice { box-shadow: 0 4px 0 #d7e4d0; transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease; }
.choice:active { transform: translateY(3px); box-shadow: 0 1px 0 #d7e4d0; }
.dock-side { box-shadow: 0 4px 0 rgba(33, 58, 43, .16), var(--shadow); }
.dock-side:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(33, 58, 43, .16), var(--shadow); }
.chip:active, .round:active { transform: translateY(2px) scale(.97); }
.toast-act { white-space: nowrap; flex: none; }
/* (round 25) a long toast at phone width: its words on top, the button on its own line under them */
@media (max-width: 420px) {
  .toast.has-act.stack { flex-direction: column; gap: 8px; }
  .toast.has-act.stack .toast-act { align-self: center; }
}
/* a phone on its side: the seeds on the left, the beats on the right, everything on screen without scrolling */
@media (orientation: landscape) and (max-height: 520px) {
  .burst.staged { grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.4fr); max-width: min(780px, 96vw); width: 100%; align-items: center; gap: 14px; max-height: none; overflow: visible; }
  .burst.staged .rays { left: 22%; width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .burst.staged .loot { flex-wrap: wrap; min-height: 0; gap: 8px; }
  .burst.staged .loot img { width: 84px; height: 84px; }
  .burst.staged .burst-copy { width: 100%; max-height: calc(100vh - 24px); overflow-y: auto; padding: 10px 14px; gap: 4px; }
  .burst.staged h2 { font-size: 1.45rem; }
  .burst.staged .burst-copy p { font-size: .88rem; }
  .burst.staged .next-gift, .burst.staged .gift-got { padding: 4px 10px; }
  .burst.staged .next-gift img, .burst.staged .gift-got img { width: 40px; height: 40px; }
  .burst.staged .wk { width: 22px; height: 22px; } .burst.staged .wk span { top: 23px; } .burst.staged .week small { margin-top: 10px; }
  .burst.staged .flame-up b { font-size: 1.3rem; }
  .burst.staged .burst-acts .btn { padding: 8px 16px; min-height: 40px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .burst.staged .burst-copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 16px; row-gap: 6px; }
  .burst.staged .burst-copy > h2, .burst.staged .burst-copy > .beat:not(.flame-up):not(.petal-row) { flex: 1 1 100%; }
  .burst.staged .burst-copy > p, .burst.staged .soon-line { display: none; }
  .burst.staged .beat[data-at="2000"], .burst.staged .beat[data-at="2200"] { flex: 1 1 40%; min-width: 0; }
  .burst.staged .beat[data-at="2000"] p { font-size: .8rem; }
  .burst.staged .acts { display: flex; justify-content: center; align-items: center; gap: 6px; }
  .burst.staged .acts .burst-acts { margin: 0; }
}
/* a big evening (a milestone, a gift and a lucky day at once) scrolls inside the panel; the buttons stay in view */
.staged .burst-copy { max-height: calc(100dvh - 220px); overflow-y: auto; overscroll-behavior: contain; }
.staged .acts { position: sticky; bottom: -14px; margin: 0 -18px -14px; padding: 8px 18px 12px; background: linear-gradient(180deg, rgba(18, 38, 27, 0), rgba(18, 38, 27, .92) 28%); border-radius: 0 0 24px 24px; z-index: 2; }
.staged .beat .lucky, .staged .beat > p { font-size: .92rem; }
@media (orientation: landscape) and (max-height: 520px) { .staged .burst-copy { max-height: calc(100dvh - 24px); } .staged .acts { flex: 1 1 100%; bottom: -10px; margin: 0 -14px -10px; padding: 6px 14px 8px; } }
.staged .acts { justify-self: stretch; align-self: stretch; display: grid; justify-items: center; }
@media (orientation: landscape) and (max-height: 520px) { .staged .acts { display: flex; } }
.burst .buddies { font-size: .92rem; } .buddies .ico-s { vertical-align: -.18em; }

/* ---------- loop round 2 ---------- */
/* A pinch never zooms the page itself (only the garden): every element allows scrolling but not zooming, and the
   HUD, the dock and the bars over the garden allow neither. Scrollable sheets, rows and cards still scroll. */
* { touch-action: pan-x pan-y; }
.hud, .hud *, .dock, .dock *, .plant-bar, .plant-bar *, .visit-bar, .visit-bar *, .visit-acts, .visit-acts *, .year-bar, .year-bar *, .recenter, .toasts, .toast, .tip { touch-action: none; }
/* the streak chip after a break: "Fresh start · best 12", never a bare 0 */
.chip-best:empty { display: none; }
.chip-streak.fresh #streakNum { display: none; }
.chip-best { display: grid; line-height: 1; font-family: var(--f-display); font-size: .92rem; color: var(--ink); white-space: nowrap; }
.chip-best small { font-family: var(--f-body); font-size: .62rem; font-weight: 900; color: var(--leaf-d); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px; }
.chip-streak.fresh .fl-o { fill: #9bd18a; } .chip-streak.fresh .fl-i { fill: #e6f6c8; }
.hud-row .chip-title { flex: 0 1 auto; }
/* garden buddies on a friend's name tag: a drawn sprout and the days in a row you've both shown up */
.sky-tag .tog { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; padding-left: 6px; border-left: 1.5px solid rgba(33, 58, 43, .16); font-variant-numeric: tabular-nums; }
.sky-tag .tog svg, .sky-tag.both .tog svg { display: block; width: 14px; height: 14px; animation: none; }
.shop-item .lock { display: grid; place-items: center; width: 20px; height: 20px; }
.shop-item .lock svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
/* the reward card: a solid deep-green panel (no see-through glass turning the island to mud behind it) that grows
   one beat at a time, instead of an empty box waiting for its words */
.burst-copy { background: linear-gradient(180deg, #24523a, #1b4330); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 0 #12301f, 0 14px 34px rgba(0, 0, 0, .28); }
.staged .beat:not(.in) { display: none; }
.staged .beat.in { animation: beatin .42s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes beatin { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.staged .acts { background: linear-gradient(180deg, rgba(27, 67, 48, 0), #1b4330 28%); }
@media (prefers-reduced-motion: reduce) { .staged .beat.in { animation: none; } }
/* the stop cue: a small goodbye along the bottom, the garden left in full view above it */
.overlay.cue-overlay { place-items: end center; padding: 16px 14px calc(var(--safe-b) + 16px); background: linear-gradient(180deg, rgba(10, 20, 40, 0) 45%, rgba(10, 20, 40, .38) 100%); }
.cue-overlay .reveal-card.cue { grid-template-columns: auto minmax(0, 1fr); align-items: center; text-align: left; justify-items: start; gap: 10px 16px; padding: 16px 18px; width: min(440px, 100%); animation: cuein .55s cubic-bezier(.2, 1.3, .35, 1) both; }
.cue-overlay .cue .cue-mark { width: 72px; height: 72px; }
.cue-overlay .cue .cue-mark > svg { width: 72px; height: 72px; }
.cue-overlay .cue .cue-mark img, .cue-overlay .cue .cue-moon { right: -18px; bottom: -6px; width: 38px; height: 38px; }
.cue-overlay .cue .cue-moon svg { width: 32px; height: 32px; }
.cue-overlay .cue h2 { font-size: 1.45rem; }
.cue-overlay .cue .btn { grid-column: 1 / -1; }
/* (round 21) the bulb tonight's close lit, named on the goodbye card */
.cue-lights { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-weight: 800; font-size: .9rem; color: var(--ink-soft); }
.cue-lights i { width: 10px; height: 13px; border-radius: 50% 50% 45% 45%; flex: none; background: #ffc94a; box-shadow: 0 0 0 2px rgba(255, 201, 74, .28), 0 0 10px 3px rgba(255, 190, 60, .6); animation: cuebulb .8s ease-in-out 3; }
/* (round 25) the card's little bulb beats with the one on the island */
@keyframes cuebulb { 50% { transform: scale(1.45); box-shadow: 0 0 0 3px rgba(255, 201, 74, .35), 0 0 16px 6px rgba(255, 190, 60, .75); } }
@media (prefers-reduced-motion: reduce) { .cue-lights i { animation: none; } }
@keyframes cuein { from { transform: translateY(110%); } }
body:has(> .overlay.cue-overlay:not(.closing)) .hud { opacity: 1; }
/* almanac sets and mastery stars */
.sets { display: grid; gap: 8px; margin-bottom: 6px; }
.set-row { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border-radius: 16px; padding: 8px 12px; }
.set-row.done { background: linear-gradient(90deg, var(--gold-l), var(--paper-2)); }
.set-t { flex: 1; min-width: 0; display: grid; }
.set-t b { font-family: var(--f-display); font-weight: 600; }
.set-t small, .reveal-item small { color: var(--ink-soft); font-weight: 700; font-size: .78rem; }
.set-dots { display: flex; flex: none; }
.set-dots img { width: 30px; height: 30px; object-fit: contain; margin-left: -8px; }
.set-dots img:first-child { margin-left: 0; }
.set-dots img.todo { filter: brightness(0) opacity(.18); }
.set-prize { width: 44px; height: 44px; object-fit: contain; flex: none; }
.set-prize.todo { filter: grayscale(1) opacity(.45); }
.m-ico { width: 38px; height: 38px; object-fit: contain; flex: none; }
.mstars { display: inline-flex; gap: 1px; flex: none; }
.mstars svg { width: 18px; height: 18px; fill: #e3e8df; }
.mstars svg.on { fill: #f5b52a; filter: drop-shadow(0 1px 0 #c98a0a); }
.reveal-item.set img:not(.todo) { width: 40px; height: 40px; }
.reveal-item.set .set-dots img { width: 30px; height: 30px; }
.reveal-item.set > span:not(.set-dots) { flex: 1; min-width: 0; }
.reveal-item.set.got { background: linear-gradient(90deg, var(--gold-l), var(--paper-2)); }
.reveal-item small { display: block; }
/* the garden circle: a shared week's goal, never a race */
.circle-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-weight: 900; font-size: .82rem; width: 100%; }
.circle-line > i { height: 9px; border-radius: 99px; background: rgba(33, 58, 43, .1); overflow: hidden; display: block; }
.circle-line > i > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f6a0b8, #fad54e, #8ec0f0); }
.burst .circle-line { color: #fff; margin: 4px 0; } .burst .circle-line > i { background: rgba(255, 255, 255, .18); }
.circle-box { display: grid; gap: 6px; background: var(--paper-2); border-radius: 16px; padding: 10px 12px; margin: 10px 0 8px; }
/* small phones (320 to 399 px): the fresh-start chip keeps only "best 32", the garden's name keeps some room, and
   the dock's middle button gives way so Build stays on screen */
.hud-row .chip-title { min-width: 92px; }
.action { min-width: 0; }
.dock-side { flex: none; }
@media (max-width: 399px) {
  .chip-best small { display: none; }
  .chip-streak.fresh { padding: 8px 10px; }
  .action { padding: 10px 12px; gap: 8px; }
  .action b { font-size: 1.05rem; }
  .action small { font-size: .8125rem; }
  .action-icons img { width: 34px; height: 34px; }
}

/* ---------- loop round 3 ---------- */
/* Every card fits the screen it's on: the overlay scrolls if it must, the card never grows past the screen, and
   the morning card's "Go see" stays pinned at its foot (Safari's toolbars leave as little as 600 px). */
.overlay { overflow-y: auto; overscroll-behavior: contain; place-items: safe center; }
.reveal-card { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.reveal-foot { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 10px 22px 18px; background: linear-gradient(180deg, rgba(255, 253, 246, 0), var(--paper) 30%); border-radius: 0 0 28px 28px; z-index: 2; display: grid; }
.reveal-rest { display: grid; gap: 8px; }
.reveal-more { justify-self: center; font-weight: 900; color: var(--leaf-d); }
/* the week strip's day letters are readable (11 px), and confetti over a card thins out before the buttons and
   links at its foot, so it never sits behind words you need to read */
.wk span { font-size: .75rem; }
.has-petals > .petal-layer { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 80%); mask-image: linear-gradient(180deg, #000 45%, transparent 80%); }
/* a 320 px phone: the action button keeps its title, the small line under it goes */
@media (max-width: 340px) { .action small { display: none; } .action b { font-size: .92rem; white-space: normal; line-height: 1.05; } .action-text { min-width: 0; } .action { padding: 8px 10px; gap: 6px; } .action-icons img { width: 26px; height: 26px; } .dock-side { width: 54px; } }
/* the sheets you read (the almanac, friends, Me) can be pinch-zoomed by anyone who needs larger text; a pinch on the
   garden, the HUD or the dock still never zooms the page (no maximum-scale, which Android honours for everyone) */
.sheet, .sheet * { touch-action: pan-x pan-y pinch-zoom; }
/* a phone on its side: the "new in your almanac" card sits up at the right, clear of the bloom in the middle */
@media (orientation: landscape) and (max-height: 520px) {
  .find-card { left: auto; right: max(14px, env(safe-area-inset-right)); top: calc(var(--safe-t) + 118px); bottom: auto; transform: none; width: min(320px, 40vw); animation-name: findside; }
  .find-card.out { transform: translateY(-12px); }
}

/* the year farm's month names: crisp chips over each field, never smaller than 12 px */
.year-chips { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.year-chips[hidden] { display: none; }
.ychip { position: absolute; left: 0; top: 0; display: grid; justify-items: center; padding: 3px 9px 4px; border-radius: 12px; background: rgba(255, 253, 246, .94); box-shadow: 0 2px 0 rgba(20, 60, 35, .18), 0 3px 8px rgba(0, 0, 0, .12); color: var(--ink); line-height: 1.05; white-space: nowrap; will-change: transform, opacity; }
.ychip b { font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.ychip small { font-size: 12px; font-weight: 800; color: #4d6657; }
.ychip.now { background: linear-gradient(180deg, #ffe08a, #ffd06a); }
.ychip.now small { color: #6b4a05; }
.ychip.future { background: rgba(255, 253, 246, .66); color: rgba(33, 58, 43, .62); box-shadow: none; }

/* "Go see" and "Show my friends" stay one line each on a 320 px phone */
.reveal-foot .row { flex-wrap: nowrap; gap: 8px; }
.reveal-foot .btn { white-space: nowrap; }
@media (max-width: 359px) { .reveal-foot .row .btn { padding-inline: 14px; font-size: .95rem; } }

/* ---------- loop round 13: the dock button and the title chip always fit their words ---------- */
/* The gold button shows at most two pouch pictures and a "×8" badge, a title that shrinks with the screen (and
   ends in "…" rather than ever running out of the button), and one short line under it. The ritual badge sits
   above the corner, so the words only keep a little room from the right edge. */
.action:has(.ritual) { padding-right: 14px; }
.action-icons { flex: none; align-items: center; position: relative; }
.action-icons:has(.action-n) { margin-right: 6px; }
.action-icons img { margin-left: -10px; }
.action-icons img:first-child { margin-left: 0; }
.action-n { position: absolute; right: -9px; bottom: -5px; min-width: 24px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fffdf6; color: #6b4a05;
  font-weight: 900; font-size: .74rem; line-height: 20px; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums; position: relative; }
.action-text { flex: 0 1 auto; min-width: 0; }
.action b, .action small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .dock { gap: 8px; } .action b { font-size: clamp(14px, 4.2vw, 16.8px); } .action small { font-size: .8125rem; letter-spacing: -.005em; } } /* (round 19) 13 px */
/* a 320 px phone: the title may take two lines (never more), and the small line goes */
@media (max-width: 340px) {
  .action b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .action-n { min-width: 22px; height: 18px; line-height: 18px; font-size: .7rem; right: -7px; }
  .action-icons img { width: 32px; height: 32px; }
  .action-icons:has(.action-n) img + img { display: none; } /* one picture and its count */
}
/* the title chip takes whatever room the streak chip doesn't need: the streak chip never grows or shrinks, and
   the garden's name and its line under it share the rest (each ends in "…" only if it truly has to) */
.hud-row .chip-title { flex: 1 1 auto; min-width: 0; max-width: max-content; grid-template-columns: minmax(0, 1fr); }
.hud-right { flex: none; }
.chip-name, .chip-sub { max-width: 100%; }
.hud-row:has(.chip-shield:not([hidden])) .chip-name { max-width: 100%; }
/* a phone (under 400 px): a little less padding round the chips and a touch smaller type, so "Ivy's garden" and
   "Oct · 0/31 flowers" fit whole beside a "Day one" or "Fresh start" chip */
@media (max-width: 399px) {
  .hud-row { gap: 8px; }
  .hud-right { gap: 6px; }
  .hud-row .chip-title { padding: 8px 11px; }
  .chip-name { font-size: 1.04rem; }
  .chip-sub { font-size: .8125rem; letter-spacing: 0; } /* (round 18) 12.6 px: the chip's second line read small at 12.2 (round 19: 13 px) */
  .chip-streak.fresh { padding: 8px 8px; }
}
/* a 320 px phone: short titles now fit on one line, so the small line comes back (smaller), and a fresh-start
   chip shows just its green sprout-flame (its words are in its label) so the garden's name has room */
@media (max-width: 340px) {
  .action small { display: block; font-size: .7rem; letter-spacing: -.01em; }
  .action b { line-height: 1.15; }
  .chip-streak.fresh .chip-best { display: none; }
  .chip-streak.fresh { min-width: 44px; justify-content: center; }
}
/* reduced motion: every pouch picture on the reward card is there at once (the third, often the acorn, used to
   wait half a second behind its delay) */
@media (prefers-reduced-motion: reduce) { .loot figure, .loot figure:nth-child(n) { animation-delay: 0s !important; } }
/* the free daily cutting in the gift sheet */
.shop-item.free { background: linear-gradient(180deg, #f3fbe9, #e3f4d2); }
.shop-item.free .cost { color: var(--leaf-d); font-weight: 900; }
/* the how-to video: Close sits clearly below the frame, never over its bottom edge (the video itself is unchanged) */
.video-card { grid-template-rows: auto auto; padding-bottom: calc(var(--safe-b) + 8px); }
.video-card video { height: min(calc(100dvh - 176px), 160vw); width: auto; max-width: 92vw; object-fit: contain; display: block; }
.video-card #vClose { position: relative; z-index: 1; margin-top: 2px; }
@media (orientation: landscape) and (max-height: 520px) { .video-card video { height: calc(100dvh - 118px); } }

/* ---------- loop round 14: the dock button and the HUD chips, measured at 320, 375 and 393 px ---------- */
/* A fresh-start streak chip is short and the same everywhere: "Fresh" with "best 32" under it (or "Day one"), so
   the garden's name and its month line always fit whole beside it. */
.chip-best small { margin: 1px 0 0; order: 2; text-transform: none; font-size: .75rem; letter-spacing: 0; color: var(--leaf-d); } /* (round 21) 12 px, was 10.2 */
.chip-best { justify-items: start; }
@media (max-width: 399px) { .chip-best small { display: block; } .chip-streak.fresh { padding: 8px 9px 8px 8px; gap: 4px; } }
/* the gold button: a title that never runs out (one line, "…" only as a last resort), one line under it, at most two
   pictures and the "×N" badge, and everything allowed to shrink (min-width: 0) before anything overflows */
.action-text { display: grid; min-width: 0; flex: 0 1 auto; text-align: left; }
.action b, .action small { min-width: 0; max-width: 100%; }
/* a golden seed on the gold button gets a soft cream disc behind it, so it doesn't melt into the gold */
.action.gold .action-icons img.k-golden { background: radial-gradient(circle, rgba(255, 252, 238, .95) 0 54%, rgba(255, 252, 238, 0) 72%); border-radius: 50%; filter: drop-shadow(0 0 1px rgba(110, 70, 0, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
/* a phone: with a "×N" badge the second picture tucks well behind the first, so "Plant all 20" keeps its room */
@media (max-width: 399px) {
  .action-icons:has(.action-n) img + img { margin-left: -22px; }
  .action-icons img { width: 32px; height: 32px; }
}
@media (max-width: 340px) { .action small { font-size: .66rem; letter-spacing: -.015em; } }
/* the "×N" badge sits on the picture's lower right corner (it used to take its own room beside the pictures) */
.action-icons:has(.action-n) { margin-right: 12px; }
.action-n { position: absolute; right: -14px; bottom: -6px; z-index: 1; }
@media (max-width: 340px) { .action-n { right: -12px; } }
/* a sheet's title takes focus when it opens (for keyboards and screen readers); it never shows a ring for a tap */
.sheet h2[tabindex="-1"]:focus { outline: none; }
.sheet h2[tabindex="-1"]:focus-visible { outline: 3px solid rgba(47, 143, 78, .45); outline-offset: 4px; border-radius: 8px; }
/* a phone on its side: the "how much social media" step in two columns (the seed, the time and its verdict on the
   left; the slider, the ±5 buttons, the hint and Next on the right), so Next is on screen without a scroll */
@media (orientation: landscape) and (max-height: 520px) {
  #sheetBody[data-ck="social"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 22px; row-gap: 6px; align-items: center;
    grid-template-areas: "steps steps" "title title" "lead lead" "dial range" "dial nudge" "dial hint" "dial next"; }
  #sheetBody[data-ck="social"] > .steps { grid-area: steps; margin-bottom: 2px; }
  #sheetBody[data-ck="social"] > h2 { grid-area: title; margin: 0; font-size: 1.35rem; }
  #sheetBody[data-ck="social"] > .lead { grid-area: lead; margin: 0; font-size: .9rem; }
  #sheetBody[data-ck="social"] > .dial { grid-area: dial; padding: 0; gap: 2px; }
  #sheetBody[data-ck="social"] .dial-seed { width: 54px; height: 54px; }
  #sheetBody[data-ck="social"] .dial-time { font-size: 2.3rem; }
  #sheetBody[data-ck="social"] .verdict { padding: 6px 10px; font-size: .84rem; }
  #sheetBody[data-ck="social"] .verdict b { font-size: .98rem; }
  #sheetBody[data-ck="social"] > .range-wrap { grid-area: range; padding-top: 8px; }
  #sheetBody[data-ck="social"] > .nudge { grid-area: nudge; }
  #sheetBody[data-ck="social"] > .hint { grid-area: hint; padding: 6px 12px; font-size: .78rem; }
  #sheetBody[data-ck="social"] > #next { grid-area: next; margin: 2px 0 0; }
}
/* the year farm's chips are one short line ("Jul · 24 flowers"): two stacked lines covered the top of each field */
.ychip { display: flex; align-items: baseline; gap: 5px; padding: 1px 8px 2px; }
/* (round 25) a little smaller, so a chip sits in its own tile's top margin instead of over the tile above */
.ychip { padding: 0 7px 1px; border-radius: 10px; } .ychip b { font-size: 13px; }
.ychip small::before { content: "·"; margin-right: 5px; color: inherit; opacity: .7; }
.ychip small::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 3px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23f08aa8'%3E%3Ccircle cx='10' cy='5' r='4'/%3E%3Ccircle cx='15' cy='9' r='4'/%3E%3Ccircle cx='13' cy='15' r='4'/%3E%3Ccircle cx='7' cy='15' r='4'/%3E%3Ccircle cx='5' cy='9' r='4'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.5' r='3' fill='%23f5c443'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the avatar's letter in the rounded body face: DynaPuff's "I" read like a pill or a zero */
.avatar { font-family: var(--f-body); font-weight: 900; font-size: 1.12rem; letter-spacing: 0; }

/* ---------- loop round 15 ---------- */
/* the reward card fits a 375 x 812 phone with every card showing: two or more gift/goal cards in one evening sit
   compact (a small picture, one bold line and one short line), and the "Tomorrow morning" teaser rides in the pinned
   foot right above Plant now, on its own clear line, never behind the buttons */
.staged .beat.compact .gift-got, .staged .beat.compact .next-gift { padding: 5px 12px 5px 6px; margin-top: 4px; gap: 8px; min-height: 56px; }
.staged .beat.compact .gift-got img, .staged .beat.compact .next-gift img { width: 42px; height: 42px; }
.staged .beat.compact .gift-got b, .staged .beat.compact .next-gift b { font-size: .95rem; line-height: 1.15; }
.staged .beat.compact .gift-got span, .staged .beat.compact .next-gift span { font-size: .8rem; line-height: 1.2; }
.staged .beat.compact > p, .staged .beat.compact .lucky { font-size: .86rem; }
.staged .acts .soon-line, .burst .beat > .soon-line { margin: 0 0 6px; font-size: .9rem; font-weight: 900; color: #ffe7a0; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.staged .acts { background: linear-gradient(180deg, rgba(27, 67, 48, 0), #1b4330 22%); }
@media (orientation: landscape) and (max-height: 520px) {
  .burst.staged .acts .soon-line { display: block; flex: 1 1 100%; margin: 0 0 2px; font-size: .82rem; text-align: center; }
  .staged .acts { flex-wrap: wrap; }
}
/* the week strip's day letters at 13 px (they were 12) */
.wk span { font-size: 13px; opacity: .8; }
/* the garden circle's bar keeps the card's full width when it is the only thing on its line */
.staged .beat:has(> .circle-line) { justify-self: stretch; }
/* a visitor row with a gift shows the gift's own little picture (a cutting shows its sprig), and a watering its drop */
.guest { align-items: center; }
.guest > div { flex: 1 1 auto; }
.guest-gift { flex: none; width: 46px; height: 46px; object-fit: contain; margin: -4px -4px -4px 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.guest-gift.drop { width: 20px; height: 20px; margin: 6px 12px 0 0; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: radial-gradient(circle at 40% 62%, #e8f6ff 0 16%, #8ec0f0 48%, #4b8fd0 100%); filter: drop-shadow(0 2px 2px rgba(40, 90, 140, .3)); }
/* the quick start fades in where it stands (no rise), so Skip and Next are under your finger from the first frame */
.reveal-card.qs { animation: fade .22s ease; }
/* next month's chip on the year farm: "Nov · in 9 days", without the little flower (nothing has grown there yet) */
.ychip.future small::after { display: none; }
.ychip.future small { color: inherit; }
/* the streak count on the reward card in the same plain, rounded numerals as its label (DynaPuff's "1" read as a 7) */
.flame-up b { font-family: var(--f-body); font-weight: 900; }

/* (round 16) friend requests and visitors rise from the bottom over a light scrim, with the garden in view above them */
.overlay.social-overlay { place-items: end center; padding: 16px 14px calc(var(--safe-b) + 16px); background: linear-gradient(180deg, rgba(16, 30, 24, 0) 30%, rgba(16, 30, 24, .45) 100%); }
.social-overlay .reveal-card { width: min(440px, 100%); max-height: calc(100dvh - 120px); animation: cuein .5s cubic-bezier(.2, 1.2, .35, 1) both; }
@media (orientation: landscape) and (max-height: 500px) {
  .overlay.social-overlay { place-items: center end; padding: 12px calc(var(--safe-r, 0px) + 16px) 12px 12px; background: linear-gradient(90deg, rgba(16, 30, 24, 0) 40%, rgba(16, 30, 24, .45) 100%); }
  .social-overlay .reveal-card { width: min(380px, 52vw); max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) { .social-overlay .reveal-card { animation: none; } }
/* (round 16) the reward card's gift rows (the pumpkins, "1 more check-in") share one width and one left edge: each
   used to shrink to its own words, so the second sat 14 px further in than the first */
.burst-copy > .beat:has(> .gift-got, > .next-gift) { justify-self: stretch; display: grid; justify-items: center; }
.burst-copy .gift-got, .burst-copy .next-gift { box-sizing: border-box; width: 100%; max-width: 340px; }
/* (round 16) a toast at home floats clear of the ritual ring on the gold button's corner (they touched) */
@media (orientation: portrait), (min-height: 521px) { body:not(.building):not(.visiting):not(.in-year) .toasts { bottom: calc(var(--safe-b) + 122px); } }
/* (round 17) the dewdrop line under "Bo watered your garden." reads as its own sentence, not a run-on */
.guest b .sub-line { display: block; margin-top: 1px; font-weight: 700; }
/* (round 17) the evening card's "next thing" row can be a set in progress or a mastery star, not only a gift */
.next-gift .set-dots img { width: 30px; height: 30px; animation: none; }
.next-gift .set-dots img:not(.todo) { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.next-gift b .mstars { display: inline-flex; vertical-align: -2px; }
.next-gift b .mstars svg, .next-gift b svg { width: 15px; height: 15px; }
/* (round 17) the how-to video's Close keeps a clear 14 px under the frame at every size, over a darker backdrop
   (the profile sheet behind no longer shows through around it) */
.overlay.video-overlay { background: rgba(10, 20, 16, .95); }
.video-card { gap: 14px; }
.video-card video { height: min(calc(100dvh - 190px), 160vw); }
@media (orientation: landscape) and (max-height: 520px) { .video-card video { height: calc(100dvh - 128px); } }
/* (round 17) the shop's sub-lines ("Set reward", "Together gift", locked counts) read at 12.5 px or more */
.shop-item .cost, .shop-item.mine .cost, .shop-item.locked .cost { font-size: max(.78rem, 12.5px); }
.shop-item.mine .cost { max-width: 92px; }
/* (round 17) the month-end card's bouquet: the month's flowers, rising in one after another */
.month-bouquet { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin: 4px 0 2px; max-width: 100%; min-width: 0; }
.month-bouquet span { position: relative; display: grid; justify-items: center; animation: bouquet-in .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
.month-bouquet img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .18)); }
.month-bouquet b { margin-top: -6px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper, #fffdf6); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); font-size: .78rem; text-align: center; }
@keyframes bouquet-in { from { opacity: 0; transform: translateY(12px) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .month-bouquet span { animation: none; } }
.month-bouquet .more { align-self: end; margin-bottom: 2px; }
.month-bouquet .more b { margin-top: 0; }
/* (round 17) on a phone on its side the quick start fits whole, Skip and Next included (Next sat below the fold) */
@media (orientation: landscape) and (max-height: 520px) {
  .reveal-card.qs { padding-top: 14px; padding-bottom: 12px; gap: 6px; width: min(560px, 100%); }
  .reveal-card.qs h2 { font-size: 1.35rem; margin: 0; }
  .reveal-card.qs > p.muted { display: none; }
  .reveal-card.qs .g-card { padding: 8px 12px 10px; gap: 4px; }
  .reveal-card.qs .g-art { min-height: 38px; }
  .reveal-card.qs .g-art img { width: 38px; height: 38px; }
  .reveal-card.qs .g-dots { margin: 2px 0; }
}

/* (round 18) on a phone held upright the shop is a grid of four, two rows tall, scrolling down (a 22-piece strip
   scrolled sideways forever); the island stays in view above it */
@media (orientation: portrait) and (max-width: 560px) {
  .shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: hidden; overflow-y: auto; touch-action: pan-y;
    scroll-snap-type: y proximity; max-height: min(326px, 40vh); padding: 2px 2px 8px; } /* (round 24) three rows on a 375 x 812 phone (228 px showed two) */
  .shop-item { width: auto; min-width: 0; padding: 5px 4px 7px; }
  .shop-item img, .shop-item.tidy svg { width: 52px; height: 52px; }
  .shop-item.mine .cost { max-width: 100%; }
}

/* (round 18) the soft veil the trip to a friend's garden passes through (see veil() in main.js) */
#travelVeil { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .26s ease; }
#travelVeil.on { opacity: 1; }
/* (round 21) with a still of the swoop's last frame: it fills the screen, and carries on diving in as it melts */
#travelVeil canvas { display: block; width: 100%; height: 100%; transform-origin: 50% 45%; transition: transform var(--veil-ms, .5s) cubic-bezier(.4, 0, .6, 1); }
#travelVeil.snap:not(.on) canvas { transform: scale(1.18); }

/* (round 20) the quick start fades up in place instead of springing from below, so a tap on Skip while it arrives
   lands on Skip (taps in its first ~100 ms hit where the button was a moment later) */
.reveal-card.qs { animation: qsin .28s ease-out both; }
@keyframes qsin { from { opacity: 0; transform: translateY(6px); } }
body.leaving .sky-tags { opacity: 0; }

/* (section A) the check-in's "What did you do today?" chips: a 3D icon each, pick none, one or several */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
.act-chip { border: 3px solid transparent; border-radius: 18px; background: var(--paper-2); padding: 8px 4px 9px; display: grid; justify-items: center; gap: 2px; font-weight: 800; font-size: .84rem; line-height: 1.15; min-height: 92px; box-shadow: 0 4px 0 #d7e4d0; transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease, background .15s ease; color: var(--ink); }
.act-chip img { width: 50px; height: 50px; object-fit: contain; pointer-events: none; }
.act-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #d7e4d0; }
.act-chip[aria-pressed=true] { border-color: var(--leaf); background: #eaf7e6; box-shadow: 0 4px 0 #b9dcae; }
.act-chip[aria-pressed=true] img { transform: scale(1.08); }
.act-hint { margin: 10px 2px 4px; min-height: 2.4em; color: var(--ink-soft); font-size: .9rem; font-weight: 700; text-align: center; }
@media (orientation: landscape) and (max-height: 520px) { .act-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .act-chip { min-height: 78px; font-size: .74rem; } .act-chip img { width: 40px; height: 40px; } }
/* the almanac tag of an activity strain: its activity's own little icon */
.alm-card .tag.act { display: inline-flex; align-items: center; gap: 3px; background: #eef1ff; color: #3b4677; padding-left: 3px; }
.alm-card .tag.act img { width: 16px; height: 16px; aspect-ratio: auto; }
.alm-card.gold.shiny { box-shadow: 0 3px 0 #ecc35a, 0 0 0 2px #ffd36e inset; background: linear-gradient(180deg, #fff3cf, #fff); }
/* customize a bloomed strain: three palettes */
.pal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.pal-chip { border: 3px solid transparent; border-radius: 20px; background: var(--paper-2); padding: 8px 6px 10px; display: grid; justify-items: center; gap: 4px; font-weight: 800; font-size: .86rem; color: var(--ink); box-shadow: 0 4px 0 #d7e4d0; transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease; }
.pal-chip img { width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.pal-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #d7e4d0; }
.pal-chip[aria-pressed=true] { border-color: var(--leaf); background: #eaf7e6; }
.pal-dots { display: flex; gap: 4px; }
.pal-dots b { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }

/* (section B) the evening reflection: a soft paper box, private, never shown to friends */
.reflect-field { position: relative; }
.field textarea.reflect-in { resize: none; min-height: 118px; line-height: 1.45; font: inherit; font-weight: 700; background: #fffdf3; border-color: #efe3c2; }
.field textarea.reflect-in::placeholder { color: #a7b3a8; font-weight: 600; }
.field textarea.reflect-in:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245, 181, 42, .16); }
.reflect-count { position: absolute; right: 12px; bottom: 9px; font-size: .72rem; font-weight: 900; color: var(--ink-soft); pointer-events: none; }
.reflect-priv { margin: 8px 2px 14px; display: flex; gap: 6px; align-items: center; }
.reflect-priv .ico-s, .yc-reflect .ico-s, .note-list .ico-s, .sheet .lead .ico-s, #promptTip .ico-s { width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
.day .note-dot { position: absolute; left: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px #fff; }
.day-note { margin: 8px 0 0; padding: 9px 11px; background: #fffdf3; border-radius: 12px; border: 1.5px solid #efe3c2; color: var(--ink); font-weight: 700; display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.day-note .ico-s { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.day-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.yc-reflect { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.yc-reflect .btn { flex: 1 1 auto; max-width: 260px; display: inline-flex; gap: 5px; align-items: center; justify-content: center; white-space: nowrap; font-size: .86rem; padding: 9px 10px; }
@media (max-width: 400px) { .yc-reflect .btn { max-width: none; } }
.yc-count { background: var(--gold-l); color: var(--gold-d); border-radius: 99px; padding: 0 7px; font-size: .78rem; font-weight: 900; }
.note-list { display: grid; gap: 8px; }
.note-item { text-align: left; border: 1.5px solid #efe3c2; background: #fffdf3; border-radius: 14px; padding: 10px 12px; display: grid; gap: 3px; color: var(--ink); font: inherit; font-weight: 700; overflow-wrap: anywhere; }
.note-item b { font-size: .8rem; color: var(--gold-d); font-weight: 900; }
.insight { background: #fffdf3; border: 1.5px solid #efe3c2; border-radius: 16px; padding: 4px 14px; line-height: 1.5; overflow-wrap: anywhere; }
.insight p, .insight ul { margin: 10px 0; }
.insight ul { padding-left: 1.2em; }
.insight li { margin: 4px 0; }
.spin { display: inline-block; width: 1em; height: 1em; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; margin-right: 8px; vertical-align: -.15em; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* ---------- feedback for the Bloomday team (section D) ---------- */
.fb-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fb-face { border: 0; background: #fff; border-radius: 16px; padding: 8px 2px 6px; display: grid; justify-items: center; gap: 3px; min-height: 64px;
  box-shadow: 0 3px 0 #e5eedf; color: var(--ink-soft); font-weight: 800; font-size: .68rem; transition: transform .15s ease, box-shadow .15s ease; }
.fb-face svg { width: 34px; height: 34px; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1); }
.fb-face span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fb-face:active { transform: translateY(2px); box-shadow: 0 1px 0 #e5eedf; }
.fb-face[aria-checked=true] { background: var(--leaf-l); color: var(--leaf-d); box-shadow: 0 3px 0 #b9dcb1, inset 0 0 0 2px var(--leaf); }
.fb-face[aria-checked=true] svg { transform: scale(1.14); }
.fb-card textarea { resize: none; min-height: 84px; }
.fb-open { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fb-open svg { width: 26px; height: 26px; flex: none; }
.team-av { background: var(--leaf-l); overflow: hidden; }
.team-av img { width: 30px; height: 30px; object-fit: contain; }
.guest.team q { white-space: pre-line; font-style: normal; }
/* (section E) on a phone on its side the feedback card fits whole, Send included (it sat below the fold) */
@media (orientation: landscape) and (max-height: 520px) {
  .reveal-card.fb-card { width: min(560px, 100%); padding: 14px 18px 12px; gap: 8px; }
  .social-overlay .reveal-card.fb-card { width: min(460px, 56vw); }
  .reveal-card.fb-card h2 { font-size: 1.35rem; margin: 0; }
  .reveal-card.fb-card > p.muted { font-size: .85rem; line-height: 1.3; }
  .fb-card .fb-face { min-height: 0; padding: 5px 2px 4px; }
  .fb-card .fb-face svg { width: 28px; height: 28px; }
  .fb-card textarea { min-height: 50px; }
}

/* (round 22) Build's toasts dock just above the shop sheet (its height is measured into --build-h), never over its
   header or Done; on a phone on its side the sheet is a side panel and they keep their own spot beside it */
@media (orientation: portrait), (min-height: 521px) {
  body.building .toasts { bottom: calc(var(--build-h, 250px) + 10px); }
  body.building .recenter { bottom: calc(var(--build-h, 250px) + 10px); }
}
/* (round 22) the recentre button waits until the welcome card has gone (it peeked out from behind it) */
body:has(> #welcome:not([hidden])) .recenter { display: none; }

/* (round 23) a hyphenated word stays whole ("Golden all-rounder!" broke as "all-/rounder!" at 375) */
.nobr { white-space: nowrap; }
.next-why { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
.next-why .link { font-size: inherit; padding: 6px 2px; min-height: 44px; }
/* (round 26) the quick start's cards are all as tall as the tallest one, so each centres its picture and words in
   that height (the short ones were half empty white under their text), with a bigger picture on top */
@media not ((orientation: landscape) and (max-height: 520px)) {
  .reveal-card.qs .g-card { align-content: center; justify-items: center; text-align: center; }
  .reveal-card.qs .g-card b { justify-content: center; }
  .reveal-card.qs .g-art { justify-content: center; min-height: 66px; }
  .reveal-card.qs .g-art img { width: 64px; height: 64px; }
}
/* (round 27) upright, the welcome card is a little more compact, so the sample garden's blooms get a real strip of
   screen above it (it took three quarters of a 375 x 812 phone, and only brown beds showed over it) */
@media (orientation: portrait) {
  .welcome-card.intro { padding: 18px 18px 14px; gap: 10px; }
  .welcome-card.intro .wc-pitch, .welcome-card.intro .wc-cta { gap: 10px; }
  .welcome-card.intro .brand img { width: 40px; height: 40px; }
  .welcome-card.intro .brand b { font-size: 1.8rem; }
  .welcome-card.intro h1 { font-size: 1.36rem; }
  .welcome-card.intro .rules { gap: 6px; }
  .welcome-card.intro .rule { padding: 4px 10px 4px 4px; gap: 10px; }
  .welcome-card.intro .rule img { width: 38px; height: 38px; }
  .welcome-card.intro .rule span { line-height: 1.3; display: block; }
  .welcome-card.intro .fine { margin: 0; }
}
/* the evening card's one-time "How's Bloomday going?" is a quiet line, not another button */
.fb-link { font-size: .86rem; opacity: .8; justify-self: center; }