/* css/buildings.css - houses, cellar, mini-games, card uses, fishing v1, requests, talk card, HUD, shop scene, town life, light-theme touch-ups.
   The CSS files are one stylesheet cut into pieces in cascade order (index.html links them in this order): a later rule
   overrides an earlier one. Append new rules to latest.css unless you know nothing later overrides them. */
/* ===== Houses and the cellar ===== */
body.in-scene .screen { position: relative; overflow: hidden; }
#sceneView { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; overflow-y: auto; }
#sceneView.hidden { display: none !important; }
.sc-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.sc-head b { font-size: 1.05rem; font-weight: 600; }
.sc-stage { position: relative; height: 190px; border-radius: 20px; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 2px 12px rgba(0,0,0,0.12); background: linear-gradient(var(--sc-wall) 0 60%, var(--sc-floor) 60% 100%); }
.sc-stage.memory-stage { flex: 1 1 auto; height: auto; min-height: 320px; }
.sc-stage::before { content: ''; position: absolute; left: 12%; top: 16%; width: 58px; height: 64px; border-radius: 30px 30px 6px 6px; background: var(--sc-win); box-shadow: 0 0 0 5px rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.06); }
.sc-stage::after { content: ''; position: absolute; right: 10%; top: 26%; width: 92px; height: 12px; border-radius: 4px; background: rgba(0,0,0,0.16); box-shadow: 0 30px 0 rgba(0,0,0,0.16); }
.sc-rug { position: absolute; left: 50%; bottom: 9%; width: 62%; height: 22%; transform: translateX(-50%); border-radius: 50%; background: var(--sc-rug); opacity: 0.85; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.28); }
.sc-who { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); font-size: 4.1rem; line-height: 1; text-shadow: 0 6px 4px rgba(0,0,0,0.25); animation: idle 2.8s ease-in-out infinite; }
.sc-pips { display: flex; justify-content: center; gap: 8px; min-height: 12px; }
.sc-pips .pip { width: 12px; height: 12px; border-radius: 50%; background: var(--stone-edge); }
.sc-pips .pip.now { background: var(--water-glow); box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
.sc-pips .pip.done { background: var(--water); }
.sc-stage.is-home::after { display: none; }
.home-shelf { position: absolute; right: 5%; top: 5%; width: 40%; display: flex; flex-direction: column; gap: 4px; z-index: 2; pointer-events: none; }
.home-shelf .hs-frames { display: flex; gap: 6px; justify-content: center; min-height: 26px; }
.home-shelf .hs-frame { width: 24px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; box-shadow: 0 0 0 2px var(--c-orange-35), 0 2px 4px rgba(0,0,0,0.4); }
.home-shelf .hs-shelf { display: flex; gap: 4px; justify-content: center; align-items: flex-end; min-height: 26px; padding: 0 6px 2px; border-bottom: 5px solid var(--c-orange-35); font-size: 1.15rem; line-height: 1; }
.home-shelf .hs-shelf small { font-size: 0.55rem; color: rgba(255,255,255,0.45); font-style: italic; }
.ent.companion { transition: left 180ms ease-out, top 180ms ease-out; }
.ent.companion > span { font-size: calc(var(--t) * 0.42); animation: spirit-drift 2.6s ease-in-out infinite; text-shadow: 0 0 6px rgba(190,230,255,0.9); }
.ent.bug > span { font-size: calc(var(--t) * 0.38); animation: bug-hover 2.4s ease-in-out infinite; text-shadow: 0 0 6px rgba(255,240,150,0.95); }
.ent.bug.legendary > span { font-size: calc(var(--t) * 0.5); text-shadow: 0 0 10px rgba(255,220,120,1); }
@keyframes bug-hover { 0%,100% { transform: translate(0,0); } 25% { transform: translate(4px,-5px); } 50% { transform: translate(-2px,-8px); } 75% { transform: translate(-5px,-3px); } }
.ent.vendor > span { font-size: calc(var(--t) * 0.55); text-shadow: 0 0 10px rgba(255,190,90,0.95); animation: idle 2.6s ease-in-out infinite; }
.ent.vendor::before { content: '🏮'; position: absolute; top: -14%; right: 4%; font-size: calc(var(--t) * 0.3); animation: bob 2s ease-in-out infinite; }
.town-view.is-night .ent.decoration.glowy > span { text-shadow: 0 0 8px rgba(255,225,140,1); }
.ent.mail-flag > span { font-size: calc(var(--t) * 0.45); animation: bob 1.4s ease-in-out infinite; text-shadow: 0 2px 3px rgba(0,0,0,0.5); }
.sc-btn small { opacity: 0.75; font-size: 0.72em; }
/* ---------- house mini-games ---------- */
.sc-stage.mini-stage { flex: 1 1 auto; height: auto; min-height: 330px; padding: 10px; background: var(--stone); }
.sc-stage.mini-stage::before, .sc-stage.mini-stage::after { display: none; }
#sceneView.mini-mode .sc-bubble { padding: 8px 14px; font-size: 0.78rem; min-height: 0; line-height: 1.35; }
.mg { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; touch-action: manipulation; }
.mg button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mg button:disabled { cursor: default; }
.mg-info { font-size: 0.8rem; color: var(--ink-soft); text-align: center; }
.mg-note { font-size: 0.86rem; color: var(--ink); min-height: 1.3em; text-align: center; }
.mg-timer { width: 100%; height: 6px; border-radius: 999px; background: var(--stone-edge); overflow: hidden; }
.mg-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--water-glow)); transition: width 0.1s linear; }
.mg-big { border: none; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 16px 26px; font-size: 1.05rem; font-weight: 700; box-shadow: 0 4px 12px var(--shadow); }
.mg-big:disabled { opacity: 0.45; }
.mg-big:active { transform: scale(0.95); }
.mg-opt { border: 1px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 0.9rem; min-height: 48px; }
.mg-opt:disabled { opacity: 0.45; }
.mg-opt:active { transform: scale(0.96); }
.mg-opt.right { background: var(--win-glow); border-color: var(--win-glow); color: var(--c-grey-100); }
.mg-opt.wrong { background: var(--lose-glow); border-color: var(--lose-glow); color: var(--c-grey-100); }
.mg-opt.dim { opacity: 0.45; }
.mg-over { opacity: 0.85; }
/* tea */
.tea-wrap { display: flex; align-items: center; gap: 18px; }
.tea-cup { position: relative; width: 110px; height: 150px; border: 5px solid var(--c-amber-86); border-top: none; border-radius: 0 0 40px 40px; overflow: hidden; background: rgba(255,255,255,0.05); }
.tea-cup::after { content: ''; position: absolute; right: -26px; top: 30px; width: 22px; height: 44px; border: 5px solid var(--c-amber-86); border-left: none; border-radius: 0 22px 22px 0; }
.tea-band { position: absolute; left: 0; right: 0; height: 14%; background: rgba(120, 220, 140, 0.35); border-top: 2px dashed var(--c-green-72); border-bottom: 2px dashed var(--c-green-72); z-index: 2; }
.tea-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--c-orange-63), var(--c-orange-44)); }
.mg-side { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 150px; }
/* quiz */
.quiz-clue { background: var(--board-bg); border: 1px solid var(--stone-edge); border-radius: 14px; padding: 12px; font-size: 0.86rem; line-height: 1.45; text-align: center; width: 100%; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.quiz-opts .mg-opt { text-align: left; }
/* toppings */
.cake { font-size: 4rem; line-height: 1; }
.tops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.mg-top { border: 2px solid var(--stone-edge); background: var(--board-bg); border-radius: 18px; font-size: 2.2rem; height: 76px; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.mg-top.lit { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(217,160,102,0.8); background: rgba(217,160,102,0.25); }
.mg-top:disabled:not(.lit) { opacity: 0.6; }
/* weeds */
.beds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; }
.bed { aspect-ratio: 1; border: none; border-radius: 16px; background: var(--c-orange-22); box-shadow: inset 0 4px 0 rgba(0,0,0,0.25); font-size: 2.3rem; }
/* grain */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; flex: 1; }
.lane { border: 1px solid var(--stone-edge); background: var(--board-bg); border-radius: 14px; display: grid; grid-template-rows: repeat(6, 1fr); padding: 4px 0; min-height: 250px; }
.lane-cell { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.lane-cell.basket { font-size: 2rem; }
/* pattern */
.quilt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; max-width: 290px; }
.patch { aspect-ratio: 1; border: 2px dashed var(--stone-edge); border-radius: 10px; background: var(--board-bg); }
.patch.on { border: 2px solid var(--c-pink-80); background: repeating-linear-gradient(45deg, var(--c-pink-71), var(--c-pink-71) 6px, var(--c-pink-62) 6px, var(--c-pink-62) 12px); }
.patch.wrong { border: 2px solid var(--lose-glow); background: var(--lose-glow); }
/* haggle */
.jar { position: relative; font-size: 5rem; line-height: 1; }
.jar b { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-size: 1.9rem; color: var(--c-grey-100); text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.haggle-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.haggle-btns .take { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
/* gears */
.gears { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; max-width: 270px; }
.gear { aspect-ratio: 1; border: 1px solid var(--stone-edge); border-radius: 14px; background: linear-gradient(145deg, var(--c-orange-41), var(--c-orange-29)); color: var(--c-grey-100); position: relative; }
.gear span { font-size: 2.2rem; opacity: 0.55; }
.gear b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; text-shadow: 0 2px 3px rgba(0,0,0,0.6); }
.gear.home { box-shadow: 0 0 0 2px var(--win-glow); }
.gear.gap { background: transparent; border-style: dashed; }
/* tidy */
.tidy-item { font-size: 4.2rem; line-height: 1; animation: pop-in 0.25s ease; }
.tidy-item.bad { animation: bt_shake 0.3s ease; }
.bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.bins .mg-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.74rem; }
.bins .mg-opt span { font-size: 1.8rem; }
/* lanterns */
.lanterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 260px; }
.lantern { aspect-ratio: 1; border: 1px solid var(--stone-edge); border-radius: 50%; background: var(--c-grey-12-2); font-size: 2.4rem; filter: grayscale(1) brightness(0.45); transition: filter 0.2s ease, box-shadow 0.2s ease; }
.lantern.lit { filter: none; box-shadow: 0 0 22px rgba(255,180,90,0.75); background: var(--c-orange-18); }
/* hide and seek (companion) - played live on the actual town tiles, not a modal grid; see HIDESEEK in
   town-render-weather.js. Mirrors .town-tile.placeable's outline approach (decoration placement) rather
   than introducing a new highlight language. */
