/* css/latest.css - dream map and everything since (v1.71 onward): transitions, intro, storefronts, toss, knack, draft, Journal, Cards, claim center. NEW RULES GO HERE..
   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. */
/* ===== Dream map (v1.71.0) =====
   The world map overlay: a night (dark theme) or morning (light theme) sky with islands, and a sheet of details.
   Only tokens are used for colour, so the dark/light switch restyles it by itself. The few island tints that aren't
   tokens are the --wm-* variables just below. Motion is transform/opacity only, gated by reduced-motion. */
.overlay.wm-screen { --wm-cloud-o: .10; 
  background: var(--wm-sky); backdrop-filter: none; -webkit-backdrop-filter: none; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: env(safe-area-inset-top, 0px); transition: opacity .2s ease; overflow: hidden; }
:root[data-theme="light"] .overlay.wm-screen { --wm-cloud-o: .85; 
  }
.wm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0 24px; flex-shrink: 0; }
.wm-head h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1.1; margin: 0; color: var(--ink); }
.wm-hint { margin: 4px 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.wm-stage { position: relative; flex-shrink: 0; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 390 / 330; max-height: 42vh; }
.wm-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wm-stars circle { fill: var(--c-grey-100); } :root[data-theme="light"] .wm-stars { display: none; }
.wm-orb-disc { fill: var(--wm-orb); opacity: .92; } .wm-orb-cut { fill: var(--bg-bottom); } .wm-orb-halo { fill: var(--accent); opacity: 0; }
:root[data-theme="light"] .wm-orb-cut { display: none; } :root[data-theme="light"] .wm-orb-halo { opacity: .16; }
.wm-bridge { fill: none; stroke: var(--water); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .5; }
.wm-bridge.main { stroke: url(#wmBridge); stroke-width: 4; opacity: 1; }
.wm-b1 { stop-color: var(--wm-b1); } .wm-b2 { stop-color: var(--wm-b2); }
.wm-cloud ellipse { fill: var(--wm-cloud); opacity: var(--wm-cloud-o); }
.wm-isle { cursor: pointer; outline: none; }
.wm-body { fill: var(--wm-body); }
.wm-top-square { fill: var(--wm-top-square); } .wm-top-market { fill: var(--wm-top-market); } .wm-top-harbor { fill: var(--wm-top-harbor); } .wm-top-garden { fill: var(--wm-top-garden); }
.wm-art-leaf { fill: var(--wm-leaf); } .wm-art-bloom { fill: var(--accent); }
.wm-isle.locked .wm-float { opacity: .55; } :root[data-theme="light"] .wm-isle.locked .wm-float { opacity: .62; }
.wm-glow { fill: var(--accent); opacity: .22; }
.wm-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 5; }
.wm-isle:focus-visible .wm-body { stroke: var(--accent); stroke-width: 2; }
.wm-lock rect { fill: var(--ink); } .wm-lock path { fill: none; stroke: var(--ink); stroke-width: 2; }
.wm-pin-halo { fill: var(--accent); opacity: .25; } .wm-pin { fill: var(--accent); }
.wm-label { position: absolute; transform: translateX(-50%); width: 34%; text-align: center; line-height: 1.15; pointer-events: none; }
.wm-label b { display: block; font-size: .75rem; font-weight: 800; color: var(--ink); } .wm-label span { display: block; font-size: .68rem; font-weight: 700; color: var(--ink-soft); }
.wm-sheet { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 auto; width: calc(100% - 20px); max-width: 480px; margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px 0; border-radius: 26px; background: color-mix(in srgb, var(--stone) 96%, transparent); border: 1px solid var(--stone-edge); box-shadow: 0 -6px 24px var(--shadow); text-align: left; }
.wm-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--stone-edge); margin: 0 auto 10px; }
.wm-pills { display: flex; gap: 6px; margin-bottom: 12px; }
.wm-pill { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--hl) 8%, transparent); color: var(--ink-soft); font: 800 .76rem var(--f-ui); cursor: pointer; }
.wm-pill.on { background: var(--water); color: var(--on-water); }
.wm-title { display: flex; align-items: center; gap: 10px; } .wm-title h3 { flex-grow: 1; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; color: var(--ink); }
.wm-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hl) 8%, transparent); color: var(--ink-soft); font-size: .74rem; font-weight: 700; }
.wm-chip.ok { background: color-mix(in srgb, var(--win-glow) 28%, transparent); color: var(--ink); }
.wm-blurb { margin: 4px 0 6px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.wm-row { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--stone-edge); font-size: .82rem; color: var(--ink); line-height: 1.4; }
.wm-row-k { width: 74px; flex-shrink: 0; padding-top: 4px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--ink-soft); } .wm-row-v { flex-grow: 1; min-width: 0; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-boss { font-weight: 800; color: color-mix(in srgb, var(--boss-glow) 55%, var(--ink)); } .wm-boss em { font-weight: 600; font-style: normal; color: var(--ink-soft); } .wm-sub { margin-top: 2px; font-size: .76rem; color: var(--ink-soft); }
.wm-meters { display: flex; gap: 14px; } .wm-meter { flex: 1; } .wm-meter-top { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: .7rem; font-weight: 700; } .wm-meter-top span:last-child { color: var(--ink-soft); }
.wm-track { height: 7px; border-radius: 4px; background: var(--track); } .wm-track i { display: block; height: 100%; border-radius: 4px; background: var(--water); }
.wm-action { position: sticky; bottom: 0; margin: 0 -16px; padding: 12px 16px 16px; background: linear-gradient(to bottom, transparent, var(--stone) 28%); }   /* the main button stays in view while the details scroll */
.wm-go { width: 100%; min-height: 50px; border: 0; border-radius: 16px; background: var(--water); color: var(--on-water); font: 800 1rem var(--f-ui); cursor: pointer; }
.wm-go:disabled { background: color-mix(in srgb, var(--hl) 8%, transparent); color: var(--ink-soft); font-size: .92rem; cursor: default; }
.wm-go:not(:disabled):active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) {
  .wm-float { animation: wm-bob 6s ease-in-out infinite; }
  .wm-isle:nth-of-type(2) .wm-float { animation-delay: -2s; } .wm-isle:nth-of-type(3) .wm-float { animation-delay: -4s; }
  .wm-pin-halo { animation: wm-pulse 2s ease-in-out infinite; }
}
@keyframes wm-bob { 50% { transform: translateY(-3px); } }
@keyframes wm-pulse { 50% { opacity: .08; } }

/* ===== Smooth transitions (v1.72.0) =====
   Everything here is opacity/transform only (HANDOFF §9: no layout properties, no blur on moving things), and is
   switched off by reduced-motion. */
/* Overlays animate each time they open. The card used to run its pop-in only once, at page load, because an overlay
   is hidden with opacity rather than display:none; no animation while hidden means it restarts when shown. */
.overlay.hidden .overlay-card { animation: none; }
/* Door fade: the cover between the town and a building (see withDoorFade in js/houses-and-cellar.js). */
.door-fade { position: fixed; inset: 0; z-index: 90; background: var(--bg-bottom); opacity: 0; transition: opacity .28s ease; pointer-events: auto; }
.door-fade.on { opacity: 1; transition-duration: .19s; }
/* A building's inside settles in: the stage, the speech and each button rise in one after another. */
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop { from { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
#sceneView.scene-enter .sc-head { animation: sc-rise .3s both; }
#sceneView.scene-enter .sc-stage { animation: sc-rise .38s .04s cubic-bezier(.2,.9,.3,1) both; }
#sceneView.scene-enter .sc-who { animation: sc-pop .5s .18s cubic-bezier(.34,1.56,.64,1) both; }
#sceneView.scene-enter .sc-bubble { animation: sc-rise .34s .12s both; }
#sceneView.scene-enter .sc-actions > * { animation: sc-rise .34s calc(.16s + var(--n, 0) * .045s) both; }
#sceneView.scene-enter .sc-actions > :nth-child(1) { --n: 0; } #sceneView.scene-enter .sc-actions > :nth-child(2) { --n: 1; } #sceneView.scene-enter .sc-actions > :nth-child(3) { --n: 2; }
#sceneView.scene-enter .sc-actions > :nth-child(4) { --n: 3; } #sceneView.scene-enter .sc-actions > :nth-child(5) { --n: 4; } #sceneView.scene-enter .sc-actions > :nth-child(n+6) { --n: 5; }
/* A neighbour's talk card: the portrait pops and the speech bubble fades up just after the sheet slides in. */
#talkOverlay:not(.hidden) .talk-bubble { animation: sc-rise .3s .14s both; }
#talkOverlay:not(.hidden) .talk-name { animation: sc-rise .26s .08s both; }
/* Extra buttons on the little "look at it" card (editing a placed decoration). */
.scenery-actions { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.scenery-act { width: 100%; }
.scenery-act.danger { background: color-mix(in srgb, var(--boss-glow) 22%, transparent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  #sceneView.scene-enter *, #talkOverlay .talk-bubble, #talkOverlay .talk-name { animation: none !important; }
  .door-fade { transition: none; }
}

/* ===== Battle intro: the versus card (v1.73.0) =====
   Two plates slide in from opposite sides, VS pops between them, a boss's twist drops in below, then it all fades.
   Transform/opacity only; never built in Calm mode (see btIntro in js/battle-ui.js). */
.bt-intro { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding: 0 18px; background: rgba(8,11,15,.66); animation: bt-intro-bg .22s ease both; touch-action: manipulation; }
.bt-intro.out { animation: bt-intro-out .3s ease forwards; pointer-events: none; }
.bt-intro-side { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 22px; max-width: 86%; background: color-mix(in srgb, var(--c-grey-17) 92%, transparent); border: 1px solid rgba(255,255,255,.16); text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.bt-intro-side.opp { align-self: flex-start; border-color: color-mix(in srgb, var(--boss-glow) 70%, transparent); animation: bt-in-l .46s cubic-bezier(.2,.9,.3,1) .04s both; }
.bt-intro-side.you { align-self: flex-end; flex-direction: row-reverse; text-align: right; padding: 12px 12px 12px 18px; border-color: color-mix(in srgb, var(--water) 70%, transparent); animation: bt-in-r .46s cubic-bezier(.2,.9,.3,1) .14s both; }
.bt-intro-av { flex-shrink: 0; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: radial-gradient(circle at 35% 30%, var(--c-blue-27), var(--c-blue-20)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--boss-glow) 80%, transparent); }
.bt-intro-av.you-av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 80%, transparent); }
.bt-intro-name { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; color: var(--c-grey-93); }
.bt-intro-tag { margin-top: 3px; font-size: .74rem; font-weight: 700; color: var(--c-blue-69); }
.bt-intro-vs { align-self: center; font: 800 2.4rem var(--f-ui); letter-spacing: .08em; color: var(--c-amber-72); text-shadow: 0 2px 14px rgba(232,203,136,.55); animation: bt-vs .5s cubic-bezier(.34,1.56,.64,1) .34s both; }
.bt-intro.boss .bt-intro-vs { color: var(--c-red-76); text-shadow: 0 2px 16px rgba(177,97,94,.7); }
.bt-intro-twist { align-self: center; max-width: 92%; margin-top: 4px; padding: 10px 16px; border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--c-grey-20-3) 90%, transparent); border: 1px solid color-mix(in srgb, var(--boss-glow) 60%, transparent); color: var(--c-grey-93); font-size: .8rem; line-height: 1.4; animation: sc-rise .4s .7s both; }
.bt-intro-twist b { display: block; margin-bottom: 2px; font-size: .74rem; letter-spacing: .06em; color: var(--c-red-76); }
@keyframes bt-intro-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-intro-out { to { opacity: 0; } }
@keyframes bt-in-l { from { opacity: 0; transform: translateX(-110%); } to { opacity: 1; transform: none; } }
@keyframes bt-in-r { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes bt-vs { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bt-intro, .bt-intro * { animation: none !important; } }

/* ===== Avatar borders (v1.74.0): previews and the colour row ===== */
.bd-prev { display: block; width: 100%; height: 100%; max-width: 40px; max-height: 40px; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: var(--av-border-w, 5px) var(--av-border-style, solid) var(--av-border-color, var(--water)); }
.bd-prev.av-glow { box-shadow: 0 0 8px 1px var(--av-glow-color, var(--water)); }
.border-swatch { display: flex; align-items: center; justify-content: center; padding: 8px; }
.bd-color { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.bd-color.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--stone); }
.bd-custom { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: var(--ink-soft); background: conic-gradient(var(--c-red-66), var(--c-amber-65), var(--c-green-62-2), var(--c-cyan-64), var(--c-blue-68), var(--c-purple-66), var(--c-red-66)) !important; overflow: hidden; }
.bd-custom span { position: relative; z-index: 1; color: var(--c-grey-100); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bd-colors { flex-wrap: wrap; gap: 8px; }
.bt-intro-av.you-av { box-shadow: none; box-sizing: border-box; border: var(--av-border-w, 5px) var(--av-border-style, solid) var(--av-border-color, var(--water)); }
.bt-intro-av.you-av.av-glow { box-shadow: 0 0 12px 2px var(--av-glow-color, var(--water)); }

/* ===== Results window: stats + prize + buttons in one card (v1.76.0) ===== */
.end-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.end-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px 8px; border-radius: 14px; background: color-mix(in srgb, var(--hl) 7%, transparent); border: 1px solid var(--stone-edge); animation: sc-rise .32s calc(.12s + var(--n, 0) * .05s) both; }
.end-stat .es-ic { font-size: 1rem; line-height: 1; }
.end-stat b { font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.end-stat .es-l { font-size: .62rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.15; }
.end-card #battleEndStats { margin: 0 0 14px; }
.end-prize-k { display: inline-block; margin-bottom: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.end-card .big-icon { margin-bottom: 0; }

/* ===== Colour picker popup (v1.76.0) ===== */
.clr-card { width: min(330px, 90vw); }
.clr-sub { margin: -4px 0 10px; font-size: .8rem; }
.clr-preview { display: flex; justify-content: center; margin: 0 0 8px; }
.clr-preview .avatar-preview { margin: 0; width: 76px; height: 76px; font-size: 2.2rem; }
.clr-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; text-align: left; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.clr-row > span { width: 78px; flex-shrink: 0; }
.clr-row input[type=range] { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.clr-row input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; border: 1px solid var(--stone-edge); }
.clr-row input[type=range]::-moz-range-track { height: 12px; border-radius: 6px; border: 1px solid var(--stone-edge); }
#clrH::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--c-red-50), var(--c-yellow-50), var(--c-green-50), var(--c-cyan-50-2), var(--c-indigo-50), var(--c-purple-50), var(--c-red-50)); }
#clrH::-moz-range-track { background: linear-gradient(90deg, var(--c-red-50), var(--c-yellow-50), var(--c-green-50), var(--c-cyan-50-2), var(--c-indigo-50), var(--c-purple-50), var(--c-red-50)); }
#clrS::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(var(--clr-h) 0% 50%), hsl(var(--clr-h) 100% 50%)); }
#clrS::-moz-range-track { background: linear-gradient(90deg, hsl(var(--clr-h) 0% 50%), hsl(var(--clr-h) 100% 50%)); }
#clrL::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--c-grey-0), hsl(var(--clr-h) var(--clr-s) 50%), var(--c-grey-100)); }
#clrL::-moz-range-track { background: linear-gradient(90deg, var(--c-grey-0), hsl(var(--clr-h) var(--clr-s) 50%), var(--c-grey-100)); }
.clr-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; background: var(--stone); border: 3px solid var(--ink); box-shadow: 0 2px 6px var(--shadow); }
.clr-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--stone); border: 3px solid var(--ink); box-shadow: 0 2px 6px var(--shadow); }
.clr-hex input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--hl) 6%, transparent); color: var(--ink); font: 700 .95rem var(--f-ui); letter-spacing: .04em; }
.clr-card .controls { margin-top: 14px; }

#sceneView.sc-std { --sc-stage-h: clamp(320px, 48vh, 460px); padding: 0; gap: 0; overflow: hidden; }
#sceneView.sc-std .sc-stage { height: var(--sc-stage-h); border-radius: 0; flex: none; box-shadow: inset 0 80px 60px -40px rgba(0,0,0,.4); }
#sceneView.sc-std .sc-rug { left: 0; right: 0; bottom: 0; width: auto; height: 26%; transform: none; border-radius: 0; background: var(--sc-counter, var(--c-orange-31)); opacity: 1; box-shadow: 0 -6px 0 rgba(255,255,255,.14), inset 0 8px 14px rgba(0,0,0,.18); z-index: 2; }
#sceneView.sc-std .sc-who { bottom: 22%; font-size: 6rem; z-index: 1; }
#sceneView.sc-std .sc-head { position: absolute; left: 0; right: 0; top: calc(var(--sc-stage-h) * .74 + 12px); justify-content: center; padding: 0; z-index: 3; pointer-events: none; }
#sceneView.sc-std .sc-head b { padding: 5px 18px; border-radius: 14px; background: var(--c-orange-22-2); color: var(--c-amber-83-2); font-family: var(--f-display); font-weight: 500; font-size: 1rem; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
#sceneView.sc-std .sc-pips:empty { display: none; }
#sceneView.sc-std .sc-bubble { position: absolute; left: 22px; right: 22px; top: calc(var(--hud-h, 70px) + 24px); z-index: 4; margin: 0; text-align: center; background: color-mix(in srgb, var(--stone) 94%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#sceneView.sc-std .sc-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: color-mix(in srgb, var(--stone) 94%, transparent); border-right: 1px solid var(--stone-edge); border-bottom: 1px solid var(--stone-edge); }
#sceneView.sc-std .sc-bubble:empty { display: none; }
#sceneView.sc-std .sc-actions { position: relative; z-index: 5; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: -24px; gap: 10px; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--stone); border-top: 1px solid var(--stone-edge); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
#sceneView.sc-std .sc-actions::before { content: ''; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--stone-edge); margin: 0 0 4px; }
#sceneView.sc-std .sc-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 60px; padding: 0 16px; border-radius: 18px; text-align: left; font-weight: 800; background: color-mix(in srgb, var(--hl) 6%, transparent); border: 1px solid var(--stone-edge); color: var(--ink); box-shadow: none; flex: none; }
#sceneView.sc-std .sc-btn .sb-main { flex: 1 1 auto; min-width: 0; }
#sceneView.sc-std .sc-btn .sb-meta { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: color-mix(in srgb, var(--hl) 10%, transparent); }
.sb-meta::before { content: ' · '; }
#sceneView.sc-std .sb-meta::before { content: none; }
/* the mini-game doorway is the call to action */
#sceneView.sc-std .sc-btn[data-act^="mg-"]:not([data-act="mg-back"]):not([data-act="mg-again"]) { min-height: 68px; background: var(--water); color: var(--on-water); border-color: transparent; }
#sceneView.sc-std .sc-btn[data-act^="mg-"]:not([data-act="mg-back"]):not([data-act="mg-again"]) .sb-meta { background: color-mix(in srgb, var(--on-water) 14%, transparent); }
/* the way out is a quiet button at the foot of the sheet */
#sceneView.sc-std .sc-btn[data-act="leave"] { justify-content: center; min-height: 48px; margin-top: 4px; background: none; border-color: transparent; color: var(--ink-soft); font-weight: 700; }
#sceneView.sc-std .sc-btn:disabled { opacity: .5; }
/* entering: the stage settles, the sign drops, the speech pops, the sheet rises, the choices follow */
@keyframes sc-stage-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes sc-sign-in { from { opacity: 0; transform: translateY(-18px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes sc-bubble-in { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sc-sheet-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sc-sheet-down { to { transform: translateY(105%); } }
@keyframes sc-fade-out { to { opacity: 0; transform: translateY(-8px); } }
#sceneView.scene-enter.sc-std .sc-stage { animation: sc-stage-in .5s cubic-bezier(.2,.9,.3,1) both; }
#sceneView.scene-enter.sc-std .sc-head { animation: sc-sign-in .42s .3s cubic-bezier(.34,1.4,.64,1) both; }
#sceneView.scene-enter.sc-std .sc-bubble { animation: sc-bubble-in .38s .42s cubic-bezier(.34,1.4,.64,1) both; }
#sceneView.scene-enter.sc-std .sc-actions { animation: sc-sheet-up .48s .12s cubic-bezier(.2,.9,.25,1) both; }
#sceneView.scene-enter.sc-std .sc-actions > .sc-btn { animation: sc-rise .34s calc(.34s + var(--n, 0) * .05s) both; }
/* leaving: the sheet drops away and the speech and sign fade, then the page fade takes over (sceneAction 'leave') */
#sceneView.scene-leaving.sc-std .sc-actions { animation: sc-sheet-down .24s ease-in both; }
#sceneView.scene-leaving.sc-std .sc-bubble, #sceneView.scene-leaving.sc-std .sc-head { animation: sc-fade-out .2s ease-in both; }
@media (prefers-reduced-motion: reduce) { #sceneView.sc-std, #sceneView.sc-std * { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { #sceneView.sc-std, #sceneView.sc-std * { animation: none !important; } }

/* ===== Smoothness (v1.78.0) =====
   backdrop-filter re-blurs whatever is behind it every frame. Over the town map (always animating: water, neighbours,
   weather, the day/night tint) that tore and flickered on phones, so the glass pills (top bar, dock, ambient line, radar
   button, menus) and every overlay scrim now use a plain translucent fill instead. */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.map-radar-btn { background: rgba(18,22,18,0.72); }

:root[data-theme="light"] #sceneView.sc-std .sc-stage { box-shadow: inset 0 80px 60px -40px rgba(0,0,0,.18); }
:root[data-theme="light"] #sceneView.sc-std .sc-actions { box-shadow: 0 -10px 30px rgba(75,74,70,.18); }
:root[data-theme="light"] #sceneView.sc-std .sc-bubble { box-shadow: 0 6px 18px rgba(75,74,70,.2); }
:root[data-theme="light"] #sceneView.sc-std .sc-head b { background: var(--c-orange-31); color: var(--c-amber-89); }

/* ===== Notices come and go, and the world-map button (v1.80.0) ===== */
.town-info .ambient-line, .town-info .log { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.town-info .ambient-line.shown, .town-info .log.shown { opacity: 1; transform: none; }
.map-radar-btn { background: var(--glass); border: 1px solid color-mix(in srgb, var(--stone-edge) 80%, transparent); box-shadow: 0 4px 12px var(--shadow); color: var(--ink); }
.map-radar-btn .map-icon { display: block; }
:root[data-theme="light"] .map-radar-btn { border-color: var(--c-amber-82); box-shadow: 0 4px 12px rgba(75,74,70,.2); }


/* ---------- Who goes first: the coin / dice toss (v1.81.0) ----------
   Everything animated here is transform/opacity only (see HANDOFF §9's animation rules). */
#tossOverlay { z-index: 30; }
.toss-card { width: min(340px, 92vw); }
.toss-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.toss-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 110px; }
.toss-av { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--track); box-sizing: border-box; border: var(--av-border-w, 3px) var(--av-border-style, solid) var(--av-border-color, var(--water)); }
.toss-side:last-child .toss-av { border: 3px solid var(--stone-edge); }
.toss-nm { font-size: 0.74rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.toss-vs-t { font-family: var(--f-display); color: var(--ink-soft); font-size: 1rem; }
.toss-stage { perspective: 600px; height: 150px; display: flex; align-items: flex-end; justify-content: center; position: relative; margin: 6px 0 10px; }
.toss-coin { position: relative; width: 84px; height: 84px; margin-bottom: 18px; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, var(--c-amber-81), var(--c-orange-63)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.25); color: var(--c-amber-21); }
.coin-face.back { transform: rotateX(180deg); background: radial-gradient(circle at 35% 30%, var(--c-blue-90), var(--c-blue-67)); color: var(--c-blue-23-2); }
.toss-shadow { position: absolute; bottom: 4px; width: 60px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.18); }
.toss-dice { display: flex; gap: 26px; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.toss-die-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-soft); max-width: 110px; }
.toss-die-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.die { width: 76px; height: 76px; border-radius: 16px; background: var(--c-grey-96-2); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.22); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 11px; box-sizing: border-box; }
.die i { display: block; border-radius: 50%; margin: 2px; }
.die i.pip { background: var(--c-blue-21-2); }
.die.rolling { animation: die-tumble .34s linear infinite; }
@keyframes die-tumble { 0% { transform: rotate(-12deg) translateY(0); } 25% { transform: rotate(10deg) translateY(-14px); } 50% { transform: rotate(-6deg) translateY(0); } 75% { transform: rotate(14deg) translateY(-8px); } 100% { transform: rotate(-12deg) translateY(0); } }
.toss-btns { justify-content: center; min-height: 48px; }
.toss-btns .btn { min-height: 44px; }
.toss-fate { font-size: 0.8rem; }
.toss-result { min-height: 1.6em; margin: 8px 0 0; font-weight: 700; color: var(--ink); }
.toss-result.win { color: var(--water-ink); }
.toss-result.lose { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } }

/* ---------- New battle keywords (v1.82.0) ---------- */
#battleView .card .badge.lul { top:-7px; left:-4px; font-size:.85rem; }
#battleView .card.lulled { opacity: .78; }

/* The weather / world line can now carry several effects at once (v1.83.0), so it wraps instead of clipping. */
#battleView .bt-weather { white-space: normal; border-radius: 12px; line-height: 1.3; text-align: center; min-width: 0; flex: 0 1 auto; max-width: 100%; }

/* ---------- Keeper's Knack (v1.84.0) ---------- */
.knack-row { margin: 2px 0 12px; text-align: center; }
.knack-label { font-size: .74rem; color: var(--ink-soft); margin-bottom: 6px; }
.knack-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.knack-chip { border: 1px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); border-radius: 999px; padding: 7px 11px; min-height: 36px; font-size: .74rem; cursor: pointer; font-family: inherit; }
.knack-chip small { color: var(--ink-soft); }
.knack-chip.on { background: var(--water); color: var(--on-water); border-color: transparent; font-weight: 700; }
.knack-chip.locked { opacity: .55; }
.knack-desc { font-size: .76rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.ch-knack { text-align: left; }
.ch-knack .knack-chips { justify-content: flex-start; }
#battleView .bt-knack { width: 44px; height: 44px; opacity: .7; }
#battleView .bt-knack.ready { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
#battleView .bt-knack.used { opacity: .35; }
#btTip .knack-use { margin-top: 8px; width: 100%; min-height: 44px; }
#battleView .tip.interactive { pointer-events: auto; }
/* The keep-this-hand card carries the Knack picker now, so it scrolls on short phones instead of pushing its buttons off screen. */
#mulliganOverlay .overlay-card { max-height: 92vh; overflow-y: auto; }

/* ---------- Draft Run pick screen (v1.85.0) ---------- */
.draft-wrap { width: min(390px, 96vw); max-width: none; max-height: 94vh; overflow-y: auto; padding: 18px 14px 14px; }
.draft-offer { display: flex; gap: 8px; justify-content: center; margin: 10px 0 8px; }
.draft-opt { background: none; border: 2px solid transparent; border-radius: 18px; padding: 8px 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: inherit; min-width: 0; flex: 1 1 0; }
.draft-opt .reveal-card { width: 100%; max-width: 108px; font-size: .78rem; padding: 8px 5px 6px; }
.draft-opt .reveal-card .icon { font-size: 2rem; margin-top: 8px; }
.draft-opt .reveal-card .nm { font-size: .74rem; }
.draft-opt .reveal-card .stats { font-size: .95rem; padding: 0 4px; }
.draft-opt .rarity-tag { margin: 0; font-size: .62rem; }
.draft-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-3px); }
.draft-info { min-height: 3.6em; font-size: .78rem; line-height: 1.4; color: var(--ink); text-align: left; background: var(--board-bg); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.draft-info b { color: var(--accent); }
.draft-picked { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 12px; }
.draft-picked .dp { width: 26px; height: 26px; border-radius: 8px; border: 1px dashed var(--stone-edge); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.draft-picked .dp.on { border-style: solid; background: var(--track); }
#draftOverlay { z-index: 28; }

/* ---------- Ghost duels (v1.86.0) ---------- */
.ghost-btn { flex-shrink: 0; width: auto; min-height: 40px; padding: 6px 12px; font-size: .74rem; margin-left: auto; }

/* ---------- Unlock levels (v1.87.0) ---------- */
.unlock-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--stone-edge); font-size: .82rem; color: var(--ink); }
.unlock-row b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.unlock-row:last-child { border-bottom: none; }
.ghost-lock { margin-left: auto; font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Battle: full-bleed, and it follows the theme (v1.88.0) ---------- */
body.in-battle .board-wrap { padding: 0; }
body.in-battle .screen { padding: 0; }
#battleView { padding-top: env(safe-area-inset-top); }
/* Info chips and the coach line sat on a fixed dark tint, unreadable on the light backdrop: they use the theme's surface now. */
#battleView .bt-weather { background: color-mix(in srgb, var(--stone) 88%, transparent); color: var(--ink); }
#battleView .coach:not(:empty) { width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--stone) 78%, transparent); color: var(--ink-soft); }

/* The versus card in the light theme: a light scrim and light plates instead of the fixed night colours (v1.88.0). */
:root[data-theme="light"] .bt-intro { background: rgba(240,236,226,.72); }
:root[data-theme="light"] .bt-intro-side { background: color-mix(in srgb, var(--stone) 96%, transparent); border-color: var(--stone-edge); box-shadow: 0 10px 26px rgba(75,74,70,.22); }
:root[data-theme="light"] .bt-intro-av { background: radial-gradient(circle at 35% 30%, var(--c-grey-96-2), var(--c-amber-84)); }
:root[data-theme="light"] .bt-intro-name { color: var(--ink); }
:root[data-theme="light"] .bt-intro-tag { color: var(--ink-soft); }
:root[data-theme="light"] .bt-intro-vs { color: var(--accent); text-shadow: 0 2px 10px rgba(181,131,42,.35); }
:root[data-theme="light"] .bt-intro.boss .bt-intro-vs { color: var(--c-red-48); text-shadow: 0 2px 12px rgba(177,97,94,.4); }
:root[data-theme="light"] .bt-intro-twist { background: color-mix(in srgb, var(--c-red-90) 92%, transparent); color: var(--ink); }
:root[data-theme="light"] .bt-intro-twist b { color: var(--c-red-48); }

/* Fish you have not caught yet swim as silhouettes; landing one reveals its colours (v1.88.0). Static filters only. */
.fs-sw.unknown .in, .fs-sw.unknown.large .in, .fs-sw.unknown.legend .in { filter: brightness(0) opacity(.5); }
.fs-sw .in { transition: filter .6s ease; }
.fs-fish.reveal { animation: fsReveal .9s ease-out both; }
@keyframes fsReveal { 0% { filter: brightness(0) opacity(.7); transform: translate(-50%, -50%) scale(.9); } 60% { filter: none; transform: translate(-50%, -50%) scale(1.15); } 100% { filter: none; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .fs-fish.reveal { animation: none; } }

/* ============ Journal (v1.89.0) ============ */
.journal-bar { display: flex; align-items: center; gap: 8px; }
.journal-bar .seg { flex: 1; min-width: 0; margin-bottom: 12px; }
.jhelp-btn { position: relative; flex: none; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font-weight: 800; font-size: 1rem; display: grid; place-items: center; cursor: pointer; }
.jhelp-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .64rem; font-weight: 800; display: grid; place-items: center; }
.jhelp-badge.hidden { display: none; }
.card-box { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 16px; }
.jsoft { color: var(--ink-soft); font-size: .74rem; }
.jchips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.jchips::-webkit-scrollbar { display: none; }
.jchip { flex: none; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; min-height: 36px; font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.jchip.active { background: var(--water); border-color: transparent; color: var(--on-water); }
.jearlier { width: 100%; margin: 6px 0 8px; }
.jgo { border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--hl) 6%, transparent); color: var(--water-ink); border-radius: 999px; padding: 6px 13px; min-height: 36px; font-family: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.jempty { padding: 28px 12px; text-align: center; color: var(--ink-soft); font-size: .8rem; display: grid; gap: 10px; justify-items: center; }
.jsearch { width: 100%; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); border-radius: 999px; padding: 10px 14px; min-height: 42px; font: inherit; margin-bottom: 10px; }
.jgroup-h { font-family: var(--f-display); font-size: 1.02rem; margin: 16px 2px 8px; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
.jgroup-h small { font-family: var(--f-ui); font-size: .7rem; color: var(--ink-soft); }
.jbar { height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 6px; }
.jbar i { display: block; height: 100%; background: var(--water); border-radius: 999px; }
.jdot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.jnew { font-size: .58rem; font-weight: 800; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 1px 7px; margin-left: 6px; letter-spacing: .04em; vertical-align: middle; }
.jmarkall { margin-top: 12px; text-align: center; }

/* Today */
.jtd-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; text-align: left; }
.jtd-hero b { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; display: block; }
.jring { width: 72px; height: 72px; } .jring text { font-family: var(--f-ui); font-weight: 800; fill: var(--ink); }
.jtd { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; text-align: left; }
.jtd + .jtd { border-top: 1px solid var(--stone-edge); }
.jtd-ic { font-size: 1.35rem; text-align: center; }
.jtd-t { min-width: 0; } .jtd-t b { display: block; font-size: .86rem; } .jtd-t .jsoft { display: block; }
.jtd.done .jtd-t b { color: var(--ink-soft); text-decoration: line-through; }
.jtd-done { width: 28px; height: 28px; border-radius: 50%; background: var(--water); color: var(--on-water); display: grid; place-items: center; font-weight: 800; }
.jtd.locked { opacity: .6; }
.jtd-away { background: color-mix(in srgb, var(--accent) 13%, var(--stone)); border-color: color-mix(in srgb, var(--accent) 45%, var(--stone-edge)); }
.jtd-away .jgo { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* Log */
.jday { position: sticky; top: 0; z-index: 2; margin: 8px -2px 2px; padding: 6px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: left; background: linear-gradient(var(--bg-top), color-mix(in srgb, var(--bg-top) 70%, transparent)); }
.jrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--stone-edge); background: transparent; color: var(--ink); padding: 9px 4px; min-height: 46px; font-family: inherit; cursor: pointer; }
.jr-ic { font-size: 1.15rem; text-align: center; } .jr-tx { min-width: 0; font-size: .84rem; line-height: 1.35; } .jr-tm { font-size: .68rem; color: var(--ink-soft); white-space: nowrap; }
.jr-more { grid-column: 2 / -1; display: flex; padding: 4px 0 6px; }

/* Battles */
.bl-trend { padding: 10px 14px; margin-bottom: 10px; }
.bl-trend.hidden { display: none; }
.jbt-head { display: flex; justify-content: space-between; margin-bottom: 2px; }
.bl-entry { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 14px; margin-bottom: 8px; overflow: hidden; text-align: left; }
.bl-head { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); padding: 11px 12px; min-height: 56px; font-family: inherit; text-align: left; cursor: pointer; }
.bl-head .le-icon { font-size: 1.5rem; flex: none; } .bl-head .le-text { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.4; }
.bl-detail { padding: 0 12px 12px 46px; display: grid; gap: 6px; font-size: .78rem; }
.bl-detail b { color: var(--ink); }

/* Almanac */
.jprog { margin: 2px 2px 12px; } .jprog-h { display: flex; justify-content: space-between; }
.jgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jtile { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); display: grid; place-items: center; font-size: 1.9rem; position: relative; min-width: 0; padding: 0; cursor: pointer; font-family: inherit; }
.jt-nm { position: absolute; left: 4px; right: 4px; bottom: 3px; font-size: .56rem; font-weight: 700; text-align: center; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jtile.unk .jt-em { filter: brightness(0); opacity: .36; }
.jtile.sel { outline: 2px solid var(--accent); }
.jtile[data-r="rare"] { border-color: var(--rare); } .jtile[data-r="ultra"] { border-color: var(--epic); } .jtile[data-r="super"] { border-color: var(--accent); } .jtile[data-r="mythic"] { border-color: var(--mythic); }
.jdetail { margin-top: 12px; padding: 12px 14px; display: grid; gap: 4px; text-align: left; }
.jdetail b { font-family: var(--f-display); font-size: 1.02rem; font-weight: 500; }


/* Undo bar */
.jundo { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 60; display: flex; gap: 12px; align-items: center; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 999px; padding: 8px 8px 8px 16px; font-size: .8rem; box-shadow: 0 8px 24px var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; color: var(--ink); }
.jundo.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.jundo button { border: 0; background: var(--water); color: var(--on-water); border-radius: 999px; padding: 6px 14px; font-weight: 800; min-height: 34px; cursor: pointer; font-family: inherit; }

/* The ? sheet */
.jscrim { position: fixed; inset: 0; z-index: 54; background: var(--overlay-bg); opacity: 0; pointer-events: none; transition: opacity .2s; }
.jscrim.show { opacity: 1; pointer-events: auto; }
.jsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: 86%; max-width: 460px; margin: 0 auto; background: var(--bg-top); border-radius: 24px 24px 0 0; border: 1px solid var(--stone-edge); border-bottom: 0; transform: translateY(104%); transition: transform .28s ease; display: flex; flex-direction: column; text-align: left; }
.jsheet.show { transform: none; }
.jsheet-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--stone-edge); margin: 8px auto 2px; flex: none; }
.jsheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 14px 4px; flex: none; }
.jsheet-head .seg { flex: 1; margin: 0; }
.jsheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px calc(24px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .jsheet, .jscrim, .jundo { transition: none; } }
@media (prefers-reduced-motion: reduce) { .jsheet, .jscrim, .jundo { transition: none; } }
/* Five pages and the ? button share one row on a 400px phone. */
.journal-bar .seg-btn { padding: 8px 7px; font-size: .74rem; flex: 1 1 auto; }
.journal-bar .jhelp-btn { width: 40px; height: 40px; }

/* Rewards claim center: hero with Claim all, then Ready / In progress / Claimed */
.claim-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 14px; padding: 12px 14px; margin: 10px 0 4px; }
.claim-hero.ready { border-color: var(--accent); }
.claim-hero b { display: block; font-size: 0.92rem; font-weight: 700; }
.claim-hero span { font-size: 0.72rem; color: var(--ink-soft); }
.claim-hero .claim-tick { font-size: 1.5rem; }
.claim-more { display: block; width: 100%; margin: 12px 0 8px; padding: 9px 12px; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 1px dashed var(--stone-edge); border-radius: 12px; cursor: pointer; }
.claim-more:active { transform: scale(0.98); }

/* Character: pinned stats */
.profile-stat { position: relative; }
.profile-stat.pinned { border-color: var(--accent); }
.profile-stat .ps-pin { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border: 0; background: none; font-size: 0.7rem; cursor: pointer; opacity: 0.55; padding: 0; }
.profile-stat.pinned .ps-pin { opacity: 1; }
.ch-pins { display: flex; gap: 6px; margin-top: 4px; font-size: 0.68rem; font-weight: 600; color: var(--c-grey-100); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* Cards (Beta 2): tile grid, detail sheet, deck tray, set cards */
button.alm-card { border: 0; font: inherit; color: inherit; width: 100%; cursor: pointer; transition: transform 0.12s ease, opacity 0.15s; }
button.alm-card:active { transform: scale(0.95); }
.alm-card.tile.dim { opacity: 0.45; }
.alm-card .ac-in { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 0.5rem; font-weight: 700; color: var(--c-grey-100); background: rgba(0,0,0,0.32); padding: 1px 0; }
.alm-card.tile { overflow: hidden; }
.alm-card.tile.crafted { outline: 2px solid var(--c-amber-59); outline-offset: -2px; }
.card-row { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.card-row .cr-chevron { margin-left: auto; color: var(--ink-soft); font-size: 1.1rem; }
.cards-empty { text-align: center; padding: 18px 0; }
.cards-empty .panel-action { margin-top: 10px; }
.cf-fams { margin-bottom: 7px; }
.cardsheet { height: auto; max-height: 88%; }
.cs-top { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.cs-top .ins-card { margin: 0; width: 104px; height: 140px; }
.cs-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-name { font-size: 1.15rem; font-weight: 700; }
.cs-sub { font-size: 0.72rem; color: var(--ink-soft); }
.cs-stats { font-size: 0.95rem; font-weight: 700; }
.cs-abil { margin-top: 12px; font-size: 0.8rem; line-height: 1.55; }
.cs-story { font-size: 0.76rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; margin: 10px 0 0; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-actions .btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
.cs-actions .btn:disabled { opacity: 0.4; }
.cs-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.cs-on { border-color: var(--accent); }
.dk-tray { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; margin: 0 0 10px; justify-items: center; }
.dk-tray .dk-tslot { width: 100%; max-width: 54px; height: auto; aspect-ratio: 46 / 62; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.dk-tray .dk-tslot.empty { background: var(--stone); border: 1.5px dashed var(--stone-edge); border-radius: 8px; box-shadow: none; cursor: default; }
.dk-tray .dk-tslot:active:not(.empty) { transform: scale(0.94); }
.dk-toolbar { flex-wrap: wrap; }
.dk-tool-btn.active { background: var(--accent); color: var(--on-accent); }
.set-card { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 14px; margin-bottom: 8px; overflow: hidden; }
.set-card.done { border-color: var(--accent); }
.set-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.set-ring { width: 40px; height: 40px; }
.set-title b { display: block; font-size: 0.86rem; }
.set-title span { font-size: 0.7rem; color: var(--ink-soft); }
.set-chev { color: var(--ink-soft); font-size: 0.7rem; }
.set-open { padding: 4px 12px 12px; }
.set-note { padding: 0 12px 12px; font-size: 0.7rem; color: var(--ink-soft); }

/* Tab bars (Cards, Rewards, Journal) sat flush against the floating HUD pill: the pill's avatar badge makes it
   slightly taller than --hud-h. Only the screens' top padding grows, so the town map, scenes and radar (which
   use --hud-h directly) are untouched. Battles keep their own zero padding. */
.screen { padding-top: calc(var(--hud-h) + 10px); }
body.in-battle .screen { padding-top: 0; }

/* ===== Deck: "Your deck" / "Add cards" (build 92) =====
   The Deck tab used to stack slots, tray, chart, keywords, five buttons and the collection on one long page. It is now two
   views: Your deck (a bigger 4-wide tray, chart, keywords, tools) and Add cards (the deck as a thin strip pinned above the
   collection, so it is always in sight while you pick). Both read the same state; only the layout changed. */
#deckSeg { margin: 0 auto 10px; max-width: 360px; padding: 2px; }
#deckSeg .seg-btn { padding: 6px 4px; min-height: 36px; }
#deckBuild .dk-tray { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; margin: 6px 0 12px; }
#deckBuild .dk-tray .dk-tslot { max-width: 76px; }
#deckBuild .dk-tray .c-icon { font-size: 1.9rem; }
#deckBuild .dk-tray .c-cost { width: 22px; height: 22px; font-size: .75rem; top: -7px; left: -7px; }
.dk-pin { position: sticky; top: 6px; z-index: 6; margin: 0 -4px 10px; padding: 8px 8px 8px; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 20px; box-shadow: 0 8px 22px var(--shadow); }
.dk-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }
.dk-sslot { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; box-shadow: none; }
.dk-sslot .c-icon { font-size: .95rem; }
.dk-sslot.crafted { outline-width: 1.5px; outline-offset: 0; }
.dk-sslot.crafted::after { display: none; }
.dk-sslot.empty { background: transparent; border: 1.5px dashed var(--stone-edge); cursor: default; }
.dk-sslot:active:not(.empty) { transform: scale(.92); }
.dk-pin-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.dk-pin-count { font-size: .74rem; color: var(--ink-soft); margin-right: auto; text-align: left; }
.dk-pin-count b { color: var(--ink); font-size: .86rem; }
.dk-pin-row .dk-tool-btn { min-height: 38px; padding: 6px 12px; }

/* Workshop: the trade-up tray and its button stick while the card list scrolls. They had no background, so the rows
   showed straight through them. Now a solid panel that sits below the floating top bar. */
.cr-dock { top: 6px; margin: 0 0 10px; padding: 12px 12px 12px; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 22px; box-shadow: 0 8px 22px var(--shadow); }

/* ===== Town Guide redesign (build 93) =====
   Roomier than the old compact rows: a pinned search + section chips bar, a Today card split into labelled rows, and
   cards with an icon tile, a larger name, a "where" line and the details on tap. */
.gd-bar { position: sticky; top: -8px; z-index: 4; margin: -8px -14px 14px; padding: 10px 14px 10px; background: var(--bg-top); border-bottom: 1px solid color-mix(in srgb, var(--stone-edge) 60%, transparent); }
.gd-bar .jsearch { margin-bottom: 10px; min-height: 46px; font-size: .95rem; }
.gd-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
.gd-chips::-webkit-scrollbar { display: none; }
.gd-chip { flex: none; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gd-chip.active { background: var(--water); border-color: var(--water); color: var(--on-water); }
.gd-today { background: var(--stone); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--stone-edge)); border-radius: 20px; padding: 16px 16px 6px; margin-bottom: 22px; }
.gd-today-label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.gd-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--stone-edge) 70%, transparent); }
.gd-today-label + .gd-row { border-top: 0; padding-top: 2px; }
.gd-row-ico { font-size: 1.5rem; width: 32px; text-align: center; flex: none; line-height: 1.2; }
.gd-row b { display: block; font-size: .95rem; margin-bottom: 2px; }
.gd-row span:not(.gd-row-ico) { display: block; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.gd-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.gd-section-title { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; padding: 0 2px 2px; }
.gd-section-title span { font-family: var(--f-ui); font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.gd-card { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 18px; padding: 14px; cursor: pointer; transition: background-color .15s ease; }
.gd-card:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.gd-card.open { background: color-mix(in srgb, var(--water) 7%, var(--stone)); border-color: color-mix(in srgb, var(--water) 40%, var(--stone-edge)); }
.gd-card.locked { opacity: .65; cursor: default; }
.gd-head { display: flex; align-items: center; gap: 14px; }
.gd-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, var(--hl) 7%, transparent); border: 1px solid color-mix(in srgb, var(--stone-edge) 70%, transparent); }
.gd-title { flex: 1; min-width: 0; }
.gd-name { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.gd-where { margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.gd-chev { flex: none; width: 28px; text-align: center; color: var(--ink-soft); font-size: 1.1rem; font-weight: 800; }
.gd-how { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--stone-edge) 70%, transparent); font-size: .9rem; line-height: 1.65; color: var(--ink); animation: pop-in .2s ease; }
.gd-lock { color: var(--ink-soft); font-size: .84rem; }
.gd-go { margin-top: 12px; }
.gd-go .jgo { min-height: 44px; padding: 8px 18px; font-size: .84rem; }

/* ===== Settings redesign (build 94) =====
   Settings used to be one long run of identical boxes. Now: two shortcut tiles, then titled groups. Each group is one
   rounded card whose rows are separated by hairlines, with an icon, a label, a one-line hint and the control. Slider
   rows sit inside the card under their toggle. All element ids are unchanged, so the JS that wires them is too. */
.st-group { margin: 0 0 22px; text-align: left; }
.st-title { margin: 0 0 8px 4px; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; }
.st-card { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 20px; overflow: hidden; }
.st-card:not(.st-help-card) > * + * { border-top: 1px solid color-mix(in srgb, var(--stone-edge) 65%, transparent); }
.st-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; font-size: .92rem; }
.st-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; background: color-mix(in srgb, var(--hl) 7%, transparent); }
.st-label { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; }
.st-label small { display: block; margin-top: 2px; font-size: .76rem; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.st-block { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.st-block .st-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.st-block .st-label .st-ico { margin-bottom: 0; }
.st-block .st-label small { flex-basis: 100%; margin: 2px 0 0 0; }
.st-block .seg { width: 100%; max-width: none; margin: 0; }
.st-pair { flex-direction: row; gap: 10px; }
.st-pair .btn { flex: 1; min-height: 44px; }
.st-card .vol-row { border: 0; border-radius: 0; background: transparent; margin: 0; padding: 0 16px 8px 62px; }
.st-small { min-height: 40px; padding: 6px 16px; flex: none; }
.st-econ { white-space: pre-line; font-size: .78rem; line-height: 1.55; padding: 12px 16px; text-align: left; }
#cloudStatus { color: var(--ink-soft); }
.st-help-card { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; margin: 0; background: transparent; }
.st-help-card .btn { flex: 1 1 140px; min-height: 46px; }
.st-help-card .st-danger { flex-basis: 100%; color: var(--c-red-70); border-color: color-mix(in srgb, var(--c-red-70) 45%, var(--stone-edge)); }

/* ===== Social redesign (build 95) =====
   Who's Playing as cards: a "you" line saying whether you are visible, then one card per tester. */
.so-sub { margin: -4px 4px 12px; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.so-you { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 18px; border: 1px dashed var(--stone-edge); background: transparent; }
.so-you.on { border-style: solid; border-color: color-mix(in srgb, var(--water) 45%, var(--stone-edge)); background: color-mix(in srgb, var(--water) 8%, var(--stone)); }
.so-you-ico { font-size: 1.5rem; flex: none; }
.so-you-text { flex: 1; min-width: 0; }
.so-you-text b { display: block; font-size: .92rem; }
.so-you-text small { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.4; color: var(--ink-soft); }
.so-list { display: flex; flex-direction: column; gap: 10px; }
.so-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); }
.so-card.me { border-color: color-mix(in srgb, var(--accent) 55%, var(--stone-edge)); }
.so-av { position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; background: color-mix(in srgb, var(--hl) 7%, transparent); border: 1px solid color-mix(in srgb, var(--stone-edge) 70%, transparent); }
.so-live { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--c-green-57); border: 2px solid var(--stone); }
.so-text { flex: 1; min-width: 0; }
.so-text b { display: flex; align-items: center; gap: 8px; font-size: 1rem; flex-wrap: wrap; }
.so-text b em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 7px; }
.so-lv { font-size: .7rem; font-weight: 800; color: var(--ink-soft); border: 1px solid var(--stone-edge); border-radius: 999px; padding: 1px 8px; }
.so-text small { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.so-duel { flex: none; min-height: 44px; padding: 8px 16px; background: var(--water); border-color: var(--water); color: var(--on-water); font-weight: 800; }
.so-card .ghost-lock { flex: none; font-size: .76rem; color: var(--ink-soft); }
.so-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; border: 1px dashed var(--stone-edge); border-radius: 18px; }
.so-empty span { font-size: 1.8rem; }
.so-empty b { font-size: .95rem; }
.so-empty small { font-size: .8rem; color: var(--ink-soft); }

/* ===== Card sleeves (build 96) =====
   Tock's sleeves as a grid of big card-back previews inside the standard building sheet, instead of a list of rows with a
   tiny swatch. The worn sleeve is outlined; ones you do not own show their price and are dimmed a little. */
.sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: none; }
.sl-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px; border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--hl) 5%, transparent); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.sl-tile:active { transform: scale(.97); }
.sl-tile.worn { border-color: var(--water); background: color-mix(in srgb, var(--water) 12%, var(--stone)); box-shadow: 0 0 0 1px var(--water); }
.sl-tile.locked .sl-card { filter: saturate(.7); opacity: .85; }
.sl-card { position: relative; display: block; width: 54px; height: 76px; }
.sl-card .sleeve-chip { display: block; width: 100%; height: 100%; margin: 0; border-radius: 10px; vertical-align: top; box-shadow: 0 4px 10px var(--shadow); }
.sl-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; pointer-events: none; }
.sl-name { font-size: .84rem; font-weight: 800; line-height: 1.2; text-align: center; }
.sl-status { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hl) 9%, transparent); color: var(--ink-soft); }
.sl-status.worn { background: var(--water); color: var(--on-water); }
.sl-status.price { color: var(--ink); }
.sl-status.short { color: var(--ink-soft); opacity: .8; }

/* ===== Path: skills, gear, companion bond (build 99) ===== */
.pt-head { padding: 14px 16px; margin-bottom: 4px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--stone-edge)); background: var(--stone); text-align: left; }
.pt-head b { font-family: var(--f-display); font-size: 1.7rem; color: var(--accent); }
.pt-head span { font-weight: 700; }
.pt-head small { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
.pt-list { display: flex; flex-direction: column; gap: 10px; }
.pt-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); text-align: left; }
.pt-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--hl) 7%, transparent); }
.pt-body { flex: 1; min-width: 0; }
.pt-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 1rem; font-weight: 800; }
.pt-rank { font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.pt-pips { display: flex; gap: 4px; margin: 6px 0; }
.pt-pip { width: 18px; height: 6px; border-radius: 3px; background: var(--track); }
.pt-pip.on { background: var(--water); }
.pt-pip.mastery { background: color-mix(in srgb, var(--accent) 22%, var(--track)); }
.pt-pip.mastery.on { background: var(--accent); }
.pt-card.mastered { border-color: color-mix(in srgb, var(--accent) 55%, var(--stone-edge)); }
.pt-text { font-size: .82rem; line-height: 1.45; }
.pt-text small { display: block; margin-top: 2px; font-size: .74rem; color: var(--ink-soft); }
.pt-add, .pt-buy { flex: none; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 16px; border: 0; background: var(--water); color: var(--on-water); font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.pt-buy { font-size: .8rem; min-width: 84px; }
.pt-add:disabled, .pt-buy:disabled { background: color-mix(in srgb, var(--hl) 8%, transparent); color: var(--ink-soft); cursor: default; }
.pt-done { flex: none; font-size: .78rem; font-weight: 800; color: var(--ink-soft); padding: 0 8px; }
.pt-reset { margin: 10px auto 0; display: block; }

/* ===== Ladder, archetypes and deck practice (build 100) ===== */
.di-card { margin: 4px 0 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.di-arch b { display: block; font-size: 1rem; }
.di-arch span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
.di-arch em { font-style: normal; font-weight: 800; color: var(--accent); }
.di-test { align-self: stretch; min-height: 46px; }
.di-test:disabled { opacity: .55; }
.di-bars { display: flex; flex-direction: column; gap: 8px; }
.di-bars.stale { opacity: .55; }
.di-row { display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; }
.di-bar { display: block; height: 10px; border-radius: 6px; background: var(--track); overflow: hidden; }
.di-bar b { display: block; height: 100%; background: var(--water); border-radius: 6px; transition: width .4s ease; }
.di-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.di-note { font-size: .72rem; line-height: 1.4; color: var(--ink-soft); }
.lr-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--stone-edge)); background: var(--stone); text-align: left; }
.lr-badge { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lr-body { flex: 1; min-width: 0; }
.lr-name { display: flex; align-items: baseline; gap: 10px; font-size: 1.05rem; font-weight: 800; }
.lr-name span { font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.lr-bar { height: 8px; border-radius: 5px; background: var(--track); margin: 7px 0; overflow: hidden; }
.lr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.lr-body small { display: block; font-size: .74rem; line-height: 1.4; color: var(--ink-soft); }

/* ===== Pack opening (build 101): the card arrives face-down and flips when tapped ===== */
.reveal-card-frame.pk-flip { perspective: 800px; cursor: pointer; }
.reveal-card-frame.pk-flip .reveal-card { transition: transform .5s cubic-bezier(.3,.8,.3,1); transform-style: preserve-3d; }
.reveal-card-frame.pk-flip.pk-down .reveal-card { transform: rotateY(180deg); }
.reveal-card-frame.pk-flip.pk-down .reveal-card > * { visibility: hidden; }
.reveal-card-frame.pk-flip.pk-down .reveal-card { background: linear-gradient(135deg, var(--water-glow), var(--water)); border: 2px solid color-mix(in srgb, var(--hl) 35%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); animation: pk-bob 1.6s ease-in-out infinite; }
.reveal-card-frame.pk-flip.pk-down .reveal-card::after { content: '🎴'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; transform: rotateY(180deg); visibility: visible; }
.reveal-card-frame.pk-flip.pk-down[data-r="rare"] .reveal-card, .reveal-card-frame.pk-flip.pk-down[data-r="ultra"] .reveal-card { box-shadow: 0 0 26px var(--c-amber-59); }
.reveal-card-frame.pk-flip.pk-down[data-r="super"] .reveal-card, .reveal-card-frame.pk-flip.pk-down[data-r="mythic"] .reveal-card { box-shadow: 0 0 30px var(--c-violet-75); }
@keyframes pk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.pk-hint { font-weight: 800; color: var(--ink-soft); }
.rarity-tag.rt-new { background: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .reveal-card-frame.pk-flip.pk-down .reveal-card { animation: none; } }

/* ===== Next-goal chip (build 101): one pill under the top bar that points at the next useful thing ===== */
.goal-chip { position: absolute; z-index: 9; left: 12px; top: calc(var(--hud-h) + 10px); max-width: calc(100% - 84px); display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 700; text-align: left; box-shadow: 0 6px 18px var(--shadow); cursor: pointer; }
.goal-chip.hidden { display: none; }
.goal-ico { flex: none; font-size: 1.15rem; }
.goal-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-arrow { flex: none; color: var(--ink-soft); font-size: 1.1rem; }
.goal-chip:active { transform: scale(.97); }

/* ===== Binder (build 102): rarity and family pages on the Sets tab ===== */
.bn-card { text-align: left; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); }
.bn-title { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; }
.bn-sub { font-size: .78rem; color: var(--ink-soft); margin-bottom: 6px; }
.bn-group { margin: 10px 0 4px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bn-row { display: grid; grid-template-columns: 26px 70px 1fr 46px; align-items: center; gap: 8px; padding: 5px 0; font-size: .84rem; font-weight: 700; }
.bn-bar { display: block; height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bn-bar b { display: block; height: 100%; background: var(--water); border-radius: 5px; }
.bn-row.full .bn-bar b { background: var(--accent); }
.bn-row em { font-style: normal; text-align: right; font-size: .76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bn-row.full em { color: var(--accent); }
.bn-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--stone-edge) 65%, transparent); font-size: .76rem; color: var(--ink-soft); }

/* ===== Sliding tabs (build 103): a pill glides under the active button of every .seg, like the bottom dock ===== */
.seg { position: relative; }
.seg-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--water); pointer-events: none; box-shadow: 0 3px 10px color-mix(in srgb, var(--water) 40%, transparent);
  transition: transform .42s cubic-bezier(.3, 1.35, .45, 1), width .42s cubic-bezier(.3, 1.35, .45, 1), opacity .2s ease; will-change: transform, width; }
.seg.has-pill > .seg-btn { position: relative; z-index: 1; transition: color .25s ease; }
.seg.has-pill > .seg-btn.active { background: transparent; }
@media (prefers-reduced-motion: reduce) { .seg-pill, .seg.has-pill > .seg-btn { transition: none; } }
@media (prefers-reduced-motion: reduce) { .seg-pill, .seg.has-pill > .seg-btn { transition: none; } }

/* ===== Calm corner (build 104) ===== */
.calm { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; max-width: 460px; margin: 0 auto; background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)); color: var(--ink); text-align: left; opacity: 1; transition: opacity .3s ease; }
.calm.hidden { display: none; }
.calm-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 8px; flex: none; }
.calm-title { flex: 1; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; }
.calm-back, .calm-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; font-size: 1.2rem; cursor: pointer; }
.calm-back.hidden { display: none; }
.calm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 12px; }
.calm-lead { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.calm-hint { font-size: .78rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.calm-rested { padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--water) 14%, var(--stone)); border: 1px solid color-mix(in srgb, var(--water) 40%, var(--stone-edge)); font-weight: 800; font-size: .86rem; }
.calm-list { display: flex; flex-direction: column; gap: 10px; }
.calm-item { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.calm-item:active { transform: scale(.98); }
.calm-item.locked { opacity: .55; }
.calm-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--hl) 7%, transparent); }
.calm-tx { flex: 1; min-width: 0; } .calm-tx b { display: block; font-size: 1rem; } .calm-tx small { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-soft); }
.calm-go { color: var(--ink-soft); font-size: 1.3rem; }
.calm-section { margin-top: 8px; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; }
.calm-cards { display: flex; flex-direction: column; gap: 8px; }
.calm-pc { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--stone)); border: 1px solid var(--stone-edge); }
.calm-pc-ico { font-size: 1.8rem; } .calm-pc div { flex: 1; min-width: 0; } .calm-pc b { display: block; font-size: .9rem; } .calm-pc small { display: block; font-size: .74rem; color: var(--ink-soft); } .calm-pc em { display: block; margin-top: 3px; font-size: .8rem; font-style: italic; }
.calm-pc-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: .9rem; cursor: pointer; }
.calm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: none; }
.calm-count { font-size: .8rem; color: var(--ink-soft); }
.calm-btn { min-height: 46px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.calm-btn.pri { background: var(--water); border-color: var(--water); color: var(--on-water); }
.calm-btn:disabled { opacity: .5; cursor: default; }
.calm-say { font-family: var(--f-display); font-size: 1.3rem; text-align: center; min-height: 1.6em; }
/* stages */
.calm-pond, .calm-sand, .calm-night, .calm-chimes, .calm-tea, .calm-tree { position: relative; flex: 1 1 auto; min-height: 280px; border-radius: 22px; overflow: hidden; border: 1px solid var(--stone-edge); touch-action: none; user-select: none; -webkit-user-select: none; }
.calm-pond { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, var(--c-cyan-20-2), var(--c-cyan-10)); cursor: pointer; }
.calm-pond .calm-say { position: absolute; left: 0; right: 0; bottom: 20px; color: var(--c-grey-93); }
.calm-orb { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c-cyan-88), var(--water) 55%, var(--c-cyan-50-3)); box-shadow: 0 0 40px color-mix(in srgb, var(--water) 50%, transparent); transform: scale(1); transition: transform 4s ease-in-out; will-change: transform; }
.calm-ripple { position: absolute; border-radius: 50%; width: 150px; height: 150px; border: 2px solid color-mix(in srgb, var(--water) 70%, transparent); pointer-events: none; animation: calm-rip 2.4s ease-out forwards; }
@keyframes calm-rip { from { transform: translate(-50%, -50%) scale(.1); opacity: .9; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.calm-sand { background: var(--c-amber-71); } .calm-sand canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.calm-rock { position: absolute; font-size: 2rem; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(3px 5px 3px rgba(60, 50, 30, .45)); }
.calm-night { background: linear-gradient(180deg, var(--c-blue-9), var(--c-blue-18) 70%, var(--c-blue-26)); cursor: pointer; }
.calm-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--c-blue-94-2); }
.calm-hint-top { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: .82rem; color: var(--c-blue-79); padding: 0 16px; pointer-events: none; }
.calm-lantern { position: absolute; bottom: -40px; font-size: 2rem; pointer-events: none; animation: calm-float 7s ease-in forwards; filter: drop-shadow(0 0 14px rgba(255, 190, 90, .8)); }
@keyframes calm-float { 0% { transform: translate(-50%, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), -340px) scale(.45); opacity: 0; } }
.calm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .calm-lines line { stroke: var(--c-amber-78-2); stroke-width: .5; stroke-linecap: round; opacity: .8; vector-effect: non-scaling-stroke; }
.calm-bigstar { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0; background: transparent; color: var(--c-blue-88); font-size: 1.1rem; cursor: pointer; animation: calm-twinkle 3s ease-in-out infinite; }
.calm-bigstar.done { color: var(--c-amber-83); text-shadow: 0 0 10px var(--c-amber-74); animation: none; } .calm-bigstar.shy { animation: calm-shy .5s ease; }
@keyframes calm-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes calm-shy { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.4); } }
.calm-chimes { background: linear-gradient(180deg, var(--c-grey-14), var(--c-grey-21)); display: flex; justify-content: center; gap: 12px; }
.calm-beam { position: absolute; top: 0; left: 12px; right: 12px; height: 8px; border-radius: 4px; background: var(--c-orange-29-2); }
.calm-chime { position: relative; width: 28px; display: flex; flex-direction: column; align-items: center; transform-origin: top center; margin-top: 8px; }
.calm-chime::before { content: ''; width: 2px; background: var(--c-grey-46); height: var(--string); }
.calm-chime i { display: block; width: 22px; height: var(--len); border-radius: 11px; background: linear-gradient(90deg, var(--c-teal-77), var(--c-grey-92), var(--c-teal-67)); box-shadow: 0 0 10px rgba(200, 240, 225, .25); }
.calm-chime.ring { animation: calm-sway 1.8s ease-out; } @keyframes calm-sway { 0% { transform: rotate(0); } 15% { transform: rotate(9deg); } 35% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.calm-tea { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, var(--c-orange-13), var(--c-orange-18-2)); touch-action: auto; }
.calm-cup { position: relative; width: 120px; height: 100px; border-radius: 0 0 50px 50px; border: 3px solid var(--c-amber-85); border-top-width: 2px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.calm-cup i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, var(--c-orange-52), var(--c-orange-40)); transition: height .15s linear; }
.calm-steam { font-size: 2rem; opacity: 0; transform: translateY(8px); transition: opacity 1.2s ease, transform 3s ease; color: var(--c-amber-85); } .calm-steam.on { opacity: .7; transform: translateY(-6px); }
.calm-tree { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, var(--c-grey-14-2), var(--c-grey-20-4)); touch-action: auto; }
.calm-tree-ico { font-size: 4.5rem; transition: transform 1s ease; } .calm-tree-ico.s3, .calm-tree-ico.s4 { font-size: 6rem; } .calm-tree-ico.s2 { font-size: 5.2rem; }
/* sitting on a bench: the overlay is see-through, the town zooms out slowly and the chrome fades away */
.calm.sit { background: transparent; pointer-events: none; justify-content: flex-end; }
.calm.sit .calm-top { display: none; }
.calm.sit .calm-body { flex: none; align-items: center; justify-content: flex-end; overflow: visible; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); background: linear-gradient(0deg, rgba(0,0,0,.45), transparent); }
.calm.sit .calm-btn { pointer-events: auto; }
.calm-sit-say { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.35; text-align: center; color: var(--c-grey-100); text-shadow: 0 2px 10px rgba(0,0,0,.5); max-width: 30ch; min-height: 2.7em; display: flex; align-items: center; justify-content: center; transition: opacity .6s ease; } .calm-sit-say.fade { opacity: 0; }
body.calm-sit .town-map-wrap { transform: scale(1.1); transition: transform 6s ease-out; }
body.calm-sit .hud, body.calm-sit #bottomNav, body.calm-sit #goalChip, body.calm-sit .town-info, body.calm-sit .map-radar-btn { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.town-map-wrap { transition: transform 1.5s ease-out; }
/* Cozy mode (Settings -> Comfort): nothing pulses for attention */
html.cozy .cr-ready, html.cozy .cr-slot.next, html.cozy .bt-pulse { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .calm-orb, .calm-bigstar, .calm-lantern, .calm-chime.ring { animation-duration: .01s; } }
@media (prefers-reduced-motion: reduce) { .calm-orb, body.calm-sit .town-map-wrap { transition: none; } .calm-ripple, .calm-lantern, .calm-chime.ring, .calm-bigstar { animation-duration: .01s; } }

/* Calm corner: stages keep a sensible height so the buttons stay close, and the tea ritual matches the other screens
   (a stage card, a one-line message, three step chips, two full-width buttons). */
.calm-pond, .calm-sand, .calm-night, .calm-chimes, .calm-tree, .calm-stage { flex: 1 1 auto; min-height: 260px; max-height: 440px; }
.calm-stage { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--stone-edge); user-select: none; -webkit-user-select: none; }
.calm-tea-stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding-bottom: 28px; background: radial-gradient(ellipse at 50% 85%, var(--c-orange-22-3), var(--c-orange-13) 70%); }
.calm-tea-stage .calm-steam { position: absolute; top: 20%; left: 0; right: 0; text-align: center; }
.calm-stream { position: absolute; top: 0; left: calc(50% + 8px); width: 4px; height: 0; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--c-orange-52)); opacity: 0; transition: height .35s ease, opacity .25s ease; }
.calm-stream.on { height: calc(100% - 128px); opacity: .9; }
.calm-cup { position: relative; width: 132px; height: 104px; border-radius: 6px 6px 56px 56px; border: 3px solid var(--c-amber-85); border-top-width: 2px; overflow: hidden; background: rgba(255, 255, 255, .06); z-index: 1; }
.calm-saucer { width: 190px; height: 16px; margin-top: -4px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, var(--c-amber-88), var(--c-amber-65-2)); box-shadow: 0 8px 14px rgba(0, 0, 0, .35); }
.calm-steps { display: flex; gap: 8px; flex: none; }
.calm-steps span { flex: 1; text-align: center; padding: 9px 4px; border-radius: 999px; border: 1px solid var(--stone-edge); background: var(--stone); font-size: .78rem; font-weight: 800; color: var(--ink-soft); transition: background .3s ease, color .3s ease; }
.calm-steps span.on { background: var(--water); border-color: var(--water); color: var(--on-water); }
.calm-steps span.done { color: var(--ink); border-color: color-mix(in srgb, var(--water) 55%, var(--stone-edge)); }
.calm-actions { display: flex; flex-direction: column; gap: 10px; flex: none; }
.calm-btn.wide { width: 100%; min-height: 52px; font-size: .95rem; }
.calm-btn:disabled { opacity: .45; }
.calm-body .calm-say { flex: none; }

/* Calm corner: the same pattern on every activity: a stage card, one quiet line, optional chips, full-width buttons */
.calm-say.sm { font-family: var(--f-ui); font-size: .86rem; font-weight: 600; line-height: 1.5; color: var(--ink-soft); min-height: 0; }
.calm-actions.two { flex-direction: row; } .calm-actions.two .calm-btn { flex: 1; min-width: 0; padding-inline: 8px; }
.calm-steps.wrap { flex-wrap: wrap; } .calm-steps.wrap span { flex: 1 1 40%; }
.calm-steps.five span { padding: 9px 0; font-size: 1.15rem; font-weight: 400; }
.calm-steps.five span:not(.on):not(.done) { opacity: .5; }
.calm-grow { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.calm-grow i { display: block; height: 100%; border-radius: 5px; background: var(--water); transition: width .6s ease; }
.calm-tree { align-items: center; justify-content: center; }

/* ===== The cellar as a Descent Map (build 107) ===== */

/* ===== Tarot (build 108) ===== */
.tr-body { display: flex; flex-direction: column; gap: 12px; }
.tr-stage { background: linear-gradient(180deg, var(--c-indigo-15), var(--c-indigo-12-2)); border-color: var(--c-indigo-33); padding: 14px; display: block; min-height: 0; max-height: none; flex: none; }
.tr-spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tr-slot { text-align: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.tr-card { perspective: 700px; border: 0; padding: 0; background: none; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.tr-card:disabled { cursor: default; } .tr-card:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 14px; }
.tr-in { position: relative; aspect-ratio: 3 / 5; transition: transform .7s cubic-bezier(.3, .8, .3, 1); transform-style: preserve-3d; }
.tr-card.up .tr-in { transform: rotateY(180deg); }
.tr-back, .tr-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 4px; text-align: center; }
.tr-back { background: repeating-linear-gradient(45deg, var(--c-indigo-23) 0 6px, var(--c-indigo-28) 6px 12px); border: 2px solid var(--c-amber-66); box-shadow: 0 0 18px rgba(230, 192, 106, .2); justify-content: center; font-size: 1.8rem; color: var(--c-amber-66); }
.tr-card.empty .tr-back { opacity: .35; }
.tr-face { transform: rotateY(180deg); background: linear-gradient(180deg, var(--c-amber-92), var(--c-amber-82-2)); color: var(--c-orange-11); border: 2px solid var(--c-amber-66); }
.tr-face.empty { background: transparent; border-style: dashed; color: var(--c-indigo-59); justify-content: center; }
.tr-num { font-family: var(--f-display); font-size: .74rem; font-weight: 600; letter-spacing: .12em; }
.tr-ico { font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1; } .tr-ico .rev { display: inline-block; transform: rotate(180deg); }
.tr-face b { font-family: var(--f-display); font-size: clamp(.66rem, 3vw, .84rem); line-height: 1.15; }
.tr-face small { font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c-amber-28); line-height: 1.2; }
.tr-tag { font-size: .52rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--c-orange-11); color: var(--c-amber-79); }
.tr-fortune { padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c-amber-66) 55%, var(--stone-edge)); background: color-mix(in srgb, var(--c-amber-66) 9%, var(--stone)); display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.tr-fortune b { font-family: var(--f-display); font-size: 1.05rem; } .tr-fortune.dim { color: var(--ink-soft); border-style: dashed; background: transparent; font-size: .82rem; }
.tr-count { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.tr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tr-tile { aspect-ratio: 3 / 4; border-radius: 10px; border: 1.5px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; position: relative; }
.tr-tile span { font-size: 1.35rem; } .tr-tile small { font-size: .52rem; font-weight: 800; color: var(--ink-soft); }
.tr-tile.lock { opacity: .4; } .tr-tile.seen { opacity: .65; filter: grayscale(.6); } .tr-tile.att { border-color: var(--c-amber-66); box-shadow: 0 0 14px rgba(230, 192, 106, .45); } .tr-tile.sel { outline: 2px solid var(--water); outline-offset: 1px; }
.tr-detail { padding: 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); font-size: .86rem; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.tr-detail b { font-family: var(--f-display); font-size: 1.1rem; } .tr-detail i { color: var(--ink-soft); } .tr-card-line { color: var(--ink-soft); font-size: .8rem; }
.tr-perk { font-weight: 800; color: var(--c-amber-79); font-size: .82rem; } .tr-hint { color: var(--ink-soft); font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { .tr-in { transition: none; } }
@media (prefers-reduced-motion: reduce) { .tr-in { transition: none; } }
#trSeg { width: 100%; max-width: none; flex: none; } #trSeg .seg-btn { white-space: nowrap; }

/* ===== The cellar's dark floors (build 109) ===== */

/* ===== Fate: Arcana powers in battle (build 111) ===== */
#battleView .bt-fate.ready { border-color: var(--c-violet-75); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-violet-75) 55%, transparent), 0 0 14px color-mix(in srgb, var(--c-violet-75) 50%, transparent); }
.fate-row { margin-top: -4px; }
.fate-row .knack-chip.on { background: var(--c-violet-75); color: var(--c-violet-15); }

/* ===== Fate Spread (build 112) ===== */
.sp-card-wrap { margin: 4px 0 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.sp-head { display: flex; flex-direction: column; gap: 2px; } .sp-head b { font-size: 1rem; } .sp-head small { font-size: .78rem; color: var(--ink-soft); }
.sp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-slot { min-width: 0; padding: 8px 6px 10px; border-radius: 14px; border: 1.5px dashed var(--stone-edge); background: transparent; color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sp-slot.filled { border-style: solid; border-color: var(--c-amber-66); background: color-mix(in srgb, var(--c-amber-66) 8%, var(--stone)); } .sp-slot.off { opacity: .5; }
.sp-pos { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .sp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; justify-content: center; }
.sp-ico { font-size: 1.6rem; line-height: 1; } .sp-card b { font-size: .74rem; line-height: 1.2; } .sp-slot small { font-size: .62rem; line-height: 1.3; color: var(--ink-soft); }
.sp-bonus { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-amber-66) 12%, var(--stone)); border: 1px solid color-mix(in srgb, var(--c-amber-66) 45%, var(--stone-edge)); font-size: .8rem; font-weight: 800; }
.sp-hint, .sp-note { font-size: .78rem; line-height: 1.45; color: var(--ink-soft); } .sp-note { color: var(--c-orange-72); }
.sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sp-pick { position: relative; min-width: 0; min-height: 62px; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--stone-edge); background: var(--bg-top); color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sp-pick span { font-size: 1.3rem; line-height: 1; } .sp-pick small { font-size: .56rem; line-height: 1.2; text-align: center; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pick.used { border-color: var(--c-amber-66); box-shadow: 0 0 10px rgba(230, 192, 106, .35); } .sp-pick i { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-amber-66); color: var(--c-amber-9); font-style: normal; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.sp-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .sp-line span { padding: 4px 10px; border-radius: 999px; background: var(--board-bg); border: 1px solid var(--stone-edge); font-size: .74rem; } .sp-line small { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
#battleView .hcard .spread-past::after, #battleView .hcard .spread-present::after, #battleView .hcard .spread-future::after { content: '🃏'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: .8rem; filter: drop-shadow(0 0 4px rgba(230, 192, 106, .9)); pointer-events: none; z-index: 3; }

/* ---- Tarot Trials (build 114) ---- */
.tl-list { display: flex; flex-direction: column; gap: 10px; }
.tl-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--stone-edge); background: var(--stone); }
.tl-row.done { border-color: color-mix(in srgb, var(--accent, var(--c-cyan-69)) 55%, var(--stone-edge)); }
.tl-row.lock { opacity: .55; }
.tl-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255,255,255,.06); }
.tl-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-txt b { font-family: var(--f-display); font-size: 1rem; }
.tl-txt small { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
.tl-txt small.tl-fate { opacity: .85; }

/* ---- Family passives (build 116) ---- */
.di-pass { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(141,188,203,.12); border: 1px solid rgba(141,188,203,.4); }
.di-pass i { font-style: normal; font-size: 1.3rem; line-height: 1; }
.di-pass b { display: block; font-family: var(--f-display); font-size: 1rem; }
.di-pass span { display: block; font-size: .82rem; color: var(--ink-soft); }
.di-pass.dim { opacity: .6; background: transparent; border-style: dashed; border-color: var(--stone-edge); }
.di-pass small { font-family: var(--f-ui); font-weight: 700; font-size: .68rem; color: var(--ink-soft); letter-spacing: .04em; margin-left: 4px; }
.di-arch .di-pass + .di-pass { margin-top: 6px; }

/* Fishing follows the light theme (build 120): the scene used to re-declare the dark tokens, so it stayed night-blue. Now it
   reads the theme tokens, with a sunlit bank and a pale-to-deep sea-glass water. Silhouettes stay dark so they read on it. */
:root[data-theme="light"] #fishOverlay { background: color-mix(in srgb, var(--ink) 35%, transparent); }
:root[data-theme="light"] .fish-scene { background: var(--c-cyan-41); }
:root[data-theme="light"] .fs-bank { background: linear-gradient(180deg, var(--c-amber-88-2), var(--c-lime-79)); }
:root[data-theme="light"] .fs-water { background: linear-gradient(180deg, var(--c-cyan-85-2) 0, var(--c-cyan-70) 14%, var(--c-cyan-55) 52%, var(--c-cyan-41) 100%); }
:root[data-theme="light"] .fs-shafts { background: repeating-linear-gradient(100deg, rgba(255,255,255,.16) 0 16px, transparent 16px 54px); }
:root[data-theme="light"] #fishLine { stroke: rgba(40,60,70,.75); }
:root[data-theme="light"] .fs-panel { background: color-mix(in srgb, var(--stone) 90%, transparent); border-color: var(--stone-edge); box-shadow: 0 6px 22px var(--shadow); }
:root[data-theme="light"] .fs-bait { background: color-mix(in srgb, var(--ink) 7%, transparent); }
:root[data-theme="light"] .fs-stamps i { background: color-mix(in srgb, var(--ink) 18%, transparent); }
:root[data-theme="light"] .fs-stamps i.on { background: var(--accent); box-shadow: none; }
:root[data-theme="light"] .fs-depth { background: color-mix(in srgb, var(--stone) 70%, transparent); border-color: var(--stone-edge); }
:root[data-theme="light"] .fs-sw.unknown .in, :root[data-theme="light"] .fs-sw.unknown.large .in, :root[data-theme="light"] .fs-sw.unknown.legend .in { filter: brightness(0) opacity(.42); }
:root[data-theme="light"] .fs-bang { text-shadow: 0 0 10px rgba(255,255,255,.9); color: var(--c-amber-44); }
/* Weed the Beds: softer soil on the light theme, the near-black brown was the heaviest thing on an otherwise pale screen. */
:root[data-theme="light"] .bed { background: var(--c-orange-58); box-shadow: inset 0 4px 0 rgba(60,40,15,0.22); }

/* ===== Screen redesign (build 121): weather board, mailbox, speech bubble, dark cellar =====
   The weather board used to be one centred paragraph; it is now Now / Next / Today / Mood rows. The mailbox gets avatar
   tiles, "Waiting for you" / "Earlier" groups and note-paper letters. Building speech is a compact bubble instead of a
   tall box. The cellar floor sits in one dark framed room instead of loose black slabs on the pale sheet. */

/* -- weather board (the sign dialog) -- */
#sceneryDesc.rich { text-align: left; margin: 0 0 14px; }
.wb-quote { margin: 0 0 12px; padding: 0 6px; text-align: center; font-family: var(--f-display); font-size: .95rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; text-wrap: balance; }
.wb-rows { display: flex; flex-direction: column; gap: 8px; }
.wb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, var(--stone)); border: 1px solid var(--stone-edge); }
.wb-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 13px; background: color-mix(in srgb, var(--water) 22%, var(--stone)); }
.wb-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-txt small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.wb-txt b { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.wb-txt > span { font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }
.wb-tag { flex: none; align-self: flex-start; font-style: normal; font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); white-space: nowrap; }
.wb-bar { margin-top: 6px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.wb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--water-glow)); }

/* -- building speech: a compact bubble, not a tall box -- */
#sceneView.sc-std .sc-bubble { left: 50%; right: auto; width: max-content; max-width: calc(100% - 44px); transform: translateX(-50%); min-height: 0; padding: 9px 16px; border-radius: 18px; font-size: .86rem; line-height: 1.4; }
#sceneView.sc-std.scene-enter .sc-bubble { animation-name: sc-bubble-in-c; }
@keyframes sc-bubble-in-c { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.92); } to { opacity: 1; transform: translateX(-50%); } }
#sceneView.scene-leaving.sc-std .sc-bubble { animation-name: sc-fade-out-c; }
@keyframes sc-fade-out-c { to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

/* -- mailbox -- */
.mail-list { gap: 8px; padding: 0; }
.mail-sec { margin: 6px 4px 0; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.mail-sec:first-child { margin-top: 0; }
.mail-item { align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; text-align: left; }
.mail-item .panel-text { min-width: 0; }
.mail-item .panel-name { font-size: .92rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.mail-item:not(.unread) .panel-name { font-weight: 600; }
.mail-item .panel-desc { margin-top: 2px; font-size: .72rem; }
.mail-item.unread { border-color: color-mix(in srgb, var(--water) 70%, var(--stone-edge)); background: color-mix(in srgb, var(--water) 9%, var(--stone)); }
.mail-ava { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 14px; background: color-mix(in srgb, var(--ink) 7%, var(--stone)); }
.mail-ava .mail-dot { position: absolute; right: -3px; top: -3px; margin: 0; width: 11px; height: 11px; border: 2px solid var(--stone); background: var(--water-ink); box-shadow: none; }
.mail-gift { flex: none; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); }
.mail-chevron { align-self: center; padding: 0; opacity: .6; }
.mail-item.open { align-items: flex-start; }
.mail-item.open .mail-ava, .mail-item.open .mail-gift, .mail-item.open .mail-chevron { margin-top: 2px; }
.mail-body { margin-top: 10px; padding: 10px 12px; border: 0; border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--accent) 12%, var(--stone)); font-size: .84rem; line-height: 1.5; }
.mail-item-actions .btn { width: 100%; }

/* -- the dark cellar floor, as one framed room -- */

.card-art-img, .art-shadow { filter: drop-shadow(0 .035em .05em var(--art-sh)); }

/* The same faint shadow on the static UI icons (build 126): emoji fallbacks on cards, keyword icons, list/panel/guide/quest icons and the dock tabs.
   Deliberately NOT on anything that moves every frame (map characters, bobbing chests, fish, weather, scene characters) or that already has its own
   effect (the level-up glow, the cellar doors), because a filter on a moving element repaints every frame on a phone. */
.card-emoji, .jtd-ic, .jr-ic, .bn-ico, .hs-icon, .dk-kws span, .ch-peb, .panel-icon, .ac-kw, .kws, .big-icon, .st-ico, .gd-icon, .gd-row-ico, .q-icon, .sf-icon, .le-icon, .wb-ico, .goal-ico, .story-icon, .life-ico, .sp-ico, .tr-ico, .pt-ico, .ps-icon, .hp-icon, .a-emoji, .wx-icon, .amb-icon, .hud-ambient-icon,

/* Icon swap (build 128): a replaced icon is an <img> sized like the emoji it stands in for; taps go to whatever is underneath, as they did on the emoji. */
.ico-swap { width: 1em; height: 1em; object-fit: contain; vertical-align: -.14em; margin-inline: .04em; display: inline-block; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 .035em .05em var(--art-sh)); }
.ico-pill { position: fixed; left: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 200; display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 14px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px var(--shadow); }
.ico-pill button { font: inherit; font-size: .7rem; font-weight: 800; border: 0; border-radius: 999px; padding: 4px 12px; background: color-mix(in srgb, var(--on-accent) 16%, transparent); color: inherit; cursor: pointer; }

/* Looking around the town (build 130): the map takes over touch gestures so a finger drag pans it instead of scrolling the page. */
#townGrid { touch-action: none; cursor: grab; } #townGrid.panning { cursor: grabbing; }
.map-recenter-btn { top: calc(var(--hud-h) + 62px); color: var(--ink); }
.map-recenter-btn.hidden { display: none; }

/* Optional one-canvas rain and snow (js/weather-canvas.js, only with ?renderer=canvas). .town-weather is 1.2x wide and 1.4x tall
   (inset: -20% -10%), so the canvas sits over the middle of it, exactly where the town view is. */
.town-weather .fx-canvas { position: absolute; left: 8.3333%; top: 14.2857%; width: 83.3333%; height: 71.4286%; pointer-events: none; }

/* WebGL town (js/town-gl.js): the ground canvas sits behind #townWorld (entities, buildings), the front canvas redraws the overhang of
   each tree over the entities, above the world and below the sky layers (z-index 5+). Overlay tiles (.ov) are transparent boxes used only for
   fish hints and for the placement / Hide and Seek glow, which reuse the .town-tile outline rules. */
.town-gl { position: absolute; left: 0; top: 0; pointer-events: none; }
.town-front { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.town-tile.ov { background: none; }
.town-tile.ov:not(.placeable):not(.hideseek-spot):not(.hideseek-found):not(.hideseek-wrong) { outline: none; }


#battleView .card, .reveal-card, .alm-card.tile { container-type: inline-size; --u: 10cqw; padding: 0; justify-content: flex-start; align-items: center; gap: 0; }
#battleView .card[class*="rarity-"], .reveal-card[class*="rarity-"], .alm-card.tile[class*="rarity-"] {
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.5), rgba(255,255,255,0) 64%), var(--rg);
}
/* the art takes everything the paper panel leaves */
#battleView .card .icon, #battleView .hand .card .icon, .reveal-card .icon, .alm-card.tile .ac-icon {
  flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: calc(var(--u) * 6.4);
}
/* keywords: round badges stacked under the cost bubble, in the cost bubble's own style */
#battleView .card .kws, .reveal-card .kws, .alm-card.tile .ac-kw {
  position: absolute; z-index: 3; top: calc(var(--u) * 2.55); left: calc(var(--u) * -.6); min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .3); font-size: calc(var(--u) * 1.25); letter-spacing: 0;
}
#battleView .card .kws span, .reveal-card .kws span, .alm-card.tile .ac-kw i {
  width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 3px var(--shadow); display: flex; align-items: center; justify-content: center; font-style: normal; line-height: 1;
}
/* the paper panel */
#battleView .card .paper, .reveal-card .paper, .alm-card.tile .ac-paper {
  flex: none; margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .2);
  padding: calc(var(--u) * .55) calc(var(--u) * .6) calc(var(--u) * .6); background: var(--panel); color: var(--ink);
  border-top: 1px solid color-mix(in srgb, var(--hl) 22%, transparent);
}
/* corner radii are fixed px (a card cannot read its own container units), and each paper panel matches its card */
#battleView .card .paper { border-radius: 0 0 11px 11px; }
#battleView .card .nm, #battleView .hand .card .nm, .reveal-card .nm, .alm-card.tile .ac-name {
  font-size: calc(var(--u) * .95); font-weight: 800; line-height: 1.1; opacity: 1; color: var(--ink); text-shadow: none; text-align: center; max-width: 100%; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0;
}
#battleView .card .stats, #battleView .hand .card .stats, .reveal-card .stats, .alm-card.tile .ac-power {
  width: 100%; display: flex; justify-content: space-between; padding: 0 calc(var(--u) * .25); font-size: calc(var(--u) * 1.2); font-weight: 800; line-height: 1.1; color: var(--ink); text-shadow: none;
}
.alm-card.tile .ac-power { justify-content: center; gap: calc(var(--u) * 1.4); white-space: nowrap; }
#battleView .card .stats .pw, #battleView .card .stats .hp, .reveal-card .stats .pw, .reveal-card .stats .hp { color: inherit; text-shadow: none; }
#battleView .card .stats .hp.hurt, .reveal-card .stats .hp.hurt { color: var(--hurt); }
/* battle cards are small (about 75px wide), so their text is scaled up from the shared sizes above */
#battleView .card .nm { font-size: calc(var(--u) * 1.2); }
#battleView .card .stats, #battleView .hand .card .stats { font-size: calc(var(--u) * 1.55); padding: 0 calc(var(--u) * .3); }
#battleView .card .paper { gap: calc(var(--u) * .1); padding: calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * .55); }
#battleView .card .spell-tag, .reveal-card .spell-tag {
  margin: 0; background: none; padding: 0; color: var(--ink-soft); font-size: calc(var(--u) * 1.05); font-weight: 800; letter-spacing: .04em; text-shadow: none; line-height: 1.1;
}
#battleView .card.spell::after, .reveal-card.spell::after { display: none; }
/* cost bubble: size follows the card now */
.reveal-card .cost { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.2); top: calc(var(--u) * -.6); left: calc(var(--u) * -.6); }
/* the mastery stars sat above the old stat row; they now sit just above the paper panel */
#battleView .card .mastery-stars, #battleView .hand .card .mastery-stars { bottom: calc(var(--u) * 4.1); }
/* reveal popup and draft offers */
.reveal-card { border-radius: 16px; }
.reveal-card .paper { border-radius: 0 0 16px 16px; }
.draft-opt .reveal-card { font-size: inherit; padding: 0; }
.draft-opt .reveal-card .icon { font-size: calc(var(--u) * 6.4); margin-top: 0; }
.draft-opt .reveal-card .nm { font-size: calc(var(--u) * .95); }
.draft-opt .reveal-card .stats { font-size: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * .25); }

#battleView .card .spell-tag { font-size: calc(var(--u) * 1.3); }
.reveal-card-frame .reveal-card { width: 160px; }

/* collection and deck tiles */
.alm-card.tile { aspect-ratio: 3 / 4; min-height: 0; overflow: visible; border-radius: 14px; }
.alm-card.tile .ac-cost {
  top: -6px; left: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--ink); color: var(--stone); font-size: .72rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px var(--shadow); z-index: 4;
}
.alm-card.tile .ac-kw { top: 19px; left: -6px; }
.alm-card.tile .ac-count { top: -6px; right: -6px; z-index: 4; background: var(--ink); color: var(--stone); }
.alm-card.tile .ac-in { bottom: -8px; left: 50%; right: auto; width: auto; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--stone); font-size: .56rem; white-space: nowrap; z-index: 4; }
.alm-card.tile .ac-paper { border-radius: 0 0 14px 14px; }
.alm-card.tile .ac-name { font-size: calc(var(--u) * .95); color: var(--ink); }
.alm-row.card-grid { row-gap: 18px; padding-top: 6px; }

/* ==========================================================================================================
   KEEP-THIS-HAND SCREEN (build 138)
   One sheet that always fits the phone: a header, the hand in one clean row (no overlap, wrapping to a second row when
   perks add cards), four loadout rows (snack, Knack, Fate, Spread) that each show your current pick and open one at a time,
   and the Draw / Keep buttons pinned at the foot so they never scroll away. Markup in index.html, rows built by mullRowHtml()
   in js/battle-ui.js.
   ========================================================================================================== */
#mulliganOverlay .overlay-card.mull-sheet { width: min(360px, 94vw); max-height: min(92vh, 720px); padding: 0; display: flex; flex-direction: column; overflow: hidden; text-align: left; }
.mull-head { padding: 16px 16px 0; text-align: center; }
.mull-head h2 { margin: 0; }
.mull-head p { margin: 2px 0 0; font-size: .8rem; color: var(--ink-soft); }
#battleView #mulliganHand { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 5px; height: auto; padding: 16px 10px 10px; margin: 0; overflow: visible; }
#battleView #mulliganHand .hcard { flex: 0 0 calc((100% - 20px) / 5); max-width: none; height: auto; aspect-ratio: 3 / 4; margin: 0; transform: none; }
#battleView #mulliganHand .card .nm { display: none; }   /* five cards in a row are about 60 px wide: the art, badges and numbers carry it; tap a card to read it */
.mull-lo { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
#mulliganOverlay .lorow { display: block; margin: 0; text-align: left; border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--bg-top) 35%, var(--stone)); border-radius: 14px; }
.lohead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 7px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lotile { width: 34px; height: 34px; border-radius: 10px; background: var(--board-bg); display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.lolab { flex: 1; min-width: 0; }
.lolab small { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.lolab b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { color: var(--ink-soft); font-size: 1.1rem; transition: transform .2s; }
.lorow.open .chev { transform: rotate(90deg); }
.lobody { display: none; padding: 0 10px 10px; }
.lorow.open .lobody { display: block; }
#mulliganOverlay .knack-chips, #mulliganOverlay .sp-line, .snack-opts { justify-content: flex-start; }
.snack-opts { display: flex; flex-wrap: wrap; gap: 6px; }
#mulliganOverlay .knack-desc { text-align: left; }
#mulliganOverlay .controls { display: flex; gap: 10px; padding: 10px 12px 14px; margin: 0; border-top: 1px solid var(--stone-edge); background: var(--stone); }
#mulliganOverlay .controls .btn { flex: 1; min-height: 46px; margin: 0; padding: 12px 8px; font-size: .9rem; white-space: nowrap; }


/* ===== DIVINE AND ATLAS RARITIES (the four gods, and the one-of-a-kind Atlas) =====
   Above mythic. Divine is warm gold, Atlas is a slow-shifting violet-to-sea-glass sheen. Both are summon-only, see RARITY_ORDER. */
.rarity-divine { background: linear-gradient(135deg, var(--c-amber-83-3), var(--divine)); box-shadow: 0 0 12px rgba(217,180,90,.6); }
.rarity-atlas { background: linear-gradient(135deg, var(--c-cyan-79), var(--atlas) 55%, var(--c-pink-83)); box-shadow: 0 0 14px rgba(143,122,217,.65); }
#battleView .rarity-divine { background: linear-gradient(135deg, var(--c-amber-83-3), var(--divine)); box-shadow: 0 0 10px rgba(217,180,90,.55); }
#battleView .rarity-atlas { background: linear-gradient(135deg, var(--c-cyan-79), var(--atlas) 55%, var(--c-pink-83)); box-shadow: 0 0 12px rgba(143,122,217,.6); }
.reveal-card.rarity-divine { box-shadow: 0 0 18px rgba(217,180,90,.65); }
.reveal-card.rarity-atlas { box-shadow: 0 0 22px rgba(143,122,217,.7); }
.rt-divine { background: linear-gradient(90deg, var(--divine), var(--c-amber-83-3), var(--divine)); background-size: 200% 100%; animation: shimmer 2s linear infinite; color: var(--c-amber-14); }
.rt-atlas { background: linear-gradient(90deg, var(--c-cyan-79), var(--atlas), var(--c-pink-83), var(--c-cyan-79)); background-size: 300% 100%; animation: shimmer 3s linear infinite; color: var(--c-indigo-17); }
.overlay-card.glow-divine { box-shadow: 0 0 0 2px var(--divine), 0 0 40px rgba(217,180,90,.6); }
.overlay-card.glow-atlas { box-shadow: 0 0 0 2px var(--atlas), 0 0 44px rgba(143,122,217,.65); }
.ins-card.rarity-divine { box-shadow: 0 0 0 2px var(--divine), 0 0 30px rgba(217,180,90,.5); }
.ins-card.rarity-atlas { box-shadow: 0 0 0 2px var(--atlas), 0 0 32px rgba(143,122,217,.55); }
.jtile[data-r="divine"] { border-color: var(--divine); } .jtile[data-r="atlas"] { border-color: var(--atlas); }
.reveal-card-frame.pk-flip.pk-down[data-r="divine"] .reveal-card { box-shadow: 0 0 34px var(--c-amber-66-2); }
.reveal-card-frame.pk-flip.pk-down[data-r="atlas"] .reveal-card { box-shadow: 0 0 36px var(--c-indigo-74); }
.cf-chip[data-r="divine"].active { background: var(--divine); color: var(--c-amber-14); }
.cf-chip[data-r="atlas"].active { background: var(--atlas); color: var(--c-grey-100); }

/* The Atlas walking through a district: a soft violet glow so it reads as different from a neighbour (static, no animation). */
.ent.npc.atlas > span { text-shadow: 0 0 10px var(--c-indigo-74), 0 0 3px var(--c-grey-100); }

/* Journal > Theories: what the Atlas has said, kept as hints. */
.atlas-hints { margin: 6px 0 10px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--atlas) 12%, transparent); border: 1px solid color-mix(in srgb, var(--atlas) 35%, transparent); }
.atlas-hint { font-size: 13px; line-height: 1.4; color: var(--ink-soft); padding: 4px 0; font-style: italic; }
.atlas-hint.more { opacity: .7; font-style: normal; }

/* Dream names are longer than the old ones ("Moonwhisper Dragon", "Mountain of Memory"): on the collection and deck tiles a long name wraps to a
   second line instead of being cut off. Battle cards keep their one-line names. */
.alm-card.tile .ac-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; overflow: hidden; line-height: 1.1; }

/* ===== STORY SCENES (js/scenes.js) =====
   One overlay, two looks. data-style="dream" is the full-screen opening (drifting colour, centred text, a breathing ring);
   data-style="talk" is a card at the foot of the screen over the town. It is a night scene in both themes, like the town and
   battles, so it declares its own dark values. Everything that moves is opacity/transform only, and the blobs are plain
   radial gradients (no blur filter), per the animation rules in HANDOFF section 9. */
#sceneOverlay { 
  z-index: 30; color: var(--sc-ink); backdrop-filter: none; align-items: stretch; justify-content: stretch; }
#sceneOverlay[data-style="dream"] { background: radial-gradient(120% 80% at 50% 0%, var(--sc-2), var(--sc-0) 70%); }
#sceneOverlay[data-style="talk"] { background: linear-gradient(to top, color-mix(in srgb, var(--sc-0) 70%, transparent), transparent 55%); align-items: flex-end; pointer-events: none; }
#sceneOverlay.hidden { pointer-events: none; }
.scn-bg { position: absolute; inset: 0; overflow: hidden; display: none; }
#sceneOverlay[data-style="dream"] .scn-bg { display: block; }
.scn-blob { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; opacity: .4; animation: scn-drift 16s ease-in-out infinite alternate; }
.scn-blob.sb1 { background: radial-gradient(circle, var(--sc-violet), transparent 65%); left: -25%; top: 4%; }
.scn-blob.sb2 { background: radial-gradient(circle, var(--sc-mist), transparent 65%); right: -30%; top: 34%; animation-delay: -5s; }
.scn-blob.sb3 { background: radial-gradient(circle, var(--sc-peach), transparent 65%); left: 0; bottom: -25%; opacity: .3; animation-delay: -9s; }
@keyframes scn-drift { to { transform: translate(12%, -8%) scale(1.15); } }
.scn-pips { position: absolute; top: calc(env(safe-area-inset-top) + 20px); left: 22px; display: none; gap: 6px; }
#sceneOverlay[data-style="dream"] .scn-pips { display: flex; }
.scn-pips i { width: 18px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--sc-ink) 25%, transparent); }
.scn-pips i.on { background: var(--sc-gold); }
.scn-stage { position: relative; outline: none; pointer-events: auto; cursor: pointer; font-family: var(--f-ui); }
#sceneOverlay[data-style="dream"] .scn-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 36px 30px; }
#sceneOverlay[data-style="talk"] .scn-stage { width: calc(100% - 20px); max-width: 460px; margin: 0 auto calc(env(safe-area-inset-bottom) + 14px); padding: 34px 18px 14px; border-radius: 20px; background: color-mix(in srgb, var(--sc-1) 96%, transparent); border: 1px solid color-mix(in srgb, var(--sc-gold) 35%, transparent); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.scn-stage.scn-in { animation: scn-in .6s ease both; }
@keyframes scn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scn-skip { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px; z-index: 2; font: 700 .72rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-soft); background: none; border: 0; padding: 8px 10px; cursor: pointer; }
#sceneOverlay[data-style="talk"] .scn-skip { top: 4px; right: 8px; }
.scn-who { position: absolute; left: 16px; top: -22px; display: flex; align-items: center; gap: 8px; }
.scn-portrait { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--sc-peach); border: 3px solid var(--sc-1); }
.scn-name { font: 700 .7rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold); background: var(--sc-1); border: 1px solid color-mix(in srgb, var(--sc-gold) 35%, transparent); border-radius: 999px; padding: 3px 10px; margin-top: 10px; }
.scn-text { margin: 0; font-family: var(--f-display); font-size: 1.04rem; line-height: 1.45; min-height: 3em; }
#sceneOverlay[data-style="dream"] .scn-text { font-size: 1.7rem; line-height: 1.25; min-height: 0; text-wrap: balance; }
.scn-sub { margin: 0; color: var(--sc-soft); font-size: .95rem; }
.scn-sub:empty { display: none; }
.scn-opts { display: grid; gap: 6px; margin-top: 4px; }
.scn-opts:empty { display: none; }
.scn-opt { font: 600 .85rem var(--f-ui); text-align: left; color: var(--sc-ink); background: color-mix(in srgb, var(--sc-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sc-gold) 40%, transparent); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.scn-hint { text-align: right; font-size: .7rem; color: var(--sc-gold); animation: scn-pulse 1.8s ease-in-out infinite; }
#sceneOverlay[data-style="dream"] .scn-hint { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 24px); left: 0; right: 0; text-align: center; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-soft); }
@keyframes scn-pulse { 50% { opacity: .35; } }
.scn-breath { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--sc-gold) 60%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--sc-gold) 30%, transparent), transparent 70%); animation: scn-breathe 5s ease-in-out infinite; }
@keyframes scn-breathe { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
body.in-story .toast { opacity: 0; }
/* The gold diamond over the building Wren's current ask points at. */
.bld.story-target::after { content: ''; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 14px var(--accent); animation: story-bob 1.4s ease-in-out infinite; pointer-events: none; z-index: 5; }
@keyframes story-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(-9px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) {
  .scn-blob, .scn-breath, .scn-hint, .bld.story-target::after { animation: none; }
  .scn-stage.scn-in { animation: none; }
}

/* ==========================================================================================================
   FULL ART (js/full-art.js)
   Every card is a full bleed card: a scene (.fa-scene) fills the whole card behind the picture, the picture (.fa-hero) stands in front of it
   and stays inside the card, and the name panel turns translucent so the scene shows through it. Cards with hand drawn files (mythic, divine,
   Atlas) use an img scene and a drawn subject; every other card uses an auto scene (.fa-auto-scene, made here from data-fam and data-src,
   colours in css/theme.css: --fa-*) and its own picture. Everything sizes in the card's own width (cqw), so one set of rules serves the
   board, the hand, the tiles, the popup and the attack preview. The cost bubble, keyword badges and counts are the only things that hang
   over the edge.
   ========================================================================================================== */
.fa { overflow: visible; isolation: isolate; }   /* its layers (scene, picture, panel, badges) stay inside the card */
.reveal-card.fa .icon, #battleView .card.fa .icon, .alm-card.fa .ac-icon, .card-mini.fa .c-icon, .ins-card.fa .ins-icon { position: static; }
.fa .cost, .fa .kws, .fa .ac-cost, .fa .ac-kw, .fa .c-cost, .fa .ins-cost, .fa .c-power { z-index: 6; }
.card-mini.fa .c-power { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); color: var(--c-grey-100); }
.reveal-card.fa .nm { font-size: calc(var(--u) * .8); }   /* "Mountain of Memory" and "Cartographer's Compass" must fit */
.fa .paper, .fa .ac-paper {
  position: relative; z-index: 4;
  background: linear-gradient(to top, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel) 60%, transparent));
}
:root[data-theme="light"] .fa .paper, :root[data-theme="light"] .fa .ac-paper { background: linear-gradient(to top, color-mix(in srgb, var(--panel) 97%, transparent), color-mix(in srgb, var(--panel) 82%, transparent)); }
.fa-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fa-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the subject: inside the card, above the name panel */
.fa-hero { position: absolute; z-index: 2; left: 4%; top: 3%; width: 92%; height: 70%; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; filter: drop-shadow(0 .9cqw 1.1cqw rgba(0, 0, 0, .4)); }
.fa-hero img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fa-hero .card-emoji { font-size: 38cqw; line-height: 1; }

/* auto scenes: the family colours, a soft light behind the subject and a darker foot where the name panel sits */
.fa-auto-scene {
  --fa-a: var(--fa-none-a); --fa-b: var(--fa-none-b);
  background:
    radial-gradient(58% 42% at 50% 36%, color-mix(in srgb, var(--fa-light) 62%, transparent), transparent 72%),
    radial-gradient(120% 55% at 50% 108%, color-mix(in srgb, var(--fa-b) 70%, transparent), transparent 75%),
    linear-gradient(168deg, var(--fa-a), color-mix(in srgb, var(--fa-a) 55%, var(--pc, var(--fa-b))));
}
.fa-auto-scene[data-fam="grove"] { --fa-a: var(--fa-grove-a); --fa-b: var(--fa-grove-b); }
.fa-auto-scene[data-fam="stone"] { --fa-a: var(--fa-stone-a); --fa-b: var(--fa-stone-b); }
.fa-auto-scene[data-fam="tide"] { --fa-a: var(--fa-tide-a); --fa-b: var(--fa-tide-b); }
.fa-auto-scene[data-fam="wind"] { --fa-a: var(--fa-wind-a); --fa-b: var(--fa-wind-b); }
.fa-auto-scene[data-fam="spell"] { --fa-a: var(--fa-spell-a); --fa-b: var(--fa-spell-b); }
.fa-auto-scene::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* where the card comes from: a pattern over the scene (cards from the map have none) */
.fa-auto-scene[data-src="boss"]::before, .fa-auto-scene[data-src="milestone"]::before {
  background: repeating-conic-gradient(from 0deg at 50% 38%, color-mix(in srgb, var(--fa-gold) 26%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle at 50% 38%, var(--c-grey-0) 8%, transparent 70%); mask: radial-gradient(circle at 50% 38%, var(--c-grey-0) 8%, transparent 70%);
}
.fa-auto-scene[data-src="portal"]::before, .fa-auto-scene[data-src="rift"]::before {
  background: repeating-conic-gradient(from 20deg at 50% 40%, color-mix(in srgb, var(--fa-portal) 38%, transparent) 0 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 50% 40%, transparent 34%, color-mix(in srgb, var(--fa-dark) 55%, transparent) 100%);
  -webkit-mask: radial-gradient(circle at 50% 40%, var(--c-grey-0) 10%, transparent 78%); mask: radial-gradient(circle at 50% 40%, var(--c-grey-0) 10%, transparent 78%);
}
.fa-auto-scene[data-src="puddle"]::before {
  background: repeating-radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--fa-ripple) 38%, transparent) 0 1.2cqw, transparent 1.2cqw 8cqw);
  -webkit-mask: radial-gradient(circle at 50% 44%, var(--c-grey-0) 20%, transparent 80%); mask: radial-gradient(circle at 50% 44%, var(--c-grey-0) 20%, transparent 80%);
}
.fa-auto-scene[data-src="cellar"]::before { background: radial-gradient(circle at 50% 40%, transparent 22%, color-mix(in srgb, var(--fa-dark) 78%, transparent) 100%); }
.fa-auto-scene[data-src="foe"]::before { background: radial-gradient(circle at 50% 40%, transparent 40%, color-mix(in srgb, var(--fa-dark) 45%, transparent) 100%); }
.fa-auto-scene[data-src="rift"]::after, .fa-auto-scene[data-src="milestone"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(circle at 18% 22%, var(--fa-gold) 0 .7cqw, transparent 1cqw), radial-gradient(circle at 82% 30%, var(--fa-gold) 0 .9cqw, transparent 1.3cqw), radial-gradient(circle at 70% 12%, var(--fa-gold) 0 .5cqw, transparent .8cqw), radial-gradient(circle at 26% 58%, var(--fa-gold) 0 .6cqw, transparent .9cqw);
}
/* the popup: a plain card, now a little larger so the scene has room */
.reveal-card-frame .reveal-card.fa { width: min(220px, 60vw); }

/* the attack preview: the attacking card lifts to the middle of the field, strikes toward its target, then returns (btAttackPreview) */
.atk-preview { position: absolute; inset: 0; z-index: 60; overflow: hidden; cursor: pointer; --d: -1; background: radial-gradient(circle at 50% 46%, rgba(10, 14, 24, .5), rgba(4, 6, 12, .8)); }
.atk-preview.down { --d: 1; }
.atk-preview .ap-card { position: absolute; margin: 0; }
.atk-preview .ap-card.strike .fa-hero { animation: ap-lunge .34s ease-out; }
@keyframes ap-lunge { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(calc(var(--d) * 7cqw)) scale(1.1); } 100% { transform: translateY(0) scale(1); } }
.ap-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(255, 240, 190, .75), rgba(255, 240, 190, 0) 55%); animation: ap-flash .34s ease-out forwards; }
@keyframes ap-flash { from { opacity: 1; } to { opacity: 0; } }
.ap-burst {
  position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%) scale(.4);
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 200, .5) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 16%, var(--c-grey-0) 30%, transparent 70%); mask: radial-gradient(circle, transparent 16%, var(--c-grey-0) 30%, transparent 70%);
  animation: ap-burst .42s ease-out forwards;
}
@keyframes ap-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .atk-preview .ap-card.strike .fa-hero, .ap-flash, .ap-burst { animation: none; } }

/* In-game confirm sheet (askConfirm, js/collection-tools.js). Above every scene and sheet that can ask a question. */
#confirmOverlay { z-index: 90; }
#confirmOverlay .overlay-card { text-align: center; }
#confirmOverlay .controls { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* ==========================================================================================================
   COST BUBBLE = KEYWORD BADGE SIZE (build 157)
   The cost circle was a touch larger than the keyword badges under it (2.4 units against 2.19). Both are now
   the same size on every card face (battle hand and board, reveal popup, collection tiles), all in card units,
   and the keyword stack starts one gap below the bubble.
   ========================================================================================================== */
#battleView .card .cost, #battleView .hand .card .cost, .reveal-card .cost, .alm-card.tile .ac-cost {
  width: calc(var(--u) * 2.1875); height: calc(var(--u) * 2.1875); top: calc(var(--u) * -.6); left: calc(var(--u) * -.6); font-size: calc(var(--u) * 1.15);
}
#battleView .card .kws, .reveal-card .kws, .alm-card.tile .ac-kw { top: calc(var(--u) * 1.9); left: calc(var(--u) * -.6); }

/* ===== Workshop: the Forge (Refine) and the mode switch =====
   Refine is one stage: the two copies go in, the stronger card comes out, and a strip underneath picks which card is on the
   forge. Trade up keeps its own tray. The cards are the normal My Cards tiles (cardTileHtml), so they scale with the width of
   their .cr-tile wrapper (see the CARD FACE block above). A tile is a <button>, so the strip items are divs, not buttons. */
.cr-mode { display: flex; gap: 4px; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 999px; padding: 4px; margin: 0 0 14px; }
.cr-mode button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.cr-mode button.on { background: var(--water); color: var(--on-water); }
.cr-forge { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--stone); border: 1px solid var(--stone-edge); border-radius: 22px; padding: 18px 14px 16px; margin: 0 0 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cr-forge-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cr-tile { display: block; flex-shrink: 0; pointer-events: none; }
.cr-tile .alm-card.tile { width: 100%; }
.cr-pair { display: flex; padding-right: 22px; }
.cr-pair .cr-tile { width: 84px; }
.cr-pair .cr-tile + .cr-tile { margin-left: -62px; margin-top: -10px; transform: rotate(7deg); }
.cr-pair .cr-tile:first-child { transform: rotate(-6deg); margin-top: 10px; }
.cr-forge-arrow { color: var(--accent); font-size: 1.7rem; }
.cr-result { width: 124px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); }
.cr-forge-name { font-family: var(--f-display); font-size: 1.25rem; text-align: center; }
.cr-forge-delta { font-size: 0.86rem; color: var(--ink-soft); margin-top: -6px; }
.cr-forge-delta b { color: var(--water-ink); }
.cr-stat-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.cr-stat-pick button { min-height: 56px; border-radius: 14px; border: 1.5px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cr-stat-pick button small { font-weight: 600; font-size: 0.72rem; color: var(--ink-soft); }
.cr-stat-pick button.on { border-color: var(--water); background: color-mix(in srgb, var(--water) 18%, transparent); }
.cr-stat-pick button:disabled { opacity: 0.45; cursor: default; }
.cr-meter { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 0.8rem; color: var(--ink-soft); }
.cr-meter b { color: var(--ink); }
.cr-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.cr-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rare), var(--accent)); }
.cr-may { font-size: 0.8rem; color: var(--ink-soft); margin-top: -2px; }
.cr-forge > .btn { width: 100%; min-height: 48px; }
.cr-forge > .btn:disabled { animation: none; opacity: 0.5; }
.cr-strip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 12px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: none; }
.cr-strip::-webkit-scrollbar { display: none; }
.cr-pickcard { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border: 2px solid transparent; border-radius: 16px; cursor: pointer; scroll-snap-align: start; text-align: center; }
.cr-pickcard.on { border-color: var(--water); background: var(--board-bg); }
.cr-tile-sm { width: 76px; }
.cr-pc-name { font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.cr-pc-own { font-size: 0.68rem; color: var(--ink-soft); }
@media (max-width: 360px) { .cr-pair .cr-tile { width: 72px; } .cr-pair .cr-tile + .cr-tile { margin-left: -52px; } .cr-result { width: 108px; } }

/* ===== My Cards header: search + Filter button + tags (replaces the two chip rows) ===== */
.coll-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.coll-icon-btn { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font-size: 1rem; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.coll-icon-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--stone)); }
.coll-icon-btn:active { transform: scale(0.94); }
.coll-bar .cf-search { height: 44px; }
.coll-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.68rem; font-weight: 800; display: grid; place-items: center; }
.coll-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.coll-tag { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--water) 18%, transparent); border: 1px solid var(--water); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.78rem; font-weight: 700; }
.coll-tag button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--board-bg); color: var(--ink); font-size: 0.7rem; cursor: pointer; }
.coll-sheet h2 { display: flex; justify-content: space-between; align-items: baseline; }
.coll-clear { border: 0; background: none; color: var(--water-ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 6px; }
.coll-lab { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 6px; }
.cf-chips.cf-wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.coll-sheet .btn { width: 100%; margin-top: 18px; min-height: 48px; }
.coll-sheet .coll-lab { text-align: left; }
.coll-sheet .cf-chip.active:not([data-r]), .coll-sheet .cf-chip.active[data-r="all"] { background: var(--water); color: var(--on-water); border-color: transparent; }

/* ===== Workshop: Trade up in the same forge look =====
   The sticky .cr-dock is the stage: three slots, an arrow and a rarity-coloured mystery card. Below it the spare cards are
   the normal My Cards tiles in a grid, so a tap on a tile puts it in the next free slot (the grid cells are divs because
   a tile is itself a button). */
.cr-dock { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--stone); }
.cr-dock .cr-tray { gap: 6px; margin: 2px 0 12px; }
.cr-tslot { position: relative; flex: 0 0 62px; width: 62px; aspect-ratio: 3 / 4; box-sizing: border-box; border-radius: 12px; border: 1.5px dashed var(--stone-edge); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-soft); font-size: 1.1rem; font-weight: 700; }
.cr-tslot.next { border-color: var(--water); animation: pulse-dot 1.4s ease-in-out infinite; }
.cr-tslot.filled { border: 0; cursor: pointer; }
.cr-tslot.filled .cr-tile { width: 100%; }
.cr-tslot.filled.just-picked { animation: pop-in 0.25s ease; }
.cr-tslot.filled::after { content: '✕'; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--stone); border: 1px solid var(--stone-edge); color: var(--ink); font-size: 0.6rem; display: grid; place-items: center; }
.cr-tresult { flex: 0 0 84px; width: 84px; border: 2px solid var(--accent); color: var(--c-grey-100); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cr-tresult span { font-size: 1.6rem; }
.cr-tresult b { font-size: 0.7rem; text-transform: capitalize; }
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.cr-gridcard { position: relative; cursor: pointer; border-radius: 14px; transition: transform 0.1s ease; }
.cr-gridcard:active { transform: scale(0.96); }
.cr-gridcard .cr-tile { width: 100%; }
.cr-gridcard.disabled { cursor: default; opacity: 0.55; }
.cr-gridcard.chosen { outline: 2px solid var(--water); outline-offset: 2px; opacity: 1; }
.cr-chosen { position: absolute; left: 50%; bottom: 36%; transform: translateX(-50%); background: var(--water); color: var(--on-water); font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; box-shadow: 0 2px 6px var(--shadow); pointer-events: none; }
@media (max-width: 380px) { .cr-tslot { flex-basis: 54px; width: 54px; } .cr-tresult { flex-basis: 72px; width: 72px; } }

/* My Cards grid: a little more air between tiles (the cost bubble hangs past each tile's edge, so 8px felt tight) */
.alm-row.card-grid { column-gap: 14px; row-gap: 26px; }

/* ===== Companion: the page (hero, bond), the picker sheet and the little town reactions ===== */
.cp-hero { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 22px; padding: 18px 16px 14px; margin: 0 0 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cp-portrait { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 3.2rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), var(--board-bg)); border: 2px solid var(--stone-edge); }
.cp-id { display: flex; flex-direction: column; gap: 2px; }
.cp-id b { font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; }
.cp-type { font-size: 0.76rem; color: var(--ink-soft); text-transform: capitalize; }
.cp-perk { color: var(--water-ink); font-weight: 700; font-size: 0.9rem; }
.cp-say { font-size: 0.84rem; color: var(--ink-soft); font-style: italic; min-height: 2.4em; max-width: 30ch; }
.cp-bond { display: flex; align-items: center; gap: 10px; width: 100%; }
.cp-bond-bar { flex: 1; display: flex; gap: 5px; }
.cp-bond-bar i { flex: 1; height: 8px; border-radius: 99px; background: var(--track); }
.cp-bond-bar i.on { background: linear-gradient(90deg, var(--water), var(--accent)); }
.cp-bond-name { font-size: 0.74rem; font-weight: 800; color: var(--ink); min-width: 5.6em; text-align: right; }
.cp-bond-note { font-size: 0.74rem; color: var(--ink-soft); }
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.cp-stats div { background: var(--board-bg); border-radius: 14px; padding: 8px 4px; font-size: 0.68rem; color: var(--ink-soft); }
.cp-stats b { display: block; font-size: 1.1rem; color: var(--ink); }
.cp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.cp-acts .btn, .cp-bottom .btn { min-height: 46px; }
.cp-hint { margin: 0; font-size: 0.74rem; }
.cp-bottom { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.cp-sheet .cr-mode { margin: 6px 0 10px; }
.cp-sheet .cr-mode button { min-height: 40px; font-size: 0.8rem; }
.cp-sheet .cr-mode small { opacity: 0.7; font-weight: 600; }
.cp-sheet .cf-search { width: 100%; height: 44px; margin: 0 0 10px; }
.cp-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px 6px; }
.cp-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--board-bg); border: 1.5px solid transparent; border-radius: 14px; padding: 8px 10px; color: var(--ink); font: inherit; cursor: pointer; min-height: 56px; }
.cp-row.cur { border-color: var(--water); }
.cp-row.lock { opacity: 0.6; }
.cp-ico { flex: 0 0 40px; font-size: 1.7rem; text-align: center; line-height: 1; }
.cp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-t b { font-size: 0.92rem; }
.cp-t small { font-size: 0.72rem; color: var(--ink-soft); }
.cp-st { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); text-align: right; max-width: 7.5em; }
.cp-row.cur .cp-st { color: var(--water-ink); }
.cp-empty { padding: 18px 8px; text-align: center; }
.ent.comp-float { pointer-events: none; }
.ent.comp-float > span { display: block; font-size: calc(var(--t) * 0.4); animation: comp-rise 1.1s ease-out forwards; }
@keyframes comp-rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-36px); } }
.ent.companion > span.comp-hop { animation: comp-hop 0.45s ease-out 1; }
@keyframes comp-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

/* Rarity labels: white text on the lighter rarity colours (lavender, sky, gold, rose) was hard to read, so those four use dark text.
   Common stays white on its deep teal; divine and atlas already set their own. */
.rarity-tag.rt-rare, .rarity-tag.rt-ultra, .rarity-tag.rt-super, .rarity-tag.rt-mythic { color: var(--c-grey-10); font-weight: 700; }
.cp-perk { display: flex; flex-direction: column; gap: 2px; }

/* ===== Things to do with your companion: the hub, the walk pill and bubbles, the games, and company in the Quiet Nook ===== */
.chb-card { display: flex; flex-direction: column; gap: 12px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.chb-head { display: flex; align-items: center; gap: 12px; }
.chb-portrait { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), var(--board-bg)); border: 2px solid var(--stone-edge); }
.chb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.chb-who b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.chb-who small { font-size: 0.74rem; color: var(--ink-soft); text-transform: capitalize; }
.chb-perks { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; font-weight: 700; color: var(--water-ink); text-align: left; }
.chb-say { background: var(--board-bg); border-radius: 16px; padding: 10px 14px; font-size: 0.88rem; font-style: italic; color: var(--ink); min-height: 3em; text-align: left; line-height: 1.4; }
.chb-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chb-quick button { min-height: 44px; border-radius: 999px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.chb-grid, .chb-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chb-choose { grid-template-columns: 1fr; }
.chb-choose .btn { margin-top: 2px; }
.chb-note { margin: 0; font-size: 0.8rem; color: var(--ink-soft); text-align: left; }
.chb-act { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 84px; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--stone-edge); background: var(--board-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chb-act:active { transform: scale(0.97); }
.chb-ai { font-size: 1.5rem; line-height: 1; }
.chb-act b { font-size: 0.9rem; }
.chb-act small { font-size: 0.72rem; color: var(--ink-soft); line-height: 1.25; }
.comp-walk-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 92px) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; border: 0; border-radius: 999px; padding: 12px 18px; min-height: 44px; background: var(--water); color: var(--on-water); font: inherit; font-weight: 700; font-size: 0.84rem; box-shadow: 0 6px 18px var(--shadow); cursor: pointer; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.ent.companion .comp-bubble { position: absolute; bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 12.5em; background: var(--stone); color: var(--ink); border: 1px solid var(--stone-edge); border-radius: 14px; padding: 6px 10px; font-size: 0.7rem; font-weight: 700; line-height: 1.3; text-align: center; box-shadow: 0 4px 12px var(--shadow); z-index: 6; animation: pop-in 0.25s ease; }
.ent.companion .comp-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: inherit; border-right: 1px solid var(--stone-edge); border-bottom: 1px solid var(--stone-edge); transform: translate(-50%, -4px) rotate(45deg); }
.cg-card { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
.cg-line { margin: 0 0 10px; font-size: 0.88rem; color: var(--ink-soft); min-height: 1.4em; }
.cg-ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 0 auto 12px; }
.cg-cell { aspect-ratio: 1; border-radius: 16px; border: 1.5px solid var(--stone-edge); background: var(--board-bg); font-size: 2.2rem; display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; }
.cg-cell.set { background: color-mix(in srgb, var(--water) 14%, var(--stone)); }
.cg-cell:disabled { cursor: default; }
.cg-foot { display: flex; gap: 8px; margin-top: 10px; }
.cg-foot .btn { flex: 1; min-height: 46px; }
.cg-result { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 12px; border-radius: 16px; background: var(--board-bg); text-align: center; }
.cg-result b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.cg-result span { font-size: 0.84rem; font-style: italic; color: var(--ink-soft); }
.cg-result small { font-size: 0.74rem; font-weight: 800; color: var(--water-ink); }
.cg-result.win { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.cg-score { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 0.86rem; }
.cg-score span { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }
.cg-reveal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 0 0 12px; text-align: center; }
.cg-reveal .cr-tile { width: 84px; margin: 0 auto 4px; }
.cg-reveal small { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; }
.cg-vs { font-size: 0.78rem; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--board-bg); }
.cg-vs.win { background: var(--water); color: var(--on-water); }
.cg-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.cg-hcard { cursor: pointer; border-radius: 12px; }
.cg-hcard .cr-tile { width: 100%; }
.cg-hcard.used { opacity: 0.25; cursor: default; }
.calm-comp { position: fixed; left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; align-items: center; gap: 8px; max-width: 70vw; z-index: 3; pointer-events: none; }
.calm-comp-ico { font-size: 1.8rem; line-height: 1; animation: spirit-drift 3.2s ease-in-out infinite; }
.calm-comp-say { font-size: 0.74rem; color: var(--ink-soft); background: color-mix(in srgb, var(--stone) 80%, transparent); border-radius: 12px; padding: 4px 10px; transition: opacity 0.5s ease; }
.calm-comp-say.fade { opacity: 0; }
.cg-card .ac-in, .cg-card .ac-count { display: none; }   /* the "in deck" and "×2" labels are noise in a card game */

/* NIGHT LIGHTS (js/night-lights.js): the night darkness is a canvas inside .town-sky, so the layer itself paints nothing. */
.town-sky.has-lights { background: none; }
.town-sky .town-lights { position: absolute; inset: 0; width: 100%; height: 100%; }

/* HOLO FOIL (js/holo-foil.js): ultra and up in the reveal / Card Details popup. --hx / --hy are the light position; @property lets the idle sweep animate --hx. */
@property --hx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.reveal-card-frame { touch-action: pan-y; }
.reveal-card-frame.holo-live { touch-action: none; }
.reveal-card.holo { --hx: 50%; --hy: 40%; isolation: isolate; animation-name: reveal-spin, holo-sweep; animation-duration: .7s, 4.5s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.34,1.56,.64,1), ease-in-out; animation-direction: normal, alternate; }
.reveal-card-frame.holo-live .reveal-card.holo { animation-name: none; }
@keyframes holo-sweep { from { --hx: 12%; --hy: 30%; } to { --hx: 88%; --hy: 62%; } }
.holo-foil, .holo-glare, .holo-spark { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 7; }
.holo-foil { opacity: .4; mix-blend-mode: hard-light; background-size: 260% 260%; background-position: var(--hx) var(--hy);
  background-image: linear-gradient(115deg, var(--c-pink-69) 0%, var(--c-amber-69) 18%, var(--c-green-69) 36%, var(--c-blue-69-2) 54%, var(--c-violet-69) 72%, var(--c-pink-69) 90%); filter: saturate(1.5); }
.holo-glare { opacity: .5; mix-blend-mode: overlay; background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 58%); }
.holo-spark { opacity: .9; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), var(--c-grey-0) 0%, transparent 62%); mask-image: radial-gradient(circle at var(--hx) var(--hy), var(--c-grey-0) 0%, transparent 62%);
  background-image: radial-gradient(circle, var(--c-grey-100) 0 1px, transparent 1.6px), radial-gradient(circle, var(--c-grey-100) 0 1px, transparent 1.6px), radial-gradient(circle, var(--c-amber-83) 0 1.2px, transparent 2px);
  background-size: 23px 29px, 31px 19px, 41px 37px; background-position: 0 0, 11px 7px, 5px 17px; }
.reveal-card.holo.h2 .holo-foil { opacity: .3; }
.reveal-card.holo.h4 .holo-foil, .reveal-card.holo.h5 .holo-foil { opacity: .5; }
.reveal-card.holo .cost, .reveal-card.holo .kws { z-index: 8; }   /* the cost disc and keyword badges stay clean above the foil */
@media (prefers-reduced-motion: reduce) { .reveal-card.holo { animation-name: reveal-spin; animation-duration: .01s; animation-iteration-count: 1; } }

/* Guide me there (build 173): the goal chip's target building gets the same bobbing diamond as the story's. */
.bld.goal-target::after { content: ''; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 14px var(--accent); animation: story-bob 1.4s ease-in-out infinite; pointer-events: none; z-index: 5; }
@media (prefers-reduced-motion: reduce) { .bld.goal-target::after { animation: none; } }

/* The altar screen (build 175): the candles, full screen (js/altar-screen.js). A night scene on purpose, so it ignores the light theme. */
.altar-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, var(--c-violet-18) 0%, var(--c-grey-9-2) 62%); color: var(--c-amber-90); padding-top: env(safe-area-inset-top, 0px); }
.altar-screen.hidden { display: none; }
body.in-altar .overlay, body.in-altar .toast { z-index: 70; }   /* the card reveal and level-ups must show above the altar */
.as-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.as-embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--c-orange-66); opacity: 0; animation: as-rise 9s linear infinite; }
.as-embers i:nth-child(3n) { animation-duration: 12s; width: 2px; height: 2px; } .as-embers i:nth-child(4n) { animation-duration: 7s; }
.as-embers i:nth-child(1) { left: 8%; animation-delay: 0s; } .as-embers i:nth-child(2) { left: 18%; animation-delay: 2s; } .as-embers i:nth-child(3) { left: 27%; animation-delay: 4s; } .as-embers i:nth-child(4) { left: 36%; animation-delay: 1s; } .as-embers i:nth-child(5) { left: 45%; animation-delay: 6s; } .as-embers i:nth-child(6) { left: 54%; animation-delay: 3s; } .as-embers i:nth-child(7) { left: 63%; animation-delay: 5s; } .as-embers i:nth-child(8) { left: 72%; animation-delay: 7s; } .as-embers i:nth-child(9) { left: 81%; animation-delay: 2.5s; } .as-embers i:nth-child(10) { left: 90%; animation-delay: 4.5s; } .as-embers i:nth-child(11) { left: 14%; animation-delay: 8s; } .as-embers i:nth-child(12) { left: 68%; animation-delay: 9s; }
@keyframes as-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-88vh); opacity: 0; } }
.as-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.as-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-indigo-25); background: var(--c-grey-13-a80); color: inherit; font-size: 18px; flex: none; cursor: pointer; }
.as-title { flex: 1; font-size: 1.15em; } .as-book { font: inherit; font-size: 0.85em; color: var(--c-indigo-68); border: 1px solid var(--c-indigo-25); border-radius: 999px; padding: 6px 12px; background: var(--c-grey-13-a80); cursor: pointer; }
.as-pil { position: relative; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px; }
.as-pil span, .as-pil button { font: inherit; font-size: 0.75em; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--c-indigo-25); background: var(--c-grey-13-a80); color: var(--c-indigo-68); }
.as-pil button.rdy { border-color: var(--c-amber-71-2); color: var(--c-amber-71-2); cursor: pointer; animation: as-glow 1.2s ease-in-out infinite alternate; }
@keyframes as-glow { to { box-shadow: 0 0 14px var(--c-amber-71-a47); } }
.as-smoke { position: relative; z-index: 2; text-align: center; font-size: 0.9em; color: var(--c-violet-82); padding: 6px 14px; min-height: 30px; }
.as-stage { position: relative; z-index: 2; flex: 1; min-height: 270px; }
.as-c { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; min-width: 0; cursor: pointer; }
.as-c.pos-n { left: 50%; top: 17%; } .as-c.pos-e { left: 84%; top: 42%; } .as-c.pos-s { left: 50%; top: 71%; } .as-c.pos-w { left: 16%; top: 42%; }
.as-fw { height: 52px; display: grid; align-items: end; justify-items: center; }
.as-flame { width: 24px; height: 36px; display: block; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 75%, var(--c-amber-92-2) 0 18%, var(--fc) 46%, transparent 76%); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .4s; animation: as-flick 1.3s ease-in-out infinite; filter: drop-shadow(0 0 9px var(--fc)); }
.as-flame.god { background: radial-gradient(ellipse at 50% 75%, var(--c-amber-92-2) 0 18%, var(--c-amber-71-2) 46%, transparent 76%); filter: drop-shadow(0 0 12px var(--c-amber-71-2)); }
@keyframes as-flick { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }
.as-wick { width: 3px; height: 8px; background: var(--c-grey-16); border-radius: 2px; display: block; margin-bottom: -2px; }
.as-wax { width: 40px; height: 58px; border: 0; padding: 0; border-radius: 9px 9px 5px 5px; cursor: pointer; background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 55%, var(--c-grey-13-2)), color-mix(in srgb, var(--fc) 88%, var(--c-grey-100) 8%) 40%, color-mix(in srgb, var(--fc) 50%, var(--c-grey-13-2))); box-shadow: 0 8px 22px -8px var(--fc); transition: transform .2s, box-shadow .2s; }
.as-c.sel .as-wax { box-shadow: 0 0 0 2px var(--c-orange-66), 0 8px 22px -8px var(--fc); }
.as-c.hot .as-wax, .as-c.arm .as-wax { transform: scale(1.1); box-shadow: 0 0 30px var(--fc); }
.as-c.nope .as-wax { animation: as-shake .4s; } @keyframes as-shake { 20% { translate: -6px 0; } 60% { translate: 6px 0; } }
.as-fed { min-height: 26px; display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; max-width: 84px; }
.as-fed button { border: 0; background: none; font-size: 1.2em; padding: 1px; line-height: 1; cursor: pointer; }
.as-lbl { font-size: 0.78em; color: var(--fc); } .as-clue { font-size: 0.68em; font-style: italic; color: var(--c-indigo-68); text-align: center; max-width: 96px; line-height: 1.2; }
.as-bowl { position: absolute; left: 50%; top: 42%; width: 112px; height: 112px; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 50% 40%, var(--c-orange-18-3), var(--c-grey-7-3)); display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: inherit; cursor: pointer; }
.as-bowl svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.as-ring { fill: none; stroke: var(--c-amber-71-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 402; stroke-dashoffset: 402; }
.as-core { position: relative; text-align: center; font-size: 0.78em; font-weight: 700; line-height: 1.2; padding: 0 10px; color: var(--c-indigo-68); }
.as-core i { display: block; font-style: normal; font-size: 2.4em; filter: grayscale(1); opacity: .5; }
.as-bowl.ready { background: radial-gradient(circle at 50% 40%, var(--c-amber-26), var(--c-orange-9)); box-shadow: 0 0 0 3px var(--c-orange-66), 0 0 34px var(--c-orange-66-a67); animation: as-bpulse 1.3s ease-in-out infinite; }
.as-bowl.ready .as-core { color: var(--c-amber-92-3); } .as-bowl.ready .as-core i { filter: none; opacity: 1; animation: as-bob 1s ease-in-out infinite alternate; }
.as-bowl.atlas.ready { box-shadow: 0 0 0 3px var(--c-amber-71-2), 0 0 40px var(--c-amber-71-a80); background: radial-gradient(circle at 50% 40%, var(--c-amber-26-2), var(--c-yellow-9)); }
@keyframes as-bpulse { 50% { box-shadow: 0 0 0 6px var(--c-orange-66), 0 0 52px var(--c-orange-66-a80); } } @keyframes as-bob { to { transform: translateY(-5px) scale(1.08); } }
.as-burns { position: relative; z-index: 2; display: flex; gap: 6px; justify-content: center; padding: 4px 14px; }
.as-chip { font: inherit; display: grid; gap: 1px; border: 1px solid var(--c-indigo-25); background: var(--c-grey-13-a80); color: inherit; border-radius: 12px; padding: 6px 10px; cursor: pointer; text-align: center; }
.as-chip small { font-size: 0.66em; color: var(--c-indigo-68); } .as-chip.on { background: var(--c-orange-66); border-color: var(--c-orange-66); color: var(--c-orange-9); } .as-chip.on small { color: var(--c-orange-9); opacity: .8; }
.as-hint { position: relative; z-index: 2; margin: 0; text-align: center; font-size: 0.8em; color: var(--c-indigo-68); padding: 2px 14px 6px; min-height: 30px; }
.as-tabs { position: relative; z-index: 2; display: flex; gap: 6px; padding: 0 14px 6px; overflow-x: auto; scrollbar-width: none; }
.as-tab { font: inherit; font-size: 0.82em; flex: none; border: 1px solid var(--c-indigo-25); background: var(--c-grey-13-a80); color: inherit; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.as-tab.on { background: var(--c-amber-90); color: var(--c-grey-9-2); border-color: var(--c-amber-90); font-weight: 700; } .as-tab.god { border-color: var(--c-amber-71-2); color: var(--c-amber-71-2); } .as-tab.god.on { background: var(--c-amber-71-2); color: var(--c-yellow-9); }
.as-tray { position: relative; z-index: 2; display: flex; gap: 10px; overflow-x: auto; padding: 8px 14px 10px; scrollbar-width: none; min-height: 118px; background: linear-gradient(to top, var(--c-grey-6-4), var(--c-grey-6-a0)); }
.as-tray::-webkit-scrollbar, .as-tabs::-webkit-scrollbar { display: none; }
.as-card { position: relative; flex: none; width: 82px; height: 106px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 1px solid var(--c-indigo-38); background: linear-gradient(170deg, var(--c-grey-18), var(--c-grey-13-2)); color: inherit; font: inherit; cursor: pointer; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.as-card .i { font-size: 2em; line-height: 1.1; } .as-card b { font-size: 0.68em; line-height: 1.15; text-align: center; overflow-wrap: anywhere; } .as-card small { font-size: 0.6em; color: var(--c-indigo-68); }
.as-card .q { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--c-amber-90); color: var(--c-grey-9-2); font-size: 0.7em; font-weight: 700; display: grid; place-items: center; }
.as-card.r-rare { border-color: var(--rare); } .as-card.r-ultra { border-color: var(--epic); } .as-card.r-super, .as-card.r-mythic { border-color: var(--mythic); } .as-card.r-divine { border-color: var(--c-amber-71-2); }
.as-card.armed { box-shadow: 0 0 0 2px var(--c-orange-66), 0 0 18px var(--c-orange-66-a40); transform: translateY(-3px); }
.as-none { margin: 0; align-self: center; font-size: 0.82em; color: var(--c-indigo-68); }
.as-ghost { position: fixed; z-index: 80; pointer-events: none; display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--c-grey-18); border: 1px solid var(--c-orange-66); transform: translate(-50%, -70%) rotate(-4deg); filter: drop-shadow(0 10px 18px var(--c-grey-0-a67)); font-size: 0.8em; }
.as-ghost span { font-size: 2em; line-height: 1; }
.as-cta { position: relative; z-index: 3; padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--c-grey-5-2), var(--c-grey-5-a93) 70%, var(--c-grey-5-a0)); }
.as-call { width: 100%; height: 64px; border: 0; border-radius: 20px; font: inherit; font-size: 1.3em; font-weight: 700; color: var(--c-orange-9); cursor: pointer; background: linear-gradient(100deg, var(--c-orange-66), var(--c-amber-77) 45%, var(--c-orange-66)); background-size: 200% 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.as-call.ready { animation: as-shimmer 2.2s linear infinite, as-bpulse3 1.3s ease-in-out infinite; }
.as-call.atlas { background: linear-gradient(100deg, var(--c-amber-71-2), var(--c-amber-88-3) 45%, var(--c-amber-71-2)); background-size: 200% 100%; }
.as-call .fl { font-size: 1.3em; display: inline-block; } .as-call.ready .fl { animation: as-bob .7s ease-in-out infinite alternate; }
.as-call[disabled] { background: var(--c-grey-18); color: var(--c-indigo-68); font-size: 1em; font-weight: 500; animation: none; cursor: default; }
@keyframes as-shimmer { to { background-position: -200% 0; } } @keyframes as-bpulse3 { 50% { box-shadow: 0 0 0 5px var(--c-orange-66-a27), 0 0 38px var(--c-orange-66-a67); } }
.as-sheet { position: absolute; inset: 0; z-index: 6; background: var(--c-grey-5-a94); display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 16px; gap: 12px; overflow-y: auto; }
.as-sheet.hidden { display: none; }
.as-sh-h { display: flex; align-items: center; gap: 10px; } .as-sh-h b { flex: 1; font-size: 1.2em; } .as-sh-h button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-indigo-25); background: var(--c-grey-13-2); color: inherit; cursor: pointer; }
.as-sh-b { display: flex; flex-wrap: wrap; gap: 6px; } .as-sh-b span { font-size: 0.8em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-indigo-25); color: var(--c-indigo-56); } .as-sh-b span.got { color: var(--c-amber-90); border-color: var(--c-orange-66); }
@media (prefers-reduced-motion: reduce) { .as-embers i, .as-flame, .as-bowl, .as-bowl .as-core i, .as-call, .as-call .fl, .as-pil .rdy { animation: none !important; } }

/* ---- The drawn player (js/player-sprite.js): three layers per view, body + two feet. Only transforms animate. ---- */
.pl-sprite { position: absolute; left: 50%; bottom: 7%; width: var(--t); aspect-ratio: var(--pl-aspect, 0.614); transform: translateX(-50%); z-index: 1; pointer-events: none; }
.pl-sprite[data-flip="1"] { transform: translateX(-50%) scaleX(-1); }
.pl-view { position: absolute; inset: 0; display: none; }
.pl-sprite[data-view="down"] .pl-view[data-v="down"], .pl-sprite[data-view="up"] .pl-view[data-v="up"],
.pl-sprite[data-view="left"] .pl-view[data-v="left"], .pl-sprite[data-view="right"] .pl-view[data-v="right"] { display: block; }
.pl-view img { position: absolute; left: 0; width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.pl-view .pl-body { top: 0; z-index: 2; }
.pl-view .pl-leg { top: var(--pl-leg-top, 91.95%); z-index: 1; }
.ent.player.walking .pl-body { animation: pl-bob calc(var(--pl-step, 140ms) * 2) ease-in-out infinite; }
.ent.player.walking .pl-leg.l { animation: pl-lift-l calc(var(--pl-step, 140ms) * 2) ease-in-out infinite; }
.ent.player.walking .pl-leg.r { animation: pl-lift-r calc(var(--pl-step, 140ms) * 2) ease-in-out infinite; }
@keyframes pl-bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(calc(var(--t) * -0.025)); } }
@keyframes pl-lift-l { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(calc(var(--t) * -0.06)); } }
@keyframes pl-lift-r { 0%, 50%, 100% { transform: translateY(0); } 75% { transform: translateY(calc(var(--t) * -0.06)); } }
@media (prefers-reduced-motion: reduce) { .ent.player.walking .pl-body, .ent.player.walking .pl-leg { animation: none; } }
/* the drawn character as an avatar: a little smaller in town, and a face crop wherever the avatar is a round portrait */
.pl-sprite { width: auto; height: calc(var(--t) * 1.38); }   /* by height, so every drawn character stands the same tall */
.av-face { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; user-select: none; -webkit-user-drag: none; }
.emoji-swatch.drawn-swatch { padding: 0; overflow: hidden; }
.shop-swatch-row .emoji-swatch.drawn-swatch .av-face { width: 100%; height: 100%; border-radius: 0; }
.hud-portrait .a-emoji, .bt-portrait:has(> .av-face), .toss-av:has(> .av-face), .ch-av > span { display: inline-flex; }
.hud-portrait .a-emoji:has(> .av-face) { width: 100%; height: 100%; }
.bt-portrait > .av-face, .toss-av > .av-face, .bt-intro-av > .av-face { width: 100%; height: 100%; }
.ch-av > span:has(> .av-face) { width: 100%; height: 100%; }

/* a neighbour drawn with a character (js/player-sprite.js, NPC_DRAWN_TEST): the same layers, idle breathing and a step while it glides */
.ent.npc > .pl-sprite { z-index: 1; }
.ent.npc .pl-body { animation: pl-idle 2.6s ease-in-out infinite; }
.ent.npc.walking .pl-body { animation: pl-bob calc(var(--pl-step, 260ms) * 2) ease-in-out infinite; }
.ent.npc.walking .pl-leg.l { animation: pl-lift-l calc(var(--pl-step, 260ms) * 2) ease-in-out infinite; }
.ent.npc.walking .pl-leg.r { animation: pl-lift-r calc(var(--pl-step, 260ms) * 2) ease-in-out infinite; }
@keyframes pl-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--t) * -0.012)); } }
@media (prefers-reduced-motion: reduce) { .ent.npc .pl-body, .ent.npc.walking .pl-leg { animation: none; } }

/* ---- Character effects (js/player-fx.js). Transform and opacity only; no filters or blend modes (see HANDOFF section 9). ---- */
.pl-rig { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%; }
.pl-tint { position: absolute; inset: 0; z-index: 3; background-color: var(--pl-tint, transparent); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; transition: background-color 1.5s linear; }
.pl-view .pl-wet, .pl-view .pl-frost { top: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 2.2s ease; }
.town-view[data-wx="rain"] .pl-wet, .town-view[data-wx="storm"] .pl-wet { opacity: 0.95; }
.town-view[data-wx="snow"] .pl-frost { opacity: 1; }
.pl-sprite.pl-gone { visibility: hidden; }
body.no-charfx .pl-tint, body.no-charfx .pl-wet, body.no-charfx .pl-frost, body.no-charfx .pl-aura, body.no-charfx .pfx-motes, body.no-charfx .pfx { display: none; }

.ent.player.walking .pl-rig { animation: pl-squash calc(var(--pl-step, 140ms) * 2) ease-in-out infinite; }
@keyframes pl-squash { 0%, 50%, 100% { transform: scale(1.02, 0.97); } 25%, 75% { transform: scale(1, 1); } }

/* auras: a soft glow and three little rising things, per state */
.pl-aura { position: absolute; left: 50%; bottom: 2%; width: calc(var(--t) * 2.4); height: calc(var(--t) * 2.4); margin-left: calc(var(--t) * -1.2); pointer-events: none; z-index: 0; --ac: 255, 255, 255; }
.pl-aura::before { content: ''; display: none; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 58%, rgba(var(--ac), 0.5), rgba(var(--ac), 0) 66%); animation: pl-breathe 3.2s ease-in-out infinite; }
.ent.player[data-aura="bond"] .pl-aura { --ac: 255, 128, 172; }
.ent.player[data-aura="streak"] .pl-aura { --ac: 255, 150, 55; }
.ent.player[data-aura="calm"] .pl-aura { --ac: 140, 200, 255; }
.pl-aura i { position: absolute; left: 50%; bottom: 30%; opacity: 0; animation: pl-rise 2.8s ease-out infinite; }
.pl-aura i:nth-child(2) { left: 38%; animation-delay: 0.9s; } .pl-aura i:nth-child(3) { left: 62%; animation-delay: 1.8s; }
.ent.player[data-aura="bond"] .pl-aura i::before { content: '\2665'; color: var(--c-pink-75); font-style: normal; font-size: calc(var(--t) * 0.26); line-height: 1; }
.ent.player[data-aura="streak"] .pl-aura i { width: calc(var(--t) * 0.12); height: calc(var(--t) * 0.26); border-radius: 50% 50% 40% 40%; background: linear-gradient(var(--c-yellow-85), var(--c-orange-58-2) 60%, rgba(255, 80, 0, 0)); animation-duration: 1.4s; }
.ent.player[data-aura="calm"] .pl-aura i { width: calc(var(--t) * 0.3); height: calc(var(--t) * 0.3); border: 1.5px solid rgba(170, 220, 255, 0.85); border-radius: 50%; animation: pl-ring 3.6s ease-out infinite; }
.ent.player[data-aura="calm"] .pl-aura i:nth-child(2) { animation-delay: 1.2s; } .ent.player[data-aura="calm"] .pl-aura i:nth-child(3) { animation-delay: 2.4s; }
@keyframes pl-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes pl-rise { 0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translate(-50%, calc(var(--t) * -1.3)) scale(1.05); opacity: 0; } }
@keyframes pl-ring { 0% { transform: translate(-50%, 0) scale(0.3); opacity: 0.9; } 100% { transform: translate(-50%, 0) scale(2.8); opacity: 0; } }

/* bits that fly and fade (footsteps, hop, dissolve) */
.pfx { position: absolute; pointer-events: none; display: block; will-change: transform, opacity; animation: pfx-fly var(--d, 0.8s) ease-out forwards; }
.pfx-petal { width: calc(var(--t) * 0.09); height: calc(var(--t) * 0.055); border-radius: 50%; background: var(--c, var(--c-pink-81)); }
.pfx-dust { width: calc(var(--t) * 0.16); height: calc(var(--t) * 0.16); margin: calc(var(--t) * -0.08); border-radius: 50%; background: var(--c, var(--c-amber-70)); --o: 0.55; }
.pfx-spark { width: calc(var(--t) * 0.07); height: calc(var(--t) * 0.07); background: var(--c-amber-88-3); box-shadow: 0 0 6px 1px var(--c-amber-77-2); transform: rotate(45deg); }
.pfx-spark.pfx-blue { background: var(--c-blue-93); box-shadow: 0 0 6px 1px var(--c-blue-75); }
.pfx-ember { width: calc(var(--t) * 0.06); height: calc(var(--t) * 0.06); border-radius: 50%; background: var(--c-amber-64); box-shadow: 0 0 6px 2px var(--c-orange-55-2); }
@keyframes pfx-fly { 0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; } 15% { opacity: var(--o, 1); } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r, 0deg)) scale(var(--s, 1)); opacity: 0; } }

/* motes: one screen-space layer above the sky so fireflies glow in the dark */
.pfx-motes { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.pfx-motes .fly, .pfx-motes .leaf { position: absolute; display: none; }
.pfx-motes .fly { width: 5px; height: 5px; border-radius: 50%; background: var(--c-lime-83); box-shadow: 0 0 8px 3px rgba(190, 255, 110, 0.7); animation: pfx-wander var(--wd, 9s) ease-in-out var(--wl, 0s) infinite alternate, pfx-blink var(--bd, 3s) ease-in-out infinite; }
.pfx-motes .leaf { top: 0; width: 7px; height: 3.5px; border-radius: 50%; background: var(--lc, var(--c-green-53)); opacity: 0.75; animation: pfx-drift var(--ld, 18s) linear var(--ll, 0s) infinite; }
.town-view.is-night .pfx-motes .fly { display: block; }
.town-view:not(.is-night) .pfx-motes .leaf { display: block; }
.town-view[data-wx="rain"] .pfx-motes, .town-view[data-wx="storm"] .pfx-motes, .town-view[data-wx="snow"] .pfx-motes { display: none; }
@keyframes pfx-wander { from { transform: translate(0, 0); } to { transform: translate(var(--wx, 30px), var(--wy, -20px)); } }
@keyframes pfx-blink { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes pfx-drift { 0% { transform: translate(0, -6vh) rotate(0deg); } 100% { transform: translate(22vw, 110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .ent.player.walking .pl-rig, .pl-aura::before, .pl-aura i, .pfx-motes .fly, .pfx-motes .leaf { animation: none; } .pfx-motes { display: none; } .pl-aura i { display: none; } }

/* Character tab stage: a drawn character is shown whole, standing on the ground (js/player-sprite.js charStageFigHTML) */
.ch-figbox { display: block; position: relative; }
.pl-sprite.ch-fig { position: relative; left: auto; bottom: auto; transform: none; width: auto; height: 132px; aspect-ratio: var(--pl-aspect, 0.614); margin: 0 auto; --t: 64px; }
.ch-fig .pl-body { animation: pl-idle 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ch-fig .pl-body { animation: none; } }

/* the aura's soft glow shows at night only; by day just its little hearts, flames or rings stay */
.town-view.is-night .pl-aura::before { display: block; }

/* TURNING ON THE SPOT (js/player-sprite.js): a character with turn art shows one flat picture per 15 degrees between the walking views */
.pl-sprite[data-view="turn"] .pl-view[data-v="turn"] { display: block; }
.pl-view .pl-turn-img { top: 0; z-index: 2; }
#chMe { cursor: grab; }

/* Card details sheet: the card itself is shown large (full art when the card has it), details centred underneath */
.cs-card { margin: 4px 0 12px; }
.cs-card .reveal-card { width: min(230px, 62vw); }
.cs-card.has-fa .reveal-card { width: min(230px, 62vw); }
.cs-info { align-items: center; text-align: center; }
.cs-name { font-size: 1.3rem; }
.cs-sub { font-size: 0.78rem; }


/* rain on the figure: no sheen layer, just a few drops that bounce off her shoulders and hat (only in rain and storm) */
.pl-view .pl-wet { display: none !important; }
.pl-splash { position: absolute; left: 0; right: 0; top: 14%; height: 30%; pointer-events: none; z-index: 5; display: none; }
.town-view[data-wx="rain"] .pl-splash, .town-view[data-wx="storm"] .pl-splash { display: block; }
.pl-splash i { position: absolute; top: 0; width: calc(var(--t) * 0.05); height: calc(var(--t) * 0.05); border-radius: 50%; background: rgba(214, 238, 255, 0.85); opacity: 0; animation: pl-bounce 1.7s ease-out infinite; }
.pl-splash i:nth-child(1) { left: 30%; --bx: -0.2; animation-delay: 0s; }
.pl-splash i:nth-child(2) { left: 66%; --bx: 0.22; animation-delay: .55s; }
.pl-splash i:nth-child(3) { left: 46%; --bx: -0.1; animation-delay: 1.05s; }
.pl-splash i:nth-child(4) { left: 54%; --bx: 0.12; animation-delay: 1.4s; }
@keyframes pl-bounce { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .75; } 40% { transform: translate(calc(var(--t) * var(--bx) * .6), calc(var(--t) * -.16)) scale(1); opacity: .7; } 100% { transform: translate(calc(var(--t) * var(--bx)), calc(var(--t) * .12)) scale(.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-splash { display: none !important; } }
body.no-charfx .pl-splash { display: none !important; }


/* ---- Sitting on a bench: she stays put and settles, the edges darken, and a small card says who you rest with and for how long ---- */
.ent.player.sitting .pl-rig { animation: pl-sit-breathe 4.2s ease-in-out infinite; transform: translateY(5%) scale(1, .94); }
.ent.player.sitting.walking .pl-rig { animation: pl-sit-breathe 4.2s ease-in-out infinite; }
@keyframes pl-sit-breathe { 0%, 100% { transform: translateY(5%) scale(1, .94); } 50% { transform: translateY(4%) scale(1.01, .955); } }
.calm.sit::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 38%, rgba(6,10,18,.55) 100%); animation: calm-sit-in 2.4s ease-out both; }
@keyframes calm-sit-in { from { opacity: 0; } to { opacity: 1; } }
.calm.sit .calm-body { background: none; padding-inline: 16px; }
.calm-sit-card { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 16px; border-radius: 22px; background: rgba(14, 22, 32, .62); border: 1px solid rgba(255,255,255,.12); animation: calm-sit-rise .8s ease-out both; }
@keyframes calm-sit-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.calm-sit-top { width: 100%; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.calm-sit-top #calmSitWho { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-sit-top #calmSitTime { font-variant-numeric: tabular-nums; }
.calm-sit-top #calmSitTime.rested { color: var(--c-teal-75); }
.calm-sit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal-75); box-shadow: 0 0 0 0 rgba(155,227,196,.6); animation: calm-sit-pulse 4.2s ease-in-out infinite; }
@keyframes calm-sit-pulse { 0%, 100% { transform: scale(.8); box-shadow: 0 0 0 0 rgba(155,227,196,.5); } 50% { transform: scale(1.1); box-shadow: 0 0 0 7px rgba(155,227,196,0); } }
.calm-sit-card .calm-btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ent.player.sitting .pl-rig, .calm-sit-dot, .calm.sit::before, .calm-sit-card { animation: none; } }

/* ---- Rain puddles: an uneven pool that holds the sky, with a bright rim and rain rings spreading across it ---- */
.ent.life-puddle::after { width: 82%; height: 50%; border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; background: radial-gradient(ellipse at 30% 30%, rgba(225,240,255,.55) 0, rgba(225,240,255,0) 38%), linear-gradient(170deg, rgba(120,160,210,.62), rgba(52,80,128,.7)); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 5px rgba(20,34,64,.45), 0 1px 0 rgba(255,255,255,.12); }
.ent.life-puddle:nth-child(3n)::after { width: 70%; height: 56%; border-radius: 44% 56% 48% 52% / 58% 44% 56% 42%; transform: rotate(-8deg); }
.ent.life-puddle:nth-child(3n+1)::after { width: 88%; height: 42%; border-radius: 62% 38% 60% 40% / 48% 58% 42% 52%; transform: rotate(6deg); }
.ent.life-puddle::before { content: ''; position: absolute; left: 36%; top: 42%; width: 22%; height: 12%; border-radius: 50%; border: 1.5px solid rgba(235,245,255,.85); opacity: 0; animation: puddle-ring 2.4s ease-out infinite; }
.ent.life-puddle:nth-child(2n)::before { left: 54%; top: 50%; animation-delay: 1.1s; }
.ent.life-puddle:nth-child(3n)::before { left: 44%; top: 38%; animation-delay: .6s; }
@keyframes puddle-ring { 0% { transform: scale(.3); opacity: .9; } 70% { opacity: .35; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ent.life-puddle::before { animation: none; opacity: 0; } }

/* ---- Pocket it: what she just got arcs into her (js/player-fx.js pfxEmote) ---- */
.pfx-chip { position: fixed; left: 0; top: 0; z-index: 9500; width: 40px; height: 54px; border-radius: 9px; background: var(--c-grey-100); color: var(--c-grey-13-3); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; pointer-events: none; will-change: transform, opacity; box-shadow: 0 0 0 2.5px rgba(var(--rc), .95), 0 4px 14px rgba(0,0,0,.35), 0 0 18px rgba(var(--rc), .7); }
.pfx-chip span { display: flex; align-items: center; justify-content: center; }
.pfx-chip .card-art-img, .pfx-chip .card-emoji { font-size: 1em; width: 1em; height: 1em; filter: none; }
.pfx-take { position: fixed; z-index: 9400; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(var(--rc), .9); box-shadow: 0 0 16px 3px rgba(var(--rc), .55); pointer-events: none; }
body.no-charfx .pfx-chip, body.no-charfx .pfx-take { display: none; }


/* Card popups (a wandering spirit, a found card, a level-up): the dim and the panel background dropped out for two frames, exactly when the 0.4s fade
   and pop-in ended, showing the bright town behind the still-visible text. Chrome on phones tears down the popup's compositing layer when those
   animations finish; keeping the layer promoted while the popup is open means there is nothing to tear down. */
#pickupOverlay:not(.hidden), #levelUpOverlay:not(.hidden) { will-change: opacity; transform: translateZ(0); }
#pickupOverlay:not(.hidden) .overlay-card, #levelUpOverlay:not(.hidden) .overlay-card { will-change: transform; }

/* Card sleeves (battle-town.css) lift every direct child of a sleeved card to position: relative. For a full art card that turned the scene into a
   block in the flow, which pushed the art and name panel down a whole card height, so the subject hung out below the card. */
#battleView .card.sleeved.fa > .fa-scene { position: absolute !important; z-index: 0 !important; }
#battleView .card.sleeved.fa > .icon { position: static !important; }

/* ===== Your cottage as a room (js/home-room.js) =====
   Inside your own cottage the stage is a small tile map you walk around, drawn with the town's own tile recipe (.town-tile), props
   from assets/sprites.js (the r-* symbols) and the same drawn character. The scene's own bubble and bottom sheet still carry what
   a piece of furniture does, so every cottage action works exactly as before. Interiors have no seasons or weather: these tokens are
   fixed, in the same muted range as the meadow biome the town uses. Everything that moves is transform (the camera) or left/top
   on one entity, like the town. */
.hr-room, .hr-th {
  position: absolute; inset: 0; overflow: hidden; background: var(--c-grey-9-3); cursor: pointer; touch-action: manipulation;
}
.hr-world { position: absolute; left: 0; top: 0; will-change: transform; }
.hr-world.snap { transition: none !important; }
.town-tile.hr-f1 { background: var(--floor1); } .town-tile.hr-f2 { background: var(--floor2); } .town-tile.hr-f3 { background: var(--floor3); }
.town-tile.hr-wt { background: var(--wall-up); } .town-tile.hr-wb { background: var(--wainscot); } .town-tile.hr-ws { background: var(--wall-side); }
.hr-prop { position: absolute; left: calc(var(--x) * var(--t)); top: calc(var(--y) * var(--t)); width: var(--t); height: var(--t); pointer-events: none; z-index: calc(var(--y) * 10); }
.hr-prop .spr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hr-prop.tall .spr { inset: auto; left: 0; top: -50%; height: 150%; }
.hr-prop.flat { z-index: 3; } .hr-prop.deco.mat { z-index: 4; } .hr-prop.deco.door { z-index: 5; }   /* flat things and the doormat lie under everything that stands */
.hr-rug { position: absolute; z-index: 2; border-radius: calc(var(--t) * .16); background: var(--rug); box-shadow: inset 0 0 0 calc(var(--t) * .07) var(--rug2); pointer-events: none; }
.hr-rug::after { content: ''; position: absolute; inset: calc(var(--t) * .16); border-radius: calc(var(--t) * .08); border: 2px dashed rgba(224,197,116,.7); }
.hr-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 400; background: radial-gradient(circle, rgba(255,207,102,.34), rgba(255,207,102,0) 66%); }
.hr-glow.day { background: radial-gradient(circle, rgba(214,230,216,.30), rgba(214,230,216,0) 66%); }
.hr-ring { position: absolute; z-index: 300; border: 2px solid var(--accent, var(--c-amber-72)); border-radius: 8px; pointer-events: none; animation: hr-ring 1.1s ease-in-out infinite; }
@keyframes hr-ring { 50% { opacity: .45; } }
.hr-badge { position: absolute; z-index: 450; min-width: calc(var(--t) * .3); height: calc(var(--t) * .3); padding: 0 3px; border-radius: 999px; background: var(--c-red-54); color: var(--c-grey-100); font-size: calc(var(--t) * .2); font-weight: 800; line-height: 1; display: grid; place-items: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hr-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 55%, rgba(8,6,3,.42) 100%); }
.hr-player { position: absolute; }
/* the scene around the room: the title sign, rug and old shelf belong to the emoji stage, which the room replaces */
#sceneView.room-on .sc-rug, #sceneView.room-on .sc-who, #sceneView.room-on .home-shelf, #sceneView.room-on .sc-head { display: none; }
#sceneView.room-on .sc-stage { background: var(--c-grey-9-3); }
#sceneView.room-on.hr-idle .sc-stage { height: auto; flex: 1 1 auto; min-height: 0; box-shadow: none; }
#sceneView.room-on.hr-idle .sc-actions, #sceneView.room-on.hr-idle .sc-bubble { display: none; }
@media (prefers-reduced-motion: reduce) { .hr-ring { animation: none; } }

/* Decorating: the Decorate button, the tint on tiles a piece can go on, and the panel's tabs and swatches (the panel is the scene sheet) */
.hr-edit-btn { position: absolute; z-index: 600; bottom: 14px; right: 12px; min-height: 40px; padding: 0 14px; border-radius: 999px; font: 800 .8rem/1 var(--f-ui); cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--stone) 92%, transparent); border: 1px solid var(--stone-edge); box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.hr-edit-btn:active { transform: translateY(1px); }
.hr-target { position: absolute; z-index: 350; border-radius: 8px; pointer-events: none; background: rgba(140,215,160,.26); outline: 2px dashed rgba(190,235,200,.65); outline-offset: -2px; }
.hr-tabs { display: flex; gap: 8px; flex: none; }
#sceneView.sc-std .hr-tabs .sc-btn { flex: 1 1 0; min-height: 44px; justify-content: center; padding: 0 8px; border-radius: 14px; }
#sceneView.sc-std .hr-tabs .sc-btn.on { background: var(--water); color: var(--on-water); border-color: transparent; }
.hr-h { flex: none; margin-top: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.hr-sws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.hr-sw { display: grid; gap: 6px; justify-items: center; padding: 8px 4px; border-radius: 14px; font: 700 .72rem/1.2 var(--f-ui); cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--hl) 6%, transparent); border: 1px solid var(--stone-edge); min-height: 64px; }
.hr-sw i { width: 34px; height: 24px; border-radius: 8px; background: linear-gradient(90deg, var(--a) 0 70%, var(--b) 70% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.hr-sw.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hr-sw:disabled { opacity: .45; cursor: default; }
.hr-info { flex: none; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--hl) 5%, transparent); border: 1px solid var(--stone-edge); font-size: .86rem; }
.hr-info span { color: var(--ink-soft); font-size: .8rem; }
/* a town decoration placed in the home: its emoji on a soft shadow, like in town */
.hr-prop.emoji::before { content: ''; position: absolute; left: 22%; bottom: 12%; width: 56%; height: 14%; border-radius: 50%; background: var(--tshadow); }
.hr-prop.emoji { display: flex; align-items: center; justify-content: center; }
.hr-prop.emoji > span { position: relative; font-size: calc(var(--t) * 0.6); line-height: 1; text-shadow: 0 2px 3px rgba(0,0,0,0.3); }
.hr-room.editing { touch-action: none; cursor: grab; }

/* Spirits at home (js/home-spirits.js): the spirit on a perch, Reborn on the mantel, medals in the cabinet, the companion and a visiting spirit.
   Everything that moves is transform or opacity; the companion glides on left/top like a neighbor. */
.hr-prop .hr-fig { position: absolute; left: 50%; top: -42%; width: calc(var(--t) * .75); height: calc(var(--t) * .75); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; font-size: calc(var(--t) * .5); line-height: 1; pointer-events: none; animation: hr-float 3s ease-in-out infinite; }
.hr-prop .hr-fig::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--g, var(--c-grey-100)) 55%, transparent), transparent 68%); }
.hr-prop .hr-fig > * { position: relative; }
.hr-prop .hr-fig.m { top: -14%; left: calc(28% + var(--i) * 22%); width: calc(var(--t) * .5); height: calc(var(--t) * .5); font-size: calc(var(--t) * .34); animation-delay: calc(var(--i) * -.8s); }
.hr-prop .hr-fig.reborn::after { content: '\2728'; position: absolute; right: -14%; top: -14%; font-size: .5em; animation: hr-twinkle 2.2s ease-in-out infinite; }
.hr-prop.resonant .hr-fig::before { animation: hr-pulse 2.4s ease-in-out infinite; }
.hr-prop .hr-medals { position: absolute; left: 15%; top: -12%; width: 70%; height: 92%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); align-items: center; justify-items: center; font-size: calc(var(--t) * .2); line-height: 1; pointer-events: none; }
.hr-prop .hr-medals i { font-style: normal; opacity: .3; }
.hr-prop .hr-medals i.on { opacity: 1; text-shadow: 0 0 6px rgba(255,210,120,.95); }
.hr-comp { transition: left 900ms ease-in-out, top 900ms ease-in-out; pointer-events: none; }
.hr-comp::before { content: ''; position: absolute; bottom: 12%; width: 56%; height: 14%; border-radius: 50%; background: var(--tshadow); }
.hr-comp > span { animation: idle 2.6s ease-in-out infinite; }
.hr-visitor { position: absolute; left: calc(var(--x) * var(--t)); top: calc(var(--y) * var(--t)); width: var(--t); height: var(--t); z-index: 380; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hr-visitor::before { content: ''; position: absolute; inset: -26%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--g, var(--c-grey-100)) 60%, transparent), transparent 66%); animation: hr-pulse 2.4s ease-in-out infinite; }
.hr-vfig { position: relative; font-size: calc(var(--t) * .7); line-height: 1; animation: hr-float2 2.6s ease-in-out infinite; }
@keyframes hr-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7%); } }
@keyframes hr-float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes hr-pulse { 0%, 100% { opacity: .7; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hr-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hr-prop .hr-fig, .hr-prop .hr-fig::before, .hr-prop .hr-fig::after, .hr-vfig, .hr-visitor::before, .hr-comp > span { animation: none; } .hr-comp { transition: none; } }
/* what the frames, shelves and trophy case hold: your own favourite cards, decorations and trophies */
.hr-prop .hr-frame, .hr-prop .hr-thing { position: absolute; transform: translate(-50%, -50%); line-height: 1; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.hr-prop .hr-frame { font-size: calc(var(--t) * .29); }
.hr-prop .hr-thing { font-size: calc(var(--t) * .22); }
.hr-prop.flip > .spr { transform: scaleX(-1); }
/* the buy list: a picture of each piece, category chips, a sell button beside each stored piece, a ghost while dragging */
.hr-th { width: 44px; height: 44px; flex: none; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 24px; line-height: 1; padding: 3px; }
i.hr-th { padding: 0; position: relative !important; inset: auto !important; }
svg.hr-th { display: block; position: relative; box-sizing: border-box; overflow: hidden; padding: 3px; }
#sceneView.sc-std .sc-btn.hr-buy { gap: 12px; min-height: 56px; padding: 0 12px; }
.hr-row2 { display: flex; gap: 8px; flex: none; }
.hr-row2 .hr-buy { flex: 1 1 auto; min-width: 0; }
#sceneView.sc-std .sc-btn.hr-sell { flex: none; width: auto; min-height: 56px; justify-content: center; padding: 0 14px; }
#sceneView.sc-std .sc-btn.hr-undo { min-height: 44px; justify-content: center; flex: none; border-radius: 14px; }
.hr-cats { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.hr-cat { font: 700 .76rem/1 var(--f-ui); cursor: pointer; padding: 9px 12px; min-height: 36px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--hl) 6%, transparent); border: 1px solid var(--stone-edge); }
.hr-cat.on { background: var(--water); color: var(--on-water); border-color: transparent; }
.hr-note { flex: none; text-align: center; font-size: .78rem; color: var(--ink-soft); padding: 2px 6px 6px; }
.hr-ghost { opacity: .8; z-index: 650 !important; pointer-events: none; }
.hr-ghost::after { content: ''; position: absolute; inset: 4%; border-radius: 8px; border: 2px dashed rgba(140,215,160,.95); background: rgba(140,215,160,.16); }
.hr-ghost.bad::after { border-color: rgba(235,120,110,.95); background: rgba(235,120,110,.2); }
.hr-rug.hr-ghost::after { inset: 0; border-radius: inherit; }
.hr-lifted { opacity: .3; }
.hr-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 6px; }
.hr-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--water), var(--water-glow, var(--water))); }
/* the cottage from outside (js/home-room.js hrExterior): smoke, a lantern, flowers and a flag as the home levels up */
.hr-ext { position: absolute; inset: 0; pointer-events: none; }
.hr-smoke i { position: absolute; left: 74%; top: 6%; width: 8%; height: 8%; border-radius: 50%; background: rgba(235,235,235,.55); opacity: 0; animation: hr-smoke 4.2s ease-out infinite; }
.hr-smoke i:nth-child(2) { animation-delay: 1.4s; } .hr-smoke i:nth-child(3) { animation-delay: 2.8s; }
@keyframes hr-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .6; } 100% { opacity: 0; transform: translate(-40%, -380%) scale(1.9); } }
.hr-lantern { position: absolute; left: 34%; top: 58%; width: 10%; height: 10%; border-radius: 50%; background: radial-gradient(circle, var(--c-amber-85-2), var(--c-amber-70-2) 50%, rgba(255,207,102,0) 72%); box-shadow: 0 0 10px 4px rgba(255,207,102,.4); animation: hr-pulse 2.8s ease-in-out infinite; }
.hr-pot { position: absolute; top: 80%; font-size: calc(var(--t) * .36); line-height: 1; text-shadow: 0 2px 2px rgba(0,0,0,.3); }
.hr-flag { position: absolute; left: 47%; top: -12%; font-size: calc(var(--t) * .42); line-height: 1; transform-origin: 20% 100%; animation: hr-wave 3s ease-in-out infinite; }
@keyframes hr-wave { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .hr-smoke i, .hr-lantern, .hr-flag { animation: none; } .hr-smoke { display: none; } }

/* Home room: the Decorate/Done button (z 600) must not float over menus. #sceneView was not a stacking context, so the
   button painted above Settings and every other overlay (z 50+). Isolating the scene keeps 600 inside it. */
#sceneView.room-on { isolation: isolate; }

/* ===== Sheet kit (build 206; prototype in sheet-lab.html) =====
   One look for every choice sheet: a row is an icon tile, a bold title and an optional pill; the call to action is filled;
   the way out is a sticky footer; a sheet that only needs a little room is short. sceneBtn() (js/houses-and-cellar.js)
   puts a leading emoji in .ico and adds .sc-row, so only buttons it builds change; hand-built .sc-btn rows (decorate
   panel's tabs, buy rows) keep their own styles. */
#sceneView.sc-std .sc-btn.sc-row { gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 20px; font-size: 1rem; transition: transform .15s, background .15s; }
#sceneView.sc-std .sc-btn.sc-row:not(:disabled):active { transform: scale(.98); background: color-mix(in srgb, var(--hl) 12%, transparent); }
#sceneView.sc-std .sc-btn.sc-row .ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; background: color-mix(in srgb, var(--water) 22%, transparent); }
#sceneView.sc-std .sc-btn.sc-row:has(.ico) { padding-left: 10px; }
#sceneView.sc-std .sc-btn.sc-row:not(:has(.ico)) { padding-left: 16px; }
#sceneView.sc-std .sc-btn.sc-row small { display: block; font-weight: 600; opacity: .7; font-size: .76rem; }
#sceneView.sc-std .sc-btn.sc-row:not(:disabled):not([data-act="leave"]):not([data-act="back"]):not([data-act="hr-close"]):not([data-act="mg-back"]):not(.sc-done)::after { content: '›'; flex: none; margin-left: auto; padding-left: 4px; font-size: 1.4rem; font-weight: 800; opacity: .55; }
#sceneView.sc-std .sc-btn.sc-row:has(.sb-meta)::after { display: none; }   /* a pill takes the chevron's place */
#sceneView.sc-std .sc-btn.sc-row .sb-meta { margin-left: auto; }
/* the call to action: filled, taller, with a soft glow */
#sceneView.sc-std .sc-btn.sc-row[data-act^="mg-"]:not([data-act="mg-back"]):not([data-act="mg-again"]) { min-height: 76px; box-shadow: 0 6px 18px color-mix(in srgb, var(--water) 35%, transparent); }
#sceneView.sc-std .sc-btn.sc-row[data-act^="mg-"]:not([data-act="mg-back"]):not([data-act="mg-again"]) .ico { background: color-mix(in srgb, var(--on-water) 12%, transparent); }
/* the way out: a sticky footer that always sits at the bottom of the sheet */
#sceneView.sc-std .sc-actions { padding-bottom: 0; }
#sceneView.sc-std .sc-btn.sc-row[data-act="leave"], #sceneView.sc-std .sc-btn.sc-row[data-act="back"], #sceneView.sc-std .sc-btn.sc-row[data-act="hr-close"]:not(.sc-done) {
  position: sticky; bottom: 0; z-index: 2; align-self: stretch; width: auto; margin: auto -16px 0; min-height: 60px; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0;
  justify-content: center; background: var(--stone); border: 0; border-top: 1px solid color-mix(in srgb, var(--stone-edge) 70%, transparent); color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
#sceneView.sc-std .sc-btn.sc-row[data-act="leave"]::before { content: '←'; margin-right: 8px; }
/* Done in the decorate panel is the one action there: a filled bar */
#sceneView.sc-std .sc-btn.sc-done { position: sticky; bottom: 0; z-index: 2; flex: none; justify-content: center; min-height: 52px; margin-top: 4px; border-radius: 999px; background: var(--water); color: var(--on-water); border-color: transparent; box-shadow: 0 4px 14px var(--shadow); }
/* favourite cards: three frames that fill as you pick */
.fav-slots { display: flex; align-items: center; gap: 10px; flex: none; padding: 2px 2px 4px; }
.fav-slots span { flex: none; width: 52px; height: 40px; border-radius: 12px; border: 2px dashed var(--stone-edge); display: grid; place-items: center; font-size: 1.3rem; color: var(--ink-soft); }
.fav-slots span.on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.fav-slots b { margin-left: auto; font-size: .8rem; color: var(--ink-soft); }
/* one piece of furniture picked: a short sheet, the room stays in view */
#sceneView.room-on.hr-peek .sc-stage { height: auto; flex: 1 1 0; min-height: 0; box-shadow: none; }
#sceneView.room-on.hr-peek .sc-actions { flex: 0 1 auto; max-height: 62%; margin-top: -24px; }
#sceneView.room-on.hr-peek .sc-bubble { top: calc(var(--hud-h, 70px) + 14px); }

/* ===== Neighbour screen (build 208; prototype: npc-screen-variants-lab.html, option B) =====
   A full screen over the town: the town's own colours softly behind (no backdrop blur, see the smoothness note above), the
   neighbour standing on a name and hearts bar with the speech bubble just above their head, a grid of Chat / Play / Gift cards
   below, and Exit top right. A card opens a list of choices with a Back; the list's buttons keep their ids. */
#talkOverlay { align-items: stretch; justify-content: center; background: transparent; }
#talkOverlay .tk-bg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 96%, transparent) 0, color-mix(in srgb, var(--bg-top) 92%, transparent) calc(env(safe-area-inset-top, 0px) + 92px), color-mix(in srgb, var(--bg-top) 30%, transparent) calc(env(safe-area-inset-top, 0px) + 200px), color-mix(in srgb, var(--bg-top) 40%, transparent) 45%, color-mix(in srgb, var(--bg-top) 82%, transparent) 70%, color-mix(in srgb, var(--bg-top) 95%, transparent)); }   /* the live town reads through the middle; the top bar, notices and dock behind stay out of the way */
#talkCard { position: relative; display: flex; flex-direction: column; width: min(100vw, 560px); max-width: none; height: 100%; max-height: none; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 18px) 14px 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; text-align: left; animation: sc-rise .3s both; }
#talkCard .tk-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
#talkCard .tk-bust { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; container-type: size; --fig-h: 70%; }
#talkCard .tk-bust.emoji { --fig-h: 46%; }
#talkCard .tk-bust::before { content: ''; position: absolute; left: 50%; bottom: 0; width: min(100%, 90cqh); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%); pointer-events: none; }
#talkCard .talk-portrait { position: relative; z-index: 1; height: var(--fig-h); width: auto; aspect-ratio: var(--ar, 0.66); margin: 0; border-radius: 0; background: none; box-shadow: none; overflow: hidden; display: block; animation: talk-idle 4s ease-in-out infinite; }
#talkCard .talk-portrait .tk-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px var(--shadow)); }
#talkCard .talk-portrait.tk-emoji { aspect-ratio: auto; height: auto; overflow: visible; font-size: 40cqh; line-height: 1.1; filter: drop-shadow(0 10px 14px var(--shadow)); }
#talkCard .talk-portrait[data-mood]:not([data-mood=""])::after { right: -14px; bottom: 6px; }
#talkCard .talk-bubble { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--fig-h) + 12px); margin: 0; padding: 12px 16px; min-height: 0; border: 1px solid var(--stone-edge); border-radius: 20px; background: color-mix(in srgb, var(--stone) 88%, transparent); box-shadow: 0 8px 24px var(--shadow); text-align: center; }
#talkCard .talk-bubble::before { content: ''; display: block; position: absolute; top: auto; bottom: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: color-mix(in srgb, var(--stone) 88%, transparent); border: 0; border-right: 1px solid var(--stone-edge); border-bottom: 1px solid var(--stone-edge); }
#talkCard .talk-bubble .talk-text { margin: 0; max-height: 24vh; overflow-y: auto; scrollbar-width: none; font-size: 1rem !important; }   /* the bubble itself never scrolls: that would clip its tail */
#talkCard .talk-sub, #talkCard .talk-tag { min-height: 0; margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); }
#talkCard .talk-sub:empty, #talkCard .talk-tag:empty { display: none; }
#talkCard .tk-plate { position: relative; z-index: 4; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -16px 0 10px; padding: 9px 16px; border-radius: 18px; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px var(--shadow); }
#talkCard .talk-name { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: 500 1.1rem var(--f-display); letter-spacing: 0; }
#talkCard .talk-hearts { flex: none; margin: 0; font-size: .82rem; letter-spacing: 2px; }
#talkCard .talk-hearts.hidden { display: none; }
#talkCard .talk-hearts small { display: none; }
/* home: the category cards. Two columns; an odd last card spans the row and lays itself out sideways. */
#talkCard .tk-cats { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 14px; }
#talkCard .tk-cat { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0; min-height: 96px; padding: 10px 14px; border: 1px solid var(--stone-edge); border-radius: 20px; background: color-mix(in srgb, var(--stone) 88%, transparent); color: var(--ink); text-align: left; box-shadow: 0 8px 22px var(--shadow); cursor: pointer; animation: sc-rise .35s calc(.1s + var(--n, 0) * .06s) both; transition: transform .15s; }
#talkCard .tk-cat:active { transform: scale(.97); }
#talkCard .tk-cat.main { background: var(--water); color: var(--on-water); border-color: transparent; }
#talkCard .tk-cat .ico { font-size: 1.6rem; line-height: 1; }
#talkCard .tk-cat .lb { display: block; font: 800 1.15rem/1.1 var(--f-ui); }
#talkCard .tk-cat small { display: block; margin-top: 2px; font-size: .68rem; font-weight: 700; color: var(--ink-soft); }
#talkCard .tk-cat.main small { color: color-mix(in srgb, var(--on-water) 70%, transparent); }
#talkCard .tk-cat .badge { position: absolute; right: 10px; top: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: .66rem; font-weight: 800; }
#talkCard .tk-cat:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 68px; }
/* a card opened: Back, a title and that card's choices */
#talkCard .tk-sub { display: none; flex: none; flex-direction: column; gap: 10px; max-height: 50%; overflow-y: auto; padding-bottom: 14px; scrollbar-width: none; }
#talkCard .tk-sub::-webkit-scrollbar { display: none; }
#talkCard:not([data-view="home"]) .tk-sub { display: flex; }
#talkCard:not([data-view="home"]) .tk-cats { display: none; }
#talkCard .tk-subhead { display: flex; align-items: center; gap: 10px; }
#talkCard .tk-back { min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--stone-edge); border-radius: 999px; background: color-mix(in srgb, var(--stone) 90%, transparent); color: var(--ink); font: 800 .85rem var(--f-ui); cursor: pointer; }
#talkCard .tk-subhead h3 { margin: 0; font: 500 1.2rem var(--f-display); }
#talkCard .tk-pane { display: none; flex-direction: column; gap: 10px; }
#talkCard .tk-pane.on { display: flex; }
#talkCard .tk-pane .btn, #talkCard .tk-pane .talk-topic { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 12px 40px 12px 16px; border: 1px solid var(--stone-edge); border-radius: 20px; background: color-mix(in srgb, var(--stone) 88%, transparent); color: var(--ink); box-shadow: 0 6px 16px var(--shadow); font: 800 1rem/1.3 var(--f-ui); text-align: left; animation: sc-rise .3s both; }
#talkCard .tk-pane .ico-swap { flex: none; width: 1.7em; height: 1.7em; margin: 0; }
#talkCard .tk-pane .btn:not(:disabled)::after, #talkCard .tk-pane .talk-topic::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); font-size: 1.4rem; opacity: .55; }
#talkCard .tk-pane .btn:disabled { opacity: .65; box-shadow: none; }
#talkCard .tk-pane .btn.hidden { display: none; }
#talkCard .tk-pane .btn.tk-primary { background: var(--water); color: var(--on-water); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--water) 35%, transparent); }
#talkCard .tk-pane .talk-sig { background: linear-gradient(135deg, var(--c-amber-76), var(--accent)); color: var(--c-amber-15); border-color: transparent; }
#talkCard .tk-pane .talk-topics { display: flex; flex-direction: column; gap: 10px; margin: 0; }
#talkCard .tk-pane .talk-topics.hidden { display: none; }
#talkCard .tk-pane .talk-topic.used { opacity: .6; }
@media (prefers-reduced-motion: reduce) { #talkCard, #talkCard .tk-cat, #talkCard .tk-pane .btn, #talkCard .talk-portrait { animation: none; } }

/* letters: the gift is the highlighted attachment, the delete is quiet */
.mail-item.open .mail-claim-btn { min-height: 48px; border-radius: 999px; font-weight: 800; box-shadow: 0 4px 14px color-mix(in srgb, var(--water) 30%, transparent); }
.mail-item { border-radius: 20px; }
.mail-item .mail-ava { border-radius: 50%; }

/* TOWN EFFECTS ON WEBGL (js/town-fx.js): while the Pixi layer draws fireflies and leaves, the old DOM motes stay hidden. */
.town-view.tfx-on .pfx-motes { display: none; }

/* HOLO FOIL SHADER (js/holo-gl.js): a Pixi canvas inside the card face paints the foil; when it runs the CSS foil layers step aside. */
.holo-gl-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: inherit; pointer-events: none; z-index: 7; }
.reveal-card.holo.holo-gl .holo-foil, .reveal-card.holo.holo-gl .holo-glare, .reveal-card.holo.holo-gl .holo-spark { display: none; }

/* HOME ROOM LIGHT ON WEBGL (js/home-gl.js): one canvas in the scrolling room draws the glows, window light and dust; the plain glow divs step aside while it runs. */
.hmg-canvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 400; }
.hr-world.hmg-on .hr-glow { display: none; }


/* ===== Build 213: neighbour screen veil, light-theme battle contrast, stacked hand, Watch badge ===== */
#talkOverlay .tk-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--tk-veil) 96%, transparent) 0, color-mix(in srgb, var(--tk-veil) 92%, transparent) calc(env(safe-area-inset-top, 0px) + 92px), color-mix(in srgb, var(--tk-veil) 36%, transparent) calc(env(safe-area-inset-top, 0px) + 200px), color-mix(in srgb, var(--tk-veil) 48%, transparent) 45%, color-mix(in srgb, var(--tk-veil) 86%, transparent) 70%, color-mix(in srgb, var(--tk-veil) 96%, transparent)); }

:root[data-theme="light"] #battleView .divider .msg,
:root[data-theme="light"] #battleView .coach:not(:empty) { background: var(--bt-surface); border: 1px solid var(--bt-edge); color: var(--bt-ink); }
:root[data-theme="light"] #battleView .bt-mini { background: var(--bt-surface); border-color: var(--bt-edge); color: var(--bt-ink); box-shadow: 0 2px 6px var(--shadow); }
:root[data-theme="light"] #battleView .nmv .who,
:root[data-theme="light"] #battleView .nmv .deckcount { align-self: flex-start; max-width: 100%; padding: 1px 12px; border-radius: 999px; background: var(--bt-surface); border: 1px solid var(--bt-edge); color: var(--bt-ink); }
:root[data-theme="light"] #battleView .nmv .deckcount { margin-top: 3px; font-weight: 700; }
/* the End turn button: the player's colour is often pastel, so it is deepened until white text reads on it */
:root[data-theme="light"] #battleView .endbtn { background: color-mix(in srgb, var(--side-accent, var(--rc-b)) 52%, var(--c-grey-14-5)); color: var(--c-grey-100); font-weight: 800; }
:root[data-theme="light"] #battleView .endbtn:disabled { opacity: .75; }
:root[data-theme="light"] #battleView .gem { background: var(--bt-edge); border-color: var(--c-amber-58); }

/* ===== STACKED HAND =====
   Replaces the fan and the old "big hand" shrinking (build 213). Cards are bigger and overlap like a held hand of cards: each shows
   at least its left edge (cost, keywords, power). The overlap is worked out from the hand's own width (container units) and the
   card count (--hn, set by btRenderHand), so any hand fits without scrolling and without a drag fighting a swipe.
   Playable cards are raised and ringed; unaffordable ones stay at full opacity and colour. Tapping a card raises it above the stack. */
#battleView #btHand { --hw: 92px; container-type: inline-size; height: 162px; padding: 22px 12px 4px; gap: 0; align-items: flex-end; justify-content: center; }
#battleView #btHand .hcard {
  flex: 0 0 auto; width: var(--hw); max-width: none; height: auto; aspect-ratio: 3 / 4; transform: none; transform-origin: 50% 100%;
  margin: 0 0 0 calc(min(var(--hw) + 4px, (100cqw - 24px - var(--hw)) / max(var(--hn) - 1, 1)) - var(--hw)); z-index: 1; transition: none;
}
#battleView #btHand .hcard:first-child { margin-left: 0; }
#battleView #btHand .hcard .card { transition: transform .18s ease, box-shadow .18s ease; box-shadow: -3px 0 8px rgba(0, 0, 0, .28), 0 4px 10px var(--shadow); }
#battleView #btHand .hcard .card.unaffordable { opacity: 1; filter: none; }
#battleView #btHand .hcard .card.playable { transform: translateY(-10px); box-shadow: 0 0 0 2.5px var(--water-glow), 0 0 14px color-mix(in srgb, var(--water-glow) 70%, transparent), -3px 0 8px rgba(0, 0, 0, .28); }
:root[data-theme="light"] #battleView #btHand .hcard .card.playable { box-shadow: 0 0 0 3px var(--c-teal-34), 0 0 12px rgba(47, 127, 115, .55), -3px 0 8px rgba(0, 0, 0, .22); }
#battleView #btHand .hcard:has(.card.selected) { z-index: 20; }
#battleView #btHand .hcard .card.selected { transform: translateY(-26px) scale(1.1); }
#battleView #btHand .hcard .card .badge.grd { display: none; }

/* The Watch badge hangs below its card, and the player's row is drawn after (so over) the opponent's: lift the opponent's row. */
#battleView #btOppRow { position: relative; z-index: 2; }

/* ===== Build 214: neighbour screen blur + black veil in the light theme =====
   The town behind the neighbour screen is blurred just enough to read as the town. This is the one deliberate exception to the
   global backdrop-filter ban in "Smoothness" above (the id selector beats its universal !important); if it tears on a phone, delete
   the two blur lines. The light theme's veil is black and more opaque instead of the pale sand. */
#talkOverlay .tk-bg { -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important; }
:root[data-theme="light"] #talkOverlay .tk-bg { background: linear-gradient(180deg, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .8) calc(env(safe-area-inset-top, 0px) + 92px), rgba(0, 0, 0, .4) calc(env(safe-area-inset-top, 0px) + 200px), rgba(0, 0, 0, .44) 45%, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .9)); }


/* ===== Build 215: dark battle intro veil, glowing playable cards and cost gems, buttery hand, full-card inspect, bold update banner ===== */
/* Battle intro (VS screen): in the light theme the pale veil was swapped for a dark, lighter-weight one, like the neighbour screen. */
:root[data-theme="light"] .bt-intro { background: rgba(8, 11, 15, .5); }
:root[data-theme="light"] .bt-intro-vs { color: var(--c-amber-72); text-shadow: 0 2px 14px rgba(232, 203, 136, .55); }
:root[data-theme="light"] .bt-intro.boss .bt-intro-vs { color: var(--c-red-81); text-shadow: 0 2px 16px rgba(177, 97, 94, .7); }

/* Cost circles: the bright, glowing gem again (same look as the energy gems under the board), on battle cards, the reveal popup and the inspect sheet.
   A card you cannot afford keeps a pale, flat gem, so the glow itself says "playable". */
#battleView .card .cost, .reveal-card .cost {
  background: radial-gradient(circle at 35% 30%, var(--c-amber-96), var(--c-amber-71-3) 55%, var(--c-amber-55-2)); color: var(--c-amber-15-2); border: 1.5px solid var(--c-amber-48); font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1.5px rgba(255, 244, 200, .55), 0 0 10px 2px rgba(255, 200, 80, .75), 0 2px 5px rgba(0, 0, 0, .35);
}
#battleView .hand .card.unaffordable .cost { background: radial-gradient(circle at 35% 30%, var(--c-grey-96-2), var(--c-amber-79-2)); color: var(--c-amber-32); border-color: var(--c-amber-64-2); text-shadow: none; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
#battleView .hand .card.playable .cost { animation: bt-gem-pulse 1.6s ease-in-out infinite; }
@keyframes bt-gem-pulse { 50% { box-shadow: 0 0 0 1.5px rgba(255, 244, 200, .7), 0 0 15px 4px rgba(255, 206, 90, .95), 0 2px 5px rgba(0, 0, 0, .35); } }

/* Playable cards: a gold ring drawn INSIDE the card edge (an outline with a negative offset), so it never bleeds onto the card beside it in the stack, and it
   sits above the art. No glow and no shine (build 234): the ring alone is the highlight; it only breathes a little. */
#battleView #btHand .hcard .card.playable, :root[data-theme="light"] #battleView #btHand .hcard .card.playable {
  outline: 3px solid var(--c-amber-68-3); outline-offset: -3px; box-shadow: 0 0 0 1px rgba(60, 40, 0, .5), -2px 0 6px rgba(0, 0, 0, .25); animation: bt-playable 1.5s ease-in-out infinite;
}
@keyframes bt-playable { 50% { outline-color: var(--c-amber-50); } }
#battleView #btHand .hcard .card.selected { animation: none; outline: 3.5px solid var(--c-amber-68-3); outline-offset: -3.5px; box-shadow: 0 0 0 1px rgba(60, 40, 0, .5), 0 10px 22px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { #battleView #btHand .hcard .card.playable, #battleView .hand .card.playable .cost { animation: none; } }

/* Buttery hand: the cards are kept between renders (js/battle-ui.js btRenderHand), so these transitions run when you tap from one card to the next. */
#battleView #btHand .hcard { transition: margin-left .3s cubic-bezier(.22, 1, .36, 1); }
#battleView #btHand .hcard .card { transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s ease; will-change: transform; }
#battleView .tip.swap { animation: bt-tip-swap .22s ease both; }
@keyframes bt-tip-swap { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Card inspect (press and hold): the whole card face, the same one the reveal popup draws, at a larger size. */
.inspect-overlay .reveal-card-frame.ins-frame { margin: 2px 0 12px; }
.inspect-overlay .reveal-card-frame .ins-face { width: min(220px, 60vw); }

/* Update banner: wide, tall and gold so it cannot be missed. */
.update-banner {
  left: 8px; right: 8px; width: auto; max-width: 560px; margin: 0 auto; transform: translateY(-130%); gap: 14px; padding: 16px 16px 16px 18px; font-size: 1rem;
  background: linear-gradient(135deg, var(--c-amber-72-2), var(--accent)); color: var(--c-amber-10); border: 0; border-radius: 0 0 22px 22px; box-shadow: 0 10px 32px rgba(0, 0, 0, .38), 0 0 0 2px rgba(255, 244, 200, .6) inset;
}
.update-banner.show { transform: translateY(0); animation: ub-glow 2.2s ease-in-out infinite; }
@keyframes ub-glow { 50% { box-shadow: 0 10px 38px rgba(255, 200, 70, .6), 0 0 0 2px rgba(255, 244, 200, .9) inset; } }
.update-banner .ub-icon { flex: none; font-size: 1.9rem; line-height: 1; }
.update-banner .ub-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.update-banner .ub-text b { font-size: 1.08rem; font-weight: 800; }
.update-banner .ub-text small { font-size: .8rem; opacity: .85; }
.update-banner button { min-height: 46px; padding: 0 22px; font-size: .95rem; font-weight: 800; background: var(--c-amber-10); color: var(--c-amber-83); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .update-banner.show { animation: none; } }

/* Build 216: the neighbour's deck note on the versus card */
.bt-intro-note { margin-top: 4px; max-width: 220px; font-size: .72rem; line-height: 1.3; color: var(--c-grey-82); }
.bt-intro-note:empty { display: none; }
:root[data-theme="light"] .bt-intro-note { color: var(--ink-soft); }

/* Build 218: a neighbour's speech bubble when they meet another (js/npc-brain.js npcBubble -> lifeFx) */
.ent.npc-bubble { pointer-events: none; z-index: 40; }
.ent.npc-bubble > span { position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); padding: 3px 7px; font-size: calc(var(--t) * .42); line-height: 1; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow); animation: npc-bubble 2.3s ease-out forwards; }
@keyframes npc-bubble { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 24% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
@media (prefers-reduced-motion: reduce) { .ent.npc-bubble > span { animation: none; } }

/* Build 219: the marker over a neighbour who has come over to you (js/npc-brain.js npcApproachMarker) */
.ent .ent-ask { position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); z-index: 41; padding: 3px 8px; font-size: calc(var(--t) * .44); line-height: 1; background: var(--accent); color: var(--on-accent); border-radius: 12px; box-shadow: 0 2px 10px var(--shadow); pointer-events: none; animation: ent-ask 1.1s ease-in-out infinite; }
.ent .ent-ask::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: var(--accent); transform: rotate(45deg); }
@keyframes ent-ask { 50% { transform: translate(-50%, -5px); } }
@media (prefers-reduced-motion: reduce) { .ent .ent-ask { animation: none; } }

/* Build 225: the coach's tip on the match-lost card */
.end-coach { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: .8rem; line-height: 1.4; color: var(--ink); text-align: left; }
.end-coach.hidden { display: none; }

/* Build 232: what a neighbour is doing, and the Journal's Neighbours page */
#talkCard .talk-doing { margin: 4px 0 0; font-size: .74rem; font-style: italic; color: var(--ink-soft); }
#talkCard .talk-doing:empty { display: none; }
.pp-card { margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--stone); border: 1px solid var(--stone-edge); text-align: left; }
.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--board-bg); }
.pp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pp-who b { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.pp-who small { color: var(--ink-soft); font-size: .72rem; }
.pp-hearts { flex: none; font-size: .78rem; letter-spacing: 1px; }
.pp-now { margin: 8px 0 2px; padding: 4px 10px; border-radius: 999px; width: fit-content; font-size: .76rem; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.pp-lines { list-style: none; margin: 8px 0 0; padding: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.pp-lines li { padding: 1px 0; }

/* ===== Build 234: the energy circles match the card cost circles =====
   Available energy is the same bright glowing gold gem as the cost on a card, spent energy is a dark hollow ring, so how much you can spend reads at a glance
   (in the light theme an older rule had turned every circle the same pale sand). Two ids beat that rule in either theme. */
#battleView #btGems { gap: 7px; }
#battleView #btGems .gem { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(20, 24, 30, .6); background: rgba(20, 24, 30, .3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); opacity: 1; transform: none; }
#battleView #btGems .gem.on { background: radial-gradient(circle at 35% 30%, var(--c-amber-96), var(--c-amber-71-3) 55%, var(--c-amber-55-2)); border: 1.5px solid var(--c-amber-48); box-shadow: 0 0 0 1.5px rgba(255, 244, 200, .55), 0 0 10px 2px rgba(255, 200, 80, .75), 0 2px 5px rgba(0, 0, 0, .35); }
#battleView #btGems .gem.spent { background: rgba(20, 24, 30, .38); border-color: rgba(20, 24, 30, .65); }
#battleView #btGems .gem:not(.on):not(.spent) { opacity: .4; border-style: dashed; background: transparent; box-shadow: none; }


/* ===== Puddle worlds (js/puddle-worlds.js): the countdown pill in the top bar and the travel fade ===== */
.hud-pill.pw-pill { flex: none; cursor: pointer; padding: 3px 9px; border-radius: 999px; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c-indigo-77) 55%, transparent); background: color-mix(in srgb, var(--c-indigo-68-2) 22%, transparent); }
.hud-pill.pw-pill:active { transform: scale(.94); }
.hud-pill.pw-pill.warn { border-color: var(--c-orange-74); background: color-mix(in srgb, var(--c-red-68) 28%, transparent); animation: pw-pulse 1s ease-in-out infinite; }
@keyframes pw-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hud-pill.pw-pill.warn { animation: none; } }
.travel-fade.theme-pw { background: radial-gradient(circle at 50% 45%, var(--c-indigo-32), var(--c-indigo-8) 75%); }

/* ===== Puddle world kinds (js/puddle-modes.js): actors, the maze fog, the dice board, the underwater city ===== */
/* things that move on their own live in .pw-layer, inside the town world but outside the .ent redraw */
.pw-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; }
.pw-actor { position: absolute; left: calc(var(--x) * var(--t)); top: calc(var(--y) * var(--t)); width: var(--t); height: var(--t); display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: left .32s linear, top .32s linear; }
.pw-actor > span { font-size: calc(var(--t) * 0.6); line-height: 1; position: relative; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.pw-tag { position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%); font: 600 calc(var(--t) * .2)/1 var(--f-body, inherit); color: var(--c-grey-100); background: rgba(15,20,30,.62); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.pw-actor.pw-pawn.done { opacity: .55; }
.pw-actor.pw-folk.gift > span { animation: pw-hop 1.6s ease-in-out infinite; }
.pw-actor.pw-folk::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 14%; height: 12%; border-radius: 50%; background: var(--tshadow); }
.pw-actor.pw-fish { transition: left .22s linear, top .22s linear; opacity: .9; }
.pw-actor.pw-fish > span { font-size: calc(var(--t) * .42); }
.pw-actor.pw-fish.flip > span { transform: scaleX(-1); }
@keyframes pw-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14%); } }
/* maze: only a few tiles around her are lit */
.pw-fog { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(8,10,22,0) calc(var(--fr, 120px) * .62), rgba(8,10,22,.9) calc(var(--fr, 120px) * 1.15)); }
.ent.pw-exit { z-index: 3; } .ent.pw-exit > span { font-size: calc(var(--t) * .8); animation: pw-spin 6s linear infinite; filter: drop-shadow(0 0 8px var(--c-indigo-77)); }
@keyframes pw-spin { to { transform: rotate(360deg); } }
/* dice board */
.ent.pw-num { align-items: flex-end; justify-content: flex-start; padding: 2px 4px; }
.ent.pw-num > i { font: normal 700 calc(var(--t) * .22)/1 var(--f-body, inherit); color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ent.pw-mark > span { font-size: calc(var(--t) * .5); }
.ent.pw-mark > b { position: absolute; top: 2px; right: 3px; font: 700 calc(var(--t) * .22)/1 var(--f-body, inherit); color: var(--c-grey-100); background: rgba(15,20,30,.7); border-radius: 6px; padding: 1px 4px; }
.ent.pw-mark.ladder > b { background: rgba(60,140,80,.85); } .ent.pw-mark.snake > b { background: rgba(170,60,60,.85); }
.pw-dice { position: fixed; left: 50%; transform: translateX(-50%); top: calc(78px + env(safe-area-inset-top, 0px)); z-index: 40; width: min(92vw, 380px); display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 22px; background: var(--glass, rgba(20,28,32,.86)); border: 1px solid color-mix(in srgb, var(--stone-edge, var(--c-blue-40)) 80%, transparent); box-shadow: 0 8px 22px var(--shadow, rgba(0,0,0,.4)); }
.pwd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwd-line { font-weight: 700; font-size: .9rem; color: var(--ink); } .pwd-sq { font-size: .72rem; color: var(--ink-soft); }
.pwd-face { font-size: 2.1rem; line-height: 1; color: var(--ink); } .pwd-face.roll { animation: pw-shake .18s linear infinite; }
@keyframes pw-shake { 0% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); } }
.pwd-roll { padding: 12px 18px; font-size: .95rem; white-space: nowrap; } .pwd-roll:disabled { opacity: .45; }
body.pw-board #goalChip { display: none !important; }   /* the dice panel says what the goal pill would (it sits where the pill is) */
/* underwater city: a blue tint, drifting light, rising bubbles; she floats; weather and the night sky are not down here */
.town-view.pw-deep::after { content: ''; position: absolute; inset: -20% -20%; z-index: 5; pointer-events: none; mix-blend-mode: soft-light; opacity: .75;
  background: radial-gradient(ellipse at 20% 10%, rgba(120,220,255,.55), transparent 40%), radial-gradient(ellipse at 80% 30%, rgba(80,160,255,.45), transparent 45%), repeating-linear-gradient(115deg, rgba(160,230,255,.18) 0 18px, transparent 18px 46px);
  animation: pw-caustic 9s ease-in-out infinite alternate; }
.town-view.pw-deep::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(20,90,150,.28), rgba(10,40,90,.5)); }
@keyframes pw-caustic { from { transform: translate3d(-4%, -3%, 0) scale(1.02); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
.town-view.pw-deep .town-weather, .town-view.pw-deep .weather-canvas, .town-view.pw-deep canvas.wx-canvas, .town-view.pw-deep .town-sky { display: none !important; }
.ent.player.pw-swim { animation: pw-float 3.2s ease-in-out infinite; }
@keyframes pw-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
@media (prefers-reduced-motion: reduce) { .town-view.pw-deep::after, .ent.player.pw-swim, .ent.pw-exit > span, .pw-actor.pw-folk.gift > span { animation: none; } }

/* ============================================================
   TOWN NEWS (build 250, js/town-news.js): the Dream Gazette, the town goal sheet, the Pedlar's stock and the rainbow.
   Colours are theme tokens, so light and dark need nothing extra. The rainbow is a static gradient that only fades
   (opacity transition, no looping animation), and is hidden inside the underwater puddle world.
   ============================================================ */
.tn-paper { display: flex; flex-direction: column; gap: 6px; }
.tn-date { color: var(--ink-soft); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.tn-head { margin: 0; font-family: var(--f-display); font-size: 21px; line-height: 1.2; color: var(--ink); }
.tn-body { margin: 0; line-height: 1.5; color: var(--ink); }
.tn-also { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, var(--stone)); border: 1px solid var(--stone-edge); }
.tn-also small { display: block; color: var(--ink-soft); font-size: 12px; margin-bottom: 4px; }
.tn-also p { margin: 4px 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.tn-goal-name { margin: 0 0 8px; font-family: var(--f-display); font-size: 18px; color: var(--ink); }
.tn-goal-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--track); }
.tn-goal-bar i { display: block; height: 100%; }
.tn-goal-bar .me, .tn-goal-key .me { background: var(--accent); }
.tn-goal-bar .npc, .tn-goal-key .npc { background: var(--water); }
.tn-goal-bar .oth, .tn-goal-key .oth { background: color-mix(in srgb, var(--water) 55%, var(--ink)); }
.tn-goal-num { margin: 8px 0 4px; color: var(--ink); }
.tn-goal-key { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--ink); }
.tn-goal-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.tn-goal-pay { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.tn-greet { margin: 0 0 10px; font-style: italic; color: var(--ink); line-height: 1.45; }
.tn-stock { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, var(--stone)); border: 1px solid var(--stone-edge); }
.tn-stock.sold { opacity: .5; }
.tn-st-art { font-size: 28px; width: 36px; text-align: center; flex: none; }
.tn-st-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tn-st-t b { color: var(--ink); }
.tn-st-t small { color: var(--ink-soft); font-size: 12px; }
.tn-stock em { font-style: normal; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tn-rainbow { position: absolute; left: -30%; right: -30%; top: -10%; height: 70%; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 64%, rgba(255, 92, 92, .30) 66%, rgba(255, 170, 70, .30) 68%, rgba(255, 232, 110, .28) 70%,
    rgba(120, 220, 130, .26) 72%, rgba(100, 170, 255, .26) 74%, rgba(170, 120, 255, .24) 76%, transparent 78%); }
.tn-rainbow.on { opacity: 1; }
.town-view.pw-deep .tn-rainbow { display: none; }

/* ---- PORTAL (build 255, js/portal.js): an upright oval doorway on one tile, its middle spinning slowly, a pulsing glow and
   three motes circling it. .closing = its last minute: it flickers. Colours: --portal-* in css/theme.css. ---- */
.ent.life-portal { overflow: visible; }
.ent.life-portal > span, .ent.life-portal > i { position: absolute; pointer-events: none; }
.ent.life-portal .pt-glow { left: 2%; right: 2%; bottom: 0; height: 128%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, var(--portal-glow), transparent 68%); animation: pt-pulse 2.4s ease-in-out infinite; }
.ent.life-portal .pt-swirl { left: 14%; right: 14%; bottom: 6%; height: 112%; border-radius: 50%; overflow: hidden; border: 2px solid var(--portal-rim); box-shadow: 0 0 10px var(--portal-glow), inset 0 0 12px var(--portal-glow); background: var(--portal-core); }
.ent.life-portal .pt-swirl::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, var(--portal-swirl-a) 0 14deg, var(--portal-core) 14deg 36deg, var(--portal-swirl-b) 36deg 46deg, var(--portal-core) 46deg 72deg); filter: blur(1.5px); animation: pt-spin 3.2s linear infinite; }
.ent.life-portal .pt-core { left: 34%; right: 34%; bottom: 36%; height: 40%; border-radius: 50%; background: radial-gradient(circle, var(--portal-spark), var(--portal-swirl-a) 45%, transparent 72%); animation: pt-pulse 1.6s ease-in-out infinite reverse; }
.ent.life-portal > i { left: 50%; bottom: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--portal-spark); box-shadow: 0 0 6px var(--portal-rim); animation: pt-orbit 2.8s linear infinite; }
.ent.life-portal > i:nth-of-type(2) { animation-delay: -0.93s; animation-duration: 3.4s; }
.ent.life-portal > i:nth-of-type(3) { animation-delay: -1.87s; animation-duration: 2.3s; }
.ent.life-portal.closing { animation: pt-flicker 1.1s steps(1, end) infinite; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@keyframes pt-pulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes pt-orbit { from { transform: rotate(0deg) translateX(calc(var(--t) * .42)) scaleY(.6); } to { transform: rotate(360deg) translateX(calc(var(--t) * .42)) scaleY(.6); } }
@keyframes pt-flicker { 0%, 40%, 62%, 100% { opacity: 1; } 38%, 60% { opacity: .35; } 80% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .ent.life-portal *, .ent.life-portal::before, .ent.life-portal.closing { animation: none !important; } }

/* ---- WARPED TIME (build 255, js/warp-fx.js): the way into a puddle world or through a portal. 0-0.9 s the map twists into a
   spiral (.warp-twist) while the vortex, collapsing rings and a backwards-spinning clock cover the screen (.warp-fx.in); at the
   turn the world is swapped under a flash; 0.9-1.7 s it all unwinds (.warp-untwist, .warp-fx.out). Colours: --warp-*. ---- */
.warp-fx { position: fixed; inset: 0; z-index: 90; pointer-events: auto; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; }
.warp-fx.in { animation: wf-cover .9s ease-in forwards; }
.warp-fx.out { animation: wf-uncover .8s ease-out forwards; }
.warp-fx .wf-vortex { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 4%, var(--warp-deep) 52%), repeating-conic-gradient(from 0deg, var(--warp-a) 0 9deg, var(--warp-deep) 9deg 21deg, var(--warp-b) 21deg 27deg, var(--warp-deep) 27deg 40deg);
  animation: wf-spin 1.7s cubic-bezier(.55, 0, .3, 1) forwards; }
.warp-fx .wf-rings { position: absolute; inset: 0; }
.warp-fx .wf-rings i { position: absolute; left: 50%; top: 50%; width: 80vmin; height: 80vmin; margin: -40vmin; border-radius: 50%; border: 2px solid var(--warp-light); opacity: 0; animation: wf-ring .9s ease-in forwards; }
.warp-fx .wf-rings i:nth-child(2) { animation-delay: .12s; } .warp-fx .wf-rings i:nth-child(3) { animation-delay: .24s; } .warp-fx .wf-rings i:nth-child(4) { animation-delay: .36s; }
.warp-fx.out .wf-rings i { animation: wf-ring-out .8s ease-out forwards; }
.warp-fx .wf-clock { position: relative; width: min(44vw, 190px); height: min(44vw, 190px); overflow: visible; filter: drop-shadow(0 0 12px var(--warp-a)); animation: wf-clock 1.7s ease-in-out forwards; }
.warp-fx .wf-face { fill: none; stroke: var(--warp-light); stroke-width: 1.5; stroke-dasharray: 3 2; }
.warp-fx .wf-ticks line { stroke: var(--warp-light); stroke-width: 2; stroke-linecap: round; }
.warp-fx .wf-hand { stroke: var(--warp-light); stroke-linecap: round; transform-origin: 50px 50px; }
.warp-fx .wf-hour { stroke-width: 4; animation: wf-hour 1.7s cubic-bezier(.6, 0, .25, 1) forwards; }
.warp-fx .wf-min { stroke-width: 2.5; animation: wf-min 1.7s cubic-bezier(.7, 0, .2, 1) forwards; }
.warp-fx .wf-pin { fill: var(--warp-light); }
.warp-fx .wf-text { position: absolute; left: 0; right: 0; top: calc(50% + min(26vw, 115px)); text-align: center; color: var(--warp-light); opacity: 0; }
.warp-fx .wf-text b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; }
.warp-fx .wf-text span { display: block; margin-top: 4px; font-size: .85rem; opacity: .8; }
.warp-fx.out .wf-text { animation: wf-text .8s ease-out forwards; }
.warp-fx .wf-flash { position: absolute; inset: 0; background: radial-gradient(circle, var(--warp-flash), transparent 70%); opacity: 0; animation: wf-flash 1.7s linear forwards; }
.town-map-wrap.warp-twist { animation: wf-twist .9s cubic-bezier(.5, 0, .9, .6) forwards; }
.town-map-wrap.warp-untwist { animation: wf-untwist .8s cubic-bezier(.1, .4, .3, 1) forwards; }
@keyframes wf-cover { 0% { opacity: 0; } 55% { opacity: .55; } 100% { opacity: 1; } }
@keyframes wf-uncover { 0% { opacity: 1; } 35% { opacity: .9; } 100% { opacity: 0; } }
@keyframes wf-spin { 0% { transform: rotate(0deg) scale(.6); } 53% { transform: rotate(-540deg) scale(1); } 100% { transform: rotate(-760deg) scale(1.3); } }
@keyframes wf-ring { 0% { opacity: 0; transform: scale(2.4); } 30% { opacity: .7; } 100% { opacity: 0; transform: scale(.05); } }
@keyframes wf-ring-out { 0% { opacity: .7; transform: scale(.05); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes wf-clock { 0% { transform: scale(.3) rotate(25deg); opacity: 0; } 35% { opacity: 1; } 53% { transform: scale(1) rotate(-10deg); } 75% { opacity: 1; } 100% { transform: scale(1.5) rotate(0deg); opacity: 0; } }
@keyframes wf-hour { 0% { transform: rotate(0deg); } 53% { transform: rotate(-330deg); } 100% { transform: rotate(-360deg); } }
@keyframes wf-min { 0% { transform: rotate(0deg); } 53% { transform: rotate(-2880deg); } 100% { transform: rotate(-3240deg); } }
@keyframes wf-text { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wf-flash { 0%, 44% { opacity: 0; } 53% { opacity: .9; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wf-twist { 0% { transform: none; filter: none; } 40% { transform: rotate(-6deg) scale(1.12) skewX(4deg); filter: hue-rotate(40deg) saturate(1.3); } 100% { transform: rotate(-32deg) scale(1.9) skewX(-6deg); filter: hue-rotate(160deg) saturate(1.8) blur(6px); } }
@keyframes wf-untwist { 0% { transform: rotate(28deg) scale(1.8) skewX(5deg); filter: hue-rotate(-140deg) saturate(1.6) blur(5px); } 60% { transform: rotate(-3deg) scale(1.03); filter: hue-rotate(-15deg) blur(0); } 100% { transform: none; filter: none; } }
/* The way back out of a world (warpTransition(..., { forward: true })): time runs forward - hands clockwise, vortex and map turning the other way. */
.warp-fx.fwd .wf-vortex { animation-name: wf-spin-fwd; }
.warp-fx.fwd .wf-hour { animation-name: wf-hour-fwd; }
.warp-fx.fwd .wf-min { animation-name: wf-min-fwd; }
.town-map-wrap.warp-fwd.warp-twist { animation-name: wf-twist-fwd; }
.town-map-wrap.warp-fwd.warp-untwist { animation-name: wf-untwist-fwd; }
@keyframes wf-spin-fwd { 0% { transform: rotate(0deg) scale(.6); } 53% { transform: rotate(540deg) scale(1); } 100% { transform: rotate(760deg) scale(1.3); } }
@keyframes wf-hour-fwd { 0% { transform: rotate(0deg); } 53% { transform: rotate(330deg); } 100% { transform: rotate(360deg); } }
@keyframes wf-min-fwd { 0% { transform: rotate(0deg); } 53% { transform: rotate(2880deg); } 100% { transform: rotate(3240deg); } }
@keyframes wf-twist-fwd { 0% { transform: none; filter: none; } 40% { transform: rotate(6deg) scale(1.12) skewX(-4deg); filter: hue-rotate(-40deg) saturate(1.3); } 100% { transform: rotate(32deg) scale(1.9) skewX(6deg); filter: hue-rotate(-160deg) saturate(1.8) blur(6px); } }
@keyframes wf-untwist-fwd { 0% { transform: rotate(-28deg) scale(1.8) skewX(-5deg); filter: hue-rotate(140deg) saturate(1.6) blur(5px); } 60% { transform: rotate(3deg) scale(1.03); filter: hue-rotate(15deg) blur(0); } 100% { transform: none; filter: none; } }
/* Family portals (build 257): the family's icon bobs above the doorway. */
.ent.life-portal .pt-fam { left: 50%; bottom: 112%; transform: translateX(-50%); font-size: calc(var(--t) * .34); line-height: 1; filter: drop-shadow(0 0 4px var(--portal-glow)); animation: pt-bob 2.2s ease-in-out infinite; }
@keyframes pt-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

/* ---- RIFT MAP (build 258, js/rift-atlas.js): Journal -> Rifts. A row per collection (chips: found / ❔), its count and its
   souvenir, then the recent worlds. Theme tokens only, so it follows light and dark. ---- */
#riftList { padding: 4px 2px 18px; }
#riftList .ra-intro { margin: 2px 4px 12px; font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
#riftList .ra-row { background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 16px; padding: 10px 12px 12px; margin-bottom: 10px; }
#riftList .ra-row header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#riftList .ra-row h3 { margin: 0; flex: 1; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; }
#riftList .ra-count { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
#riftList .ra-prize { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 1rem; background: color-mix(in srgb, var(--accent) 14%, transparent); opacity: .55; filter: grayscale(.7); }
#riftList .ra-prize small { font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
#riftList .ra-prize.won { opacity: 1; filter: none; background: color-mix(in srgb, var(--accent) 26%, transparent); }
#riftList .ra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#riftList .ra-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px dashed var(--stone-edge); color: var(--ink-soft); font-size: .8rem; }
#riftList .ra-chip b { font-weight: 400; font-size: 1rem; line-height: 1; }
#riftList .ra-chip em { font-style: normal; }
#riftList .ra-chip.got { border-style: solid; color: var(--ink); background: var(--board-bg); }
#riftList .ra-h { margin: 16px 4px 6px; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; }
#riftList .ra-log { list-style: none; margin: 0; padding: 0; }
#riftList .ra-log li { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--stone-edge); }
#riftList .ra-log li:last-child { border-bottom: 0; }
#riftList .ra-log .ra-ico { font-size: 1.3rem; width: 1.6em; text-align: center; }
#riftList .ra-log div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#riftList .ra-log small { color: var(--ink-soft); font-size: .78rem; }
#riftList .ra-log time { color: var(--ink-soft); font-size: .76rem; white-space: nowrap; }
#riftList .ra-empty { color: var(--ink-soft); font-size: .86rem; }

/* ---- DAILY RIFT (build 259, js/daily-rift.js): today's card at the top of Journal -> Rifts and its board. The gold portal itself
   is the PORTAL block above with .daily (colours in css/theme.css). ---- */
#riftList .dr-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--stone-edge)); }
#riftList .dr-status { margin: 0 0 8px; font-size: .86rem; line-height: 1.4; color: var(--ink-soft); }
#riftList .dr-status b { color: var(--ink); }
#riftList .dr-board { list-style: none; margin: 0; padding: 0; }
#riftList .dr-board li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid var(--stone-edge); font-size: .86rem; }
#riftList .dr-board li.me { font-weight: 700; color: var(--accent); }
#riftList .dr-rank { width: 1.4em; text-align: right; color: var(--ink-soft); }
#riftList .dr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#riftList .dr-score { white-space: nowrap; }
#riftList .dr-none { color: var(--ink-soft); }
.ent.life-portal.daily .pt-glow { animation-duration: 1.8s; }

/* ---- TIME-STOP (build 260, js/puddle-still.js): the 'still' puddle world. A veil drains the ground's colour (above the ground,
   below everything standing), rain hangs as still streaks, folk are grey and frosted, only the motes move. .pw-still-late
   (last 10 steps) makes the rain tremble; .pw-thaw lets it all fall and the colour come back. Colours: --still-*. ---- */
.pw-still-air { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.pw-still-veil { position: absolute; inset: 0; background: var(--still-veil); mix-blend-mode: color; opacity: .85; transition: opacity 1.4s ease; }
.pw-still-air .sd { position: absolute; width: 2px; height: calc(var(--t) * var(--l)); border-radius: 2px; background: linear-gradient(transparent, var(--still-drop)); transform: rotate(14deg); z-index: 900; opacity: .8; }
.pw-still-air .sb { position: absolute; font-size: calc(var(--t) * .38); font-style: normal; z-index: 901; filter: grayscale(1) brightness(1.15); transform: rotate(-12deg); }
.town-view.pw-still .ent.pw-frozen { flex-direction: column; }
.town-view.pw-still .ent.pw-frozen span { font-size: calc(var(--t) * .62); line-height: 1; filter: grayscale(1) brightness(1.08) drop-shadow(0 0 3px var(--still-ice)); transform: rotate(-7deg) translateY(-6%); transition: filter 1.2s ease, transform 1.2s ease; }
.town-view.pw-still .ent.pw-frozen b { font-size: calc(var(--t) * .2); font-weight: 600; color: var(--c-grey-100); opacity: .7; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ent.pw-mote span { width: 46%; height: 46%; border-radius: 50%; background: radial-gradient(circle, var(--still-mote-a) 0 30%, var(--still-mote-b) 60%, transparent 72%); box-shadow: 0 0 14px var(--still-mote-b); animation: still-mote 1.6s ease-in-out infinite; }
.lfx.pw-mote-pop span, .pw-mote-pop span { font-size: calc(var(--t) * .5); animation: still-pop .7s ease-out forwards; }
.town-view.pw-still-late .pw-still-air .sd { animation: still-tremble .18s steps(2, end) infinite; }
.town-view.pw-thaw .pw-still-veil { opacity: 0; }
.town-view.pw-thaw .pw-still-air .sd { animation: still-fall .9s cubic-bezier(.4, 0, 1, 1) forwards; }
.town-view.pw-thaw .pw-still-air .sb { animation: still-fly 1.2s ease-in forwards; }
.town-view.pw-thaw .ent.pw-frozen span { filter: none; transform: none; }
@keyframes still-mote { 0%, 100% { transform: translateY(0) scale(.92); opacity: .85; } 50% { transform: translateY(-14%) scale(1.06); opacity: 1; } }
@keyframes still-pop { from { transform: scale(.6); opacity: 1; } to { transform: translateY(-60%) scale(1.5); opacity: 0; } }
@keyframes still-tremble { 0% { transform: rotate(14deg) translateY(0); } 100% { transform: rotate(14deg) translateY(1px); } }
@keyframes still-fall { to { transform: rotate(14deg) translateY(calc(var(--t) * 3)); opacity: 0; } }
@keyframes still-fly { to { transform: translate(calc(var(--t) * 3), calc(var(--t) * -2)) rotate(0deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ent.pw-mote span, .town-view.pw-still-late .pw-still-air .sd { animation: none; } }

/* ---- CRAFT FAILS (build 261, js/shop-economy.js): the fail chance bar, the fail meter's pips and a crafting companion's note. ---- */
.cr-meter.fail .cr-bar i { background: var(--lose-glow); }
.cr-failmeter { display: flex; align-items: center; gap: 8px; width: 100%; font-size: .78rem; color: var(--ink-soft); }
.cr-failmeter .cr-pips { display: inline-flex; gap: 4px; }
.cr-failmeter .cr-pips i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--lose-glow); }
.cr-failmeter .cr-pips i.on { background: var(--lose-glow); box-shadow: 0 0 6px var(--lose-glow); }
.cr-failmeter small { margin-left: auto; }
.cr-help { width: 100%; font-size: .78rem; color: var(--accent); }
.cr-odds { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* ---- SKETCHBOOK (build 263, js/puddle-sketch.js): the 'sketch' puddle world. The page (paper colour blended over the ground)
   lifts as --sk-done goes 0 -> 1; sketch stones; your inked drawings glowing on them; the drawing sheet. Colours: --sketch-*. ---- */
.town-view.pw-sketch .town-world::after { content: ''; position: absolute; inset: 0; background: var(--sketch-paper); mix-blend-mode: color; opacity: calc(.9 - .9 * var(--sk-done, 0)); pointer-events: none; z-index: 0; transition: opacity 1.2s ease; }
.ent.pw-sketch-stone { flex-direction: column; }
.ent.pw-sketch-stone span { width: 62%; height: 62%; display: grid; place-items: center; border-radius: 30% 30% 12% 12%; background: var(--sketch-paper); color: var(--sketch-ink); font-size: calc(var(--t) * .34); box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 0 2px var(--sketch-ink) inset; animation: sk-beckon 2s ease-in-out infinite; }
.ent.pw-sketch-stone i { position: absolute; top: -14%; font-style: normal; font-size: calc(var(--t) * .3); filter: grayscale(1) opacity(.7); }
.ent.pw-sketch-stone.done svg { width: 66%; height: 66%; padding: 8%; overflow: visible; background: var(--sketch-paper); border-radius: 22%; box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 12px var(--sketch-glow); }
.ent.pw-sketch-stone.done path { fill: none; stroke: var(--sketch-ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--sketch-glow)); }
.ent.pw-sketch-stone.done b { position: absolute; bottom: -6%; font-size: calc(var(--t) * .2); color: var(--accent); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes sk-beckon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.sk-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay-bg); }
.sk-sheet.hidden { display: none; }
.sk-card { width: min(100%, 380px); background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 20px; padding: 14px; box-shadow: 0 12px 40px var(--shadow); }
.sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sk-head .sk-icon { font-size: 1.8rem; }
.sk-head div { flex: 1; display: flex; flex-direction: column; }
.sk-head b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.sk-head small { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }
.sk-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--board-bg); color: var(--ink); font-size: 1.1rem; }
.sk-pad { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--sketch-paper); overflow: hidden; box-shadow: inset 0 0 0 1px var(--stone-edge); }
.sk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sk-ghost { position: absolute; inset: 8%; width: 84%; height: 84%; opacity: 0; pointer-events: none; }
.sk-ghost path { fill: none; stroke: var(--sketch-ghost); stroke-width: 4; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
.sk-ghost.show { opacity: 1; transition: opacity .2s ease; }
.sk-ghost.show.fade { opacity: 0; transition: opacity .9s ease; }
.sk-msg { min-height: 2.6em; margin: 10px 2px 6px; font-size: .9rem; text-align: center; color: var(--ink); }
.sk-btns { display: flex; gap: 8px; justify-content: center; }
.sk-btns .btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .ent.pw-sketch-stone span { animation: none; } .sk-ghost.show.fade { transition: none; } }

/* ---- CRAFT ODDS BY RARITY (build 264, craftOddsHtml in js/workshop-and-starter.js): every rarity's skill and fail chance, the one
   on the forge (or in the trade) lit. The swatch reuses the .rarity-* gradients from base.css. ---- */
.cr-rarnote { width: 100%; font-size: .74rem; color: var(--ink-soft); }
.cr-rarodds { width: 100%; display: flex; flex-direction: column; gap: 2px; font-size: .74rem; }
.cr-ro { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 3px 8px; border-radius: 8px; color: var(--ink-soft); }
.cr-ro b { font-weight: 500; display: flex; align-items: center; gap: 6px; text-transform: capitalize; }
.cr-ro b i { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: none; }
.cr-ro span { min-width: 4.2em; text-align: right; font-variant-numeric: tabular-nums; }
.cr-ro span.f { color: var(--lose-glow); }
.cr-ro.on { background: var(--board-bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stone-edge); }
.cr-ro.on b { font-weight: 700; }

/* ---- THE FORGE + HOT STREAK (build 265, js/craft-forge.js; the odds panel in js/workshop-and-starter.js). Colours: --forge-*. ---- */
.fg-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay-bg); }
.fg-sheet.hidden { display: none; }
.fg-card { width: min(100%, 380px); background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 20px; padding: 14px; box-shadow: 0 12px 40px var(--shadow); }
.fg-card.master { box-shadow: 0 0 0 2px var(--forge-master), 0 12px 40px var(--shadow); }
.fg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fg-head .fg-icon { font-size: 1.8rem; }
.fg-head div { flex: 1; display: flex; flex-direction: column; }
.fg-head b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.fg-head small { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }
.fg-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--board-bg); color: var(--ink); font-size: 1.1rem; }
.fg-iron { position: relative; height: 64px; border-radius: 14px; background: var(--forge-iron); overflow: hidden; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
.fg-band { position: absolute; top: 0; bottom: 0; display: flex; justify-content: center; background: var(--forge-glow); box-shadow: 0 0 18px var(--forge-glow); transition: left .25s ease, width .25s ease; }
.fg-core { display: block; height: 100%; background: var(--forge-core); opacity: .85; }
.fg-spark { position: absolute; top: 6px; bottom: 6px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--forge-spark); box-shadow: 0 0 10px var(--forge-spark), 0 0 22px var(--forge-heat); }
.fg-iron.hit-perfect { animation: fg-flash .45s ease-out; }
.fg-iron.hit-good { animation: fg-thud .3s ease-out; }
.fg-iron.hit-miss { animation: fg-shake .3s ease-out; }
@keyframes fg-flash { 0% { box-shadow: inset 0 0 0 3px var(--forge-core), 0 0 30px var(--forge-core); } 100% { box-shadow: inset 0 2px 8px rgba(0,0,0,.5); } }
@keyframes fg-thud { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(3px); } }
@keyframes fg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fg-marks { display: flex; justify-content: center; gap: 12px; margin: 12px 0 4px; font-size: 1.3rem; }
.fg-marks span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--board-bg); color: var(--ink-soft); }
.fg-marks span.next { box-shadow: inset 0 0 0 2px var(--forge-heat); }
.fg-marks span.miss { color: var(--lose-glow); }
.fg-msg { min-height: 2.6em; margin: 6px 2px; font-size: .9rem; text-align: center; color: var(--ink); }
.fg-btns { display: flex; gap: 8px; justify-content: center; }
.fg-btns .btn { min-height: 48px; }
.fg-btns .fg-hit { flex: 1; }
.cr-forgenote { width: 100%; font-size: .74rem; color: var(--ink-soft); }
.cr-heat { display: flex; align-items: center; gap: 8px; width: 100%; font-size: .78rem; color: var(--ink-soft); }
.cr-heat .cr-flames { display: inline-flex; gap: 4px; }
.cr-heat .cr-flames i { width: 10px; height: 14px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; border: 1.5px solid var(--forge-heat); }
.cr-heat .cr-flames i.on { background: var(--forge-heat); box-shadow: 0 0 6px var(--forge-heat); }
.cr-heat small { margin-left: auto; text-align: right; }
.cr-heat.ready small { color: var(--forge-master); font-weight: 700; }
.cr-heat.ready .cr-flames i.on { background: var(--forge-master); border-color: var(--forge-master); animation: fg-flicker 1.2s ease-in-out infinite; }
@keyframes fg-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .fg-band { transition: none; } .fg-iron.hit-perfect, .fg-iron.hit-good, .fg-iron.hit-miss, .cr-heat.ready .cr-flames i.on { animation: none; } }

/* ---- PORTAL OPENING + COMPASS (build 266, js/portal.js). The ripple comes from the side the portal lies on (--fx-x/--fx-y);
   colours are the portal's (--portal-*, a family's through .portal-fam[data-fam] in css/theme.css). ---- */
.portal-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.portal-fx .pfx-ring { position: absolute; left: var(--fx-x, 50%); top: var(--fx-y, 50%); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 5px solid var(--portal-rim); box-shadow: 0 0 24px 6px var(--portal-glow), inset 0 0 20px 4px var(--portal-swirl-a); opacity: 0; animation: pfx-ring 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
.portal-fx .pfx-ring.r2 { border-color: var(--portal-swirl-b); animation-delay: .22s; }
.portal-fx .pfx-edge { position: absolute; inset: 0; box-shadow: inset 0 0 120px 40px var(--portal-glow), inset 0 0 0 4px var(--portal-rim);
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), var(--portal-glow), transparent 55%); opacity: 0; animation: pfx-edge 2s ease-out forwards; }
@keyframes pfx-ring { 0% { transform: scale(.2); opacity: 1; } 70% { opacity: .7; } 100% { transform: scale(24); opacity: 0; } }
@keyframes pfx-edge { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.portal-compass { position: absolute; z-index: 6; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--portal-core); box-shadow: 0 0 0 2px var(--portal-rim), 0 0 calc(8px + 22px * var(--warm, 0)) var(--portal-glow); cursor: pointer; animation: pc-pulse 1.6s ease-in-out infinite; }
.portal-compass .pc-arrow { position: absolute; inset: -14px; transform: rotate(var(--a, 0deg)); pointer-events: none; }
.portal-compass .pc-arrow::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -8px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent var(--portal-rim); filter: drop-shadow(0 0 4px var(--portal-glow)); }
.portal-compass .pc-fam { font-size: 20px; line-height: 1; }
@keyframes pc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1.04 + .08 * var(--warm, 0))); } }
@media (prefers-reduced-motion: reduce) { .portal-fx .pfx-ring { display: none; } .portal-compass { animation: none; } }

/* ---- PORTAL CRAFTING (build 266, js/portal-craft.js): the rift's charge (a mark at a full charge, the rest is overcharge),
   its attunement, the stones and the cards to feed it. ---- */
.cr-mode button small { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: var(--portal-swirl-a); color: var(--portal-spark); font-size: .7rem; }
.pc-meter { margin: 10px 0 6px; }
.pc-bar { position: relative; height: 16px; border-radius: 8px; background: var(--board-bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--stone-edge); }
.pc-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--portal-swirl-a), var(--portal-swirl-b)); box-shadow: 0 0 12px var(--portal-glow); transition: width .4s ease; }
.pc-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--portal-rim); }
.pc-nums { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: .78rem; color: var(--ink-soft); }
.pc-nums b { color: var(--ink); }
.pc-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 10px; font-size: .8rem; color: var(--ink-soft); }
.pc-att > b { color: var(--ink); }
.pc-fams { display: inline-flex; gap: 6px; margin-left: auto; }
.pc-fam { display: inline-flex; flex-direction: column; align-items: center; min-width: 36px; padding: 3px 4px; border-radius: 10px; background: var(--board-bg); font-size: 1rem; line-height: 1.1; }
.pc-fam small { font-size: .62rem; color: var(--ink-soft); }
.pc-fam.on { box-shadow: 0 0 0 2px var(--portal-rim), 0 0 10px var(--portal-glow); }
.pc-ignite { margin-bottom: 14px; }
.pc-ignite .btn { width: 100%; min-height: 48px; }
.pc-stones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pc-stone { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--board-bg); box-shadow: inset 0 0 0 1px var(--stone-edge); }
.pc-stone > div { flex: 1; display: flex; flex-direction: column; }
.pc-stone small { color: var(--ink-soft); font-size: .74rem; }
.pc-stone .btn { min-height: 44px; }
.pc-orb { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem;
  background: radial-gradient(circle, var(--portal-core) 30%, var(--portal-swirl-a) 70%, var(--portal-swirl-b)); box-shadow: 0 0 0 2px var(--portal-rim), 0 0 14px var(--portal-glow); animation: pc-spin 6s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
.pc-feed .cr-gridcard { position: relative; }
.pc-plus { position: absolute; right: 2px; bottom: 2px; padding: 1px 6px; border-radius: 8px; background: var(--portal-core); color: var(--portal-rim); font-size: .72rem; font-weight: 700; box-shadow: 0 0 0 1px var(--portal-rim); }
@media (prefers-reduced-motion: reduce) { .pc-orb { animation: none; } .pc-fill { transition: none; } }

/* ---- CRAFT ODDS, COMPACT (build 267): the button sits right under the stat choice; the two chances, one row of pips for the
   hot streak and the fail meter, and everything that explains them folded under "How the odds work". ---- */
.cr-forge { gap: 8px; }
.cr-forge .cr-may { width: 100%; margin: 0; text-align: center; font-size: .76rem; }
.cr-trackers { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: .8rem; color: var(--ink-soft); }
.cr-trackers .cr-heat, .cr-trackers .cr-failmeter { display: inline-flex; align-items: center; gap: 6px; width: auto; }
.cr-trackers .cr-heat b { color: var(--forge-master); font-size: .74rem; }
.cr-trackers .cr-pips i { width: 10px; height: 10px; }
.cr-more { width: 100%; font-size: .78rem; color: var(--ink-soft); }
.cr-more summary { cursor: pointer; padding: 6px 0; color: var(--ink); font-weight: 600; list-style: none; text-align: center; }
.cr-more summary::-webkit-details-marker { display: none; }
.cr-more summary::after { content: ' ▾'; color: var(--ink-soft); }
.cr-more[open] summary::after { content: ' ▴'; }
.cr-more > * + * { margin-top: 8px; }
.cr-more .cr-forgenote b { color: var(--ink); font-weight: 600; }
/* Trade up laid out like the Refine page (build 268): the rarity choice sits where Power / Health does, four across. */
.cr-trade .cr-tray { gap: 6px; margin: 2px 0 4px; }
.cr-rar-pick { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cr-rar-pick button { min-height: 52px; padding: 4px 2px; font-size: .82rem; }
.cr-rar-pick button small { font-size: .66rem; }
.cr-rar-pick button.short:not(.on) { opacity: .6; }
.cr-trade .cr-go { width: 100%; }
.cr-trade .cr-go .btn { width: 100%; min-height: 48px; }
.cr-trade .cr-odds { width: 100%; margin-top: 0; gap: 8px; }

/* ---- WISHES: the Starlight row in the Shop and the wish sheet (js/wishes.js). Colours are theme tokens. ---- */
.wish-wallet { margin-top: 2px; }
.wish-wallet .panel-action { flex: none; margin-left: 10px; }
.ws-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay-bg); }
.ws-sheet.hidden { display: none; }
.ws-card { width: min(100%, 400px); max-height: min(86vh, 640px); display: flex; flex-direction: column; background: var(--stone); border: 1px solid var(--stone-edge); border-radius: 20px; padding: 14px; box-shadow: 0 12px 40px var(--shadow); }
.ws-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ws-head .ws-icon { font-size: 1.8rem; }
.ws-head div { flex: 1; display: flex; flex-direction: column; }
.ws-head b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.ws-head small { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }
.ws-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--board-bg); color: var(--ink); font-size: 1.1rem; }
.ws-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.ws-tab { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--stone-edge); border-radius: 12px; background: var(--board-bg); color: var(--ink-soft); font-size: .68rem; line-height: 1.1; }
.ws-tab small { font-size: .62rem; opacity: .8; }
.ws-tab.can { color: var(--ink); }
.ws-tab.active { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.ws-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.ws-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--stone-edge); border-left: 4px solid var(--pc, var(--rc-b)); border-radius: 12px; background: var(--board-bg); color: var(--ink); text-align: left; }
.ws-row.cant { opacity: .55; }
.ws-art { font-size: 1.7rem; width: 2rem; text-align: center; }
.ws-name { flex: 1; display: flex; flex-direction: column; }
.ws-name small { color: var(--ink-soft); font-size: .72rem; }
.ws-name em { color: var(--accent); font-style: normal; }
.ws-cost { font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* ---- COMPANION MEMORIES (build 277): what the companion remembers, under its stats on the Companion page ---- */
.cp-mem { margin: 4px 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--board-bg); border: 1px solid var(--stone-edge); text-align: left; }
.cp-mem p { margin: 0 0 4px; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; }
.cp-mem p:last-child { margin-bottom: 0; }

/* ---- COMPANION CHEER (build 278): the third power button in battle, next to the Gift and the Fate ---- */
#battleView .bt-cheer.ready { opacity: 1; border-color: var(--win-glow); box-shadow: 0 0 0 2px color-mix(in srgb, var(--win-glow) 55%, transparent), 0 0 12px color-mix(in srgb, var(--win-glow) 45%, transparent); }
/* with three power buttons the bar is tight: the round buttons shrink a little so the Calm number is not cut off */
#btYouBar:has(#btCheer:not(.hidden)) .bt-mini { width: 34px; height: 34px; font-size: .9rem; }
/* on a narrow phone with all three power buttons, the "?" help button gives way so the Calm number is not cut off (the first-time help still opens by itself) */
@media (max-width: 380px) { #btYouBar:has(#btCheer:not(.hidden)) #btHelp { display: none; } }

/* ---- TOUCH TARGETS (build 280): small controls get an invisible 44px hit area, so a thumb can hit them without them looking any bigger.
   scripts/mobile-audit.js measures the effective size by probing taps; tests/mobile.test.js guards the ones below. ---- */
.hud-pill, .bt-mini, .jgo, .seg-btn, .hud-stat[role="button"], .panel-action, .title-chip, .claim-more, #deckRename { position: relative; }
.hud-pill::after, .hud-stat[role="button"]::after, .bt-mini::after, .jgo::after, .ch-paint::after, .ps-pin::after, #journalHelpBtn::after, .panel-action::after, .title-chip::after, .claim-more::after, #deckRename::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.seg-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.seg.seg-scroll { padding-block: 4px; }   /* the scrolling tab strips clip to their own box, so give the 44px hit area room */
.jgo { min-height: 44px; }
.title-chip { min-height: 44px; }   /* chips wrap in rows with little gap, so they are made 44px tall instead of padded */
.profile-stat .ps-pin { width: 44px; height: 44px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 7px 9px 0 0; }   /* same star, in a 44px button */

/* ---- READABLE TEXT (build 280): UI labels are never under 11px (they were 9 to 10.9px); the Index's small card tiles keep scaling with their card but not below 9px ---- */
.lvl-badge { font-size: 11px; }
.amb-time, .hud-ambient-sub .amb-time, .hud-ambient-sub .amb-weather { font-size: 11px; }
.dk-slot-n, .ent-name, .ch-plate, .ch-pins > span, .col .lbl, .bn-group { font-size: 11px; }
.alm-card.tile .ac-name, .alm-card.tile .ac-power, .alm-card.tile .ac-cost { font-size: max(9px, calc(var(--u) * .95)); }
#hudLevelBadge, .ps-label, .more-in-shop { font-size: 11px; }
.pack .pk-desc, .alm-card .ac-count, .alm-card .ac-in, .alm-card.tile .ac-count, .alm-card.tile .ac-in, .pack .btn s, .profile-stat .ps-label { font-size: 11px; }

/* ---- BATTLE EFFECTS LINE, FOLDED (build 280): first effect plus "+N" on a short phone, tap to open ---- */
#battleView .bt-weather.folded { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: pointer; padding: 3px 10px; min-height: 28px; }
#battleView .bt-weather .bw-first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#battleView .bt-weather .bw-all { text-align: left; line-height: 1.35; }
#battleView .bt-weather .bw-more { flex: none; font-weight: 700; color: var(--accent); }
#battleView .bt-weather.folded.open { align-items: flex-start; border-radius: 12px; }
#battleView .bt-weather.folded { position: relative; }
#battleView .bt-weather.folded::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---- HAND READABILITY (build 280): the stack shows only each card's left edge, so power AND health sit side by side at the left (they were at opposite ends, so health was always hidden) ---- */
#battleView #btHand .hcard:not(:last-child) .stats { justify-content: flex-start; gap: calc(var(--u) * .9); }
/* a crowded hand (6 or 7 cards) leaves each covered card about 40px: stack power over health there and drop the name, which is cut off anyway */
#battleView #btHand[style*="--hn: 7"] .hcard:not(:last-child) .nm, #battleView #btHand[style*="--hn: 6"] .hcard:not(:last-child) .nm { display: none; }
#battleView #btHand[style*="--hn: 7"] .hcard:not(:last-child) .stats, #battleView #btHand[style*="--hn: 6"] .hcard:not(:last-child) .stats { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .35); font-size: calc(var(--u) * 1.15); }

/* ===== Depth: the second lap (build 286) ===== */
.dp-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--stone-edge)); background: var(--stone); text-align: left; }
.dp-card .ws-icon { font-size: 1.7rem; flex: none; }
.dp-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dp-card-t b { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.dp-card-t small { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
.dp-card .panel-action { flex: none; }
.dp-list { gap: 10px; }
.dp-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--stone-edge); background: var(--board-bg); text-align: left; }
.dp-name b { display: block; font-size: .95rem; }
.dp-name small { color: var(--ink-soft); font-size: .76rem; }
.dp-chips { display: flex; gap: 6px; }
.dp-chip { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink-soft); font: 800 1rem var(--f-ui); }
.dp-chip.done { color: var(--ink); background: color-mix(in srgb, var(--water) 22%, var(--stone)); }
.dp-chip.next { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.dp-chip:disabled { opacity: .45; }

/* ==========================================================================================================
   TRADE (js/npc-trade.js): the Trade card on the Talk screen. Offers and your spare cards are the same list rows as the Chat topics
   (.talk-topic); each has a small card picture on its rarity colour, a name and a line under it.
   ========================================================================================================== */
#talkCard .tk-pane .tr-box { display: flex; flex-direction: column; gap: 10px; }
#talkCard .tk-pane .tr-box .talk-sub { margin: 0; text-align: left; }
#talkCard .tr-offer { padding-left: 12px; text-align: left; }
.tr-art { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--rg); font-size: 1.5rem; line-height: 1; overflow: hidden; }
.tr-art .card-art-img { width: 90%; height: 90%; object-fit: contain; vertical-align: baseline; }
.tr-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.tr-t b { font-size: .95rem; line-height: 1.15; }
.tr-t small { font-size: .72rem; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
#talkCard .tr-offer em { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
#talkCard .tr-offer:disabled { opacity: .55; cursor: default; }
#talkCard .tr-offer:disabled::after { display: none; }

/* ==========================================================================================================
   THE NEIGHBOUR SCREEN: DOCK AND CLOSE-UP (build 289; prototype: labs/npc-interaction-lab.html, options 7 and 9)
   prefs.talkStyle (js/requests-friendship-rival.js, talkStyle) sets #talkCard[data-style]:
     classic  the grid of cards as before; the wrappers below vanish (display: contents) and the quick match button and memory line stay hidden
     dock     the whole neighbour in view; the four jobs are a dock of icons at the thumb, with the match one tap above it; a job's list opens as
              a card above the dock (tap the icon again, or the neighbour, to put it away)
     combo    the dock plus a close-up: the face fills the top, what they say is a large italic subtitle over the foot of the picture, and a
              line of what they remember sits in the corner
   The same panes and buttons serve all three, so nothing about talking, gifting, trading or matches changes.
   ========================================================================================================== */
#talkCard .tk-lower, #talkCard .tk-dockwrap { display: contents; }
#talkCard .tk-quick, #talkCard .tk-memo { display: none; }
#talkCard[data-style="dock"] .tk-lower, #talkCard[data-style="combo"] .tk-lower { display: block; position: relative; flex: none; }
#talkCard[data-style="dock"] .tk-dockwrap, #talkCard[data-style="combo"] .tk-dockwrap { display: block; }
#talkCard[data-style="dock"] .tk-quick, #talkCard[data-style="combo"] .tk-quick {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0 0 10px; border: 0; border-radius: 18px;
  background: var(--water); color: var(--on-water); font: 800 1rem var(--f-ui); cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--water) 35%, transparent);
}
#talkCard[data-style="dock"] .tk-quick:active, #talkCard[data-style="combo"] .tk-quick:active { transform: scale(.98); }
#talkCard[data-style="dock"] .tk-quick.hidden, #talkCard[data-style="combo"] .tk-quick.hidden { display: none; }
/* the dock */
#talkCard[data-style="dock"][data-view] .tk-cats, #talkCard[data-style="combo"][data-view] .tk-cats {
  display: flex; gap: 2px; margin: 0 0 12px; padding: 6px; border: 1px solid var(--stone-edge); border-radius: 26px;
  background: color-mix(in srgb, var(--stone) 90%, transparent); box-shadow: 0 8px 24px var(--shadow);
}
#talkCard[data-style="dock"][data-view] .tk-cat, #talkCard[data-style="combo"][data-view] .tk-cat,
#talkCard[data-style="dock"][data-view] .tk-cat.main, #talkCard[data-style="combo"][data-view] .tk-cat.main {
  flex: 1 1 0; grid-column: auto; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0 6px;
  border: 0; border-radius: 20px; background: transparent; color: var(--ink-soft); text-align: center;
}
#talkCard[data-style="dock"][data-view] .tk-cat .ico, #talkCard[data-style="combo"][data-view] .tk-cat .ico { font-size: 1.45rem; }
#talkCard[data-style="dock"][data-view] .tk-cat .lb, #talkCard[data-style="combo"][data-view] .tk-cat .lb { font-size: .72rem; font-weight: 800; }
#talkCard[data-style="dock"] .tk-cat small, #talkCard[data-style="combo"] .tk-cat small { display: none; }
#talkCard[data-style="dock"] .tk-cat .badge, #talkCard[data-style="combo"] .tk-cat .badge { right: 22%; top: 2px; }
#talkCard[data-style="dock"][data-view] .tk-cat.on, #talkCard[data-style="combo"][data-view] .tk-cat.on { background: var(--accent); color: var(--on-accent); }
/* a job's list: a card above the dock */
#talkCard[data-style="dock"] .tk-sub, #talkCard[data-style="combo"] .tk-sub {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 6; margin: 0 0 8px; max-height: min(46vh, 380px); gap: 8px; padding: 12px;
  border: 1px solid var(--stone-edge); border-radius: 22px; background: color-mix(in srgb, var(--stone) 95%, transparent); box-shadow: 0 12px 34px var(--shadow); animation: sc-rise .22s both;
}
#talkCard[data-style="dock"] .tk-back, #talkCard[data-style="combo"] .tk-back { display: none; }
#talkCard[data-style="dock"] .tk-subhead h3, #talkCard[data-style="combo"] .tk-subhead h3 { margin: 0 4px; font-size: 1rem; color: var(--accent); }
#talkCard[data-style="dock"] .tk-pane .btn, #talkCard[data-style="dock"] .tk-pane .talk-topic,
#talkCard[data-style="combo"] .tk-pane .btn, #talkCard[data-style="combo"] .tk-pane .talk-topic { min-height: 52px; }
/* the neighbour: bigger, with the name and hearts as a quiet line instead of the gold plate */
#talkCard[data-style="dock"] .tk-bust, #talkCard[data-style="combo"] .tk-bust { --fig-h: 78%; }
#talkCard[data-style="dock"] .tk-bust.emoji, #talkCard[data-style="combo"] .tk-bust.emoji { --fig-h: 46%; }
#talkCard[data-style="dock"] .tk-plate, #talkCard[data-style="combo"] .tk-plate { flex-direction: column; gap: 2px; margin: -6px 0 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-align: center; text-shadow: 0 2px 8px var(--tk-veil); }
#talkCard[data-style="dock"] .tk-plate .talk-name, #talkCard[data-style="combo"] .tk-plate .talk-name { font-size: 1.3rem; }
/* close-up */
#talkCard[data-style="combo"] .tk-stage { position: relative; }
#talkCard[data-style="combo"] .tk-bust:not(.emoji) { --fig-h: 118%; align-items: flex-start; overflow: hidden; padding-top: 2%; }
#talkCard[data-style="combo"] .tk-bust:not(.emoji) .talk-portrait { margin-top: 0; animation: tk-breathe 5s ease-in-out infinite; transform-origin: 50% 0; }
#talkCard[data-style="combo"] .tk-bust:not(.emoji) .talk-portrait { -webkit-mask-image: linear-gradient(180deg, var(--c-grey-0) 52%, transparent 96%); mask-image: linear-gradient(180deg, var(--c-grey-0) 52%, transparent 96%); }   /* the picture fades out into the subtitle */
@keyframes tk-breathe { 50% { transform: scale(1.025); } }
#talkCard[data-style="combo"] .talk-bubble { bottom: 10px; z-index: 5; padding: 0 8px; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; text-align: center; }
#talkCard[data-style="combo"] .talk-bubble::before { display: none; }
#talkCard[data-style="combo"] .talk-bubble .talk-text { font: italic 400 1.28rem/1.3 var(--f-display) !important; text-shadow: 0 2px 12px var(--tk-veil), 0 0 4px var(--tk-veil); }
#talkCard[data-style="combo"] .talk-sub, #talkCard[data-style="combo"] .talk-tag, #talkCard[data-style="combo"] .talk-doing { text-shadow: 0 1px 6px var(--tk-veil); }
#talkCard[data-style="combo"] .tk-memo:not(:empty) {
  display: block; position: absolute; right: 0; top: 0; z-index: 7; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--tk-veil) 62%, transparent);
  color: var(--ink); font: 700 .72rem var(--f-ui);
}
@media (prefers-reduced-motion: reduce) { #talkCard[data-style="combo"] .tk-bust .talk-portrait, #talkCard[data-style] .tk-sub { animation: none; } }
/* the close-up picture is only ever scaled, never stretched: its width follows the box and its height follows its own proportions */
#talkCard[data-style="combo"] .talk-portrait .tk-img { width: 100%; height: auto; max-width: none; max-height: none; object-fit: contain; }
/* a short phone: a little less crop and a smaller subtitle, so the words stay off the face */
@media (max-height: 700px) { #talkCard[data-style="combo"] .tk-bust:not(.emoji) { --fig-h: 104%; } #talkCard[data-style="combo"] .talk-bubble .talk-text { font-size: 1.08rem !important; } }

/* ---- THE FAN MENU, THE INFO BAR AND THE TAB WINDOW (build 290; script: js/fan-menu.js) ----
   The bottom dock is gone. #bottomNav is now a full-size overlay (it ignores taps except on its own parts) holding the info bar and
   one round button; tapping the button fans the five places out in an arc around the thumb. The five items keep the old tab ids.
   Journal, Cards, Rewards, Character and the Card Shop screen open as a window (#tabWin) over the dimmed town instead of filling
   the screen. The town stays drawn under the dim, so #townPanel.tab-away no longer fades it out. */
#townPanel.tab-away { opacity: 1; pointer-events: none; }
/* the top pill is only you: avatar, name and XP on the left, your cards and Embers on the right. The place, time and weather live in the info bar below. */
.hud { right: 10px; max-width: none; padding-right: 14px; }
.hud-id-text { display: flex; gap: 2px; }
.hud-xp-bar { max-width: 90px; }
.hud-xp-text { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-spacer { display: block; flex: 1; min-width: 8px; }
.hud-resources { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hud .hud-resources #pillCards { display: flex; }
.hud-resources .hud-stat { font-size: .9rem; }
.hud-resources .hs-icon, .hud-resources #pillPebbles .hs-icon { width: auto; height: auto; border: 0; background: none; box-shadow: none; font-size: 1.05rem; }
.hud-resources .hs-bar, .hud-resources #pillPebbles .hs-bar { height: auto; min-width: 0; margin: 0; padding: 0 0 0 5px; background: none; box-shadow: none; border-radius: 0; }
.hud-resources .hs-fill { display: none; }
.hud-resources .hs-val { font-size: .9rem; font-weight: 800; }

.dock { position: absolute; inset: 0; z-index: 14; pointer-events: none; --ex: 47px; --cy: calc(47px + env(safe-area-inset-bottom)); }
.dock.r { --cx: calc(100% - var(--ex)); }
.dock.l { --cx: var(--ex); }
.fan-scrim { position: absolute; inset: 0; background: var(--dock-dim); opacity: 0; transition: opacity .25s ease; }
.dock.open .fan-scrim { opacity: 1; pointer-events: auto; }

.dock-bar { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 66px; padding: 0 82px 0 20px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  border-radius: 33px; background: var(--glass); border: 1px solid color-mix(in srgb, var(--stone-edge) 80%, transparent); box-shadow: 0 10px 26px var(--shadow); pointer-events: auto; overflow: hidden; text-align: left; }
.dock.l .dock-bar { padding: 0 20px 0 82px; }
.dock-l1 { display: flex; align-items: center; min-width: 0; }
.dock-town { display: flex; min-width: 0; flex: 1; }
.dock-ctx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; overflow: hidden; }
.dc-title { font-size: 14px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.dc-sub { font-size: 11px; font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.dc-sub:empty { display: none; }
.dock:not([data-ctx="town"]) .dock-town, .dock[data-ctx="town"] .dock-ctx { display: none; }
/* the sky pill as two lines: the place, then the time of day and the weather */
.dock-town .hud-ambient { flex: 1; max-width: none; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; justify-content: flex-start; }
.dock-town .hud-ambient-text { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow: hidden; }
.dock-town .hud-district { font-family: var(--f-ui); font-size: 14px; font-weight: 800; color: var(--ink); flex: 0 1 auto; min-width: 0; }
.dock-town .hud-ambient-sub { flex: none; font-size: 11px; gap: 5px; }
.dock-town .hud-ambient-sub .amb-time, .dock-town .hud-ambient-sub .amb-weather { font-size: 11px; max-width: 110px; }
.dock-town .hud-ambient-sub .amb-weather:not(:empty)::before { content: '· '; }

.fan-main { pointer-events: auto; position: absolute; z-index: 3; left: var(--cx); bottom: calc(var(--cy) - 28px); width: 56px; height: 56px; margin-left: -28px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--water); color: var(--on-water); font-size: 1.55rem; box-shadow: 0 6px 16px var(--shadow); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), left .35s cubic-bezier(.3, 1.2, .45, 1); }
.dock.open .fan-main { transform: scale(.9); }
.fm-ico, .fm-x { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .2s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.fm-x { opacity: 0; transform: rotate(-90deg) scale(.4); }
.dock.open .fm-ico { opacity: 0; transform: rotate(90deg) scale(.4); }
.dock.open .fm-x { opacity: 1; transform: none; }
.fm-ico .t-icon, .fm-ico > span { line-height: 1; }
.fm-ico:has(> .av-face) { width: 1.4em; height: 1.4em; }
.fan-main .dot { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-top); animation: pulse-dot 1.8s ease-in-out infinite; transition: opacity .2s ease; }
.dock.open .fan-main .dot { opacity: 0; }

/* the five places. Each is a 64px glass circle with its icon and name inside (11px, like every UI label); the script gives it a
   transform and an opacity every frame while the fan opens and closes, so the stylesheet only says where it rests (on the button). */
.fan-item { pointer-events: none; position: absolute; z-index: 2; left: var(--cx); bottom: calc(var(--cy) - 32px); width: 64px; height: 64px; margin-left: -32px; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--glass); color: var(--ink); font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--stone-edge) 80%, transparent); box-shadow: 0 6px 16px var(--shadow); opacity: 0; will-change: transform, opacity; }
.dock.open .fan-item { pointer-events: auto; }
.fan-item .t-icon { font-size: 1.35rem; line-height: 1.1; filter: drop-shadow(0 .035em .05em var(--art-sh)); }
.fan-item .t-icon:has(> .av-face) { display: inline-flex; width: 1.4em; height: 1.4em; filter: none; }
.fan-item > span:not(.t-icon) { font-size: 11px; font-weight: 800; line-height: 1.1; }
.fan-item.active { background: var(--water); color: var(--on-water); border-color: transparent; }
.fan-item .dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.8s ease-in-out infinite; }
.fan-item.active .dot { display: none; }

/* the window */
.win-dim { position: absolute; inset: 0; z-index: 11; background: var(--dock-dim); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body.win-open .win-dim { opacity: 1; pointer-events: auto; }
.tab-win { position: absolute; z-index: 12; left: 10px; right: 10px; top: calc(var(--hud-h) + 14px); bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom)); display: none; flex-direction: column;
  background: var(--bg-top); border: 1px solid var(--stone-edge); border-radius: 24px; box-shadow: 0 22px 44px var(--shadow); overflow: hidden; text-align: left; }
.tab-win.on { display: flex; }
.win-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 8px 4px 16px; }
.win-ico { font-size: 1.45rem; line-height: 1; display: inline-flex; }
.win-ico:has(> .av-face) { width: 1.4em; height: 1.4em; }
.win-title { margin: 0; flex: 1; min-width: 0; font: 500 1.4rem var(--f-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 8px 16px; }
.win-body::-webkit-scrollbar { display: none; }
.win-body > .panel { margin: 0; }
.tab-win.win-in { animation: winSlideIn .4s cubic-bezier(.22, .9, .3, 1) backwards; }
.tab-win.win-out { animation: winSlideOut .28s ease-in forwards; }
@keyframes winSlideIn { from { transform: translateY(108%); } }
@keyframes winSlideOut { to { transform: translateY(108%); } }
/* the content: the rows and blocks of the screen rise in one after another (the script numbers them with --n) */
.win-rise { animation: winRise .4s cubic-bezier(.22, .9, .3, 1) backwards; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes winRise { from { opacity: 0; transform: translateY(14px); } }
/* a battle or a building screen covers everything, so the window and the dim step aside (they come back with the tab when it ends) */
body.in-battle .tab-win, body.in-battle .win-dim, body.in-scene .tab-win, body.in-scene .win-dim { display: none; }
@media (prefers-reduced-motion: reduce) { .tab-win.win-in, .tab-win.win-out, .win-rise, .fan-main, .fm-ico, .fm-x, .fan-scrim, .win-dim { animation: none; transition: none; } }

/* ==========================================================================================================
   THE WELCOME SIGN, REDESIGNED (js/town-render-weather.js weatherBoardHtml + js/town-news.js townNewsBoardRows)
   Top to bottom: the quote, one big card for the weather right now (its effects as small chips), a slim strip for what is coming,
   then today's rows (event, weather moment, town goal with its bar, the Gazette headline, town mood). It replaces the old stack of
   equal-weight rows, so the sign reads at a glance and fits one screen with less scrolling.
   ========================================================================================================== */
.wb-hero { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--stone-edge);
  background: linear-gradient(145deg, color-mix(in srgb, var(--water) 30%, var(--stone)), color-mix(in srgb, var(--accent) 10%, var(--stone))); }
.wb-hero-ico { flex: none; font-size: 2rem; line-height: 1; filter: drop-shadow(0 3px 6px var(--shadow)); }
.wb-hero-txt, .wb-next-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.wb-hero-txt small, .wb-next-txt small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.wb-hero-txt b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.wb-hero .wb-tag { align-self: flex-start; }
/* effects are plain lines, not pills: they wrapped into tall blobs on a phone */
.wb-chips { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.wb-chips span { font-size: .8rem; font-weight: 600; line-height: 1.35; text-align: left; color: var(--ink); }
/* what is coming: one slim line, no effects (they show when it arrives) */
.wb-next { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 14px; border-radius: 14px; border: 1px dashed var(--stone-edge); }
.wb-next-ico { flex: none; font-size: 1.15rem; line-height: 1; opacity: .85; }
.wb-next-txt { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.wb-next-txt b { font-family: var(--f-display); font-weight: 500; font-size: .98rem; line-height: 1.2; color: var(--ink); }
.wb-next .wb-chips { display: none; }
.wb-rows { gap: 6px; }
.wb-rows .wb-row { align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 14px; }
.wb-rows .wb-ico { width: 32px; height: 32px; font-size: 1.15rem; border-radius: 10px; }
.wb-rows .wb-txt b { font-size: .98rem; }
.wb-rows .wb-txt > span { font-size: .76rem; line-height: 1.3; }
.wb-rows .wb-bar { margin-top: 5px; height: 6px; }
.wb-rows .wb-tag { margin-top: 1px; }
/* the sign is a fixed-height card: the title and the Continue button stay put and only the rows scroll, so the button is never off screen */
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) { display: flex; flex-direction: column; width: min(380px, 94vw); max-width: none; max-height: min(92dvh, 780px); padding: 16px 16px 14px; overflow: hidden; }
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) #sceneryIcon { display: none; }
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) h2 { flex: none; margin: 0 0 4px; font-size: 1.25rem; }
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) #sceneryDesc.rich { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px 12px; padding: 0 6px; }
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) #sceneryContinue, #sceneryOverlay .overlay-card:has(#sceneryDesc.rich) .scenery-actions { flex: none; }
#sceneryDesc.rich .wb-quote { margin: 0 0 8px; font-size: .84rem; line-height: 1.35; }

/* ==========================================================================================================
   THE NEIGHBOUR SCREEN, TEXT OFF THE FACE + THE MESSAGE CARD (build 293; js/requests-friendship-rival.js)
   1. In the close-up the words used to be laid over the picture, so a long favour covered the face. The picture and the words now
      share the box in two rows: the neighbour on top, the words in their own glass panel underneath. Nothing overlaps.
   2. A neighbour with something to say (a favour to offer, or one to hand in) opens with a message card: Accept / Not now.
   ========================================================================================================== */
#talkCard[data-style="combo"] .tk-bust, #talkCard[data-style="combo"] .tk-bust:not(.emoji) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: stretch; gap: 8px; overflow: hidden; padding-top: 0; --fig-h: 100%; }
#talkCard[data-style="combo"] .tk-bust .talk-portrait { grid-row: 2; align-self: end; min-height: 0; max-height: 80%; margin: 0; }
#talkCard[data-style="combo"] .tk-bust.emoji .talk-portrait { height: auto; align-self: center; font-size: min(30cqh, 62cqw); }
#talkCard[data-style="combo"] .talk-bubble { grid-row: 3; position: relative; left: auto; right: auto; bottom: auto; z-index: 5; width: 100%; max-height: 44cqh; overflow-y: auto; scrollbar-width: none; margin: 0; padding: 10px 14px;
  border: 1px solid var(--stone-edge); border-radius: 20px; background: color-mix(in srgb, var(--stone) 86%, transparent); box-shadow: 0 8px 24px var(--shadow); }
#talkCard[data-style="combo"] .talk-bubble::-webkit-scrollbar { display: none; }
#talkCard[data-style="combo"] .talk-bubble .talk-text { max-height: none; overflow: visible; font: italic 400 1.12rem/1.3 var(--f-display) !important; text-shadow: none; }
#talkCard[data-style="combo"] .talk-sub, #talkCard[data-style="combo"] .talk-tag, #talkCard[data-style="combo"] .talk-doing { text-shadow: none; }
@media (max-height: 700px) { #talkCard[data-style="combo"] .tk-bust:not(.emoji) { --fig-h: 100%; } #talkCard[data-style="combo"] .talk-bubble .talk-text { font-size: 1rem !important; } }

.tk-offer { display: none; }
#talkCard.offering .tk-offer { display: flex; flex-direction: column; gap: 8px; flex: none; margin: 0 0 12px; padding: 14px 16px; text-align: left; border: 1px solid var(--stone-edge); border-radius: 22px;
  background: color-mix(in srgb, var(--stone) 94%, transparent); box-shadow: 0 12px 34px var(--shadow); animation: sc-rise .25s both; }
#talkCard.offering .talk-bubble, #talkCard.offering .tk-lower { display: none; }
.tk-offer small { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tk-offer .to-text { margin: 0; font: italic 400 1.2rem/1.3 var(--f-display); color: var(--ink); }
.tk-offer .to-hint { font-size: .84rem; color: var(--ink-soft); }
.tk-offer .to-reward { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tk-offer .to-actions { display: flex; gap: 8px; margin-top: 4px; }
.tk-offer .to-actions .btn { margin: 0; }
.tk-offer .to-yes { flex: 2; }
.tk-offer .to-no { flex: 1; }
.tk-offer .to-full { flex: 2; align-self: center; font-size: .84rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { #talkCard.offering .tk-offer { animation: none; } }

/* ==========================================================================================================
   ONE SET OF BUTTONS (build 294): three roles, the same everywhere a dialog, a neighbour or a menu asks you to act.
   Primary   .btn           the filled pill (water colour): Accept, Continue, Hand it in, Friendly match
   Secondary .btn.btn-ghost the same pill as an outline: Not now, Later, Cancel, Back
   Close     .x-close       one round X, top right of every card, window, sheet and menu (.pm-close, .win-x and .wm-close are the same button)
   Sizes are tokens so a change is made once.
   ========================================================================================================== */
:root { --btn-h: 50px; --x-size: 44px; }
.btn, .btn-ghost { min-height: var(--btn-h); }
.btn { padding: 12px 24px; font-size: .95rem; font-weight: 800; }
.btn-ghost { color: var(--ink); background: transparent; box-shadow: none; }
.btn.st-small { min-height: 0; padding: 6px 14px; font-size: .8rem; }   /* the little inline buttons in Settings rows stay little */
#talkCard[data-style] .tk-pane .btn, #talkCard[data-style] .tk-pane .talk-topic { min-height: var(--btn-h); }
#talkCard[data-style] .tk-pane .btn { border-radius: 999px; font-size: .95rem; font-weight: 800; }
.x-close, .pm-close, .win-x, .wm-close { display: grid; place-items: center; flex: none; width: var(--x-size); height: var(--x-size); min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--stone-edge);
  background: color-mix(in srgb, var(--stone) 92%, transparent); color: var(--ink); box-shadow: 0 2px 8px var(--shadow); font-size: 0; line-height: 1; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.x-close svg, .pm-close svg, .win-x svg, .wm-close svg { width: 18px; height: 18px; pointer-events: none; }
.x-close:active, .pm-close:active, .win-x:active, .wm-close:active { transform: scale(.9); background: color-mix(in srgb, var(--hl) 14%, var(--stone)); }
.overlay-card > .x-close { position: absolute; top: 10px; right: 10px; z-index: 3; }
.overlay-card:has(> .x-close) > h2 { padding: 0 40px; }
/* the welcome sign closes with the X; its Continue button is only for the small text-only prop messages */
#sceneryContinue { display: none; }   /* the X closes every prop message (build 297); the button stays in the page for the code that points at it */
#sceneryOverlay .overlay-card:has(#sceneryDesc.rich) { padding-bottom: 16px; }

/* ---- build 296: the neighbour screen and the Leave buttons ---- */
/* the name and hearts sit between the picture and the words (the script moves them there in the close-up) */
#talkCard[data-style="combo"] .tk-bust > .tk-plate { grid-row: 1; margin: 0; padding: 14px 0 0; }
#talkCard[data-style="combo"] .tk-memo { display: none; }
/* a full-screen takeover (a neighbour, a building, the fountain) leaves with a plain button at the foot; the round X is for windows */
#talkCard > .talk-close { flex: none; width: 100%; margin: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
#sceneView.sc-std .sc-btn.sc-row.sc-leave[data-act="leave"] { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: 100%; margin: auto 0 0; min-height: var(--btn-h); padding: 12px 24px; border-radius: 999px; background: var(--stone); border: 1px solid var(--stone-edge); color: var(--ink); font-weight: 800; box-shadow: 0 4px 14px var(--shadow); }
#sceneView .sc-btn.sc-leave::before, #sceneView .sc-btn.sc-leave::after { display: none; }

/* ---- the trade table (js/npc-trade.js openTradeTable) ---- */
#tradeOverlay { z-index: 30; }
.tx-card { width: min(380px, 94vw); max-width: none; padding: 18px 16px 16px; }
.tx-say { margin: 0 0 12px; font: italic 400 1.02rem/1.35 var(--f-display); color: var(--ink-soft); text-wrap: balance; }
.tx-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 12px; }
.tx-swap { font-size: 1.4rem; color: var(--ink-soft); }
.tx-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 8px; border-radius: 18px; border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--ink) 5%, var(--stone)); }
.tx-side small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tx-side b { font-family: var(--f-display); font-weight: 500; font-size: 1rem; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.tx-art { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; background: var(--rg); font-size: 2.2rem; line-height: 1; overflow: hidden; }
.tx-art .card-art-img { width: 90%; height: 90%; object-fit: contain; vertical-align: baseline; }
.tx-rar { font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.tx-fam { font-size: .72rem; font-weight: 700; color: var(--ink); }
.tx-agree { display: flex; gap: 8px; margin-bottom: 8px; }
.tx-seal { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 999px; border: 1px dashed var(--stone-edge); font-size: .78rem; font-weight: 800; color: var(--ink-soft); transition: background .25s ease, color .25s ease; }
.tx-seal.on { border-style: solid; border-color: transparent; background: var(--water); color: var(--on-water); }
.tx-reward { margin-bottom: 12px; font-size: .86rem; color: var(--ink-soft); }
.tx-reward b { color: var(--ink); }
.tx-actions { display: flex; gap: 8px; }
.tx-actions .btn { margin: 0; }
.tx-yes { flex: 2; } .tx-no { flex: 1; }
.tx-side .rarity-tag { margin: 0; font-size: .66rem; }

/* trade table, gamified (build 297): trader rank, the daily three, the family-match badge */
.tx-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; text-align: left; }
.tx-rank, .tx-daily { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink); }
.tx-rank small, .tx-daily small { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--ink-soft); }
.tx-bar { flex: 1; max-width: 90px; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.tx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.tx-pips { display: inline-flex; gap: 5px; }
.tx-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--stone-edge); }
.tx-pips i.on { background: var(--accent); border-color: var(--accent); }
.tx-kin { display: block; margin-top: 4px; font-weight: 800; color: var(--ink); }

/* ---- build 297 ---- */
/* the neighbour's name and hearts sit above their head, bigger; the words get room to breathe and a gap above the match button */
#talkCard[data-style="combo"] .tk-plate .talk-name { font-size: 1.9rem; line-height: 1.1; }
#talkCard[data-style="combo"] .tk-plate .talk-hearts { font-size: 1.1rem; letter-spacing: 3px; }
#talkCard[data-style="combo"] .talk-bubble { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
#talkCard[data-style="combo"] .talk-bubble > * { margin: 0; }
#talkCard .tk-stage { margin-bottom: 14px; }
/* a keyword badge is exactly as big as the cost bubble above it (it was squeezed to an oval inside the column) */
#battleView .card .kws span, .reveal-card .kws span, .alm-card.tile .ac-kw i { flex: none; width: 1.75em; height: 1.75em; }
/* the card reveal closes with the X; the Nice button is hidden (and while a card is still face down the X waits too) */
#pickupContinue { display: none; }
#pickupCard:has(#pickupContinue.hidden) > #pickupX { visibility: hidden; }
/* the trade table shows the whole card */
.tx-card { max-height: 94dvh; overflow-y: auto; }
.tx-side { padding: 10px 6px 12px; gap: 6px; }
.tx-side .reveal-card-frame { margin: 2px 0; }
.tx-side .reveal-card { width: 128px; }
.tx-side .reveal-card.fa, .tx-side .reveal-card-frame.has-fa .reveal-card { width: 128px; }

/* ---- build 299 ---- */
/* the deck tray shows whole cards (the same tile as My Cards) */
.dk-tray .alm-card.tile.dk-tslot { max-width: none; width: 100%; aspect-ratio: 3 / 4; height: auto; }
#deckBuild .dk-tray { row-gap: 16px; }
/* tile stats: icon and number together, same size; the "in deck" label hangs below the card instead of over the numbers */
.alm-card.tile .ac-power .pw, .alm-card.tile .ac-power .hp { display: inline-flex; align-items: center; gap: .25em; }
.alm-card.tile .ac-power .ico-swap, .alm-card.tile .ac-power img { width: 1.1em; height: 1.1em; vertical-align: middle; }
.alm-card.tile .ac-in { bottom: -16px; }
.alm-row.card-grid { row-gap: 28px; }
/* the cost bubble on the detail sheet sticks out above the card; give it room so the sheet does not cut it off */
.inspect-overlay .reveal-card-frame.ins-frame { margin: 26px 0 12px; }
/* lucky swap line on the trade table */
.tx-luck { margin: -4px 0 12px; font-size: .86rem; color: var(--ink); }
.tx-luck small { display: block; font-size: .7rem; font-weight: 700; color: var(--ink-soft); }

/* the maze's way out, above the fog (js/puddle-modes.js pwBeaconSync) */
.pw-beacon { position: absolute; z-index: 7; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; pointer-events: none; }
.pw-beacon .pwb-ico { font-size: 1.7rem; line-height: 1; animation: pw-spin 6s linear infinite; filter: drop-shadow(0 0 10px var(--c-indigo-77)); }
.pw-beacon .pwb-arrow { display: none; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -5px; border-left: 12px solid var(--accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 1px 3px var(--shadow)); }
.pw-beacon.edge .pwb-arrow { display: block; }
@media (prefers-reduced-motion: reduce) { .pw-beacon .pwb-ico { animation: none; } }
/* the card detail sheet: the cost bubble hangs above the card's top-left corner, so the frame needs room above it or the sheet's own scroll box cuts it off */
#cardSheet .reveal-card-frame.cs-card { margin: 34px 0 14px; }
.jsheet > .x-close { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* ==========================================================================================================
   THE CELLAR WORLD (js/cellar-world.js): no sky, a fog canvas over the floor, and the things on it
   ========================================================================================================== */
.town-view.pw-cellar-world .town-weather, .town-view.pw-cellar-world .weather-canvas, .town-view.pw-cellar-world canvas.wx-canvas, .town-view.pw-cellar-world .town-sky { display: none !important; }
.cl-fog { position: absolute; left: 0; top: 0; z-index: 800; pointer-events: none; }
.ent.cl-obj > span, .ent.cl-stairs > span { font-size: calc(var(--t) * .62); filter: drop-shadow(0 2px 2px var(--shadow)); }
.ent.cl-stairs > span { font-size: calc(var(--t) * .8); }
.ent.cl-obj.used > span { opacity: .45; filter: grayscale(1); }
.ent.cl-obj.camp:not(.used) > span, .ent.cl-obj.cap > span { animation: bob 1.8s ease-in-out infinite; }
.ent.cl-foe > span { font-size: calc(var(--t) * .86); animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 3px 4px var(--shadow)); }
.ent.cl-foe.guard > span { font-size: calc(var(--t) * 1.1); }
.hud-cellar { display: none; font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
body.in-cellar .hud-ambient-sub { display: none; }
body.in-cellar .hud-cellar { display: block; }
.cl-menu { margin: 0 0 10px; text-align: center; line-height: 1.7; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .ent.cl-foe > span, .ent.cl-obj > span { animation: none; } }

/* ---- build 304: neighbour screen in the light theme ---- */
:root[data-theme="light"] #talkCard .tk-plate { color: var(--tk-name); text-shadow: 0 1px 2px var(--tk-name-shadow), 0 2px 12px var(--tk-name-shadow); }
:root[data-theme="light"] #talkCard > .talk-close { background: color-mix(in srgb, var(--bg-top) 92%, transparent); color: var(--ink); border-color: var(--stone-edge); font-weight: 700; }
:root[data-theme="light"] #talkCard > .talk-close:active { background: var(--hl); }
/* the little smiley by the portrait said nothing the hearts do not already say */
#talkCard .talk-portrait[data-mood]::after { display: none; }

/* ---- build 305: the bakery, full screen (js/bakery-screen.js) ---- */
.bakery-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--bk-ink); background: linear-gradient(180deg, var(--bk-wall) 0%, var(--bk-wall2) 46%, var(--bk-tile) 100%); }
.bakery-screen.hidden { display: none; }
body.in-bakery .overlay, body.in-bakery .toast { z-index: 70; }
.bk-steam { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bk-steam i { position: absolute; bottom: 30%; width: 26px; height: 26px; border-radius: 50%; background: var(--bk-flour); opacity: 0; animation: bk-rise 7s ease-in infinite; }
.bk-steam i:nth-child(1) { left: 12%; animation-delay: 0s; } .bk-steam i:nth-child(2) { left: 26%; animation-delay: 2s; } .bk-steam i:nth-child(3) { left: 40%; animation-delay: 4s; } .bk-steam i:nth-child(4) { left: 54%; animation-delay: 1s; }
.bk-steam i:nth-child(5) { left: 66%; animation-delay: 5s; } .bk-steam i:nth-child(6) { left: 78%; animation-delay: 3s; } .bk-steam i:nth-child(7) { left: 88%; animation-delay: 6s; } .bk-steam i:nth-child(8) { left: 33%; animation-delay: 6.5s; }
@keyframes bk-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .28; } 100% { transform: translateY(-340px) scale(2.2); opacity: 0; } }
.bk-bar { position: relative; display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.bk-title { flex: 1; font: 700 1.25rem var(--f-display); text-align: center; }
.bk-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bk-card); color: var(--bk-ink); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px var(--bk-shadow); }
.bk-basket-chip { min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--bk-card); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--bk-shadow); white-space: nowrap; }
.bk-maple { position: relative; display: flex; align-items: center; gap: 10px; }
.bk-chef { flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-size: 2.2rem; border-radius: 50%; background: var(--bk-card); box-shadow: 0 2px 8px var(--bk-shadow); }
.bk-say { position: relative; flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--bk-card); font: 500 .9rem/1.35 var(--f-ui); box-shadow: 0 2px 8px var(--bk-shadow); min-height: 2.6em; }
.bk-say::before { content: ''; position: absolute; left: -6px; top: 20px; width: 12px; height: 12px; background: var(--bk-card); transform: rotate(45deg); }
.bk-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-oven { position: relative; flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; --bk-rise: .35; }
.bk-arch { position: relative; width: min(82%, 300px); flex: 1; min-height: 0; border-radius: 120px 120px 14px 14px; background: linear-gradient(180deg, var(--bk-oven), var(--bk-oven2)); border: 5px solid var(--bk-edge); box-shadow: 0 6px 14px var(--bk-shadow), inset 0 0 0 4px var(--bk-oven2); overflow: hidden; }
.bk-window { position: absolute; inset: 14% 12% 12% 12%; border-radius: 90px 90px 10px 10px; background: var(--bk-edge); overflow: hidden; display: grid; place-items: center; }
.bk-glow { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 70%, var(--bk-fire2), var(--bk-fire) 55%, transparent 100%); opacity: .25; transition: opacity .6s; }
.bk-oven[data-phase="baking"] .bk-glow, .bk-oven[data-phase="ready"] .bk-glow { opacity: .95; animation: bk-flicker 1.6s ease-in-out infinite; }
@keyframes bk-flicker { 50% { opacity: .72; } }
.bk-inloaf { position: relative; z-index: 1; width: 46%; aspect-ratio: 1.5; border-radius: 50% 50% 38% 38%; background: linear-gradient(180deg, var(--bk-crust), var(--bk-crust2)); transform: scale(var(--bk-rise)); opacity: 0; transition: transform 1s linear, opacity .4s; }
.bk-oven[data-phase="baking"] .bk-inloaf, .bk-oven[data-phase="ready"] .bk-inloaf { opacity: 1; }
.bk-door { position: absolute; inset: 14% 12% 12% 12%; border-radius: 90px 90px 10px 10px; background: linear-gradient(180deg, var(--bk-oven), var(--bk-oven2)); border: 4px solid var(--bk-edge); opacity: 0; transform-origin: bottom center; transform: perspective(500px) rotateX(0); transition: transform .5s ease, opacity .3s; pointer-events: none; }
.bk-oven[data-phase="ready"] .bk-door { opacity: 1; transform: perspective(500px) rotateX(-78deg); }
.bk-clock { padding: 5px 14px; border-radius: 999px; background: var(--bk-card); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--bk-shadow); }
.bk-counter { flex: 1 1 0; min-height: 0; display: flex; }
.bk-board { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 20px; background: linear-gradient(180deg, var(--bk-counter), var(--bk-counter2)); border: 3px solid var(--bk-edge); box-shadow: inset 0 3px 0 var(--bk-card2), 0 4px 10px var(--bk-shadow); touch-action: none; }
.bk-dough, .bk-loaf { position: relative; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline-offset: 6px; }
.bk-dough { --k: 0; --sq: 0; width: 150px; height: 140px; border-radius: 52% 48% 55% 45% / 58% 50% 50% 42%; background: radial-gradient(circle at 38% 30%, var(--bk-dough), var(--bk-dough2)); box-shadow: 0 8px 14px var(--bk-shadow), inset -8px -10px 18px var(--bk-dough2); transform: scale(calc(1 + var(--sq) * .09), calc(1 - var(--sq) * .08)) rotate(calc(var(--sq) * 3deg)); transition: transform .08s linear, border-radius .3s; }
.bk-dough[style*="--k"] { border-radius: calc(52% - var(--k) * 2%) / calc(58% - var(--k) * 8%); }
.bk-dough-shine, .bk-loaf-shine { position: absolute; left: 18%; top: 14%; width: 34%; height: 22%; border-radius: 50%; background: var(--bk-flour); opacity: .5; transform: rotate(-24deg); }
.bk-puff { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--bk-flour); opacity: .9; pointer-events: none; animation: bk-puff .7s ease-out forwards; }
@keyframes bk-puff { to { transform: translate(var(--px, 8px), -26px) scale(2); opacity: 0; } }
.bk-meter { width: 62%; height: 12px; border-radius: 8px; background: var(--bk-edge); overflow: hidden; }
.bk-meter i { display: block; height: 100%; border-radius: inherit; background: var(--bk-fire2); transition: width .1s linear; }
.bk-loaf { width: 190px; height: 112px; border-radius: 50% 50% 42% 42% / 64% 64% 36% 36%; background: radial-gradient(circle at 40% 28%, var(--bk-dough), var(--bk-dough2)); box-shadow: 0 8px 14px var(--bk-shadow), inset -8px -10px 16px var(--bk-dough2); transition: transform .5s ease, opacity .5s; }
.bk-loaf.baked { background: radial-gradient(circle at 40% 28%, var(--bk-crust), var(--bk-crust2)); box-shadow: 0 8px 14px var(--bk-shadow), inset -8px -10px 16px var(--bk-crust2); animation: bk-pop .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bk-pop { from { transform: translateY(26px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-loaf.drag { cursor: grab; animation: bk-nudge 1.8s ease-in-out infinite; }
.bk-loaf.baked.drag { animation: bk-pop .6s cubic-bezier(.3, 1.5, .5, 1), bk-nudge 1.8s ease-in-out .6s infinite; }
@keyframes bk-nudge { 50% { translate: 0 -6px; } }
.bk-loaf.going { transition: transform .5s ease-in, opacity .5s; transform: translateY(-190px) scale(.3) !important; opacity: 0; animation: none; }
.bk-peel .bk-loaf.going, .bk-board:has(.bk-basket) .bk-loaf.going { transform: translate(110px, 70px) scale(.25) !important; }
.bk-guide { position: absolute; inset: 0; pointer-events: none; }
.bk-guide b { position: absolute; top: 18%; bottom: 18%; width: 0; border-left: 3px dashed var(--bk-flour); opacity: .65; }
.bk-guide b:nth-child(1) { left: 30%; transform: rotate(24deg); } .bk-guide b:nth-child(2) { left: 50%; transform: rotate(24deg); } .bk-guide b:nth-child(3) { left: 70%; transform: rotate(24deg); }
.bk-cuts { position: absolute; inset: 0; pointer-events: none; }
.bk-cuts i { position: absolute; height: 5px; border-radius: 4px; background: var(--bk-crust2); box-shadow: 0 0 0 2px var(--bk-dough2); }
.bk-loaf.baked .bk-cuts i { background: var(--bk-edge); box-shadow: 0 0 0 2px var(--bk-crust); }
.bk-pips { display: flex; gap: 8px; }
.bk-pips span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bk-card2); }
.bk-pips span.on { background: var(--bk-fire2); border-color: var(--bk-fire2); }
.bk-wait { gap: 8px; padding: 0 20px; text-align: center; }
.bk-bigclock b { display: block; font: 800 3rem/1 var(--f-ui); color: var(--bk-card); text-shadow: 0 2px 0 var(--bk-edge); }
.bk-bigclock small { color: var(--bk-card2); font: 600 .8rem var(--f-ui); }
.bk-waitnote { margin: 0; color: var(--bk-card); font: 500 .85rem/1.35 var(--f-ui); }
.bk-peel { display: grid; place-items: center; width: 230px; height: 150px; border-radius: 16px; background: var(--bk-counter2); box-shadow: inset 0 0 0 3px var(--bk-edge); }
.bk-basket { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: center; font-size: 2.2rem; line-height: 1; }
.bk-basket b { font: 800 .75rem var(--f-ui); color: var(--bk-card); }
.bk-basket.catch { animation: bk-bounce .5s ease; }
@keyframes bk-bounce { 40% { transform: scale(1.25); } }
.bk-hint { margin: 0; text-align: center; font: 600 .82rem var(--f-ui); color: var(--bk-ink); min-height: 1.2em; }
.bk-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-spot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 0; border-radius: 16px; background: var(--bk-card); color: var(--bk-ink); box-shadow: 0 3px 8px var(--bk-shadow); }
.bk-spot:active { transform: translateY(1px); }
.bk-spot-ico { font-size: 1.7rem; line-height: 1.1; }
.bk-spot b { font: 800 .85rem var(--f-ui); }
.bk-spot small { color: var(--bk-soft); font: 500 .68rem/1.2 var(--f-ui); text-align: center; }
.bk-spot.used { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .bk-steam, .bk-glow, .bk-loaf, .bk-basket.catch { animation: none !important; } }
.bk-loaf.dragging { transition: none; animation: none; cursor: grabbing; z-index: 3; }

/* ---- build 306: the spice stall, full screen (js/spice-screen.js) ---- */
.spice-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--sp-card); background: radial-gradient(120% 60% at 50% 0%, var(--sp-wall2) 0%, var(--sp-wall) 70%); }
.spice-screen.hidden { display: none; }
body.in-spice .overlay, body.in-spice .toast { z-index: 70; }
.sp-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-motes i { position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%; background: var(--sp-glow); opacity: 0; animation: sp-mote 10s linear infinite; }
.sp-motes i:nth-child(1) { left: 10%; animation-delay: 0s; } .sp-motes i:nth-child(2) { left: 24%; animation-delay: 3s; } .sp-motes i:nth-child(3) { left: 38%; animation-delay: 6s; } .sp-motes i:nth-child(4) { left: 52%; animation-delay: 1.5s; }
.sp-motes i:nth-child(5) { left: 66%; animation-delay: 4.5s; } .sp-motes i:nth-child(6) { left: 80%; animation-delay: 7.5s; } .sp-motes i:nth-child(7) { left: 90%; animation-delay: 2.2s; } .sp-motes i:nth-child(8) { left: 46%; animation-delay: 8.2s; }
@keyframes sp-mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(-80vh) translateX(20px); opacity: 0; } }
.sp-bar { position: relative; display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.sp-title { flex: 1; text-align: center; font: 700 1.2rem var(--f-display); color: var(--sp-gold); }
.sp-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sp-card); color: var(--sp-ink); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px var(--sp-shadow); }
.sp-chip { min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--sp-card); color: var(--sp-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--sp-shadow); white-space: nowrap; }
.sp-awning { position: relative; height: 26px; margin: 0 -14px; background: repeating-linear-gradient(90deg, var(--sp-awn1) 0 28px, var(--sp-awn2) 28px 56px); border-radius: 0 0 22px 22px / 0 0 14px 14px; box-shadow: 0 5px 8px var(--sp-shadow); }
.sp-shelf { position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 62px; padding: 0 6px 6px; border-bottom: 6px solid var(--sp-wood); }
.sp-jar { position: relative; width: 38px; height: 50px; padding: 0; border: 0; background: none; transform-origin: bottom center; }
.sp-jar .sp-body { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; border-radius: 8px 8px 12px 12px; background: linear-gradient(180deg, var(--sp-glass) 0 22%, var(--sp-spice) 22% 100%); box-shadow: inset 0 0 0 2px var(--sp-edge); opacity: .96; }
.sp-jar .sp-lid { position: absolute; left: 6px; right: 6px; top: 4px; height: 10px; border-radius: 4px; background: var(--sp-wood); box-shadow: 0 0 0 2px var(--sp-edge); z-index: 1; }
.sp-jar.open { animation: sp-jiggle .5s ease; }
@keyframes sp-jiggle { 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
.sp-puff { position: fixed; z-index: 5; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sp-spice); opacity: .9; pointer-events: none; animation: sp-puff .9s ease-out forwards; }
@keyframes sp-puff { to { transform: translate(var(--dx, 0), 60px) scale(2.2); opacity: 0; } }
.sp-maker { position: relative; display: flex; align-items: center; gap: 10px; }
.sp-seller { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--sp-card); box-shadow: 0 2px 8px var(--sp-shadow); }
.sp-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--sp-card); color: var(--sp-ink); font: 500 .88rem/1.35 var(--f-ui); min-height: 2.6em; box-shadow: 0 2px 8px var(--sp-shadow); }
.sp-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-counter { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 20px; background: linear-gradient(180deg, var(--sp-wood), var(--sp-wood2)); border: 3px solid var(--sp-edge); box-shadow: inset 0 3px 0 var(--sp-card2), 0 4px 10px var(--sp-shadow); }
.sp-tag { position: absolute; top: 10px; left: 12px; padding: 4px 10px; border-radius: 6px; background: var(--sp-gold); color: var(--sp-ink); font: 800 .7rem var(--f-ui); transform: rotate(-4deg); }
.sp-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px 12px; width: 62%; border-radius: 16px; background: var(--sp-card); color: var(--sp-ink); text-align: center; box-shadow: 0 4px 12px var(--sp-shadow); transition: transform .5s ease, opacity .5s; }
.sp-item.wrapped { transform: scale(.6) translateY(-40px) rotate(-8deg); opacity: 0; }
.sp-item small { color: var(--sp-soft); font: 500 .72rem/1.25 var(--f-ui); }
.sp-name { font: 800 .95rem var(--f-ui); }
.sp-pack { font-size: 3.4rem; line-height: 1.1; }
.sp-card { width: 110px; height: 110px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--sp-card2); }
.sp-card img { width: 100%; height: 100%; object-fit: cover; }
.sp-price { padding: 3px 12px; border-radius: 999px; background: var(--sp-gold); font: 800 .9rem var(--f-ui); }
.sp-purse { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: center; width: 64px; padding: 6px 4px; border-radius: 16px; background: var(--sp-card2); color: var(--sp-ink); font: 800 .78rem var(--f-ui); box-shadow: 0 3px 8px var(--sp-shadow); touch-action: none; cursor: grab; animation: sp-bob 2s ease-in-out infinite; }
.sp-purse-bag { font-size: 2rem; line-height: 1.1; }
.sp-purse.light { opacity: .65; }
.sp-purse.shake { animation: sp-shake .45s ease; }
.sp-purse.dragging { animation: none; cursor: grabbing; z-index: 4; transition: none; }
@keyframes sp-bob { 50% { translate: 0 -5px; } }
@keyframes sp-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.sp-buy, .sp-play { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--sp-gold); color: var(--sp-ink); font: 800 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--sp-shadow); }
.sp-play { flex-wrap: wrap; row-gap: 0; }
.sp-play span { font-size: 1.5rem; }
.sp-play small { flex-basis: 100%; text-align: center; color: var(--sp-soft); font: 500 .72rem var(--f-ui); margin-top: -2px; }
.sp-play.ghost { background: var(--sp-card); }
.sp-hint { margin: 0; text-align: center; font: 600 .8rem var(--f-ui); color: var(--sp-card2); min-height: 1.2em; }
.sp-foot { display: flex; gap: 8px; }
.sp-sold { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; font-size: 3rem; text-align: center; }
.sp-sold b { font: 800 1.05rem var(--f-ui); color: var(--sp-card); } .sp-sold small { color: var(--sp-card2); font: 500 .8rem var(--f-ui); }
.sp-table { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, var(--sp-wood), var(--sp-wood2)); border: 3px solid var(--sp-edge); box-shadow: inset 0 3px 0 var(--sp-card2), 0 4px 10px var(--sp-shadow); }
.sp-pot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 150px; padding: 8px 14px; border-radius: 16px; background: var(--sp-card); color: var(--sp-ink); box-shadow: 0 3px 8px var(--sp-shadow); cursor: pointer; }
.sp-pot[aria-disabled="true"] { opacity: .75; cursor: default; }
.sp-pot b { font: 800 1.2rem var(--f-ui); } .sp-pot small { color: var(--sp-soft); font: 600 .7rem var(--f-ui); }
.sp-coins { position: absolute; left: 6px; right: 6px; top: -10px; height: 10px; display: flex; justify-content: center; gap: 2px; }
.sp-coins i { width: 12px; height: 12px; margin-top: -2px; border-radius: 50%; background: var(--sp-gold); box-shadow: 0 0 0 2px var(--sp-edge); }
.sp-jarwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-arrow { min-width: 140px; min-height: 44px; border: 0; border-radius: 14px; background: var(--sp-card2); color: var(--sp-ink); font: 800 .9rem var(--f-ui); box-shadow: 0 2px 6px var(--sp-shadow); }
.sp-arrow:disabled { opacity: .5; }
.sp-bigjar { position: relative; display: grid; place-items: center; width: 130px; height: 150px; border-radius: 22px 22px 30px 30px; background: linear-gradient(180deg, var(--sp-glass) 0 18%, var(--sp-card) 18% 100%); box-shadow: inset 0 0 0 4px var(--sp-edge), 0 6px 14px var(--sp-shadow); touch-action: none; cursor: grab; transition: transform .25s ease; animation: sp-flipin .35s ease; }
.sp-bigjar.dragging { transition: none; animation: none; cursor: grabbing; }
.sp-bigjar.ok { box-shadow: inset 0 0 0 4px var(--sp-good), 0 6px 14px var(--sp-shadow); } .sp-bigjar.no { box-shadow: inset 0 0 0 4px var(--sp-bad), 0 6px 14px var(--sp-shadow); }
.sp-bigjar b { font: 800 3.4rem var(--f-ui); color: var(--sp-ink); margin-top: 14px; }
.sp-biglid { position: absolute; left: 16px; right: 16px; top: -8px; height: 16px; border-radius: 6px; background: var(--sp-wood); box-shadow: 0 0 0 3px var(--sp-edge); }
@keyframes sp-flipin { from { transform: rotateY(90deg) scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
.sp-hist { display: flex; gap: 6px; min-height: 28px; }
.sp-hist span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--sp-card2); color: var(--sp-ink); font: 800 .8rem var(--f-ui); opacity: .85; }
.sp-table.bust { animation: sp-shake .45s ease; }
@media (prefers-reduced-motion: reduce) { .sp-motes, .sp-purse, .sp-bigjar, .sp-jar.open, .sp-table.bust { animation: none !important; } }

/* ---- build 307: the thread stall, full screen (js/thread-screen.js) ---- */
.thread-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--th-card); background: radial-gradient(120% 60% at 50% 0%, var(--th-wall2) 0%, var(--th-wall) 70%); }
.thread-screen.hidden { display: none; }
body.in-thread .overlay, body.in-thread .toast { z-index: 70; }
.th-bar { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.th-title { flex: 1; text-align: center; font: 700 1.2rem var(--f-display); color: var(--th-gold); }
.th-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--th-card); color: var(--th-ink); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px var(--th-shadow); }
.th-chip { min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--th-card); color: var(--th-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--th-shadow); white-space: nowrap; }
.th-line { position: relative; display: flex; justify-content: space-around; align-items: flex-start; height: 74px; border-top: 3px solid var(--th-wood); }
.th-rib { position: relative; width: 26px; height: 64px; padding: 0; border: 0; background: none; transform-origin: top center; }
.th-rib i { position: absolute; left: 4px; right: 4px; top: 0; bottom: 0; background: var(--th-r); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.th-rib::before { content: ''; position: absolute; left: 9px; top: -6px; width: 8px; height: 10px; border-radius: 3px; background: var(--th-wood2); }
.th-rib.flutter { animation: th-flutter .8s ease; }
@keyframes th-flutter { 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } }
.th-maker { display: flex; align-items: center; gap: 10px; }
.th-seller { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--th-card); box-shadow: 0 2px 8px var(--th-shadow); }
.th-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--th-card); color: var(--th-ink); font: 500 .88rem/1.35 var(--f-ui); min-height: 2.6em; box-shadow: 0 2px 8px var(--th-shadow); }
.th-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.th-room, .th-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 10px; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, var(--th-wood), var(--th-wood2)); border: 3px solid var(--th-edge); box-shadow: inset 0 3px 0 var(--th-cloth2), 0 4px 10px var(--th-shadow); }
.th-room { flex-direction: row; flex-wrap: wrap; align-content: center; }
.th-dummy { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44%; padding: 12px 8px; border: 0; border-radius: 18px; background: var(--th-card); color: var(--th-ink); box-shadow: 0 4px 10px var(--th-shadow); }
.th-dummy-body { font-size: 3.6rem; line-height: 1.1; }
.th-dummy b { font: 800 .9rem var(--f-ui); } .th-dummy small { color: var(--th-soft); font: 500 .7rem/1.2 var(--f-ui); text-align: center; }
.th-dummy:active { transform: translateY(1px); }
.th-basket { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46%; padding: 8px; border-radius: 18px; background: var(--th-cloth); color: var(--th-ink); touch-action: none; cursor: pointer; box-shadow: 0 4px 10px var(--th-shadow); }
.th-basket b { font: 800 .85rem var(--f-ui); text-align: center; }
.th-rim { font-size: 2.2rem; line-height: 1; }
.th-basket.done { opacity: .75; }
.th-scraps { position: relative; width: 100%; height: 64px; }
.th-scrap { position: absolute; width: 56px; height: 40px; border-radius: 8px; background: var(--th-lit); box-shadow: 0 0 0 2px var(--th-edge); transition: transform .35s ease, opacity .35s; }
.th-scrap.s0 { left: 2%; top: 14%; background: var(--th-c1); transform: rotate(-12deg); } .th-scrap.s1 { left: 28%; top: 6%; background: var(--th-c2); transform: rotate(8deg); } .th-scrap.s2 { left: 52%; top: 16%; background: var(--th-c3); transform: rotate(-5deg); }
.th-scrap.s3 { left: 14%; top: 30%; background: var(--th-c4); transform: rotate(14deg); } .th-scrap.s4 { left: 40%; top: 34%; background: var(--th-c5); transform: rotate(-9deg); } .th-scrap.s5 { left: 62%; top: 32%; background: var(--th-c6); transform: rotate(6deg); }
.th-scrap.moved { transform: translate(70px, -30px) rotate(60deg) scale(.7); opacity: 0; }
.th-board { gap: 14px; }
.th-round { margin: 0; font: 800 .85rem var(--th-ui, var(--f-ui)); color: var(--th-card); }
.th-quilt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 300px); aspect-ratio: 1; touch-action: none; }
.th-patch { border: 0; border-radius: 12px; background: var(--th-cloth); box-shadow: inset 0 0 0 3px var(--th-cloth2); touch-action: none; transition: background .15s, transform .15s; }
.th-patch.on { background: var(--th-lit); box-shadow: inset 0 0 0 3px var(--th-edge); transform: scale(.94); }
.th-patch.wrong { background: var(--th-bad); } .th-patch.miss { background: var(--th-gold); }
.th-patch:disabled { opacity: 1; }
.th-hint { margin: 0; text-align: center; font: 600 .8rem var(--f-ui); color: var(--th-cloth2); min-height: 1.2em; }
.th-foot { display: flex; gap: 8px; }
.th-play { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--th-gold); color: var(--th-ink); font: 800 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--th-shadow); }
.th-play span { font-size: 1.5rem; } .th-play small { flex-basis: 100%; text-align: center; color: var(--th-soft); font: 500 .72rem var(--f-ui); margin-top: -2px; }
.th-play.ghost { background: var(--th-card); }
@media (prefers-reduced-motion: reduce) { .th-rib.flutter, .th-scrap, .th-patch { animation: none !important; transition: none !important; } }

/* ---- build 308: the tinker stall, full screen (js/tinker-screen.js) ---- */
.tinker-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--tn-card); background: radial-gradient(120% 60% at 50% 0%, var(--tn-wall2) 0%, var(--tn-wall) 70%); }
.tinker-screen.hidden { display: none; }
body.in-tinker .overlay, body.in-tinker .toast { z-index: 70; }
.tn-bar { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.tn-title { flex: 1; text-align: center; font: 700 1.2rem var(--f-display); color: var(--tn-brass); }
.tn-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tn-card); color: var(--tn-ink); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px var(--tn-shadow); }
.tn-chip { min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--tn-card); color: var(--tn-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--tn-shadow); white-space: nowrap; }
.tn-maker { display: flex; align-items: center; gap: 10px; }
.tn-seller { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--tn-card); box-shadow: 0 2px 8px var(--tn-shadow); }
.tn-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--tn-card); color: var(--tn-ink); font: 500 .88rem/1.35 var(--f-ui); min-height: 2.6em; box-shadow: 0 2px 8px var(--tn-shadow); }
.tn-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.tn-shelf { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, var(--tn-wood), var(--tn-wood2)); border: 3px solid var(--tn-edge); box-shadow: inset 0 3px 0 var(--tn-card2), 0 4px 10px var(--tn-shadow); }
.tn-tackle { display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-radius: 12px; background: var(--tn-card2); color: var(--tn-ink); font: 800 .8rem var(--f-ui); align-self: flex-start; }
.tn-tackle span { font-size: 1.4rem; }
.tn-crates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tn-crate { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 6px; border: 0; border-radius: 14px; background: var(--tn-card); color: var(--tn-ink); box-shadow: 0 3px 8px var(--tn-shadow); }
.tn-crate-ico { font-size: 1.9rem; line-height: 1.1; }
.tn-crate b { font: 800 .72rem var(--f-ui); text-align: center; } .tn-crate small { color: var(--tn-soft); font: 600 .68rem var(--f-ui); }
.tn-price { margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: var(--tn-brass); font: 800 .75rem var(--f-ui); }
.tn-crate.hop { animation: tn-hop .5s ease; } .tn-crate.shake { animation: tn-shake .4s ease; }
@keyframes tn-hop { 35% { transform: translateY(-14px) scale(1.06); } }
@keyframes tn-shake { 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.tn-bench { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, var(--tn-steel), var(--tn-steel2)); border: 3px solid var(--tn-edge); box-shadow: inset 0 3px 0 var(--tn-card2), 0 4px 10px var(--tn-shadow); }
.tn-bench.done { align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 20px; }
.tn-bench.done b { font: 800 1.05rem var(--f-ui); } .tn-bench.done small { color: var(--tn-card2); font: 500 .8rem var(--f-ui); }
.tn-pile { position: relative; flex: 1; min-height: 70px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; }
.tn-part { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tn-card); font-size: 1.6rem; box-shadow: 0 3px 6px var(--tn-shadow); touch-action: none; cursor: grab; transition: transform .2s ease, opacity .25s; }
.tn-part:nth-child(odd) { rotate: 8deg; } .tn-part:nth-child(even) { rotate: -7deg; }
.tn-part.sel { box-shadow: 0 0 0 4px var(--tn-brass), 0 3px 6px var(--tn-shadow); transform: translateY(-4px); }
.tn-part.dragging { transition: none; cursor: grabbing; z-index: 4; }
.tn-part.gone { opacity: 0; transform: scale(.2); pointer-events: none; }
.tn-part.bounce { animation: tn-shake .4s ease; }
.tn-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tn-bin { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 4px; border: 0; border-radius: 12px 12px 18px 18px; background: var(--tn-wood); color: var(--tn-card); box-shadow: inset 0 -6px 0 var(--tn-wood2), 0 3px 6px var(--tn-shadow); }
.tn-bin span { font-size: 1.5rem; } .tn-bin b { font: 800 .75rem var(--f-ui); }
.tn-bin.catch { animation: tn-hop .4s ease; }
.tn-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, var(--tn-steel), var(--tn-steel2)); border: 3px solid var(--tn-edge); box-shadow: inset 0 3px 0 var(--tn-card2), 0 4px 10px var(--tn-shadow); }
.tn-moves { margin: 0; font: 800 .85rem var(--f-ui); color: var(--tn-card); }
.tn-gears { position: relative; width: min(100%, 300px); aspect-ratio: 1; touch-action: none; }
.tn-gear { position: absolute; left: 0; top: 0; width: calc((100% - 16px) / 3); height: calc((100% - 16px) / 3); display: grid; place-items: center; padding: 0; border: 0; border-radius: 16px; background: var(--tn-card); color: var(--tn-ink); box-shadow: 0 3px 8px var(--tn-shadow); transform: translate(calc(var(--c) * (100% + 8px)), calc(var(--r) * (100% + 8px))); transition: transform .22s ease; touch-action: none; }
.tn-gear .tn-cog { position: absolute; font-size: 3rem; line-height: 1; font-style: normal; opacity: .35; transform: rotate(var(--spin, 0deg)); transition: transform .22s ease; }
.tn-gear b { position: relative; font: 800 1.7rem var(--f-ui); }
.tn-gear.home { background: var(--tn-good); }
.tn-gear.next { box-shadow: 0 0 0 3px var(--tn-brass), 0 3px 8px var(--tn-shadow); }
.tinker-screen.solved .tn-gear { animation: tn-hop .6s ease; }
.tn-hint { margin: 0; text-align: center; font: 600 .8rem var(--f-ui); color: var(--tn-card2); min-height: 1.2em; }
.tn-foot { display: flex; gap: 8px; }
.tn-play { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--tn-brass); color: var(--tn-ink); font: 800 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--tn-shadow); }
.tn-play span { font-size: 1.5rem; } .tn-play small { flex-basis: 100%; text-align: center; color: var(--tn-soft); font: 500 .72rem var(--f-ui); margin-top: -2px; }
.tn-play.ghost { background: var(--tn-card); }
@media (prefers-reduced-motion: reduce) { .tn-crate, .tn-bin, .tn-part, .tn-gear, .tn-cog, .tinker-screen.solved .tn-gear { animation: none !important; transition: none !important; } }

/* ---- build 309: the grain stall, full screen (js/grain-screen.js) ---- */
.grain-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--gr-card); background: linear-gradient(180deg, var(--gr-wall) 0%, var(--gr-wall2) 100%); }
.grain-screen.hidden { display: none; }
body.in-grain .overlay, body.in-grain .toast { z-index: 70; }
.gr-bar { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.gr-title { flex: 1; text-align: center; font: 700 1.2rem var(--f-display); color: var(--gr-gold); }
.gr-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--gr-card); color: var(--gr-ink); font-size: 1rem; font-weight: 800; box-shadow: 0 2px 6px var(--gr-shadow); }
.gr-chip { min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--gr-card); color: var(--gr-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--gr-shadow); white-space: nowrap; }
.gr-maker { display: flex; align-items: center; gap: 10px; }
.gr-seller { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--gr-card); box-shadow: 0 2px 8px var(--gr-shadow); }
.gr-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--gr-card); color: var(--gr-ink); font: 500 .88rem/1.35 var(--f-ui); min-height: 2.6em; box-shadow: 0 2px 8px var(--gr-shadow); }
.gr-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.gr-counter { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, var(--gr-wood), var(--gr-wood2)); border: 3px solid var(--gr-edge); box-shadow: inset 0 3px 0 var(--gr-card2), 0 4px 10px var(--gr-shadow); }
.gr-sack { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; width: 70%; min-height: 130px; padding: 10px; border-radius: 30px 30px 18px 18px; background: linear-gradient(180deg, var(--gr-sack), var(--gr-sack2)); color: var(--gr-ink); box-shadow: 0 5px 12px var(--gr-shadow), inset 0 0 0 3px var(--gr-sack2); }
.gr-grain { font-size: 3rem; line-height: 1; letter-spacing: -.1em; } .gr-sack b { font: 800 .85rem var(--f-ui); }
.gr-counter.empty .gr-sack { opacity: .7; min-height: 90px; }
.gr-scoop { position: relative; width: 70px; height: 70px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--gr-card); font-size: 2.2rem; box-shadow: 0 4px 10px var(--gr-shadow); touch-action: none; cursor: grab; transition: transform .2s ease, box-shadow .2s; }
.gr-scoop span { display: block; transform: rotate(-30deg); }
.gr-load { position: absolute; left: 50%; top: 10px; width: 22px; height: 12px; margin-left: -11px; border-radius: 50%; background: var(--gr-straw); opacity: 0; transition: opacity .2s; }
.gr-scoop.full .gr-load { opacity: 1; } .gr-scoop.held { box-shadow: 0 0 0 4px var(--gr-gold), 0 4px 10px var(--gr-shadow); transform: translateY(-4px); }
.gr-scoop.dragging { transition: none; cursor: grabbing; z-index: 4; }
.gr-hand { display: flex; flex-direction: column; align-items: center; width: 52%; padding: 8px; border-radius: 18px; background: var(--gr-card2); color: var(--gr-ink); font: 800 .8rem var(--f-ui); box-shadow: inset 0 0 0 3px var(--gr-sack2); }
.gr-hand span { font-size: 2.4rem; line-height: 1.1; } .gr-hand.catch { animation: gr-hop .4s ease; }
@keyframes gr-hop { 40% { transform: scale(1.12); } }
.gr-top { display: flex; align-items: center; gap: 10px; }
.gr-score { min-width: 64px; font: 800 1.1rem var(--f-ui); color: var(--gr-card); }
.gr-time { flex: 1; height: 12px; border-radius: 8px; background: var(--gr-edge); overflow: hidden; } .gr-time i { display: block; height: 100%; border-radius: inherit; background: var(--gr-gold); transition: width .1s linear; }
.gr-board { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 20px; background: linear-gradient(180deg, var(--gr-sky), var(--gr-sky2)); border: 3px solid var(--gr-edge); box-shadow: inset 0 3px 0 var(--gr-card), 0 4px 10px var(--gr-shadow); touch-action: none; overflow: hidden; }
.gr-lane { border-radius: 14px; background: var(--gr-card2); opacity: .55; }
.gr-board.good { animation: gr-flash-good .25s ease; } .gr-board.bad { animation: gr-flash-bad .3s ease; }
@keyframes gr-flash-good { 50% { box-shadow: inset 0 0 0 5px var(--gr-good); } } @keyframes gr-flash-bad { 50% { box-shadow: inset 0 0 0 6px var(--gr-bad); } }
.gr-fall, .gr-basket { position: absolute; left: calc(6px + var(--l) * ((100% - 12px) / 3)); width: calc((100% - 24px) / 3); text-align: center; line-height: 1; pointer-events: none; }
.gr-fall { top: calc(6px + var(--y) * ((100% - 12px) / 6.2)); font-size: 2.1rem; transition: top .2s linear, opacity .2s, transform .2s; }
.gr-fall.gone { opacity: 0; transform: scale(.4); }
.gr-basket { bottom: 8px; font-size: 3rem; transition: left .12s ease-out; }
.gr-hint { margin: 0; text-align: center; font: 600 .8rem var(--f-ui); color: var(--gr-card2); min-height: 1.2em; }
.gr-foot { display: flex; gap: 8px; }
.gr-play { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--gr-gold); color: var(--gr-ink); font: 800 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--gr-shadow); }
.gr-play span { font-size: 1.5rem; } .gr-play small { flex-basis: 100%; text-align: center; color: var(--gr-soft); font: 500 .72rem var(--f-ui); margin-top: -2px; }
.gr-play.ghost { background: var(--gr-card); }
@media (prefers-reduced-motion: reduce) { .gr-hand.catch, .gr-board.good, .gr-board.bad, .gr-fall, .gr-basket, .gr-scoop { animation: none !important; transition: none !important; } }

/* ---- build 310: every building screen leaves from a Leave button at the foot (like the other screens), not an X at the top ---- */
.bk-bar, .sp-bar, .th-bar, .tn-bar, .gr-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.bk-title, .sp-title, .th-title, .tn-title, .gr-title { flex: none; padding: 0 8px; }
.bk-basket-chip, .sp-chip, .th-chip, .tn-chip, .gr-chip { justify-self: end; }
.bk-leave, .sp-leave, .th-leave, .tn-leave, .gr-leave { flex: none; width: 100%; min-height: 48px; border: 0; border-radius: 16px; font: 700 .95rem var(--f-ui); }
.bk-leave { background: var(--bk-card); color: var(--bk-ink); box-shadow: 0 3px 8px var(--bk-shadow); }
.sp-leave { background: var(--sp-card); color: var(--sp-ink); box-shadow: 0 3px 8px var(--sp-shadow); }
.th-leave { background: var(--th-card); color: var(--th-ink); box-shadow: 0 3px 8px var(--th-shadow); }
.tn-leave { background: var(--tn-card); color: var(--tn-ink); box-shadow: 0 3px 8px var(--tn-shadow); }
.gr-leave { background: var(--gr-card); color: var(--gr-ink); box-shadow: 0 3px 8px var(--gr-shadow); }

/* ---- build 311: the Hall of Spirits, full screen (js/museum-screen.js) ---- */
.museum-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--mu-card); background: radial-gradient(120% 60% at 50% 0%, var(--mu-wall2) 0%, var(--mu-wall) 70%); }
.museum-screen.hidden { display: none; }
body.in-museum .overlay, body.in-museum .toast { z-index: 70; }
.mu-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 8px; }
.mu-title { padding: 0 8px; text-align: center; font: 700 1.2rem var(--f-display); color: var(--mu-gold); }
.mu-chip { justify-self: end; min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--mu-card); color: var(--mu-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--mu-shadow); white-space: nowrap; }
.mu-maker { display: flex; align-items: center; gap: 10px; }
.mu-curator { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--mu-card); box-shadow: 0 2px 8px var(--mu-shadow); }
.mu-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--mu-card); color: var(--mu-ink); font: 500 .85rem/1.35 var(--f-ui); min-height: 2.6em; max-height: 6.4em; overflow: auto; box-shadow: 0 2px 8px var(--mu-shadow); }
.mu-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.mu-hall { display: flex; flex-direction: column; gap: 8px; }
.mu-door { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 40px 40px 14px 14px; background: linear-gradient(180deg, var(--mu-stone), var(--mu-stone2)); color: var(--mu-card); text-align: left; box-shadow: 0 3px 8px var(--mu-shadow), inset 0 0 0 3px var(--mu-edge); }
.mu-door.done { background: linear-gradient(180deg, var(--mu-gold), var(--mu-gold2)); color: var(--mu-ink); }
.mu-door-ico { font-size: 2rem; line-height: 1; } .mu-door-main { flex: 1; display: flex; flex-direction: column; gap: 6px; } .mu-door-main b { font: 800 .95rem var(--f-ui); }
.mu-bar2 { display: block; height: 8px; border-radius: 6px; background: var(--mu-edge); overflow: hidden; } .mu-bar2 u { display: block; height: 100%; border-radius: inherit; background: var(--mu-gold); }
.mu-door-n { font: 800 .9rem var(--f-ui); }
.mu-badge { position: absolute; right: 10px; top: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--mu-glow); color: var(--mu-ink); font: 800 .75rem/22px var(--f-ui); text-align: center; font-style: normal; box-shadow: 0 0 10px var(--mu-glow); }
.mu-wing { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, var(--mu-stone2), var(--mu-wall)); border: 3px solid var(--mu-edge); box-shadow: inset 0 3px 0 var(--mu-stone), 0 4px 10px var(--mu-shadow); }
.mu-wing.complete { box-shadow: inset 0 0 0 3px var(--mu-gold), 0 0 24px var(--mu-gold), 0 4px 10px var(--mu-shadow); }
.mu-winghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mu-winghead b { font: 800 .95rem var(--f-ui); } .mu-winghead span { font: 800 .85rem var(--f-ui); color: var(--mu-gold); }
.mu-back { padding: 6px 10px; border: 0; border-radius: 12px; background: var(--mu-card); color: var(--mu-ink); font: 800 .8rem var(--f-ui); }
.mu-plinths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mu-plinth { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 8px; border-radius: 12px 12px 6px 6px; background: var(--mu-edge); color: var(--mu-card2); text-align: center; box-shadow: inset 0 -5px 0 var(--mu-stone2); transition: transform .25s ease, box-shadow .25s; }
.mu-plinth b { font: 700 .62rem/1.15 var(--f-ui); } .mu-plinth small { font: 600 .58rem/1.1 var(--f-ui); color: var(--mu-gold); }
.mu-art { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--mu-card2); }
.mu-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-art.ghost { opacity: .35; filter: grayscale(1); } .mu-art.unseen { display: grid; place-items: center; background: var(--mu-wall); color: var(--mu-stone); font: 800 1.6rem var(--f-ui); }
.mu-plinth.filled { background: var(--mu-stone2); color: var(--mu-card); box-shadow: inset 0 -5px 0 var(--mu-gold2), 0 0 12px var(--mu-gold); }
.mu-plinth.open { box-shadow: inset 0 -5px 0 var(--mu-gold2); cursor: pointer; animation: mu-pulse 1.8s ease-in-out infinite; }
.mu-plinth.target { box-shadow: 0 0 0 3px var(--mu-glow), inset 0 -5px 0 var(--mu-gold2); }
.mu-plinth.placed { animation: mu-place .45s ease; } .mu-plinth.shake { animation: mu-shake .4s ease; }
@keyframes mu-pulse { 50% { box-shadow: 0 0 14px var(--mu-gold), inset 0 -5px 0 var(--mu-gold2); } }
@keyframes mu-place { 40% { transform: translateY(-8px) scale(1.08); box-shadow: 0 0 22px var(--mu-glow); } }
@keyframes mu-shake { 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.mu-tray-wrap { flex: none; }
.mu-tray { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 16px; background: var(--mu-edge); box-shadow: 0 3px 8px var(--mu-shadow); }
.mu-tray-h { font: 800 .75rem var(--f-ui); color: var(--mu-gold); }
.mu-cards { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.mu-card { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px; border: 0; border-radius: 12px; background: var(--mu-card); color: var(--mu-ink); touch-action: none; cursor: grab; transition: transform .2s ease; }
.mu-card b { font: 700 .6rem/1.1 var(--f-ui); text-align: center; }
.mu-card.sel { box-shadow: 0 0 0 3px var(--mu-gold); transform: translateY(-4px); } .mu-card.dragging { transition: none; cursor: grabbing; z-index: 6; position: relative; }
.mu-all { align-self: flex-end; padding: 6px 12px; border: 0; border-radius: 12px; background: var(--mu-gold); color: var(--mu-ink); font: 800 .8rem var(--f-ui); }
.mu-hint { margin: 0; text-align: center; font: 600 .78rem var(--f-ui); color: var(--mu-card2); min-height: 1.2em; }
.mu-leave { flex: none; width: 100%; min-height: 48px; border: 0; border-radius: 16px; background: var(--mu-card); color: var(--mu-ink); font: 700 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--mu-shadow); }
@media (prefers-reduced-motion: reduce) { .mu-plinth, .mu-card { animation: none !important; transition: none !important; } }

/* ---- build 312: the Card Shop front, full screen (js/shop-screen.js) ---- */
.shop-screen { position: fixed; inset: 0; z-index: 58; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--cs-card); background: radial-gradient(120% 60% at 50% 0%, var(--cs-wall2) 0%, var(--cs-wall) 70%); }
.shop-screen.hidden { display: none; }
body.in-shopfront .overlay, body.in-shopfront .toast { z-index: 70; }
.cs-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 8px; }
.cs-title { padding: 0 8px; text-align: center; font: 700 1.2rem var(--f-display); color: var(--cs-gold); }
.cs-chip { justify-self: end; min-width: 40px; padding: 8px 12px; border-radius: 999px; background: var(--cs-card); color: var(--cs-ink); font: 800 .85rem var(--f-ui); box-shadow: 0 2px 6px var(--cs-shadow); white-space: nowrap; }
.cs-awning { height: 26px; margin: 0 -14px; background: repeating-linear-gradient(90deg, var(--cs-awn1) 0 28px, var(--cs-awn2) 28px 56px); border-radius: 0 0 22px 22px / 0 0 14px 14px; box-shadow: 0 5px 8px var(--cs-shadow); }
.cs-maker { display: flex; align-items: center; gap: 10px; }
.cs-seller { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: var(--cs-card); box-shadow: 0 2px 8px var(--cs-shadow); }
.cs-say { flex: 1; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--cs-card); color: var(--cs-ink); font: 500 .85rem/1.35 var(--f-ui); min-height: 2.6em; box-shadow: 0 2px 8px var(--cs-shadow); }
.cs-stage { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.cs-case { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 10px 8px; border: 0; border-radius: 20px; background: linear-gradient(180deg, var(--cs-card), var(--cs-card2)); color: var(--cs-ink); box-shadow: 0 4px 10px var(--cs-shadow), inset 0 0 0 3px var(--cs-gold); }
.cs-case b { font: 800 .95rem var(--f-ui); } .cs-case small { color: var(--cs-soft); font: 600 .72rem var(--f-ui); text-align: center; }
.cs-case:active { transform: translateY(1px); } .cs-case.bump { animation: cs-bump .3s ease; }
@keyframes cs-bump { 45% { transform: scale(.94); } }
.cs-glass { flex: 1; width: 100%; display: grid; place-items: center; margin-bottom: 6px; border-radius: 14px; background: linear-gradient(160deg, var(--cs-glass), var(--cs-glass2)); box-shadow: inset 0 0 0 2px var(--cs-edge); }
.cs-packs { display: flex; gap: 2px; font-size: 1.8rem; } .cs-packs i { font-style: normal; animation: cs-float 3s ease-in-out infinite; } .cs-packs i:nth-child(2) { animation-delay: .5s; } .cs-packs i:nth-child(3) { animation-delay: 1s; }
@keyframes cs-float { 50% { transform: translateY(-6px); } }
.cs-sleeve .sleeve-chip { width: 56px; height: 78px; display: block; border-radius: 8px; }
.cs-mirror { font-size: 3.2rem; line-height: 1; }
.cs-hint { margin: 0; text-align: center; font: 600 .78rem var(--f-ui); color: var(--cs-card2); }
.cs-leave { flex: none; width: 100%; min-height: 48px; border: 0; border-radius: 16px; background: var(--cs-card); color: var(--cs-ink); font: 700 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--cs-shadow); }
@media (prefers-reduced-motion: reduce) { .cs-packs i, .cs-case.bump { animation: none !important; } }

/* ---- build 313: tearing a pack open (js/pack-tear.js) ---- */
.pack-tear { position: fixed; inset: 0; z-index: 21; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: env(safe-area-inset-top, 0px) 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(120% 70% at 50% 30%, var(--pt-bg2), var(--pt-bg)); color: var(--pt-card); opacity: 0; transition: opacity .25s; --tear: 0; touch-action: none; }
.pack-tear.in { opacity: 1; }
.ptr-title { font: 700 1.3rem var(--f-display); color: var(--pt-foil); }
.ptr-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ptr-sparks i { position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%; background: var(--pt-spark); opacity: 0; animation: pt-rise 8s linear infinite; }
.ptr-sparks i:nth-child(1) { left: 8%; } .ptr-sparks i:nth-child(2) { left: 20%; animation-delay: 2s; } .ptr-sparks i:nth-child(3) { left: 33%; animation-delay: 4s; } .ptr-sparks i:nth-child(4) { left: 45%; animation-delay: 1s; } .ptr-sparks i:nth-child(5) { left: 58%; animation-delay: 5s; }
.ptr-sparks i:nth-child(6) { left: 70%; animation-delay: 3s; } .ptr-sparks i:nth-child(7) { left: 82%; animation-delay: 6s; } .ptr-sparks i:nth-child(8) { left: 92%; animation-delay: 2.5s; } .ptr-sparks i:nth-child(9) { left: 26%; animation-delay: 7s; } .ptr-sparks i:nth-child(10) { left: 64%; animation-delay: 6.5s; }
@keyframes pt-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-90vh); opacity: 0; } }
.ptr-pack { position: relative; width: min(64vw, 250px); aspect-ratio: .62; touch-action: none; cursor: grab; filter: none; animation: pt-bob 3s ease-in-out infinite; }
@keyframes pt-bob { 50% { transform: translateY(-6px) rotate(.6deg); } }
.ptr-body { position: absolute; left: 0; right: 0; top: 12%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 0 0 14px 14px; background: linear-gradient(160deg, var(--pt-foil3), var(--pt-foil) 40%, var(--pt-foil2)); color: var(--pt-ink); box-shadow: 0 10px 24px var(--pt-shadow), inset 0 0 0 3px var(--pt-foil2); }
.ptr-icon { font-size: 4.2rem; line-height: 1; } .ptr-body b { font: 800 1.05rem var(--f-ui); } .ptr-body small { font: 600 .75rem var(--f-ui); opacity: .8; }
.ptr-flap { position: absolute; left: 0; right: 0; top: 0; height: 14%; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--pt-foil2), var(--pt-foil)); box-shadow: inset 0 0 0 3px var(--pt-foil2); transform-origin: 100% 100%; transform: translate(calc(var(--tear) * 30%), calc(var(--tear) * -12%)) rotate(calc(var(--tear) * 18deg)); transition: transform .08s linear; }
.ptr-crimp { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--pt-foil2) 6px 8px); opacity: .6; }
.ptr-line { position: absolute; left: 4%; right: 4%; top: 12%; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--pt-ink) 0 6px, transparent 6px 12px); opacity: .5; }
.ptr-line i { display: block; height: 100%; width: calc(var(--tear) * 100%); background: var(--pt-spark); }
.pack-tear.torn .ptr-pack { animation: pt-burst .5s ease-out forwards; }
.pack-tear.torn .ptr-flap { transform: translate(70%, -90%) rotate(34deg); opacity: 0; transition: transform .5s ease, opacity .5s; }
@keyframes pt-burst { 40% { transform: scale(1.12); filter: brightness(1.5); } 100% { transform: scale(1.3); opacity: 0; filter: brightness(2); } }
.ptr-hint { margin: 0; text-align: center; font: 600 .85rem var(--f-ui); color: var(--pt-card); min-height: 1.3em; }
.ptr-leave { width: min(100%, 360px); min-height: 48px; border: 0; border-radius: 16px; background: var(--pt-card); color: var(--pt-ink); font: 700 .95rem var(--f-ui); }
@media (prefers-reduced-motion: reduce) { .ptr-pack, .ptr-sparks i { animation: none !important; } }

/* ---- build 315: the sleeve wall and the decoration shelf, inside the Card Shop screen (js/shop-screen.js) ---- */
.cs-sub { grid-column: 1 / -1; grid-row: 1 / -1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, var(--cs-card), var(--cs-card2)); color: var(--cs-ink); box-shadow: 0 4px 10px var(--cs-shadow), inset 0 0 0 3px var(--cs-gold); overflow-y: auto; }
.cs-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cs-subhead b { font: 800 .95rem var(--f-ui); } .cs-subhead span { font: 800 .8rem var(--f-ui); color: var(--cs-soft); }
.cs-back { padding: 6px 12px; border: 0; border-radius: 12px; background: var(--cs-wall); color: var(--cs-card); font: 800 .8rem var(--f-ui); }
.cs-carousel { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; perspective: 700px; }
.cs-arrow { flex: none; width: 44px; height: 64px; border: 0; border-radius: 14px; background: var(--cs-wall); color: var(--cs-card); font: 800 1.6rem var(--f-ui); }
.cs-bigcard { --rx: 0deg; --ry: 0deg; position: relative; width: min(50%, 190px); aspect-ratio: .71; touch-action: pan-y; cursor: grab; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out; }
.cs-bigcard-in { position: absolute; inset: 0; display: block; border-radius: 16px; box-shadow: 0 12px 24px var(--cs-shadow); }
.cs-bigcard .sleeve-chip { display: block; width: 100%; height: 100%; margin: 0; border-radius: 16px; vertical-align: top; }
.cs-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; line-height: 1; pointer-events: none; }
.cs-bigcard.worn .cs-bigcard-in { box-shadow: 0 0 0 4px var(--cs-gold), 0 12px 24px var(--cs-shadow); }
.cs-bigcard.in-r { animation: cs-in-r .3s ease; } .cs-bigcard.in-l { animation: cs-in-l .3s ease; } .cs-bigcard.pop { animation: cs-pop .4s ease; }
@keyframes cs-in-r { from { transform: translateX(60px) rotateY(-30deg); opacity: .3; } } @keyframes cs-in-l { from { transform: translateX(-60px) rotateY(30deg); opacity: .3; } } @keyframes cs-pop { 40% { transform: scale(1.1) rotate(2deg); } }
.cs-sleeve-info { display: flex; align-items: center; justify-content: center; gap: 10px; } .cs-sleeve-info b { font: 800 1.1rem var(--f-display); }
.cs-status { padding: 3px 12px; border-radius: 999px; background: var(--cs-glass2); font: 800 .78rem var(--f-ui); } .cs-status.on { background: var(--cs-good); }
.cs-dots { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cs-dot { width: 12px; height: 12px; padding: 0; border: 2px solid var(--cs-soft); border-radius: 50%; background: transparent; } .cs-dot.own { background: var(--cs-glass2); } .cs-dot.worn { background: var(--cs-gold); border-color: var(--cs-gold); } .cs-dot.now { transform: scale(1.5); border-color: var(--cs-ink); }
.cs-main { min-height: 50px; border: 0; border-radius: 16px; background: var(--cs-gold); color: var(--cs-ink); font: 800 .95rem var(--f-ui); box-shadow: 0 3px 8px var(--cs-shadow); } .cs-main:disabled { opacity: .55; }
.cs-tabs { display: flex; gap: 6px; } .cs-tab { flex: 1; min-height: 40px; border: 0; border-radius: 12px; background: var(--cs-glass2); color: var(--cs-ink); font: 800 .85rem var(--f-ui); } .cs-tab.on { background: var(--cs-wall); color: var(--cs-card); }
.cs-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .cs-chip { flex: none; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--cs-glass2); color: var(--cs-ink); font: 700 .75rem var(--f-ui); } .cs-chip.on { background: var(--cs-wall); color: var(--cs-card); }
.cs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.cs-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 0; border-radius: 14px; background: var(--cs-glass); color: var(--cs-ink); box-shadow: inset 0 0 0 2px var(--cs-glass2); }
.cs-tile-ico { font-size: 1.9rem; line-height: 1.1; } .cs-tile b { font: 800 .68rem/1.15 var(--f-ui); text-align: center; } .cs-tile small { color: var(--cs-soft); font: 700 .66rem var(--f-ui); }
.cs-tile.pick { box-shadow: inset 0 0 0 3px var(--cs-gold); background: var(--cs-card); } .cs-tile.locked { opacity: .6; }
.cs-own { position: absolute; right: 4px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cs-wall); color: var(--cs-card); font: 800 .65rem/18px var(--f-ui); text-align: center; font-style: normal; }
.cs-detail { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--cs-wall); color: var(--cs-card); }
.cs-detail-ico { font-size: 2.4rem; animation: cs-float 3s ease-in-out infinite; } .cs-detail-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cs-detail-txt b { font: 800 .9rem var(--f-ui); } .cs-detail-txt small { font: 500 .72rem/1.3 var(--f-ui); color: var(--cs-card2); }
.cs-detail-btns { display: flex; flex-direction: column; gap: 6px; }
.cs-mini { padding: 8px 12px; border: 0; border-radius: 12px; background: var(--cs-card); color: var(--cs-ink); font: 800 .75rem var(--f-ui); white-space: nowrap; } .cs-mini.on { background: var(--cs-gold); } .cs-mini.bad { background: var(--cs-bad); color: var(--cs-card); } .cs-mini:disabled { opacity: .5; }
.cs-rows { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.cs-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--cs-glass); box-shadow: inset 0 0 0 2px var(--cs-glass2); }
.cs-row-ico { font-size: 1.8rem; } .cs-row-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .cs-row-txt b { font: 800 .85rem var(--f-ui); } .cs-row-txt small { color: var(--cs-soft); font: 600 .7rem var(--f-ui); }
.cs-row-act { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cs-empty { margin: auto; padding: 20px; text-align: center; color: var(--cs-soft); font: 600 .85rem/1.4 var(--f-ui); }
@media (prefers-reduced-motion: reduce) { .cs-bigcard, .cs-detail-ico { animation: none !important; transition: none !important; } }

/* ---- build 316: the mirror, a dressing room inside the Card Shop screen (js/shop-screen.js) ---- */
.cs-glassbox { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 24px 24px 14px 14px; background: linear-gradient(180deg, var(--cs-frame), var(--cs-frame2)); box-shadow: 0 4px 10px var(--cs-shadow); }
.cs-room { position: relative; height: 190px; border-radius: 18px 18px 8px 8px; overflow: hidden; background: var(--sky, var(--cs-glass)); display: grid; place-items: end center; box-shadow: inset 0 0 0 3px var(--cs-edge); }
.cs-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--cs-ground); opacity: .85; }
.cs-sky { position: absolute; inset: 0; }
.avatar-preview.cs-me { position: relative; width: 118px; height: 118px; margin: 0 0 18px; font-size: 3.6rem; transition: transform .25s; }
.avatar-preview.cs-me .av-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cs-me.pop { animation: cs-pop .45s ease; }
.cs-matstrip .mat-swatch { height: 34px; border-radius: 8px; cursor: default; }
.cs-cats { display: flex; gap: 6px; }
.cs-cat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; border: 0; border-radius: 12px; background: var(--cs-glass2); color: var(--cs-ink); } .cs-cat span { font-size: 1.2rem; line-height: 1.1; } .cs-cat small { font: 800 .58rem var(--f-ui); }
.cs-cat.on { background: var(--cs-wall); color: var(--cs-card); }
.cs-chs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 58px; gap: 8px; overflow-y: auto; align-content: start; padding: 2px; }
.cs-ch { position: relative; height: 58px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; background: var(--cs-glass); font-size: 1.7rem; overflow: hidden; box-shadow: inset 0 0 0 2px var(--cs-glass2); }
.cs-ch[style*="--sw"] { background: var(--sw); box-shadow: inset 0 0 0 2px var(--cs-edge); }
.cs-ch.on { box-shadow: inset 0 0 0 3px var(--cs-good); } .cs-ch.try { box-shadow: inset 0 0 0 4px var(--cs-gold), 0 0 10px var(--cs-gold); transform: scale(1.06); }
.cs-ch.locked > *:not(.cs-cost) { opacity: .7; }
.cs-ch .av-face { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cs-cost { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: var(--cs-wall); color: var(--cs-card); font: 800 .62rem var(--f-ui); text-align: center; font-style: normal; }
.cs-bd { display: block; width: 70%; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: var(--av-border-w, 4px) var(--av-border-style, solid) var(--av-border-color, var(--cs-ink)); }
.cs-stg { display: block; width: 100%; height: 100%; }
.cs-ch .cs-mat { display: flex; width: 100%; height: 100%; border-radius: 0; border: 0; }
@media (prefers-reduced-motion: reduce) { .cs-me.pop { animation: none !important; } }

/* ---- build 317: SCREEN TRANSITIONS (js/screen-fx.js). Opacity and transform only; reduced motion turns them off. ---- */
.bscreen.bs-in { animation: bs-in .32s ease both; }
.bscreen.bs-in > * { animation: bs-child .46s cubic-bezier(.2, .8, .2, 1) both; }
.bscreen.bs-in > :nth-child(2) { animation-delay: .04s; } .bscreen.bs-in > :nth-child(3) { animation-delay: .08s; } .bscreen.bs-in > :nth-child(4) { animation-delay: .12s; }
.bscreen.bs-in > :nth-child(5) { animation-delay: .16s; } .bscreen.bs-in > :nth-child(6) { animation-delay: .2s; } .bscreen.bs-in > :nth-child(7) { animation-delay: .24s; } .bscreen.bs-in > :nth-child(8) { animation-delay: .28s; }
.bscreen.bs-out { animation: bs-out .26s ease forwards; pointer-events: none; }
.bscreen .bs-swap { animation: bs-swap .3s ease both; }
@keyframes bs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-child { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bs-out { to { opacity: 0; transform: translateY(26px) scale(.985); } }
@keyframes bs-swap { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.pack-tear.bye { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .bscreen.bs-in, .bscreen.bs-in > *, .bscreen.bs-out, .bscreen .bs-swap { animation: none !important; } }

/* ---- build 318: Settings, reorganised (js/settings-extra.js) ---- */
.st-find { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.st-search { width: 100%; min-height: 46px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: 600 .95rem var(--f-ui); }
.st-search::placeholder { color: var(--ink-soft); font-weight: 500; }
.st-jump { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.st-chip { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--stone-edge); background: color-mix(in srgb, var(--hl) 6%, transparent); color: var(--ink); font: 700 .8rem var(--f-ui); }
.st-chip:active { background: color-mix(in srgb, var(--hl) 14%, transparent); }
.st-none { margin: 4px 6px; text-align: center; color: var(--ink-soft); font-weight: 600; }
.st-hide { display: none !important; }
.st-note { padding: 12px 16px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
.st-sample { margin: 2px 0 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--hl) 6%, transparent); font-weight: 600; line-height: 1.4; }
.st-quiet { flex-direction: row; gap: 12px; padding-top: 4px; }
.st-sel { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.st-sel select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--stone-edge); background: var(--stone); color: var(--ink); font: 700 .92rem var(--f-ui); }
.st-sw { display: inline-block; width: 14px; height: 14px; margin-right: 7px; border-radius: 50%; vertical-align: -2px; box-shadow: 0 0 0 1.5px var(--sw-edge); }
.sw-dark { background: var(--sw-dark); } .sw-light { background: var(--sw-light); } .sw-auto { background: linear-gradient(90deg, var(--sw-dark) 50%, var(--sw-light) 50%); }
.st-small { flex: none; min-width: 84px; min-height: 40px; padding: 0 14px; font-size: .85rem; }
.st-danger-zone .st-card { border-color: color-mix(in srgb, var(--c-red-70) 40%, var(--stone-edge)); }
.st-danger-zone .st-danger { color: var(--c-red-70); border-color: color-mix(in srgb, var(--c-red-70) 45%, var(--stone-edge)); }
.st-help .st-pair { padding-bottom: 14px; }
html.bigger-text { font-size: 124%; }
/* Screen animations: Reduced stands the entrance and exit effects down (the weather and the town keep their own gentle motion) */
html.reduce-motion .bscreen, html.reduce-motion .bscreen *, html.reduce-motion .overlay-card, html.reduce-motion .pack-tear, html.reduce-motion .pack-tear * { animation: none !important; }
html.reduce-motion .bscreen, html.reduce-motion .pack-tear { transition: none !important; }

/* ---- build 319: the Settings window slides down from the top and back up, like the tab window (js/titles.js, openPlayerMenu) ---- */
.player-menu.pm-in { animation: pmSlideIn .4s cubic-bezier(.22, .9, .3, 1) backwards; }
.player-menu.pm-out { animation: pmSlideOut .28s ease-in forwards; pointer-events: none; }
.player-menu-backdrop.pm-in { animation: pmFadeIn .3s ease backwards; }
.player-menu-backdrop.pm-out { animation: pmFadeOut .28s ease forwards; pointer-events: none; }
@keyframes pmSlideIn { from { transform: translateY(-108%); } }
@keyframes pmSlideOut { to { transform: translateY(-108%); } }
@keyframes pmFadeIn { from { opacity: 0; } }
@keyframes pmFadeOut { to { opacity: 0; } }
html.reduce-motion .player-menu, html.reduce-motion .player-menu *, html.reduce-motion .player-menu-backdrop { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .player-menu.pm-in, .player-menu.pm-out, .player-menu-backdrop.pm-in, .player-menu-backdrop.pm-out { animation: none; } }

/* ============================================================
   YOUR HOME'S SCREENS (build 320, js/home-screens.js)
   One full-screen view per piece of your home, laid out like the building screens: title bar, a line of speech, the stage, the
   controls, then "Back to the room". Colours are the --ho-* tokens in css/theme.css.
   ============================================================ */
.home-screen { position: fixed; inset: 0; z-index: 57; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; color: var(--ho-ink); background: linear-gradient(180deg, var(--ho-bg) 0%, var(--ho-bg2) 100%); font-family: var(--f-ui); }
.home-screen.hidden { display: none; }
body.in-home-screen .overlay, body.in-home-screen .toast { z-index: 70; }
.ho-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-top: 10px; }
.ho-title { padding: 0 8px; font: 700 1.3rem var(--f-display); text-align: center; }
.ho-chip { justify-self: end; padding: 7px 12px; border-radius: 999px; background: var(--ho-card); border: 1px solid var(--ho-edge); font: 800 .82rem var(--f-ui); white-space: nowrap; box-shadow: 0 2px 6px var(--ho-shadow); }
.ho-chip:empty { visibility: hidden; }
.ho-say { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--ho-card); border: 1px solid var(--ho-edge); font: 500 .9rem/1.4 var(--f-ui); color: var(--ho-ink); min-height: 2.6em; box-shadow: 0 2px 6px var(--ho-shadow); }
.ho-say:empty { display: none; }
.ho-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
.ho-foot { flex: none; display: flex; flex-direction: column; gap: 8px; max-height: 44%; overflow-y: auto; }
.ho-foot:empty { display: none; }
.ho-leave { flex: none; width: 100%; min-height: 48px; border: 0; border-radius: 16px; font: 700 .95rem var(--f-ui); background: var(--ho-card); color: var(--ho-ink); box-shadow: 0 3px 8px var(--ho-shadow); }
.ho-btn { min-height: 50px; width: 100%; padding: 0 16px; border-radius: 16px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); font: 800 .98rem var(--f-ui); cursor: pointer; box-shadow: 0 3px 8px var(--ho-shadow); touch-action: none; user-select: none; -webkit-user-select: none; }
.ho-btn.pri { background: var(--ho-accent); border-color: var(--ho-accent2); color: var(--ho-on-accent); }
.ho-btn.ghost { background: transparent; box-shadow: none; }
.ho-btn:disabled { opacity: .5; cursor: default; }
.ho-btn:active:not(:disabled) { transform: translateY(1px); }
.ho-row { display: flex; gap: 8px; }
.ho-row .ho-btn { flex: 1; }
.ho-note { margin: 0; text-align: center; color: var(--ho-soft); font: 500 .8rem/1.35 var(--f-ui); }
.ho-empty { margin: 30px 0; text-align: center; color: var(--ho-soft); }
.ho-sec { margin-top: 4px; color: var(--ho-soft); font: 800 .72rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.ho-done { padding: 12px 14px; border-radius: 14px; background: var(--ho-card2); color: var(--ho-ink); font: 700 .88rem/1.35 var(--f-ui); text-align: center; }
.ho-steps { display: flex; gap: 8px; justify-content: center; }
.ho-steps span { padding: 6px 12px; border-radius: 999px; background: var(--ho-card); border: 1px solid var(--ho-edge); font: 800 .8rem var(--f-ui); color: var(--ho-soft); }
.ho-steps span.on { background: var(--ho-accent); border-color: var(--ho-accent2); color: var(--ho-on-accent); }
.ho-pill { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); font: 700 .8rem var(--f-ui); cursor: pointer; white-space: nowrap; }
.ho-pill.on { background: var(--ho-ink); border-color: var(--ho-ink); color: var(--ho-card); }
.ho-chips, .ho-tabs { display: flex; gap: 6px; overflow-x: auto; flex: none; padding-bottom: 2px; }
.ho-tabs { justify-content: center; }
.ho-bar2 { height: 10px; border-radius: 999px; background: var(--ho-card2); overflow: hidden; }
.ho-bar2 i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ho-gold), var(--ho-accent)); transition: width .4s; }
.ho-meter { position: relative; height: 16px; border-radius: 999px; background: var(--ho-card2); overflow: hidden; border: 1px solid var(--ho-edge); }
.ho-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ho-water); }
.ho-meter b { position: absolute; top: 0; bottom: 0; left: 55%; right: 4%; border-left: 2px solid var(--ho-good); border-right: 2px solid var(--ho-good); background: color-mix(in srgb, var(--ho-good) 22%, transparent); }
.ho-meter.time i { background: var(--ho-night2); transition: width .1s linear; }
.ho-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ho-stats div { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border-radius: 14px; background: var(--ho-card); border: 1px solid var(--ho-edge); text-align: center; }
.ho-stats span { font-size: 1.2rem; }
.ho-stats b { font: 800 .95rem var(--f-ui); }
.ho-stats small { color: var(--ho-soft); font: 600 .66rem/1.2 var(--f-ui); }

/* the mailbox */
.ho-stamps { padding: 10px 12px; border-radius: 16px; background: var(--ho-card); border: 1px dashed var(--ho-edge); }
.ho-stamps small { display: block; margin-bottom: 6px; color: var(--ho-soft); font: 800 .7rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.ho-stamps > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ho-stamps em { color: var(--ho-soft); font: italic 500 .8rem var(--f-ui); }
.ho-stamp { width: 34px; height: 40px; display: grid; place-items: center; font-size: 1.2rem; background: var(--ho-paper); border: 3px dotted var(--ho-edge); border-radius: 4px; transform: rotate(-3deg); }
.ho-stamp:nth-child(2n) { transform: rotate(4deg); }
.ho-envs, .ho-mrows { display: grid; gap: 8px; }
.ho-env { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 6px 6px 14px 14px; border: 1px solid var(--ho-edge); background: linear-gradient(160deg, var(--ho-paper) 0 50%, var(--ho-card2) 50% 100%); color: var(--ho-ink); text-align: left; cursor: pointer; box-shadow: 0 3px 8px var(--ho-shadow); }
.ho-env .ho-seal { flex: none; }
.ho-env-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ho-env-tx b { font: 800 .95rem var(--f-ui); }
.ho-env-tx small { color: var(--ho-soft); font: 500 .76rem var(--f-ui); }
.ho-seal { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.4rem; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ho-seal) 70%, white), var(--ho-seal)); box-shadow: 0 2px 4px var(--ho-shadow); }
.ho-tag { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ho-card2); font: 800 .7rem var(--f-ui); }
.ho-tag.seal { background: var(--ho-seal); color: var(--ho-paper); }
.ho-env:active { transform: translateY(1px); }
.ho-mrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); text-align: left; cursor: pointer; }
.ho-mrow span { font-size: 1.2rem; }
.ho-mrow b { font: 700 .86rem var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ho-mrow small { color: var(--ho-soft); font: 500 .74rem var(--f-ui); }
.ho-letter { padding: 18px 16px; border-radius: 6px; background: repeating-linear-gradient(180deg, var(--ho-paper) 0 27px, var(--ho-card2) 27px 28px); border: 1px solid var(--ho-edge); box-shadow: 0 6px 18px var(--ho-shadow); display: grid; gap: 12px; transform-origin: top center; }
.ho-letter.unfold { animation: ho-unfold .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ho-unfold { from { transform: perspective(700px) rotateX(-70deg) scaleY(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ho-letter header { display: flex; gap: 12px; align-items: center; }
.ho-letter header b { display: block; font: 700 1.1rem var(--f-display); }
.ho-letter header small { color: var(--ho-soft); font: 500 .76rem var(--f-ui); }
.ho-letter p { margin: 0; font: 500 1rem/1.75 var(--f-display); }
.ho-parcel { display: grid; justify-items: center; gap: 2px; padding: 14px; border-radius: 16px; border: 2px dashed var(--ho-gold); background: var(--ho-card); color: var(--ho-ink); cursor: pointer; }
.ho-parcel-box { font-size: 2.4rem; animation: ho-wiggle 1.8s ease-in-out infinite; }
@keyframes ho-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
.ho-parcel b { font: 800 .95rem var(--f-ui); }
.ho-parcel small { color: var(--ho-soft); font: 600 .8rem var(--f-ui); }
.ho-got { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ho-good) 18%, var(--ho-card)); font: 700 .88rem var(--f-ui); text-align: center; }
.ho-got.ho-pop { animation: ho-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ho-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ho-reply { display: grid; gap: 6px; justify-items: center; }
.ho-reply small { color: var(--ho-soft); font: 700 .78rem var(--f-ui); }
.ho-reply > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* the bonsai */
.ho-bonsai { position: relative; flex: 1; min-height: 260px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, var(--ho-leaf2), color-mix(in srgb, var(--ho-leaf2) 70%, var(--ho-wood2))); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 18px; }
.ho-light { position: absolute; inset: -20% 30% 30% -30%; background: linear-gradient(120deg, color-mix(in srgb, var(--ho-sun) 40%, transparent), transparent 60%); transform: skewX(-12deg); pointer-events: none; }
.ho-tree { position: relative; width: min(70%, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.ho-tree-ico { font-size: 5rem; line-height: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); transition: transform .4s; }
.ho-tree-ico.s1 { font-size: 6rem; } .ho-tree-ico.s2 { font-size: 7rem; } .ho-tree-ico.s3, .ho-tree-ico.s4 { font-size: 8.5rem; }
.ho-shoot, .ho-bloom { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ho-sun) 25%, transparent); font-size: 1.6rem; cursor: pointer; animation: ho-sway 2.4s ease-in-out infinite; }
.ho-bloom { left: 62%; top: 26%; background: color-mix(in srgb, var(--ho-paper) 30%, transparent); animation: ho-glow 1.8s ease-in-out infinite; }
@keyframes ho-sway { 50% { transform: rotate(10deg) scale(1.06); } }
@keyframes ho-glow { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ho-sun) 30%, transparent); } }
.ho-pot { width: min(56%, 210px); height: 34px; border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, var(--ho-wood), var(--ho-wood2)); box-shadow: 0 6px 10px rgba(0,0,0,.35); position: relative; }
.ho-pot i { position: absolute; left: 6%; right: 6%; top: -6px; height: 10px; border-radius: 50%; background: var(--ho-wood2); transition: background .6s; }
.ho-bonsai.wet .ho-pot i { background: color-mix(in srgb, var(--ho-wood2) 60%, black); }
.ho-drops { position: absolute; inset: 20% 30% 40%; pointer-events: none; opacity: 0; background: repeating-linear-gradient(100deg, transparent 0 14px, color-mix(in srgb, var(--ho-water) 70%, transparent) 14px 16px); background-size: 100% 60px; transition: opacity .2s; }
.ho-drops.on { opacity: 1; animation: ho-rain .5s linear infinite; }
@keyframes ho-rain { to { background-position: 0 60px; } }
.ho-grow { display: grid; gap: 4px; text-align: center; }
.ho-grow b { font: 700 1.15rem var(--f-display); }
.ho-grow small { color: var(--ho-soft); font: 600 .8rem var(--f-ui); }

/* the sand garden */
.ho-sand { position: relative; flex: 1; min-height: 260px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, var(--ho-sand), var(--ho-sand2)); box-shadow: inset 0 0 0 6px var(--ho-wood), inset 0 0 0 9px var(--ho-wood2); touch-action: none; }
.ho-sand canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ho-sand .calm-rock { position: absolute; transform: translate(-50%, -50%); font-size: 2rem; pointer-events: none; }
.ho-leaf { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-size: 1.6rem; pointer-events: none; transition: transform .7s ease-in, opacity .7s; }
.ho-leaf.swept { transform: translate(120px, -80px) rotate(400deg) scale(.4); opacity: 0; }
.ho-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ho-tool { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); cursor: pointer; }
.ho-tool span { font-size: 1.3rem; line-height: 1.2; }
.ho-tool small { font: 700 .66rem var(--f-ui); }
.ho-tool.on { background: var(--ho-accent); border-color: var(--ho-accent2); color: var(--ho-on-accent); }

/* the armchair */
.ho-nap { position: relative; flex: 1; min-height: 260px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, var(--ho-card2), var(--ho-bg2)); transition: background .8s; }
.ho-window { position: absolute; left: 14%; top: 10%; width: 34%; height: 34%; border-radius: 10px; border: 6px solid var(--ho-wood); background: linear-gradient(180deg, var(--ho-water), var(--ho-sun)); display: grid; grid-template-columns: 1fr 1fr; }
.ho-window i { border-right: 4px solid var(--ho-wood); } .ho-window i + i { border: 0; }
.ho-beam { position: absolute; left: 22%; top: 40%; width: 60%; height: 60%; background: linear-gradient(160deg, color-mix(in srgb, var(--ho-sun) 55%, transparent), transparent 70%); clip-path: polygon(0 0, 40% 0, 100% 100%, 30% 100%); pointer-events: none; transition: opacity .8s; }
.ho-chair { position: absolute; left: 50%; bottom: 8%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); }
.ho-chair .spr { width: 100%; height: 100%; }
.ho-sleeper { position: absolute; left: 50%; top: 18%; width: 38%; aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; font-size: 2.2rem; border-radius: 50%; overflow: hidden; background: var(--ho-paper); box-shadow: 0 2px 6px var(--ho-shadow); }
.ho-sleeper img { width: 100%; height: 100%; object-fit: cover; }
.ho-zz { position: absolute; right: 4%; top: 0; color: var(--ho-paper); font: 800 1.3rem var(--f-ui); animation: ho-zz 2.4s ease-in-out infinite; }
.ho-zz i { font-style: normal; font-size: .8em; margin-left: 2px; }
@keyframes ho-zz { 50% { transform: translateY(-8px); opacity: .6; } }
.ho-nap.dreaming { background: radial-gradient(120% 90% at 50% 100%, var(--ho-night2), var(--ho-night)); }
.ho-nap.dreaming .ho-beam { opacity: 0; }
.ho-nap.dreaming .ho-window { background: linear-gradient(180deg, var(--ho-night), var(--ho-night2)); }
.ho-motes { position: absolute; inset: 0; }
.ho-mote { position: absolute; bottom: -10%; width: 52px; height: 52px; margin-left: -26px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ho-sun) 18%, transparent); font-size: 1.6rem; cursor: pointer; animation: ho-drift 3.8s linear forwards; }
.ho-mote.still { bottom: auto; animation: none; }
.ho-mote.got { animation: ho-catch .3s ease-out forwards; }
@keyframes ho-drift { from { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } to { transform: translate(var(--dx), -560px); opacity: .2; } }
@keyframes ho-catch { to { transform: scale(1.8); opacity: 0; } }

/* the shelves */
.ho-shelf { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, var(--ho-wood2), color-mix(in srgb, var(--ho-wood2) 70%, black)); box-shadow: inset 0 0 0 6px var(--ho-wood); }
.ho-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 12px 12px; border-bottom: 10px solid var(--ho-wood); border-radius: 4px; }
.ho-board.match { box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--ho-gold) 70%, transparent); }
.ho-spark { position: absolute; right: 6px; top: -4px; font-size: 1.1rem; animation: ho-glow 1.8s ease-in-out infinite; border-radius: 50%; }
.ho-slot { height: 78px; display: grid; place-items: center; font-size: 2.8rem; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--ho-paper) 25%, transparent); background: transparent; }
.ho-slot.on { border: 0; cursor: pointer; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.ho-slot.on:active { transform: translateY(-4px); }
.ho-tray { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ho-chipbtn { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 8px; border-radius: 14px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); cursor: pointer; }
.ho-chipbtn span { font-size: 1.6rem; }
.ho-chipbtn small { font: 700 .66rem/1.2 var(--f-ui); text-align: center; }
.ho-chipbtn:disabled { opacity: .5; }

/* the framed cards */
.ho-wall { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; align-content: center; padding: 14px; border-radius: 20px; background: repeating-linear-gradient(90deg, var(--ho-card2) 0 22px, var(--ho-bg2) 22px 24px); }
.ho-frame { display: grid; justify-items: center; gap: 3px; padding: 10px 8px; border-radius: 6px; border: 7px solid var(--ho-wood); background: var(--ho-paper); color: var(--ho-ink); cursor: pointer; box-shadow: 0 6px 12px var(--ho-shadow); }
.ho-frame:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: 52%; }
.ho-frame.sel { outline: 3px solid var(--ho-accent2); outline-offset: 3px; }
.ho-frame-art { font-size: 3rem; line-height: 1.1; color: var(--ho-soft); }
.ho-frame b { font: 700 .85rem var(--f-display); text-align: center; }
.ho-frame small { color: var(--ho-soft); font: 700 .66rem var(--f-ui); text-transform: uppercase; letter-spacing: .08em; }
.ho-frame.rarity-mythic, .ho-frame.rarity-divine, .ho-frame.rarity-atlas { border-color: var(--ho-gold); }
.ho-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ho-card { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); font-size: 1.6rem; cursor: pointer; }
.ho-card small { font: 700 .6rem/1.15 var(--f-ui); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ho-card.on { background: var(--ho-accent); border-color: var(--ho-accent2); }

/* the trophy case */
.ho-case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--ho-water) 18%, var(--ho-paper)), var(--ho-card2)); border: 6px solid var(--ho-wood); }
.ho-tro { display: grid; justify-items: center; gap: 4px; min-height: 96px; padding: 10px 4px; border-radius: 12px; border: 1px dashed var(--ho-edge); background: color-mix(in srgb, var(--ho-paper) 60%, transparent); color: var(--ho-soft); cursor: pointer; }
.ho-tro span { font-size: 2rem; line-height: 1.2; opacity: .45; }
.ho-tro small { font: 700 .68rem/1.2 var(--f-ui); text-align: center; }
.ho-tro.got { border-style: solid; border-color: var(--ho-gold); color: var(--ho-ink); }
.ho-tro.got span { opacity: 1; filter: drop-shadow(0 4px 4px var(--ho-shadow)); }
.ho-tro.sel { outline: 3px solid var(--ho-accent2); outline-offset: 2px; }

/* the altar */
.home-screen[data-view="altar"] { background: radial-gradient(120% 70% at 50% 0%, var(--ho-night2), var(--ho-night)); color: var(--ho-paper); }
.ho-shrines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ho-god { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ho-paper) 20%, transparent); background: color-mix(in srgb, var(--ho-paper) 8%, transparent); color: var(--ho-paper); cursor: pointer; }
.ho-god-ico { font-size: 2.6rem; filter: grayscale(1) brightness(.5); }
.ho-god b { font: 700 1rem var(--f-display); }
.ho-god small { font: 700 .72rem var(--f-ui); opacity: .75; }
.ho-god.ready { border-color: var(--ho-gold); box-shadow: 0 0 18px -4px var(--ho-gold); }
.ho-god.ready .ho-god-ico { filter: grayscale(.4); }
.ho-god.home .ho-god-ico { filter: none; }
.ho-god.sel { outline: 3px solid var(--ho-gold); outline-offset: 2px; }
.ho-godinfo { padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--ho-paper) 10%, transparent); display: grid; gap: 8px; }
.ho-godinfo b { font: 700 1.05rem var(--f-display); }
.ho-godinfo p { margin: 0; }
.ho-godinfo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 600 .84rem/1.35 var(--f-ui); opacity: .85; }
.ho-godinfo li.ok { opacity: 1; }
.ho-atlas { text-align: center; font: italic 500 .9rem var(--f-display); opacity: .8; }
.home-screen[data-view="altar"] .ho-say, .home-screen[data-view="altar"] .ho-chip, .home-screen[data-view="altar"] .ho-leave { background: color-mix(in srgb, var(--ho-paper) 10%, transparent); border-color: transparent; color: var(--ho-paper); white-space: pre-line; }
.ho-candles { background: linear-gradient(90deg, var(--ho-gold), color-mix(in srgb, var(--ho-gold) 70%, var(--ho-seal))) !important; border-color: var(--ho-gold) !important; color: var(--ho-ink) !important; }

/* managing your home */
.ho-scroll { display: flex; flex-direction: column; gap: 10px; }
.ho-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--ho-card); border: 1px solid var(--ho-edge); }
.ho-hero-ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--ho-accent); font-size: 1.8rem; }
.ho-hero b { display: block; font: 700 1.15rem var(--f-display); }
.ho-hero small { color: var(--ho-soft); font: 600 .78rem var(--f-ui); }
.ho-card2 { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--ho-card); border: 1px solid var(--ho-edge); }
.ho-card2 small { color: var(--ho-soft); font: 600 .76rem var(--f-ui); }
.ho-cosy { display: flex; justify-content: space-between; align-items: baseline; }
.ho-cosy b { font: 800 .95rem var(--f-ui); }
.ho-cosy span { font: 700 .8rem var(--f-ui); color: var(--ho-accent2); }
.ho-list { display: grid; gap: 6px; }
.ho-li { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--ho-card); border: 1px solid var(--ho-edge); color: var(--ho-ink); text-align: left; font: inherit; }
.ho-li > :first-child { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--ho-card2); font: 800 1.1rem var(--f-ui); }
.ho-li b { font: 800 .88rem var(--f-ui); }
.ho-li small { color: var(--ho-soft); font: 600 .74rem/1.3 var(--f-ui); }
.ho-li.btn-like { cursor: pointer; }
.ho-li.btn-like:disabled { opacity: .5; cursor: default; }
.ho-li .hr-th { position: relative !important; width: 38px; height: 38px; }
.ho-li.lock { opacity: .8; }
.ho-li.done > :first-child { background: var(--ho-good); color: var(--ho-paper); }
.ho-li.now { border-color: var(--ho-accent2); box-shadow: inset 0 0 0 1px var(--ho-accent2); }
.ho-li.now > :first-child { background: var(--ho-accent); }
.ho-li.next > :first-child { background: var(--ho-gold); }
.home-screen .hr-sw { color: var(--ho-ink); background: var(--ho-card); border-color: var(--ho-edge); }
.home-screen .hr-sw.on { border-color: var(--ho-accent2); box-shadow: inset 0 0 0 2px var(--ho-accent2); }
.ho-preview { position: relative; height: 110px; border-radius: 16px; overflow: hidden; border: 1px solid var(--ho-edge); }
.ho-preview .w { position: absolute; inset: 0 0 62% 0; background: linear-gradient(180deg, var(--pw) 0 70%, var(--pw2) 70% 100%); }
.ho-preview .f { position: absolute; inset: 38% 0 0 0; background: repeating-linear-gradient(0deg, var(--pf) 0 16px, var(--pf2) 16px 18px); }
.ho-preview .r { position: absolute; left: 30%; right: 30%; top: 54%; bottom: 10%; border-radius: 8px; background: var(--pr); box-shadow: inset 0 0 0 4px var(--pr2); }

/* the spirit pieces and a visiting spirit */
.ho-perch, .ho-visit { position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--g) 45%, transparent), transparent 70%), linear-gradient(180deg, var(--ho-night2), var(--ho-night)); color: var(--ho-paper); }
.ho-perch-fig, .ho-visit-fig { font-size: 5.5rem; line-height: 1; filter: drop-shadow(0 0 18px var(--g)); animation: ho-float 3.2s ease-in-out infinite; }
.ho-perch:not(.on) .ho-perch-fig { opacity: .35; animation: none; filter: none; }
@keyframes ho-float { 50% { transform: translateY(-8px); } }
.ho-perch-stand { width: 120px; height: 14px; border-radius: 50%; background: var(--ho-wood); box-shadow: 0 10px 0 -4px var(--ho-wood2); }
.ho-perch-name, .ho-visit { text-align: center; }
.ho-perch-name b, .ho-visit b { display: block; font: 700 1.15rem var(--f-display); }
.ho-perch-name small, .ho-visit small { opacity: .8; font: 600 .78rem var(--f-ui); }
.ho-perch.resonant .ho-perch-stand { box-shadow: 0 0 22px 4px var(--g), 0 10px 0 -4px var(--ho-wood2); }
.ho-mantel { position: relative; flex: 1; min-height: 220px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; padding: 20px 14px 40px; border-radius: 22px; background: linear-gradient(180deg, var(--ho-night2), var(--ho-night)); }
.ho-mantel-shelf { position: absolute; left: 8px; right: 8px; bottom: 22px; height: 16px; border-radius: 6px; background: linear-gradient(180deg, var(--ho-gold), var(--ho-wood)); }
.ho-mslot { position: relative; z-index: 1; height: 120px; display: grid; justify-items: center; align-content: end; gap: 4px; padding-bottom: 18px; border-radius: 14px 14px 0 0; border: 2px dashed color-mix(in srgb, var(--ho-paper) 25%, transparent); border-bottom: 0; background: transparent; color: var(--ho-paper); }
.ho-mslot.on { border: 0; cursor: pointer; }
.ho-mslot span { font-size: 3rem; filter: drop-shadow(0 0 12px var(--ho-gold)); animation: ho-float 3s ease-in-out infinite; }
.ho-mslot small { font: 700 .66rem/1.2 var(--f-ui); text-align: center; }
.ho-cabinet { display: grid; gap: 8px; }
.ho-medal-row { display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); text-align: left; cursor: pointer; }
.ho-medal-row span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ho-card2); font-size: 1.2rem; filter: grayscale(1); opacity: .6; }
.ho-medal-row.on span { background: var(--ho-gold); filter: none; opacity: 1; }
.ho-medal-row b { font: 800 .86rem var(--f-ui); }
.ho-medal-row small { color: var(--ho-soft); font: 700 .74rem var(--f-ui); }
.ho-medal-row .ho-bar2 { grid-column: 2 / 4; grid-row: 2; height: 7px; }
.ho-medal-row small { grid-column: 3; grid-row: 1; }

/* Tidy Up */
.ho-tidy { position: relative; flex: 1; min-height: 300px; display: flex; flex-direction: column; gap: 10px; }
.ho-floor { position: relative; flex: 1; min-height: 170px; border-radius: 22px; overflow: hidden; background: repeating-linear-gradient(0deg, var(--ho-wood) 0 28px, var(--ho-wood2) 28px 30px); box-shadow: inset 0 0 0 6px var(--ho-wood2); }
.ho-mess { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-size: 1.9rem; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.ho-thing { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: grid; place-items: center; font-size: 3.6rem; border-radius: 26px; background: var(--ho-paper); box-shadow: 0 10px 20px var(--ho-shadow); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .15s; }
.ho-thing.held { cursor: grabbing; transition: none; z-index: 2; box-shadow: 0 18px 30px var(--ho-shadow); }
.ho-thing.in { animation: ho-pop .28s cubic-bezier(.2, 1.6, .4, 1) both; }
.ho-thing.nope { animation: ho-nope .35s ease; }
@keyframes ho-nope { 20%, 60% { translate: -10px 0; } 40%, 80% { translate: 10px 0; } }
.ho-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.ho-bin { position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 4px; border-radius: 18px; border: 2px solid var(--ho-edge); background: var(--ho-card); color: var(--ho-ink); cursor: pointer; touch-action: none; }
.ho-bin span { font-size: 2.1rem; line-height: 1.1; }
.ho-bin b { font: 800 .8rem var(--f-ui); }
.ho-bin-n { position: absolute; top: 6px; right: 8px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ho-card2); font: 800 .7rem var(--f-ui); font-style: normal; }
.ho-tidy.idle .ho-bin-n { display: none; }
.ho-bin.good { animation: ho-bump .3s ease; border-color: var(--ho-good); }
.ho-bin.bad { animation: ho-nope .35s ease; border-color: var(--ho-seal); }
@keyframes ho-bump { 50% { transform: scale(1.08); } }
.ho-tbar { height: 10px; border-radius: 999px; background: var(--ho-card2); overflow: hidden; flex: none; }
.ho-tbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ho-seal), var(--ho-gold), var(--ho-accent)); }
.ho-tscore { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex: none; }
.ho-tscore b { font: 800 2rem var(--f-ui); }
.ho-tscore span { color: var(--ho-seal); font: 800 .95rem var(--f-ui); }
.ho-fly { position: fixed; z-index: 80; width: 60px; text-align: center; font-size: 2.4rem; pointer-events: none; }
.ho-tidy.done { align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: var(--ho-card); border: 1px solid var(--ho-edge); }
.ho-medal { font-size: 5rem; animation: ho-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.ho-big { font: 800 2.6rem var(--f-ui); }
.ho-tidy.done small { color: var(--ho-soft); font: 600 .85rem var(--f-ui); }

/* in the room: a piece that has just arrived sparkles until it is first used */
.hr-prop.fresh::after { content: '✨'; position: absolute; right: -2px; top: -10px; font-size: calc(var(--t) * .34); animation: ho-glow 1.6s ease-in-out infinite; border-radius: 50%; pointer-events: none; }
html.reduce-motion .home-screen *, html.reduce-motion .hr-prop.fresh::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .home-screen *, .hr-prop.fresh::after { animation: none !important; } }

/* Build 327: the companion sheets (things to do together, its games, choose a companion) close with the round X like every other window */
.chb-head .x-close { margin-left: auto; align-self: flex-start; }
#companionGame .coll-sheet h2, #companionPicker .coll-sheet h2 { align-items: center; }