.town-tile.hideseek-spot { outline: 3px dashed var(--accent, var(--c-orange-55)); outline-offset: -3px; cursor: pointer; animation: hideseek-pulse 1.1s ease-in-out infinite; }
@keyframes hideseek-pulse { 50% { outline-color: var(--water-glow); } }
.town-tile.hideseek-found { outline: 3px solid var(--win-glow); animation: none; }
.town-tile.hideseek-wrong { outline: 3px solid var(--lose-glow); animation: none; }
.hideseek-timer { margin: -2px 0 8px; }
/* ---------- card uses ---------- */
.charm-bar { margin-bottom: 6px; }
.charm-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.charm-slot { border: 1.5px dashed var(--stone-edge); background: var(--stone); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; color: var(--ink-soft); font-family: inherit; }
.charm-slot span { font-size: 1.3rem; }
.charm-slot small { font-size: 0.58rem; line-height: 1.2; text-align: center; }
.charm-slot.on { border: 1.5px solid var(--accent); background: rgba(217,160,102,0.12); color: var(--ink); cursor: pointer; }
.charm-slot.locked { opacity: 0.5; }
.row-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.charm-btn { min-height: 44px; padding: 4px 10px; font-size: 0.8rem; }
.charm-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mastery-line { font-size: 0.62rem; color: var(--ink-soft); }
.mastery-line b, .mastery-inline { color: var(--c-amber-68); letter-spacing: 1px; }
#battleView .card .mastery-stars { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.52rem; color: var(--c-amber-77-2); text-shadow: 0 1px 2px rgba(0,0,0,0.7); letter-spacing: 1px; z-index: 3; pointer-events: none; }
#battleView .hand .card .mastery-stars { bottom: 18px; }
#battleView .card.mastery-3 { box-shadow: 0 0 0 2px var(--c-amber-68), 0 4px 12px var(--shadow); }
.sets-box { margin-bottom: 8px; }
.set-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; }
.set-row.done { border-color: var(--accent); }
.set-name { font-size: 0.78rem; font-weight: 600; }
.set-name small { color: var(--ink-soft); font-weight: 400; }
.set-cards { font-size: 1rem; letter-spacing: 1px; text-align: right; }
.set-cards .miss { filter: grayscale(1) brightness(0.5); opacity: 0.6; }
.set-perk { grid-column: 1 / -1; font-size: 0.64rem; color: var(--accent); }
.alm-card .ac-museum { position: absolute; bottom: 4px; left: 5px; font-size: 0.66rem; line-height: 1; }
.talk-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 0; }
.talk-cards .talk-sub { width: 100%; min-height: 0; margin: 0 0 2px; font-size: 0.74rem; }
/* ---------- getting started, events, guide, foils, comfort ---------- */
.story-card { text-align: left; background: linear-gradient(135deg, rgba(217,160,102,0.16), var(--stone)); border: 1px solid var(--stone-edge); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.story-card.ready { border-color: var(--accent); animation: gift-glow 2.2s ease-in-out infinite; }
.story-top { display: flex; align-items: center; gap: 10px; }
.story-icon { font-size: 1.6rem; }
.story-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.story-text small { font-size: 0.62rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.story-text b { font-size: 0.86rem; }
.story-text span { font-size: 0.72rem; color: var(--ink-soft); }
.event-banner { background: rgba(217,160,102,0.16); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 12px; font-size: 0.78rem; margin-bottom: 10px; text-align: center; }
.pack .btn s { opacity: 0.6; font-size: 0.75em; }
.guide-today { background: var(--stone); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 12px; font-size: 0.76rem; line-height: 1.5; margin-bottom: 4px; }
.guide-item { align-items: flex-start; cursor: pointer; transition: background-color 0.15s ease; }
.guide-item.locked { opacity: 0.6; cursor: default; }
.guide-item.open { background: var(--board-bg); }
.guide-how { font-size: 0.72rem; color: var(--ink); line-height: 1.4; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--stone-edge); animation: pop-in 0.2s ease; }
.guide-chevron { font-size: 0.6rem; color: var(--ink-soft); padding-top: 3px; flex-shrink: 0; }
.foil { position: relative; animation: foil-shift 4s linear infinite; }
.card-mini.foil::before, .alm-card.foil::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.45) 45%, transparent 60%); background-size: 250% 100%; animation: foil-sheen 2.6s linear infinite; }
@keyframes foil-shift { 0% { filter: hue-rotate(0deg) saturate(1.3); } 100% { filter: hue-rotate(360deg) saturate(1.3); } }
@keyframes foil-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.foil-tag { font-size: 0.66rem; font-weight: 700; color: var(--c-amber-77); }
html.big-text { font-size: 112%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
.sc-pips .pip-label { font-size: 0.74rem; color: var(--ink-soft); line-height: 12px; letter-spacing: 0.02em; }
/* flex-shrink: 0 on both - #sceneView is a flex column with overflow-y:auto, and without this a long
   letter/mail list can force the *bubble* to shrink below its own text (flex's default shrink behavior)
   instead of the view just scrolling - the shrunk box still has overflow:visible, so the clipped text
   doesn't disappear, it visually spills out and overlaps whatever's rendered right after it (the button
   list). Letting the view scroll instead, by never shrinking either flex item below its content, fixes it. */
.sc-bubble { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 16px; padding: 14px 16px; font-size: 0.9rem; line-height: 1.5; color: var(--ink); box-shadow: 0 1px 6px var(--shadow); min-height: 64px; flex-shrink: 0; }
.sc-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
#sceneView.memory-mode { gap: 8px; }
#sceneView.memory-mode .sc-bubble { padding: 8px 14px; font-size: 0.78rem; min-height: 0; line-height: 1.3; }
#sceneView.memory-mode .sc-actions { flex-shrink: 0; }
.sc-btn { width: 100%; }
.sc-btn:disabled { opacity: 0.55; cursor: default; }

.season-tag { color: var(--ink-soft); }


/* ---------- wandering neighbors, bosses, graves ---------- */
.ent.npc, .ent.boss { transition: left 520ms ease-in-out, top 520ms ease-in-out; }
.ent.npc > span, .ent.boss > span { transition: transform 260ms ease; }
.ent.grave { z-index: inherit; }
.ent .spr.prop { filter: none; }
.ent.grave-boss::after { content: ''; position: absolute; inset: 14% 8% 8% 8%; border-radius: 50%; box-shadow: 0 0 14px 2px var(--boss-glow); opacity: .35; animation: breathe 2.6s ease-in-out infinite; }
.ent.grave { animation: grave-settle .7s cubic-bezier(.3,1.4,.5,1); }
@keyframes grave-settle { from { transform: translateY(-40%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }


/* ---------- fishing (v1.62.0: the Bobber view) ----------
   A full-screen cutaway of the pond: bank and rod above, water below, with the bobber on the surface, the line, and a
   fish you can watch. Everything positions itself in percentages of the scene, set from js/fishing.js. */
#fishOverlay { background: rgba(6,10,14,.7); align-items: stretch; }
.fish-scene { position: relative; width: 100%; max-width: 460px; margin: 0 auto; height: 100%; overflow: hidden; background: var(--c-blue-10); color: var(--ink); }
.fish-scene > * { position: absolute; }
.fs-bank { left: 0; right: 0; top: 0; height: 26.6%; background: linear-gradient(180deg, var(--c-cyan-15), var(--c-teal-22)); }
.fs-water { left: 0; right: 0; top: 26.6%; bottom: 0; background: linear-gradient(180deg, var(--c-cyan-50) 0, var(--c-cyan-34) 12%, var(--c-cyan-19) 44%, var(--c-blue-10) 100%); }
.fs-water::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 18px, transparent 18px 30px); opacity: .5; }
.fs-shafts { left: 0; right: 0; top: 26.6%; bottom: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 16px, transparent 16px 54px); -webkit-mask-image: linear-gradient(var(--c-grey-0), transparent 85%); mask-image: linear-gradient(var(--c-grey-0), transparent 85%); pointer-events: none; }
.fs-rain { left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(105deg, rgba(200,225,240,.0) 0 14px, rgba(200,225,240,.10) 14px 15px); transition: opacity 1s; }
.fish-scene[data-wx="rain"] .fs-rain, .fish-scene[data-wx="storm"] .fs-rain { opacity: 1; }
.fs-svg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.fs-ring { left: 50%; top: 26.6%; width: 74px; height: 20px; margin: -8px 0 0 -37px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; z-index: 3; opacity: 0; pointer-events: none; }
.fish-scene[data-phase="wait"] .fs-ring, .fish-scene[data-phase="bite"] .fs-ring, .fish-scene[data-phase="reeling"] .fs-ring { animation: fsRipple 1.7s ease-out infinite; }
.fish-scene[data-phase="wait"] .fs-ring.r2, .fish-scene[data-phase="bite"] .fs-ring.r2 { animation-delay: .85s; }
@keyframes fsRipple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.fs-bobber { left: 50%; top: calc(26.6% - 12px); width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: linear-gradient(180deg, var(--c-red-55) 0 48%, var(--c-grey-100) 50%); border: 2px solid var(--c-grey-13); z-index: 4; opacity: 0; transition: transform .25s ease; }
.fs-bobber { opacity: 1; }
.fish-scene:not([data-phase="idle"]) .fs-bobber { animation: fsBob 2.2s ease-in-out infinite; }
.fish-scene[data-phase="bite"] .fs-bobber, .fish-scene.nibble .fs-bobber { transform: translateY(12px); animation: none; }
.fish-scene[data-phase="caught"] .fs-bobber { opacity: 0; }
@keyframes fsBob { 50% { transform: translateY(4px); } }
.fs-fish { z-index: 3; font-size: 3.2rem; line-height: 1; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: left var(--mv, .4s) linear, top var(--mv, .4s) linear, opacity .4s; }
.fs-fish.shadow { opacity: .55; filter: brightness(0) opacity(.8); }
.fs-fish.shown { opacity: 1; }
.fs-fish.small { font-size: 2.2rem; } .fs-fish.medium { font-size: 3.2rem; } .fs-fish.large { font-size: 4.4rem; }
.fs-fish.run { animation: fsThrash .22s ease-in-out infinite; }
@keyframes fsThrash { 25% { transform: translate(-50%, -50%) rotate(-12deg); } 75% { transform: translate(-50%, -50%) rotate(12deg); } }
.fs-bang { left: 50%; top: 13%; transform: translateX(-50%); z-index: 6; font: 800 2.6rem var(--f-ui); color: var(--accent); text-shadow: 0 0 14px rgba(232,203,136,.9); animation: fsJerk .3s infinite; opacity: 0; pointer-events: none; }
.fish-scene[data-phase="bite"] .fs-bang { opacity: 1; }
@keyframes fsJerk { 25% { transform: translate(calc(-50% - 3px), 5px) rotate(-5deg); } 75% { transform: translate(calc(-50% + 3px), 5px) rotate(5deg); } }
.fs-splash { left: 50%; top: 20%; width: 140px; height: 56px; margin-left: -70px; z-index: 5; opacity: 0; pointer-events: none; background: radial-gradient(circle at 20% 80%, var(--c-grey-100) 0 4px, transparent 5px), radial-gradient(circle at 40% 40%, var(--c-grey-100) 0 3px, transparent 4px), radial-gradient(circle at 70% 55%, var(--c-grey-100) 0 4px, transparent 5px), radial-gradient(circle at 85% 85%, var(--c-grey-100) 0 3px, transparent 4px), radial-gradient(circle at 55% 15%, var(--c-grey-100) 0 3px, transparent 4px); }
.fs-splash.on { animation: fsSplash .8s ease-out forwards; }
@keyframes fsSplash { 0% { opacity: 1; transform: translateY(14px) scale(.6); } 100% { opacity: 0; transform: translateY(-8px) scale(1.2); } }
.fs-top { left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: .74rem; font-weight: 700; }
.fs-loc { font-family: var(--f-display); font-size: 1rem; font-weight: 500; }
.fs-wx { color: var(--ink-soft); }
.fs-stamps { margin-left: auto; display: flex; gap: 3px; align-items: center; }
.fs-stamps i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); display: block; } .fs-stamps i.on { background: var(--accent); box-shadow: 0 0 6px rgba(232,203,136,.7); }
.fs-depth { right: 14px; top: 34%; bottom: 300px; width: 36px; border-radius: 18px; z-index: 6; background: rgba(8,11,15,.55); border: 1px solid rgba(255,255,255,.18); }
.fs-depth.hidden { display: none; }
.fs-depth .fillv { position: absolute; left: 4px; right: 4px; bottom: 4px; border-radius: 14px; background: linear-gradient(0deg, var(--c-cyan-41), var(--c-cyan-67)); transition: height .12s linear; }
.fs-depth .t0, .fs-depth .t1 { position: absolute; left: -28px; font-size: .6rem; color: var(--ink-soft); font-weight: 700; } .fs-depth .t0 { top: 4px; } .fs-depth .t1 { bottom: 2px; }
.fs-depth .mk { position: absolute; left: 50%; font-size: 1.2rem; transform: translate(-50%, 50%); }
.fs-panel { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 7; padding: 14px 16px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: rgba(35,43,52,.82); border: 1px solid rgba(233,237,241,.14); border-radius: 22px;}
.fs-panel h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; line-height: 1.15; margin: 0; text-wrap: balance; }
.fs-panel p { margin: 0; color: var(--ink-soft); font-size: .88rem; min-height: 1.3em; }
.fs-panel .btn { min-height: 50px; padding: 0 30px; }
#fishBtn { touch-action: none; -webkit-user-select: none; user-select: none; }
#fishBtn.wait { background: var(--stone-edge); color: var(--ink-soft); box-shadow: none; }
#fishBtn.bite { background: var(--accent); color: var(--on-accent); animation: fsJerkBtn .28s ease-in-out infinite; }
@keyframes fsJerkBtn { 25% { transform: translate(-3px, 3px); } 75% { transform: translate(3px, 3px); } }
#fishBtn.reeling { background: var(--c-orange-75); color: var(--c-orange-15); min-width: 60%; min-height: 64px; font-size: 1.05rem; }
#fishBtn.reeling.holding { background: var(--accent); transform: scale(.96); }
#fishTally { font-size: .72rem; color: var(--ink-soft); }
#fishClose { background: none; color: var(--ink-soft); box-shadow: none; border: 1px solid var(--stone-edge); min-height: 40px !important; font-size: .8rem; padding: 0 18px !important; }
/* toasts sit at the top while fishing so they never cover the buttons */
body.in-fishing .toast { bottom: auto; top: calc(env(safe-area-inset-top) + 48px); transform: translateX(-50%) translateY(-16px); z-index: 60; }
body.in-fishing .toast.show { transform: translateX(-50%) translateY(0); }
/* bait picker */
.fs-baits { display: flex; gap: 6px; width: 100%; }
.fs-baits.hidden, .fs-tension.hidden, .fs-result.hidden { display: none; }
.fs-bait { flex: 1; min-width: 0; padding: 7px 4px 6px; border-radius: 14px; text-align: center; background: rgba(0,0,0,.28); border: 2px solid transparent; color: var(--ink); font-family: inherit; cursor: pointer; }
.fs-bait.sel { border-color: var(--accent); box-shadow: 0 0 12px rgba(232,203,136,.35); }
.fs-bait.out { opacity: .4; }
.fs-bait b { display: block; font-size: 1.4rem; line-height: 1; } .fs-bait span { display: block; font-size: .64rem; font-weight: 800; margin-top: 2px; }
.fs-bait em { display: block; font-style: normal; font-size: .62rem; color: var(--ink-soft); line-height: 1.2; min-height: 1.2em; }
.fs-bait.good::after { content: '✓'; position: absolute; }
/* tension gauge */
.fs-tension { width: 100%; }
.fs-tension .lbl { display: flex; justify-content: space-between; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; margin-bottom: 4px; }
.fs-tension .bar { position: relative; height: 26px; border-radius: 13px; overflow: hidden; background: linear-gradient(90deg, var(--c-blue-34-2) 0 22%, var(--c-green-36) 22% 35%, var(--c-green-62) 35% 65%, var(--c-green-36) 65% 78%, var(--c-red-37) 78% 100%); border: 1px solid rgba(255,255,255,.18); }
.fs-tension .mk { position: absolute; top: 3px; bottom: 3px; width: 10px; margin-left: -5px; border-radius: 5px; background: var(--c-grey-100); box-shadow: 0 0 10px var(--c-grey-100); left: 10%; }
.fs-tension.strain .bar { animation: fsJerkBtn .2s infinite; }
.fs-result { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fs-chip { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); }
.fs-chip.gold { background: rgba(232,203,136,.22); color: var(--accent); } .fs-chip.ok { background: rgba(141,224,160,.2); color: var(--c-green-72-2); }


/* ---------- villager requests ---------- */
.talk-name { font-size: 1.05rem; letter-spacing: .04em; color: var(--accent); margin-bottom: 8px; }
.talk-name { margin-bottom: 4px; }
.talk-text { color: var(--ink) !important; font-size: 1rem !important; margin: 4px 0 6px; line-height: 1.4; }
.talk-sub { min-height: 2.4em; margin: 0 0 8px; }
.talk-tag { font-size: .75rem; color: var(--ink-soft); margin-bottom: 12px; min-height: 1.1em; }
#talkCard .btn { display: block; width: 100%; margin: 8px 0 0; }
#talkCard .btn:disabled { background: var(--stone-edge); color: var(--ink-soft); cursor: default; }
#talkCard .talk-fight { background: var(--stone-edge); color: var(--ink); }
#talkCard .talk-gift { background: var(--c-orange-50); }
.snack-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: -4px 0 12px; }
.snack-label { font-size: .72rem; color: var(--ink-soft); width: 100%; }
.snack-btn { border: 1px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); border-radius: 999px; padding: 6px 10px; font-size: .74rem; cursor: pointer; font-family: inherit; }
.snack-btn small { color: var(--ink-soft); }
.snack-done { font-size: .74rem; color: var(--accent); }
#talkCard .talk-sig { background: linear-gradient(135deg, var(--c-amber-76), var(--accent)); color: var(--c-amber-15); font-weight: 600; }
.talk-hearts { font-size: .9rem; letter-spacing: 2px; margin: -4px 0 8px; }
.talk-hearts small { display: block; font-size: .66rem; letter-spacing: 0; color: var(--ink-soft); margin-top: 2px; }
.sleeve-chip { display: inline-block; width: 16px; height: 22px; border-radius: 4px; vertical-align: -5px; margin-right: 4px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--water-glow), var(--water)); outline: 1.5px solid var(--sleeve-edge, rgba(255,255,255,.4)); outline-offset: -1.5px; }
.sleeve-chip .sleeve-fx { position: absolute; inset: 0; opacity: .6; }


/* ---------- memory match ---------- */
.sc-stage.memory-stage { padding: 10px; background: var(--stone); }
.sc-stage.memory-stage::before, .sc-stage.memory-stage::after { display: none; }
.mem-grid { display: grid; grid-template-columns: repeat(var(--mcols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; width: 100%; height: 100%; min-width: 0; }
.mem-tile { border: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 4px; cursor: pointer; font-family: inherit; transition: transform .15s ease; min-width: 0; min-height: 0; overflow: hidden; }
.mem-tile.down { background: var(--stone-edge); }
.mem-tile.down .mb { font-size: 2.4rem; opacity: .55; }
.mem-tile.up { background: var(--water-glow); }
.mem-tile.matched { background: var(--win-glow); opacity: .75; }
.mem-tile:disabled { cursor: default; }
.mem-tile .mi { font-size: 2.1rem; line-height: 1; }
.mem-tile .mn { font-size: .68rem; line-height: 1.15; text-align: center; color: var(--ink); max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- opponent-only cards (see buildDeckForOpponent) ---------- */
.card.foe-card { box-shadow: 0 0 0 2px var(--c-amber-55), 0 0 10px rgba(217, 164, 65, .55); }
.card.enhanced-card { box-shadow: 0 0 0 1.5px rgba(217, 164, 65, .7); }
.card .badge.foe { position: absolute; top: 2px; left: 2px; font-size: .7rem; line-height: 1; color: var(--c-amber-55); pointer-events: none; }

/* Trade up: the chosen cards and the Combine button stay together and pinned to the top while the spare-card list scrolls under them. */
.cr-dock { position: sticky; top: 0; z-index: 5; margin: 0 -4px 10px; padding: 8px 4px 10px; background: transparent; }
.cr-dock .cr-tray { margin: 0 0 8px; }
.cr-dock .cr-go { margin-top: 0; }
.cr-dock .cr-go .btn { width: 100%; min-height: 44px; }

/* ---------- district travel transition (withTravelTransition in world-map.js) ---------- */
.travel-fade { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, var(--c-grey-20-2), var(--c-grey-7) 75%);
  opacity: 0; transition: opacity .3s ease; pointer-events: all; }
.travel-fade.on { opacity: 1; }
.travel-fade.theme-market { background: radial-gradient(circle at 50% 45%, var(--c-amber-22), var(--c-grey-6) 75%); }
.travel-fade.theme-harbor { background: radial-gradient(circle at 50% 45%, var(--c-cyan-20), var(--c-grey-7-2) 75%); }
.travel-fade.theme-garden { background: radial-gradient(circle at 50% 45%, var(--c-green-23), var(--c-grey-6-2) 75%); }
.tf-inner { text-align: center; color: var(--ink); transform: translateY(8px) scale(.94); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.travel-fade.on .tf-inner { transform: none; }
.tf-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; animation: tf-bob 1.2s ease-in-out infinite; }
.tf-name { font-size: 1.3rem; letter-spacing: .04em; }
.tf-sub { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
@keyframes tf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .tf-icon { animation: none; } .tf-inner { transition: none; } }

/* ---------- the talk card: portrait, speech bubble, small-talk topics ---------- */
.talk-portrait { position: relative; width: 76px; height: 76px; margin: -6px auto 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--water-glow), var(--stone-edge));
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: talk-idle 3s ease-in-out infinite; }
.talk-portrait[data-mood]:not([data-mood=""])::after { content: attr(data-mood); position: absolute; right: -4px; bottom: -2px; font-size: 1.1rem; background: var(--stone); border-radius: 50%; padding: 1px; }
.talk-portrait.react { animation: talk-react .5s ease; }
.talk-float { position: absolute; top: -6px; left: 50%; font-size: 1.2rem; pointer-events: none; animation: talk-float 1.1s ease-out forwards; }
.talk-bubble { position: relative; background: var(--board-bg); border: 1px solid var(--stone-edge); border-radius: 16px; padding: 10px 14px; margin: 10px 0 8px; min-height: 3.6em; text-align: left; cursor: pointer; }
.talk-bubble::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: var(--board-bg); border-left: 1px solid var(--stone-edge); border-top: 1px solid var(--stone-edge); transform: translateX(-50%) rotate(45deg); }
.talk-bubble .talk-text { margin: 0; }
.talk-topics { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 8px; }
.talk-topic { border: 1px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); border-radius: 999px; padding: 8px 12px; min-height: 44px; font-size: .78rem; font-family: inherit; cursor: pointer; }
.talk-topic.used { opacity: .55; }
.talk-hearts { margin: 0 0 2px; }
@keyframes talk-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes talk-react { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-6deg); } 70% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes talk-float { 0% { transform: translate(-50%, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .talk-portrait, .talk-portrait.react { animation: none; } .talk-float { animation-duration: .01s; } }

/* ============================================================
   UI POLISH (see js/ui-polish.js)
   ============================================================ */
/* spacing / type tokens - new UI uses these; older screens can adopt them as they are touched */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --fs-sm: .78rem; --fs-md: .92rem; --fs-lg: 1.15rem; --tap: 44px; }
.cr-title { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.cr-desc { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.cr-chip { min-height: var(--tap); }
.cr-chip small { opacity: .8; }
.cr-chip.short:not(.active) { border-style: dashed; opacity: .7; }

/* tips: a non-blocking banner above the bottom nav instead of a full-screen modal */
#tipOverlay.tip-banner { background: none; backdrop-filter: none; align-items: flex-end; justify-content: center; pointer-events: none; padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 24; }
#tipOverlay.tip-banner.hidden { opacity: 0; transform: translateY(12px); }
#tipOverlay.tip-banner .overlay-card { pointer-events: auto; width: 100%; max-width: 420px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon title ok" "icon text ok"; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; box-shadow: 0 8px 30px rgba(0,0,0,.45); border: 1px solid var(--stone-edge); animation: sheet-up .3s ease; }
#tipOverlay.tip-banner .big-icon { grid-area: icon; font-size: 1.8rem; margin: 0; }
#tipOverlay.tip-banner h2 { grid-area: title; font-size: .95rem; margin: 0; font-weight: 600; }
#tipOverlay.tip-banner p { grid-area: text; margin: 0; font-size: .8rem; line-height: 1.35; }
#tipOverlay.tip-banner .btn { grid-area: ok; padding: 8px 14px; font-size: .78rem; }

/* bottom sheets */
.overlay.sheet, .overlay.inspect-overlay { align-items: flex-end; }
.overlay.sheet .overlay-card, .overlay.inspect-overlay .overlay-card { width: min(100vw, 480px); max-width: none; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); animation: sheet-up .32s cubic-bezier(.2, .9, .3, 1); transition: transform .2s ease; }
.overlay.sheet.hidden .overlay-card { transform: translateY(24px); }
.sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: var(--stone-edge); margin: -14px auto 12px; touch-action: none; cursor: grab; position: relative; }
.sheet-handle::after { content: ''; position: absolute; inset: -14px -30px; }   /* a generous invisible grab area */
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.inspect-overlay { z-index: 70; }

/* card inspect */
.ins-card { position: relative; width: 132px; height: 176px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--board-bg); box-shadow: 0 0 0 2px var(--stone-edge), 0 8px 24px rgba(0,0,0,.4); }
.ins-card.rarity-rare { box-shadow: 0 0 0 2px var(--rare), 0 8px 24px rgba(0,0,0,.4); }
.ins-card.rarity-ultra { box-shadow: 0 0 0 2px var(--epic), 0 8px 24px rgba(0,0,0,.4); }
.ins-card.rarity-super { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(217,160,102,.4); }
.ins-card.rarity-mythic { box-shadow: 0 0 0 2px var(--mythic), 0 0 30px rgba(217,143,176,.5); }
.ins-cost { position: absolute; top: 8px; left: 8px; min-width: 26px; height: 26px; border-radius: 50%; background: var(--stone); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.ins-icon { font-size: 4.2rem; line-height: 1; }
.inspect-overlay h2 { margin: 0 0 2px; }
.ins-sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.ins-stat { display: flex; gap: var(--sp-4); justify-content: center; font-size: 1.15rem; font-weight: 600; margin-bottom: var(--sp-2); }
.ins-abilities { font-size: var(--fs-sm); line-height: 1.5; text-align: left; background: var(--board-bg); border-radius: 12px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.ins-abilities.dim { color: var(--ink-soft); text-align: center; }
.ins-note { font-size: var(--fs-sm); color: var(--c-amber-55); margin-bottom: var(--sp-2); }
.ins-story { font-style: italic; margin: var(--sp-2) 0; }
.ins-own { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-3); }
[data-inspect] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* HUD */
.hud-stat[role="button"] { cursor: pointer; }
.hud-clock { font-size: .66rem; opacity: .75; font-weight: 600; }
.hud-xp-bar { height: 6px; }
.fly-reward { position: fixed; z-index: 95; font-size: 1.5rem; pointer-events: none; transform: translate(-50%, -50%); animation: fly-reward .8s cubic-bezier(.5, 0, .75, .3) forwards; }
@keyframes fly-reward { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: .2; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5); } }

/* consistent press feedback */
.btn:not(:disabled):active, .cr-chip:active, .panel-action:active, .talk-topic:active, .snack-btn:active, .hud-stat[role="button"]:active { transform: scale(.96); }
.panel-item[data-pick]:active { transform: scale(.985); background: var(--board-bg); }
.cr-chip, .panel-action, .talk-topic, .snack-btn, .hud-stat { transition: transform .1s ease; }

/* accessibility: visible keyboard focus, and honour the OS "reduce motion" setting everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Card Shop: the Packs / Customize / Items views live inside the scene (see mountShopView) */
#sceneView.shop-mode .sc-stage, #sceneView.shop-mode .sc-pips { display: none; }
#sceneView.shop-mode .sc-bubble { padding: 8px 14px; font-size: .8rem; min-height: 0; }
/* the host scrolls on its own so the Back button stays put underneath it instead of floating over the list */
.sc-shop-host { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; text-align: left; padding: 0 2px 8px; scrollbar-width: none; }
.sc-shop-host::-webkit-scrollbar { display: none; }
#sceneView.shop-mode { overflow: hidden; }
.sc-shop-host.hidden { display: none; }

/* ===== Town life (js/town-life.js) ===== */
.life-card { width: min(320px, 90vw); }
.life-ico { font-size: 2.2rem; margin-bottom: 6px; }
.life-mood-line { font-size: 0.78rem; opacity: 0.85; }
.life-act { display: block; width: 100%; margin: 8px 0; }
.life-track { position: relative; height: 34px; background: rgba(0,0,0,0.3); border-radius: 17px; overflow: hidden; margin: 14px 0 8px; touch-action: none; }
.life-zone { position: absolute; top: 0; bottom: 0; background: rgba(159,214,122,0.6); }
.life-marker { position: absolute; left: 0; top: 3px; width: 8px; height: 28px; border-radius: 4px; background: var(--c-grey-100); box-shadow: 0 0 6px rgba(255,255,255,0.7); will-change: transform; }
.life-dots { letter-spacing: 4px; font-size: 1.1rem; margin-bottom: 6px; min-height: 1.4em; }
.life-result { min-height: 2.6em; }
.life-tap { width: 100%; min-height: 56px; font-size: 1.05rem; margin-bottom: 8px; touch-action: none; }
.ent.life-bird > span { font-size: calc(var(--t) * 0.36); animation: bob 2.2s ease-in-out infinite; }
.ent.life-bird.flee > span { animation: life-flee 0.9s ease-in forwards; }
@keyframes life-flee { to { transform: translate(70%, -190%) scale(0.7); opacity: 0; } }
.ent.life-puddle::after { content: ''; width: 72%; height: 34%; border-radius: 50%; background: rgba(150,190,230,0.55); box-shadow: inset 0 1px 2px rgba(255,255,255,0.5); }
.ent.life-splash::after, .ent.life-ripple::after { content: ''; width: 60%; height: 40%; border-radius: 50%; border: 3px solid rgba(190,225,255,0.9); animation: ring 0.6s ease-out forwards; }
.ent.life-leaves > span { position: absolute; font-size: calc(var(--t) * 0.3); animation: life-leaf 1.1s ease-in forwards; }
.ent.life-leaves > .l2 { left: 18%; animation-delay: 0.1s; } .ent.life-leaves > .l3 { right: 18%; animation-delay: 0.2s; }
@keyframes life-leaf { from { transform: translateY(-60%); opacity: 1; } to { transform: translateY(90%) rotate(40deg); opacity: 0; } }
.ent.life-glow::before { content: ''; position: absolute; width: 260%; height: 260%; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,120,0.42), transparent 65%); animation: life-glowpulse 3s ease-in-out infinite; }
@keyframes life-glowpulse { 50% { opacity: 0.6; } }
.ent.life-mood > span { position: absolute; font-size: calc(var(--t) * 0.3); }
.ent.life-mood.balloon > span { top: -14%; right: 2%; }
.ent.life-mood.pot > span { bottom: 2%; left: 2%; }
.ent.life-mood.spark > span { top: -6%; right: 8%; animation: bob 1.8s ease-in-out infinite; }
.town-view[data-wx="rain"] .ent.npc::after, .town-view[data-wx="storm"] .ent.npc::after { content: '☂️'; position: absolute; top: -10%; right: 6%; font-size: calc(var(--t) * 0.3); }

/* ===== Light theme touch-ups (the dark theme needs none of these) ===== */
:root[data-theme="light"] .alm-card.unknown .ac-icon { filter: brightness(0) opacity(0.22); }
:root[data-theme="light"] .toggle { background: var(--c-amber-78); }
:root[data-theme="light"] .toggle.on { background: var(--water); }
:root[data-theme="light"] .overlay-card, :root[data-theme="light"] .panel-item, :root[data-theme="light"] .settings-row { box-shadow: 0 4px 14px var(--shadow); }
/* The dark-scoped game-world containers must also reset the inherited text colour, which would otherwise
   still be the light theme's dark ink (custom properties re-resolve on the element, but `color` is inherited
   as an already-computed value). */
:root[data-theme="light"] .town-map-wrap { color: var(--ink); }