/* Extracted from https://inpeace.online/ (scripts/inpeace/extract.py) */
:root {
  --ink: #f3e7cf;
  --ink-dim: rgba(243, 231, 207, 0.62);
  --glass: rgba(24, 20, 16, 0.42);
  --line: rgba(243, 231, 207, 0.16);
  --gold: #e7b56a;
  --serif: "Noto Serif KR", "AppleMyungjo", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050507; color: var(--ink); font-family: var(--sans); }
/* a game, not a page: the document never scrolls, bounces, pull-to-refreshes, pinch-zooms or double-tap-zooms
   (fixed root + overscroll-behavior none + touch-action none; scrollable lists opt back in to panning) */
html, body { position: fixed; inset: 0; width: 100%; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#people-list, #music-list, #room-list, .about, .rooms, .mw-list, dialog.sheet { touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
input, textarea { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
button { touch-action: manipulation; }
body.cu-on:not(.in) canvas#c { opacity: 0; }   /* (CU's link: the title over a night sky, not the nave — user 2026-11-10) */
body.cu-on:not(.in) { background: radial-gradient(120% 90% at 50% 20%, #1c2450, #0a0d22 60%, #05060f); }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* title */
.title { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 58%, rgba(70, 40, 12, 0.35), rgba(3, 3, 5, 0.92) 60%); transition: opacity 1.6s ease, visibility 1.6s; z-index: 5; text-align: center; padding: 24px; }
.title { cursor: pointer; background: radial-gradient(circle at 50% 50%, rgba(8, 6, 4, 0.82) 0, rgba(8, 6, 4, 0.55) 34%, rgba(3, 3, 5, 0.25) 70%); }
.enter { position: relative; width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 210, 150, 0.9); background: radial-gradient(circle, rgba(255, 180, 90, 0.55), rgba(120, 60, 20, 0.55) 62%, rgba(20, 12, 6, 0.75) 100%);
  box-shadow: 0 0 40px rgba(255, 170, 80, 0.55), inset 0 0 24px rgba(255, 220, 160, 0.35); transition: transform .25s; }
.enter:hover, .enter:active { transform: scale(1.06); }
.enter .halo { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 210, 150, 0.7); animation: enter-pulse 1.8s ease-out infinite; }
@keyframes enter-pulse { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.enter-icon { width: 58px; height: 58px; color: #ffe2b0; stroke-width: 1.6; filter: drop-shadow(0 0 10px rgba(255, 190, 110, 0.95)); }
@keyframes label-breathe { 50% { opacity: 0.65; } }
/* loading → ready (main.js prepare): the gold ring fills with --load, the candle's flame grows from a glowing wick,
   embers rise; every motion here is a compositor animation (transform / opacity), so it never freezes while the main
   thread compiles. When ready: the flame blooms, the ring glints, the halo starts to pulse and "Tap to enter" appears. */
:root { --load: 0; }
.enter .load-ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.enter .load-ring circle { fill: none; stroke-width: 3; }
.enter .load-ring .track { stroke: rgba(255, 226, 176, .14); }
.enter .load-ring .arc { stroke: #f6d385; stroke-linecap: round; stroke-dasharray: 415; stroke-dashoffset: calc(415px * (1 - var(--load))); transition: stroke-dashoffset .5s ease; filter: drop-shadow(0 0 5px rgba(255, 200, 110, .9)); }
.enter .lc { position: relative; width: 64px; height: 92px; display: block; pointer-events: none; }
.enter .lc-candle { position: absolute; left: 50%; bottom: 0; width: 34px; height: 52px; margin-left: -17px; stroke: none; overflow: visible; }
.enter .lc-lit { opacity: calc(var(--load) * 1.1); transition: opacity .6s; }
.enter .lc-flame { position: absolute; left: 50%; bottom: 50px; width: 26px; height: 34px; margin-left: -13px; transform-origin: 50% 100%;
  transform: scale(calc(.14 + .86 * var(--load))); transition: transform .7s cubic-bezier(.3, .8, .3, 1.2); }
.enter .lc-flame svg { width: 100%; height: 100%; stroke: none; overflow: visible; transform-origin: 50% 100%; animation: lflicker 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 190, 90, .95)) drop-shadow(0 0 14px rgba(255, 150, 60, .6)); }
@keyframes lflicker { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(.93, 1.07) rotate(2.5deg); } 60% { transform: scale(1.05, .95) rotate(-1deg); } 80% { transform: scale(.97, 1.03) rotate(1.5deg); } }
.enter .lc-glow { position: absolute; left: 50%; bottom: 44px; width: 120px; height: 120px; margin: 0 0 -60px -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 140, .75), rgba(255, 170, 80, .22) 42%, transparent 70%);
  opacity: calc(.12 + .88 * var(--load)); transition: opacity .7s; animation: lglow 2.8s ease-in-out infinite; }
@keyframes lglow { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
.enter .ember { position: absolute; left: 50%; bottom: 66px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff6d4, rgba(255, 170, 70, 0) 70%); animation: lember 2.4s ease-out infinite; }
.enter .ember.e2 { animation-delay: .5s; --dx: 9px; } .enter .ember.e3 { animation-delay: 1s; --dx: -11px; } .enter .ember.e4 { animation-delay: 1.5s; --dx: 5px; } .enter .ember.e5 { animation-delay: 1.9s; --dx: -6px; }
@keyframes lember { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: calc(var(--load) * 1); } 100% { opacity: 0; transform: translate(var(--dx, -4px), -46px) scale(1.2); } }
body:not(.ready) .enter { cursor: default; } body:not(.ready) .enter:hover, body:not(.ready) .enter:active { transform: none; }
body:not(.ready) .enter .halo { animation: none; opacity: 0; }
body:not(.ready) .enter-label { opacity: 0; animation: none; }
body.ready .enter-label { animation: labelin .9s ease both, label-breathe 2.4s ease-in-out .9s infinite; }
@keyframes labelin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.ready .enter .lc-flame svg { animation: lbloom 1.1s cubic-bezier(.2, .9, .3, 1.3) both, lflicker 1.7s ease-in-out 1.1s infinite; }
@keyframes lbloom { 0% { transform: scale(1); } 40% { transform: scale(1.45, 1.55); } 100% { transform: scale(1); } }
body.ready .enter .sring { animation: lringglint 1.2s ease-out both; }
@keyframes lringglint { 0% { filter: drop-shadow(0 0 14px rgba(255, 230, 160, 1)) brightness(1.5); } 100% { filter: drop-shadow(0 0 5px rgba(255, 200, 110, .9)) brightness(1); } }
.title .here { margin-top: 14px; display: flex; align-items: center; gap: 6px; color: #f3e7cf; font-size: 14px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.title .here svg { width: 17px; height: 17px; }
body:not(.in) .toasts { display: none; }
body.in .title { opacity: 0; visibility: hidden; pointer-events: none; }

/* hud */
.hud { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 16px 0; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 1.2s 1.5s; }
body.in .hud, body.film .hud { opacity: 1; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.brand { width: 42px; padding: 0; justify-content: center; }
.brand svg { width: 18px; height: 18px; color: var(--gold); }
/* the about button (user 2026-11-09: easier to find): a gold "?" on a lit disc, a soft ring breathing round it (transform/opacity only) */
.qbtn { position: relative; isolation: isolate; background: radial-gradient(circle at 38% 30%, rgba(255, 236, 190, .34), rgba(120, 80, 30, .2) 60%, rgba(20, 14, 10, .55)); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 140, .75), 0 0 14px rgba(255, 190, 90, .35); }
.qbtn svg.q-ico { width: 24px; height: 24px; color: #ffe2a0; stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(255, 200, 110, .7)); }
.qbtn svg .q-dot { fill: currentColor; stroke: none; }
.qbtn .q-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255, 210, 130, .8); opacity: 0; z-index: -1; pointer-events: none; animation: q-ring 3.4s ease-out infinite; }
@keyframes q-ring { 0% { opacity: .85; transform: scale(.9); } 55%, 100% { opacity: 0; transform: scale(1.45); } }
.qbtn:active svg.q-ico { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .qbtn .q-ring { animation: none; } }
/* the developer's contact (user 2026-11-09: refined): a sealed letter's card — walnut-dark glass under a candle's glow, a
   double gold hairline frame with diamond corners, a gilded wax-seal medallion, the address in the serif with a gold
   sheen, a quiet "tap to copy", a gilded copy pill that turns to a check; a light sweeps across now and then
   (transform/opacity only) */
.dev-contact { position: relative; margin: 2px 16px 16px; padding: 14px 14px 14px;   /* (the sheet's own side margin: it touched the edges) */ border-radius: 18px; isolation: isolate;
  background: radial-gradient(120% 90% at 18% -10%, rgba(255, 200, 120, .2), transparent 55%), linear-gradient(160deg, rgba(58, 40, 24, .92), rgba(22, 15, 11, .95));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 200, .18), 0 0 0 1px rgba(255, 214, 150, .5); }
.dev-contact .dc-frame { position: absolute; inset: 5px; border-radius: 14px; border: 1px solid rgba(255, 214, 150, .22); pointer-events: none; }
.dev-contact .dc-frame::before, .dev-contact .dc-frame::after { content: ''; position: absolute; top: -4px; width: 7px; height: 7px; transform: rotate(45deg); background: #f0c870; box-shadow: 0 0 8px rgba(255, 200, 110, .8); }
.dev-contact .dc-frame::before { left: 22px; } .dev-contact .dc-frame::after { right: 22px; }
.dev-contact .dc-glow { position: absolute; left: 6%; top: -18px; width: 46%; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .32), rgba(255, 196, 110, 0)); pointer-events: none; z-index: -1; animation: dc-breathe 4.5s ease-in-out infinite; }
@keyframes dc-breathe { 50% { opacity: .55; transform: scale(1.08); } }
.dev-contact .dc-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.dev-contact .dc-sheen { position: absolute; top: -30%; bottom: -30%; left: 0; width: 28%; background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .16), rgba(255, 236, 190, 0)); opacity: 0; animation: dc-sheen 7s ease-in-out 1.5s infinite; }
@keyframes dc-sheen { 0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; } 6% { opacity: 1; } 26% { transform: translateX(420%) skewX(-18deg); opacity: 1; } 27%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }
.dev-contact .dc-lab { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 11px; font: 600 11.5px/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: #f0d29a; }
.dev-contact .dc-lab i { height: 1px; flex: 0 1 40px; background: linear-gradient(90deg, transparent, rgba(255, 214, 150, .7)); }
.dev-contact .dc-lab i:last-child { background: linear-gradient(270deg, transparent, rgba(255, 214, 150, .7)); }
.dev-contact .dc-lab b { flex: none; width: 4px; height: 4px; transform: rotate(45deg); background: #f0c870; }
.dev-contact .dc-main { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; }
.dev-contact .dc-seal { grid-row: 1 / span 2; }
.dev-contact .dc-foot { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.dev-contact .dc-seal { flex: none; width: 46px; height: 46px; border-radius: 50%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(255, 190, 90, .35)); }
.dev-contact .dc-seal svg { width: 46px; height: 46px; stroke: none; }
#dev-mail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 2px 0; border: 0; background: none; text-align: left; cursor: copy; color: inherit; }
#dev-mail .dc-addr { font: 600 clamp(14px, 4.3vw, 18px)/1.2 var(--serif); letter-spacing: .01em; white-space: nowrap;   /* (one line: it wrapped mid-word) */
  background: linear-gradient(180deg, #fff6dc 0%, #f3d38a 60%, #d9a648 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(255, 200, 110, .18); }
.dev-contact .dc-tap { font-size: 11.5px; letter-spacing: .04em; color: rgba(240, 210, 154, .55); }
#dev-mail:active .dc-addr { opacity: .75; }
#dev-copy { flex: none; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px 0 11px; border-radius: 18px; border: 0; cursor: pointer; color: #2a1a08; font: 700 13px inherit;
  background: radial-gradient(circle at 35% 25%, #fff3cf, #f0c560 45%, #b9842a); box-shadow: 0 4px 12px rgba(240, 190, 90, .32), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .3s; }
#dev-copy:active { transform: scale(.94); }
#dev-copy svg { width: 16px; height: 16px; stroke-width: 2.1; }
#dev-copy .dc-ok { display: none; stroke-width: 2.8; }
#dev-copy.done { background: radial-gradient(circle at 35% 25%, #f2fff0, #9fdc9a 45%, #4f9e58); color: #0c2a12; }
#dev-copy.done .dc-ic { display: none; } #dev-copy.done .dc-ok { display: block; animation: dc-pop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes dc-pop { from { transform: scale(.3); } }
.dc-note { display: flex; align-items: center; justify-content: center; gap: 6px; height: 0; overflow: hidden; font-size: 13px; color: #b8f0bd; opacity: 0; transform: translateY(-4px); transition: opacity .25s, height .25s, transform .25s; }
.dc-note::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #5fbf6a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.dc-note.on { height: 22px; margin-top: 10px; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dev-contact .dc-sheen, .dev-contact .dc-glow { animation: none; } }
#dev-copy { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px 0 10px; border-radius: 17px; border: 0; cursor: pointer; color: #2a1a08; font: 700 13px inherit; background: radial-gradient(circle at 35% 30%, #fff1c8, #f0c560 45%, #b9842a); box-shadow: 0 3px 10px rgba(240, 190, 90, .35); }
#dev-copy svg { width: 16px; height: 16px; stroke-width: 2; }
#dev-copy.done { background: radial-gradient(circle at 35% 30%, #e8ffe8, #7fd08a 50%, #3f9a52); color: #0c2a12; }
.tools { gap: 2px; padding: 0 6px; }
.tools button { height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 999px; }
.tools button:hover { background: rgba(255, 255, 255, 0.06); }
.people svg { color: var(--gold); }
#count { font-variant-numeric: tabular-nums; font-size: 14px; min-width: 1ch; }
#btn-sound .x { display: none; }
#btn-sound.off .x { display: inline; }
#btn-sound.off .wave { display: none; }

/* toasts */
.toasts { position: fixed; left: 50%; top: calc(max(16px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 7; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 6px; padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(20, 16, 12, 0.5); border: 1px solid var(--line); color: var(--ink); font-size: 12.5px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: toast-in .6s ease both; transition: opacity 1s, transform 1s; }
.toast.out { opacity: 0; transform: translateY(-6px); }
/* a plain notice (what a switch just did): may wrap to two lines */
.toast.notice { border-radius: 16px; max-width: min(320px, calc(100vw - 32px)); padding: 9px 15px 9px 11px; font-size: 13.5px; line-height: 1.35; background: rgba(20, 16, 12, 0.78); }
.toast.notice span { white-space: normal; text-wrap: balance; }
.toast.notice svg { width: 18px; height: 18px; flex: none; }
.toast svg { width: 15px; height: 15px; color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }


.mark { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .6s; }
.mark.on { opacity: 1; }
.mark i { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 210, 150, .8); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* sit actions */
.actions { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); display: flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .8s .3s, transform .8s .3s; z-index: 3; }
body.in:not(.film) .actions { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }   /* (with a taper in hand too — user 2026-11-09: the bar stays, the candle button floats over it) */
body.praying .actions { opacity: 0 !important; pointer-events: none !important; transition-delay: 0s; }
.actions { max-width: calc(100vw - 24px); }
.actions button { display: flex; align-items: center; justify-content: center; flex: 0 1 58px; min-width: 38px; width: 58px; height: 46px; border-radius: 999px; }   /* (shrink to fit: up to 8 buttons on a 320 px phone) */
/* the colour drawings of the action bar — the Christmas tree (#btn-tree) and the three candles (#btn-again, light a
   candle): bigger than the line icons, softly lit, a press squeezes them */
.actions button.tree svg.xtree, .actions button.candles svg.xcandles { width: 44px; height: 44px; overflow: visible; stroke: none; fill: none; filter: drop-shadow(0 0 7px rgba(255, 196, 96, .42)); transition: transform .25s ease; }
.actions button.tree:active svg.xtree, .actions button.candles:active svg.xcandles { transform: scale(.9); }
.actions button.tree::after, .actions button.candles::after { content: ''; position: absolute; inset: 4px 6px; border-radius: 999px; pointer-events: none; box-shadow: inset 0 0 12px rgba(255, 200, 110, .18); }
.actions button.tree, .actions button.candles { position: relative; }
/* temporary (user 2026-11-02): `.actions.plain` draws these three as plain gold line icons like their neighbours; drop
   the class in dev.html to bring the colour drawings back */
.actions:not(.plain) svg.line { display: none; }
.actions.plain button svg.xtree, .actions.plain button svg.xcandles, .actions.plain button.tree::after, .actions.plain button.candles::after { display: none; }
.actions svg { width: 23px; height: 23px; }
.actions button:hover { background: rgba(255, 255, 255, .06); }
.actions svg { color: var(--gold); }
/* the fireworks button (user 2026-11-08: a drawing, like the offering's votive): a gold chrysanthemum burst with a pink
   and a blue one beside it, glints, the rising trail; it breathes (the whole svg scales — composited) under a warm halo
   that pulses (a pseudo-element's opacity), so nothing repaints over the canvas */
/* (user 2026-11-10) memorial, wish seed and the choir share one "more" button whose menu rises over it */
body.cu-on .actions button[data-merged] { display: none !important; }
body:not(.cu-on) .actions button#btn-more { display: none !important; }   /* (the merged bar only on CU's private link — user 2026-11-10: the public site unchanged) */
.ab-menu { position: fixed; z-index: 30; min-width: 176px; padding: 7px; border-radius: 20px; background: rgba(28, 20, 16, .97); border: 1px solid rgba(231, 181, 106, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  transform-origin: 50% 100%; opacity: 0; transform: translate(-50%, 8px) scale(.9); transition: opacity .18s, transform .26s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.ab-menu.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.ab-menu::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: rgba(28, 20, 16, .97); border-right: 1px solid rgba(231, 181, 106, .45); border-bottom: 1px solid rgba(231, 181, 106, .45); }
.ab-menu button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: #f6e6c8; font-size: 15px; font-weight: 600; text-align: left; }
.ab-menu button:active, .ab-menu button:hover { background: rgba(231, 181, 106, .14); }
.ab-menu button svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ab-menu button + button { margin-top: 2px; }
.actions button.more.open { background: rgba(231, 181, 106, .14); }
/* the coffee button (user 2026-11-10: as eye-catching as the fireworks): a glass of hot coffee forever sloshing, a heart in
   its crema, white steam curling up off it, a warm halo breathing — transform/opacity only */
.actions button.xcofb { position: relative; }
.actions button.xcofb .xcof { display: block; width: clamp(30px, 9vw, 38px); height: clamp(30px, 9vw, 38px); margin: -8px 0 -6px; filter: drop-shadow(0 0 4px rgba(255, 190, 120, .5)); animation: xcof-bob 2.6s ease-in-out infinite; }
.actions button.xcofb .xcof svg { width: 100%; height: 100%; overflow: visible; stroke: none; fill: none; }
.actions button.xcofb::before { content: ''; position: absolute; left: 50%; top: 40%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .4), rgba(255, 150, 80, .12) 55%, rgba(255, 150, 80, 0)); animation: xfw-halo 2.6s ease-in-out infinite; }
.xc-liq { transform-box: view-box; transform-origin: 23px 26px; animation: xcof-slosh 1.9s ease-in-out infinite; }
.xc-steam path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: xcof-steam 2.4s ease-out infinite; }
.xc-steam .s2 { animation-delay: -.8s; } .xc-steam .s3 { animation-delay: -1.6s; }
.xc-tw { transform-box: fill-box; transform-origin: 50% 50%; animation: xcof-tw 2.2s ease-in-out infinite; }
@keyframes xcof-slosh { 0%, 100% { transform: rotate(-7deg) translateY(.4px); } 25% { transform: rotate(2deg) translateY(-.6px); } 50% { transform: rotate(7deg) translateY(.3px); } 75% { transform: rotate(-2deg) translateY(-.5px); } }
@keyframes xcof-steam { 0% { opacity: 0; transform: translateY(3px) scale(.7, .6); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-7px) scale(1.25, 1.15) skewX(-8deg); } }
@keyframes xcof-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.4px) rotate(2deg); } }
@keyframes xcof-tw { 0%, 70%, 100% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(1.4); } }
.actions button.xcofb:active .xcof { animation: none; transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .xc-liq, .xc-steam path, .actions button.xcofb .xcof, .actions button.xcofb::before, .xc-tw { animation: none; } .xc-steam path { opacity: .7; } }
.actions button.xfwb { position: relative; }
.actions button.xfwb svg.xfw { width: clamp(28px, 8.6vw, 36px); height: clamp(28px, 8.6vw, 36px); margin: -6px 0 -7px; stroke: none; fill: none; overflow: visible; transform-origin: 50% 40%; filter: drop-shadow(0 0 4px rgba(255, 190, 90, .55)); animation: xfw-breathe 3.2s ease-in-out infinite; }
.actions button.xfwb::before { content: ''; position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 200, 100, .38), rgba(255, 140, 60, .12) 55%, rgba(255, 140, 60, 0)); opacity: .5; animation: xfw-halo 3.2s ease-in-out infinite; }
@keyframes xfw-breathe { 0%, 100% { transform: scale(.94) rotate(0deg); } 50% { transform: scale(1.06) rotate(6deg); } }
@keyframes xfw-halo { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.1); } }
.actions button.xfwb:active svg.xfw { animation: none; transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .actions button.xfwb svg.xfw, .actions button.xfwb::before { animation: none; } }

/* dialogs */
dialog.sheet { width: min(380px, calc(100vw - 32px)); max-height: 70vh; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: rgba(22, 18, 14, .78); color: var(--ink);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .35); }
dialog.sheet header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 10px; }
dialog.sheet h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 15px var(--serif); font-variant-numeric: tabular-nums; }
dialog.sheet h2 svg { color: var(--gold); }
#people-list small svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--gold); }
.close { width: 32px; height: 32px; border-radius: 50%; color: var(--ink-dim); }
#people-list { list-style: none; margin: 0; padding: 0 10px 14px; max-height: calc(70vh - 60px); overflow: auto; }
#people-list li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-top: 1px solid rgba(243, 231, 207, .07); font-size: 14px; }
#people-list li small { margin-left: auto; color: var(--ink-dim); font-size: 11.5px; }
#people-list .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(255, 170, 80, .9); }
.solid { display: flex; justify-content: center; margin: 14px; padding: 11px; text-align: center; border-radius: 999px; background: rgba(243, 231, 207, .12); color: var(--ink); text-decoration: none; font-size: 14px; }

body.film .title, body.film .mark { display: none; }
body.film .hud { transition: none; }
body.film .toast { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .mark i { animation: none; } }

/* music & liturgy */
#btn-music { position: relative; }
#btn-music .dot { position: absolute; top: 9px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #e2564a; opacity: 0; transition: opacity .6s; }
#btn-music.live .dot { opacity: 1; animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
#music header { gap: 10px; }
#music header .close { flex: none; }
/* (when it does not fit — narrow screens, long words: main musicFit — the sound switch takes its own line under the header; beside LIVE and the next Mass it pushed the ✕ out) */
#music header.wrap { flex-wrap: wrap; row-gap: 8px; } #music header.wrap .snd-mute { order: 5; margin: 0; }
#music .live, #music .back { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--sans); letter-spacing: 1.5px; color: #f2b6ad; }
#music .back { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
#music .live i, #music .back i { width: 7px; height: 7px; border-radius: 50%; background: #e2564a; }
#music .mass { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
#music .mass svg { width: 14px; height: 14px; color: var(--gold); }
#music .np { display: flex; gap: 12px; align-items: center; padding: 4px 18px 10px; }
#music .np-icon svg { width: 34px; height: 34px; color: var(--gold); }
/* outside: two volumes, carols (the tree) and the forest — icons only */
#music .mix { display: block; padding: 2px 18px 8px; }
#music .mixrow.out { display: none; }
body.outside #music .mixrow.out { display: flex; }
#music .mixrow em { flex: none; width: 64px; font-style: normal; font-size: 12.5px; line-height: 1.15; color: var(--ink); opacity: .82; overflow-wrap: anywhere; }
.snd-mute { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 10px; margin-left: auto; margin-right: 8px; border-radius: 18px; border: 1px solid rgba(255, 214, 150, .45);
  background: rgba(255, 220, 160, .08); color: var(--ink); font: 600 13px/1 inherit; white-space: nowrap; cursor: pointer; flex: none; }
.snd-mute svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.snd-mute .x { display: none; }
.snd-mute.off { background: linear-gradient(180deg, #f6d891, #d9a94c); color: #2a1a08; border-color: rgba(255, 236, 190, .9); }
.snd-mute.off svg { stroke: #2a1a08; } .snd-mute.off .wave { display: none; } .snd-mute.off .x { display: inline; }
#btn-music { position: relative; }
#btn-music.muted::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; margin: -1px 0 0 -13px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); box-shadow: 0 0 0 1.5px rgba(30, 20, 12, .85); pointer-events: none; }
#btn-music.muted svg { opacity: .6; }
#music .mixrow { display: flex; align-items: center; gap: 12px; height: 44px; }
#music .mixrow svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#music .vol { position: relative; flex: 1; height: 44px; touch-action: none; cursor: pointer; }
#music .vol i { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
#music .vol i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 100%); border-radius: 2px; background: var(--gold); }
#music .vol b { position: absolute; top: 50%; left: var(--v, 100%); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
#music .np b { display: block; font: 500 16px/1.3 var(--serif); }
#music .np small { display: block; color: var(--ink-dim); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
#music .np-prog { margin: 0 18px; height: 3px; border-radius: 3px; background: rgba(243, 231, 207, .12); overflow: hidden; }
#music .np-prog i { display: block; height: 100%; width: 0; background: var(--gold); }
#music .np-time { padding: 6px 18px 4px; color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
dialog#music.sheet { overflow-y: auto; }   /* (user 2026-11-08: the whole sheet scrolls — the list's own 70vh − 150 px box no longer fit under four level rows and a long credit line, and its end was cut off) */
#music-list { list-style: none; margin: 0; padding: 0 10px 14px; }
#music-list .cat { padding: 12px 8px 4px; color: var(--gold); }
#music-list .cat svg { width: 18px; height: 18px; }
#music-list .track { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; border-top: 1px solid rgba(243, 231, 207, .06); }
#music-list .track:hover { background: rgba(255, 255, 255, .05); }
#music-list .track.on { background: rgba(231, 181, 106, .14); }
#music-list .track b { font: 500 13.5px var(--sans); }
#music-list .track small { grid-column: 1; color: var(--ink-dim); font-size: 11px; }
#music-list .track span { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ritual: one big next-step button (+ cancel) while choosing a flame or a place */
.ritual-ui { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); display: flex; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; z-index: 4; }
body.choose-flame:not(.film) .ritual-ui, body.choose-slot:not(.film) .ritual-ui { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#act-next { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold);
  background: radial-gradient(circle, rgba(255, 170, 80, .28), rgba(24, 20, 16, .55) 70%); border: 1px solid rgba(255, 210, 150, .45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: breathe 2.4s ease-in-out infinite; }
#act-next svg { width: 34px; height: 34px; }
#act-next .i-place, body.choose-slot #act-next .i-flame { display: none; }
body.choose-slot #act-next .i-place { display: block; }
#act-cancel { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* the chapel veil, also with a taper in hand (same look as the cancel button; gold while worn) */
#act-veil { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#act-veil svg { width: 22px; height: 22px; }
/* sit with the lit candle (a vigil on a chair): only while a lit taper is in hand */
#act-sit { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; color: var(--gold);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#act-sit svg { width: 23px; height: 23px; }
body.choose-slot #act-sit { display: flex; }
body.veiled #act-veil { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 214, 140, .55)); }
/* rings become buttons (44 px touch target) while choosing */
body.tappable .mark.on { pointer-events: auto; cursor: pointer; }
body.tappable .mark.on::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }

/* name: Church (places such as the Cathedral live under it) */
.wordmark { margin: 0 0 2px; font: 500 44px/1 var(--serif); letter-spacing: 3px; color: #fff3dc; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 190, 110, 0.35); }
.place { margin: 0 0 34px; color: #f0dcb8; font: 400 13px var(--sans); letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.endcard { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; opacity: 0; z-index: 6;
  background: radial-gradient(circle, rgba(6, 4, 2, 0.55), rgba(6, 4, 2, 0.15) 65%); }
.endcard b { font: 500 52px/1 var(--serif); letter-spacing: 4px; color: #fff3dc; text-shadow: 0 0 30px rgba(255, 190, 110, 0.5); }
.endcard span { color: #f0dcb8; font: 400 15px var(--sans); letter-spacing: 1px; }

/* about + credits */
button.brand { border: 0; cursor: pointer; color: inherit; font: inherit; }
dialog.sheet h2 small { font: 400 12px var(--sans, system-ui); color: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; }
.about { padding: 0 18px 18px; max-height: calc(70vh - 60px); overflow: auto; font-size: 13.5px; line-height: 1.5; }
.about p { margin: 0 0 10px; }
.about .note { color: var(--ink-dim); font-size: 12.5px; }
/* the offering: a real-looking votive candle (ruby glass, gold rims, a living flame) among the line icons — the one
   object in colour, so it is found at once and reads as an offering, not a shop */
.tools .offer { padding: 0 6px; }
.tools .offer svg.votive { width: 32px; height: 32px; overflow: visible; stroke: none; fill: none; filter: drop-shadow(0 0 6px rgba(255, 170, 80, .35)); }   /* (no inherited line-icon stroke on the drawing) */
/* the offering sheet: small, quiet, centred between the bars; a candle, two lines, one golden button, the trust line */
dialog.offer-sheet { width: min(316px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto; text-align: center; padding: 8px 22px 22px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 190, 110, .16), rgba(255, 190, 110, 0) 60%), rgba(20, 15, 11, .9);
  border: 1px solid rgba(231, 181, 106, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 180, .12); }
dialog.offer-sheet .close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-dim); font-size: 14px; }
.offer-hero { position: relative; width: 68px; height: 68px; margin: 4px auto 0; }
.offer-hero::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 120, .32), rgba(255, 196, 120, 0) 65%); }
.offer-hero svg { position: relative; width: 68px; height: 68px; overflow: visible; stroke: none; fill: none; }
dialog.offer-sheet h2 { justify-content: center; margin: 2px 0 6px; font: 500 22px/1.25 var(--serif); letter-spacing: .02em; color: #f6e6c4; }
.offer-sheet:lang(ja) .offer-thanks { word-break: normal; line-break: strict; }   /* (Japanese has no spaces: keep-all would never wrap) */
.offer-thanks { margin: 0 -10px 16px; font: 400 14px/1.55 var(--serif); color: rgba(243, 231, 207, .78); word-break: keep-all; }
.offer-go { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; height: 50px; border-radius: 999px; overflow: hidden; text-decoration: none;
  background: linear-gradient(180deg, #f6d595 0%, #e2ab5a 55%, #c98a3c 100%); color: #2a1a0c; font: 600 16px var(--sans);
  box-shadow: 0 8px 22px rgba(214, 150, 70, .35), inset 0 1px 0 rgba(255, 248, 225, .7), inset 0 -1px 0 rgba(120, 70, 20, .35); }
.offer-go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); animation: offerShine 4.5s ease-in-out 1.2s infinite; }
@keyframes offerShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.offer-go:active { transform: scale(.98); }
.offer-sheet.kakao .offer-go { background: #fee500; color: #191600; box-shadow: 0 8px 22px rgba(254, 229, 0, .22), inset 0 -1px 0 rgba(0, 0, 0, .12); }   /* KakaoPay's own yellow (devices in Korea) */
.offer-alt { display: block; margin: 12px 0 0; font-size: 13px; color: rgba(243, 231, 207, .72); text-decoration: none; }
.offer-alt:hover { color: var(--ink); }
.offer-go svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-go span { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
/* the QR on a cream card (shown on phones too: it reads as a real, checkable payment link) */
.offer-qr { margin: 0 auto 16px; width: 172px; padding: 10px 10px 7px; border-radius: 16px; background: #f3e7cf; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.offer-qr svg { display: block; width: 152px; height: 152px; border-radius: 8px; stroke: none; }
.offer-qr small { display: block; margin-top: 5px; font-size: 9.5px; white-space: nowrap; color: #6a5236; }
.offer-trust { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 14px 0 0; font-size: 11.5px; color: rgba(243, 231, 207, .62); word-break: keep-all; }
.offer-trust svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.offer-use { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: rgba(243, 231, 207, .45); word-break: keep-all; }
.about h3 { margin: 16px 0 4px; font: 500 11px var(--sans, system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.about ul { list-style: none; margin: 0; padding: 0; }
.about li { padding: 6px 0; border-top: 1px solid rgba(243, 231, 207, .07); }
.about li a, .about li b { display: block; color: var(--ink); font-weight: 400; text-decoration: none; }
.about li a:hover { text-decoration: underline; }
.about li small { display: block; color: var(--ink-dim); font-size: 11.5px; }
body.film #btn-people { display: none; }
.close:focus:not(:focus-visible) { outline: none; }

/* gestures: peace during the Agnus Dei, rosary, candle intentions */
#btn-pray .i-peace { display: none; }
body.peace-time #btn-pray .i-pray { display: none; }
body.peace-time #btn-pray .i-peace { display: block; }
body.peace-time #btn-pray { animation: peacepulse 1.8s ease-in-out infinite; }
@keyframes peacepulse { 50% { background: rgba(255, 200, 120, .22); box-shadow: 0 0 18px rgba(255, 190, 110, .45); } }
body.rosary #btn-rosary { background: rgba(255, 200, 120, .2); }
body.rosary #btn-pray, body.rosary #btn-sit, body.rosary #btn-again { opacity: .35; }
.rosary-ui { position: fixed; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 74px); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
body.rosary .rosary-ui { display: flex; }
.rosary-ui .beads, .rosary-ui .decades { display: flex; gap: 7px; }
.rosary-ui .beads i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 231, 207, .18); transition: background .25s, box-shadow .25s; }
.rosary-ui .beads i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 170, 80, .8); }
.rosary-ui .decades i { width: 5px; height: 5px; border-radius: 50%; background: rgba(243, 231, 207, .18); }
.rosary-ui .decades i.on { background: var(--gold); }
#bead { width: 76px; height: 76px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); color: var(--gold); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#bead svg { width: 22px; height: 22px; }
#bead:active { transform: scale(.94); }
.intent { position: fixed; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 74px); transform: translate(-50%, 10px); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; z-index: 3; }
body.intent-open .intent { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.intent button { width: 48px; height: 42px; border-radius: 999px; color: var(--gold); }
.intent svg { width: 20px; height: 20px; }
#intents i { position: fixed; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; color: #ffd9a0; opacity: 0; transition: opacity .6s; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255, 170, 80, .9)); }
#intents i.on { opacity: .9; }
#intents svg { width: 16px; height: 16px; display: block; }
body.film .rosary-ui, body.film .intent { display: none; }

/* confessional: a candle-lit page over the lattice; the words rise as light */
.confess { position: fixed; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 64px)); transform: translate(-50%, -8px); width: min(420px, calc(100vw - 32px)); padding: 14px 14px 10px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(40, 26, 14, .78), rgba(24, 15, 8, .82)); border: 1px solid rgba(255, 210, 140, .28); box-shadow: 0 10px 40px rgba(0, 0, 0, .5), inset 0 0 40px rgba(255, 170, 80, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .6s, transform .6s; z-index: 6; }
body.confessing .confess { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.confess .quill { position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; color: var(--gold); opacity: .8; }
.confess textarea { display: block; width: 100%; box-sizing: border-box; min-height: 104px; padding: 2px 6px 6px 30px; border: 0; outline: none; resize: none; background:
  repeating-linear-gradient(180deg, transparent 0 27px, rgba(255, 210, 140, .14) 27px 28px); color: #fbe9c8; font: 400 17px/28px "Apple SD Gothic Neo", "Noto Serif KR", Georgia, serif; caret-color: #ffc96b; }
.confess-btns { display: flex; justify-content: space-between; margin-top: 6px; }
.confess-btns button { width: 46px; height: 40px; border-radius: 999px; color: var(--ink-dim); }
#confess-send { width: 64px; color: #ffd27a; background: rgba(255, 200, 120, .16); box-shadow: 0 0 18px rgba(255, 190, 110, .25); }
body.confessing .actions, body.confessing .hud, body.ascending .actions, body.ascending .hud, body.ascending .toasts { opacity: 0 !important; pointer-events: none !important; }

/* uniform: a cap-off button appears only while wearing it */
#btn-unform { display: none; }
body.uniformed #btn-unform { display: flex; color: #b7c28e; }
#btn-cheer { display: none; }
body.fanned #btn-cheer { display: flex; color: #8fb8ff; }
body.fanned #btn-cheer svg .ts { fill: rgba(40, 110, 230, .35); }
#btn-share { display: none; }
body.pepped #btn-share { display: flex; color: #ffb3c8; }
#btn-share svg .st { stroke-width: 2.6; stroke: #c98a4a; } #btn-share svg .hh { fill: rgba(255, 120, 160, .55); }
body.veiled #btn-veil { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 214, 140, .55)); }

/* touch joystick: floats where the left thumb lands, rests faintly bottom-left */
.stick { --x: 92px; --y: calc(100dvh - 210px); position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; display: none; }
body.touch.in:not(.film):not(.confessing):not(.ascending):not(.rosary) .stick { display: block; }
.stick .base { position: absolute; left: var(--x); top: var(--y); width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 200, .06) 0 55%, rgba(255, 235, 200, .12) 56% 100%); border: 1.5px solid rgba(255, 225, 180, .28);
  opacity: 0; transition: opacity .6s .15s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.stick.on .base { opacity: 1; transition: opacity .12s; }
/* hidden while idle: shown under the thumb while steering, and for a few seconds when play starts as a hint (breathing) */
body.stick-intro .stick:not(.on) .base { opacity: .55; animation: stickhint 1.6s ease-in-out infinite; }
@keyframes stickhint { 50% { opacity: .25; transform: scale(.94); } }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 244, 224, .95), rgba(255, 212, 150, .75)); box-shadow: 0 0 18px rgba(255, 190, 110, .55); }
/* first-visit control hints (pictures only) */
.hint { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .8s; }
body.hinting .hint { opacity: 1; }
.hint-pc { position: absolute; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 78px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 18px; background: rgba(20, 15, 10, .55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.touch .hint-pc { display: none; }
body:not(.touch) .hint-touch { display: none; }
.hint .keys { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); gap: 4px; }
.hint .keys b, .hint .key b { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 225, 180, .45); background: rgba(255, 240, 220, .08); color: #fbe9c8; box-shadow: 0 2px 0 rgba(255, 225, 180, .25); animation: keypulse 2.4s ease-in-out infinite; }
.hint .keys b:nth-of-type(2) { animation-delay: .3s; } .hint .keys b:nth-of-type(3) { animation-delay: .6s; } .hint .keys b:nth-of-type(4) { animation-delay: .9s; }
.hint .key.wide b { width: 52px; }
.hint svg { width: 18px; height: 18px; }
.hint .plus { color: var(--ink-dim); }
.hint .sep { width: 1px; height: 46px; background: var(--line); margin: 0 4px; }
.hint .mouse svg { width: 40px; height: 40px; color: #fbe9c8; }
.hint .mouse .drag { animation: dragx 1.6s ease-in-out infinite; }
@keyframes keypulse { 50% { background: rgba(255, 210, 140, .28); } }
@keyframes dragx { 50% { transform: translateX(1.5px); } }
.ghost-stick { position: absolute; left: 92px; top: calc(100dvh - 210px); width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 1.5px dashed rgba(255, 225, 180, .6); }
.ghost-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 230, 190, .75); box-shadow: 0 0 20px rgba(255, 190, 110, .7); animation: ghostmove 2.2s ease-in-out infinite; }
@keyframes ghostmove { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, -30px); } 50% { transform: translate(30px, 0); } 75% { transform: translate(0, 0); } }
.ghost-swipe { position: absolute; right: 60px; top: 48%; color: #fbe9c8; animation: swipe 2.2s ease-in-out infinite; }
.ghost-swipe svg { width: 56px; height: 56px; filter: drop-shadow(0 0 8px rgba(255, 190, 110, .6)); }
@keyframes swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-36px); } }
canvas#c, .stick { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* hand my candle over: a third round button beside "place", only when someone without a flame is near */
#act-give { display: none; width: 58px; height: 58px; border-radius: 50%; align-items: center; justify-content: center; color: #ffd27a;
  background: rgba(40, 26, 14, .62); border: 1px solid rgba(255, 210, 140, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 22px rgba(255, 180, 90, .3); }
#act-give svg { width: 30px; height: 30px; }
body.choose-slot.can-give #act-give { display: flex; animation: givepulse 2.2s ease-in-out infinite; }
@keyframes givepulse { 50% { box-shadow: 0 0 34px rgba(255, 190, 100, .65); } }
/* grace: a halo-off button while it shines */
#btn-ungrace { display: none; }
body.graced #btn-ungrace { display: flex; color: #ffd889; }

/* full-screen rosary */
.rosary-ui { display: none !important; }
.rosaryview { position: fixed; inset: 0; z-index: 9; display: none; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; background: radial-gradient(120% 80% at 40% 55%, #2c1d10 0%, #120d0a 55%, #06070a 100%); }
.rosaryview.on { display: block; animation: rvin .6s ease both; }
@keyframes rvin { from { opacity: 0; } }
#rv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; }
.rv-top { position: absolute; left: 0; right: 0; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right)); }
.rv-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255, 240, 220, .08); border: 1px solid rgba(255, 225, 180, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rv-btn.gold { color: #ffd27a; background: rgba(255, 200, 120, .14); box-shadow: 0 0 18px rgba(255, 190, 110, .25); }
/* one progress pill: five decade beads + today's Hail Marys */
.rv-prog { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: 999px; background: rgba(255, 240, 220, .06); border: 1px solid rgba(255, 225, 180, .16); color: #ffd88a; pointer-events: none; }
.rv-prog b { font: 600 26px/1 Georgia, serif; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; text-shadow: 0 0 16px rgba(255, 180, 90, .45); transition: transform .15s; }
.rv-prog b.tick { transform: scale(1.12); }
.rv-dec { display: flex; gap: 7px; }
.rv-dec i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 230, 190, .18); }
.rv-dec i.on { background: #ffd27a; box-shadow: 0 0 8px rgba(255, 190, 100, .8); }
@keyframes medalin { from { transform: scale(.2); opacity: 0; } }
@keyframes award { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 18% { transform: scale(1.12) rotate(4deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 78% { transform: scale(1); opacity: 1; } 100% { transform: translate(38vw, 40vh) scale(.25); opacity: 0; } }
@keyframes rays { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.rv-hint { position: absolute; left: 50%; top: 52%; width: 0; height: 0; color: #fbe9c8; opacity: 0; pointer-events: none; transform: rotate(var(--a, 90deg)); }
/* a hand that takes the cord at the bead and draws it along (the way to drag), with a fading trail */
.rv-hint svg { position: absolute; left: -10px; top: -6px; width: 60px; height: 60px; animation: rvhand 1.8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 190, 110, .7)); }
.rv-hint::before { content: ''; position: absolute; left: 0; top: -2px; width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 220, 160, .0), rgba(255, 220, 160, .7)); animation: rvtrail 1.8s ease-in-out infinite; transform-origin: 0 50%; }
.rosaryview.rvhint .rv-hint { animation: rvdrag 1.8s ease-in-out infinite; }
@keyframes rvdrag { 0% { translate: 0 0; } 60%, 100% { translate: 0 0; } }
@keyframes rvtrail { 0% { transform: scaleX(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: scaleX(1); opacity: .9; } 100% { transform: scaleX(1); opacity: 0; } }
.rosaryview.rvhint .rv-hint { opacity: 1; transition: opacity .6s; }
@keyframes tapdown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
dialog.keep { width: min(440px, calc(100vw - 24px)); max-height: 92vh; z-index: 10; }
dialog.keep img { display: block; width: calc(100% - 24px); margin: 0 12px; border-radius: 14px; aspect-ratio: 1; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.keep-btns { display: flex; gap: 10px; margin: 14px 12px; }
.keep-btns .solid { flex: 1; margin: 0; }
#keep-share, #shot-share { color: #ffd27a; background: rgba(255, 200, 120, .18); }
/* photo: the square card fits short screens too (header + thumbnails + buttons ≈ 200 px) */
dialog.shot img#shot-img { width: min(calc(100% - 24px), calc(92vh - 210px)); margin: 0 auto; }
#shot-img.dev { animation: develop 1.3s cubic-bezier(.2, .7, .2, 1); }
@keyframes develop { from { filter: brightness(2.3) saturate(.25) blur(7px); opacity: .35; } to { filter: none; opacity: 1; } }
.shot-views { display: flex; gap: 10px; justify-content: center; margin: 12px 12px 0; }
.shot-views[hidden] { display: none; }
.shot-views button { width: 62px; aspect-ratio: 1; padding: 0; border-radius: 10px; border: 1.5px solid rgba(243, 231, 207, .14); overflow: hidden; background: rgba(255, 255, 255, .05); opacity: .62; transition: opacity .2s, border-color .2s, box-shadow .2s; cursor: pointer; }
.shot-views button.on { border-color: var(--gold); opacity: 1; box-shadow: 0 0 14px rgba(231, 181, 106, .45); }
.shot-views button.wait { animation: thumbwait 1s ease-in-out infinite alternate; }
.shot-views img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-views button.wait img { visibility: hidden; }
@keyframes thumbwait { from { background: rgba(255, 220, 160, .04); } to { background: rgba(255, 220, 160, .16); } }
#flash { position: fixed; inset: 0; background: #fff6e4; opacity: 0; pointer-events: none; z-index: 40; }
#flash.on { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: .85; } 100% { opacity: 0; } }

/* holding a taper at a stand: a hand-ring on the exact place to touch (fills while it lights by itself) */
.reach { position: fixed; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: none; align-items: center; justify-content: center; z-index: 3; color: #fff4dc;
  background: radial-gradient(circle, rgba(255, 210, 140, .34), rgba(255, 190, 110, .08) 55%, rgba(255, 200, 120, 0) 72%); --p: 0; }
.reach.on { display: flex; animation: reachin .35s ease both; }
@keyframes reachin { from { transform: var(--t) scale(.6); opacity: 0; } }
.reach .ring { position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(#ffd27a calc(var(--p) * 1turn), rgba(255, 230, 190, .25) 0);
  -webkit-mask: radial-gradient(circle, transparent 33px, #000 34px); mask: radial-gradient(circle, transparent 33px, #000 34px); filter: drop-shadow(0 0 10px rgba(255, 180, 90, .95)); animation: ringpulse 1.6s ease-in-out infinite; }
@keyframes ringpulse { 50% { transform: scale(1.06); } }
.reach svg { position: relative; width: 38px; height: 38px; transform: translate(9px, 16px) rotate(-12deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); animation: tap 1.2s ease-in-out infinite; }
@keyframes tap { 50% { transform: translate(9px, 10px) rotate(-12deg) scale(.92); } }
.beacon { position: fixed; left: 0; top: 0; margin: -46px 0 0 -16px; width: 32px; color: #ffd27a; display: none; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 180, 90, .9)); }
.beacon.on { display: block; animation: bob 1.4s ease-in-out infinite; }
.beacon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@keyframes bob { 50% { margin-top: -38px; } }
body.film .reach, body.film .beacon { display: none !important; }

/* time of day */
/* the time of day (user 2026-11-08): a sun half and a moon half — the one of the hour lit, the other dim */
#btn-sky { position: relative; }
#btn-sky svg { overflow: visible; }
#btn-sky .sun-h, #btn-sky .moon-h { transition: opacity .5s; }
#btn-sky .sun-h { opacity: 1; } #btn-sky .moon-h { opacity: .38; }
#btn-sky.night .sun-h { opacity: .38; } #btn-sky.night .moon-h { opacity: 1; }
#btn-sky .moon-h .st { stroke-width: 1.2; }
/* first visit: one gold ring spreads and the halves turn once (opacity/transform only) */
#btn-sky::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
#btn-sky.hinting::after { animation: skyRing 1.4s ease-out 2; }
#btn-sky.hinting svg { animation: skyTurn 1.6s cubic-bezier(.45, 0, .2, 1) .2s 1; }
@keyframes skyRing { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes skyTurn { 0% { transform: rotate(0); } 60% { transform: rotate(200deg); } 100% { transform: rotate(180deg) rotate(180deg); } }
#btn-sky.set { color: var(--gold); }
.sky { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 6; display: flex; align-items: center; gap: 4px;
  width: min(360px, calc(100vw - 32px)); height: 36px; padding: 0 3px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(22, 18, 14, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); box-sizing: border-box; }   /* (one slim line under the tool pill; main skyPlace sets left/top/width) */
.sky[hidden] { display: none; }
.sky button { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-dim); font-size: 11px; padding: 0; }
.sky button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sky-play .i-pause, .sky.lapse .sky-play .i-play { display: none; } .sky.lapse .sky-play .i-pause { display: inline; }
.sky.lapse .sky-play { color: var(--gold); }
.sky-track { position: relative; flex: 1; height: 28px; min-width: 0; touch-action: none; cursor: grab; }
.sky-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-track input { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }   /* keyboard only; touch goes to the track */
.sky > output { flex: none; width: 38px; text-align: center; font: 500 11px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-dim); pointer-events: none; }
body.film .sky { display: none; }

/* who am I (title) + people's nametags: name + a 4-digit number unique in the room, in their robe colour */
.who { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 7px 8px 7px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 30, 20, .62), rgba(14, 10, 7, .62)); border: 1px solid rgba(231, 181, 106, .32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 230, 190, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: who-in 1.1s cubic-bezier(.2, .9, .2, 1) .35s both; }
@keyframes who-in { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px); } }
.who .robe, .ntag i, .toast .robe { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c, #e9dcc4); box-shadow: 0 0 0 2px rgba(255, 236, 200, .55), 0 0 10px rgba(255, 200, 120, .55); }
.who b { font: 500 16px var(--serif); color: #fff3dc; letter-spacing: .3px; white-space: nowrap; }
.no { display: inline-flex; align-items: center; padding: 2px 7px 2px 6px; border-radius: 7px; font: 600 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px;
  color: #2a1b08; background: linear-gradient(180deg, #ffe3a6, #d9a24f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(231, 181, 106, .45); }
.no::before { content: '#'; opacity: .55; margin-right: 1px; }
.who .roll { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-dim); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
.who .roll svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.who .roll:hover { color: var(--gold); } .who .roll.spin { transform: rotate(360deg); }
.who.flip b, .who.flip .no { animation: who-flip .55s ease; }
@keyframes who-flip { 40% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } 41% { transform: translateY(6px); } }
.no.new { animation: no-glint 1.4s ease; }
@keyframes no-glint { 0% { box-shadow: 0 0 0 0 rgba(255, 220, 150, .9); } 100% { box-shadow: 0 0 0 14px rgba(255, 220, 150, 0); } }

.tags { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.ntag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(16, 12, 8, .58); border: 1px solid rgba(243, 231, 207, .18); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform-origin: 50% 100%; transition: opacity .35s; will-change: transform; }
.ntag i { width: 9px; height: 9px; }
.ntag b { font: 500 12.5px var(--serif); color: #fff3dc; }
.ntag .no { font-size: 10px; padding: 1px 5px 1px 4px; border-radius: 5px; }
.ntag::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: rgba(16, 12, 8, .58); border-right: 1px solid rgba(243, 231, 207, .18); border-bottom: 1px solid rgba(243, 231, 207, .18); }
.ntag.me { border-color: rgba(231, 181, 106, .55); box-shadow: 0 0 18px rgba(231, 181, 106, .35); }
.ntag.pop { animation: tag-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tag-pop { from { scale: .4; opacity: 0; } }
body:not(.in) .tags, body.confessing .tags, body.ascending .tags, body.film .tags { display: none; }
/* someone else's cheer / share (user 2026-11-08: everyone sees the buttons too): the same button, small, over their head
   while they do it — it rises in, beats with them, and goes */
.cta-tags { z-index: 3; }
.cta-tag { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; transition: opacity .3s; }
.cta-tag .cheer-cta { position: relative; left: auto; bottom: auto; opacity: 1; transform: none; pointer-events: none; transition: none; font-size: 15px; padding: 5px 16px 5px 6px; }
.cta-tag .cheer-cta .cc-ico { width: 32px; height: 32px; } .cta-tag .cheer-cta .cc-ico svg { width: 25px; height: 25px; }
.cta-tag.in .cheer-cta { animation: cta-tag-in .45s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes cta-tag-in { from { opacity: 0; transform: translateY(14px) scale(.6); } }
.cta-tag.out { opacity: 0; }
.toast .robe { width: 10px; height: 10px; }
.toast .no { margin-left: 2px; font-size: 10px; padding: 1px 5px; }
#people-list .no { margin-left: 6px; font-size: 10px; padding: 1px 5px; }

/* room picker (title, only while the cathedral is split into several rooms) */
.rooms { display: flex; gap: 10px; margin-top: 16px; max-width: calc(100vw - 32px); overflow-x: auto; padding: 14px 6px 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rooms::-webkit-scrollbar { display: none; }
.rooms[hidden] { display: none; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.room { position: relative; flex: none; width: clamp(70px, calc((100vw - 74px) / 4), 92px); height: 116px; border-radius: 20px; scroll-snap-align: center; overflow: visible;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px;
  background: linear-gradient(180deg, rgba(48, 34, 20, .7), rgba(12, 9, 6, .78)); border: 1px solid rgba(243, 231, 207, .14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 230, 190, .1);
  animation: room-in .9s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 90ms + .5s);
  transition: transform .35s cubic-bezier(.2, 1.3, .4, 1), border-color .3s, box-shadow .3s; }
@keyframes room-in { from { opacity: 0; transform: translateY(26px) rotateX(40deg) scale(.85); filter: blur(6px); } }
.room:hover { transform: translateY(-4px); border-color: rgba(231, 181, 106, .45); }
.room:active { transform: scale(.96); }
/* an arched window: the room's numeral inside a lancet */
.room .arch { position: absolute; top: 12px; left: 50%; width: 46px; height: 52px; margin-left: -23px; border-radius: 23px 23px 4px 4px;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 190, 110, calc(.12 + var(--glow) * .55)), rgba(60, 40, 90, .25) 70%), linear-gradient(180deg, rgba(90, 70, 140, .45), rgba(40, 25, 20, .4));
  border: 1px solid rgba(231, 181, 106, .4); display: grid; place-items: center; font: 500 18px var(--serif); color: #ffe7bf; text-shadow: 0 0 10px rgba(255, 190, 110, .9); }
.room .flames { position: absolute; top: 72px; left: 8px; right: 8px; height: 9px; display: flex; justify-content: center; gap: 2px; overflow: hidden; }
.room .flames u { width: 4px; height: 7px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 75%, #fff4cf, #ffb251 60%, rgba(255, 120, 40, 0) 100%);
  box-shadow: 0 0 6px rgba(255, 170, 80, .9); animation: flick 1.3s ease-in-out infinite; animation-delay: calc(var(--k) * -170ms); }
@keyframes flick { 50% { transform: scaleY(.78) translateY(1px); opacity: .8; } }
.room .n { display: flex; align-items: center; gap: 4px; font: 600 13px var(--sans); font-variant-numeric: tabular-nums; color: #fff1d8; }
.room .n svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.room .bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(243, 231, 207, .12); overflow: hidden; }
.room .bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); background: linear-gradient(90deg, #e7b56a, #fff0c8); }
.room.full { opacity: .45; pointer-events: none; }
.room.here::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), rgba(231, 181, 106, 0) 0deg, #ffe2a8 60deg, rgba(231, 181, 106, 0) 140deg, rgba(231, 181, 106, 0) 220deg, #ffe2a8 290deg, rgba(231, 181, 106, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 3.2s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.room.here { box-shadow: 0 0 34px rgba(231, 181, 106, .4), 0 14px 30px rgba(0, 0, 0, .5); transform: translateY(-6px); }
.room.here .arch { border-color: #ffe2a8; }
.room .burst { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 220, 150, .8); animation: burst .8s ease-out forwards; }
@keyframes burst { to { box-shadow: 0 0 0 26px rgba(255, 220, 150, 0); } }
.room.going .arch { animation: going 1s ease-in-out infinite; }
@keyframes going { 50% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { .room, .who, .room.here::before, .room .flames u { animation: none; } }
.room.nope { animation: nope .5s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes rvhand { 0% { transform: translateX(0) rotate(calc(-1 * var(--a, 90deg))); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(120px) rotate(calc(-1 * var(--a, 90deg))); opacity: 1; } 100% { transform: translateX(120px) rotate(calc(-1 * var(--a, 90deg))); opacity: 0; } }

/* a person's card: tap a real person (or yourself) → who they are, big and clear, floating over their head */
.pcard { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 12px; min-width: 168px;
  border-radius: 22px; background: linear-gradient(180deg, rgba(46, 34, 22, .82), rgba(16, 12, 9, .86)); border: 1px solid rgba(231, 181, 106, .5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(231, 181, 106, .25), inset 0 1px 0 rgba(255, 230, 190, .15);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform-origin: 50% 100%; will-change: transform; }
.pcard[hidden] { display: none; }
.pcard.in { animation: pc-in .55s cubic-bezier(.2, 1.35, .4, 1); }
@keyframes pc-in { from { opacity: 0; scale: .5; filter: blur(6px); } }
.pcard::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: rgba(16, 12, 9, .9); border-right: 1px solid rgba(231, 181, 106, .5); border-bottom: 1px solid rgba(231, 181, 106, .5); }
.pc-av { position: relative; width: 46px; height: 46px; margin-top: -38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(255, 236, 200, .35), rgba(40, 28, 16, .95) 70%); border: 2px solid #e7b56a; box-shadow: 0 0 22px rgba(231, 181, 106, .6); }
.pc-av .robe { width: 34px; height: 34px; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .35), inset 0 4px 8px rgba(255, 255, 255, .35), 0 0 0 2px rgba(255, 236, 200, .7); }
.pc-av .pc-flame { position: absolute; top: -14px; width: 20px; height: 20px; color: #ffd27a; display: none; filter: drop-shadow(0 0 6px rgba(255, 170, 80, 1)); animation: flick 1.3s ease-in-out infinite; }
.pcard.lit .pc-flame { display: block; }
.pc-id { display: flex; align-items: center; gap: 8px; }
.pc-name { font: 500 19px var(--serif); color: #fff3dc; letter-spacing: .3px; white-space: nowrap; }
.pc-no { font-size: 14px; padding: 3px 9px 3px 8px; border-radius: 8px; }
.pcard.me .pc-av { border-color: #fff0c8; }
.pc-acts { display: flex; gap: 8px; }
.pc-acts:empty, .pc-acts button[hidden] { display: none; }
.pc-acts button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #ffe2a8; background: rgba(243, 231, 207, .1); border: 1px solid rgba(243, 231, 207, .18); transition: transform .2s, background .2s; }
.pc-acts button:hover { background: rgba(231, 181, 106, .25); } .pc-acts button:active { transform: scale(.92); }
.pc-acts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ntag.picked { border-color: #ffe2a8; box-shadow: 0 0 18px rgba(255, 210, 140, .6); }
body:not(.in) .pcard, body.confessing .pcard, body.ascending .pcard, body.rosary .pcard { display: none; }

/* the doorway: a short veil of light while the world behind the doors is swapped in */
.veil { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 244, 222, .95), rgba(255, 226, 180, .85)); }
.veil.go { animation: veil .6s ease-out; }
@keyframes veil { 0% { opacity: .95; } 100% { opacity: 0; } }

/* in-app browsers (Threads, Instagram…): a quiet hint to open the game in the real browser (… menu → browser) */
.open-ext { display: none; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; border-radius: 999px; color: #fbe9c8; text-decoration: none;
  background: rgba(22, 18, 14, .55); border: 1px solid rgba(231, 181, 106, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: who-in 1s ease .8s both; }
.open-ext svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.open-ext i { font-style: normal; opacity: .7; }
body.in-app .open-ext { display: inline-flex; }
.open-ext.nudge { animation: nudge .9s ease; } @keyframes nudge { 30% { transform: translate(8px, -8px); } 60% { transform: translate(0, 0); } }

/* in-app browsers (Threads, Instagram…) close their sheet on a downward swipe whenever the page is scrolled to the
   very top — and a fixed page always is. There the document is made 200 px taller and kept scrolled to 100 px
   (main.js), so the sheet never sees "at the top"; everything on screen is position: fixed and does not move. */
html.in-app-scroll, html.in-app-scroll body { position: static; inset: auto; height: auto; }
html.in-app-scroll body { min-height: calc(100vh + 200px); min-height: calc(100dvh + 200px); }

/* tap-to-walk hint (no stick, no keys): a finger taps the floor and a ring spreads where it lands */
.stick { display: none !important; }
.hint .tapgo, .ghost-tap { position: relative; color: #fbe9c8; }
.hint .tapgo svg { width: 40px; height: 40px; animation: tapdown 1.6s ease-in-out infinite; }
.hint .tapgo i, .ghost-tap i { position: absolute; left: 30%; top: 8%; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 220, 160, .9); animation: tapring 1.6s ease-out infinite; }
.ghost-tap { position: absolute; left: 50%; top: 62%; margin-left: -28px; }
.ghost-tap svg { width: 56px; height: 56px; filter: drop-shadow(0 0 8px rgba(255, 190, 110, .6)); animation: tapdown 1.6s ease-in-out infinite; }
@keyframes tapring { 0%, 45% { transform: scale(.3); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

/* the room I am in: a cathedral's name, centred under the top bar; tap = the list of all 50 */
.room-btn { position: fixed; left: 50%; top: calc(max(16px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px); height: 38px; padding: 0 10px 0 12px; border-radius: 999px; color: #fbe9c8; white-space: nowrap;
  background: linear-gradient(180deg, rgba(48, 34, 20, .62), rgba(16, 12, 9, .62)); border: 1px solid rgba(231, 181, 106, .38);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 190, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .8s .6s; }
body.in .room-btn { opacity: 1; }
body.confessing .room-btn, body.ascending .room-btn, body.rosary .room-btn, body.film .room-btn { opacity: 0 !important; pointer-events: none; }
.room-btn > svg { flex: none; width: 17px; height: 17px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-btn b { font: 500 14px var(--serif); overflow: hidden; text-overflow: ellipsis; }
.room-n { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(243, 231, 207, .1); font: 600 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.room-n i { width: 6px; height: 6px; border-radius: 50%; background: #7fdc8a; box-shadow: 0 0 6px rgba(127, 220, 138, .9); }
.room-n em { font-style: normal; }
.room-btn .chev { width: 14px; height: 14px; opacity: .6; }
.room-btn.swap { animation: roomswap .7s ease; }
@keyframes roomswap { 30% { transform: translateX(-50%) scale(.94); filter: brightness(1.6); } }
/* a few seconds after it appears (and after a room change) the pill folds into a small head-count chip at the top
   left, under the cross button; it opens the same list */
.room-btn { transition: opacity .8s .6s, left .7s cubic-bezier(.3, .7, .2, 1), top .7s cubic-bezier(.3, .7, .2, 1), transform .7s cubic-bezier(.3, .7, .2, 1), padding .5s, gap .5s, height .5s; }
.room-btn > svg, .room-btn b, .room-btn .chev { max-width: 260px; transition: max-width .55s ease, opacity .35s ease, margin .5s; }
.room-btn.mini { left: 16px; top: calc(max(16px, env(safe-area-inset-top)) + 50px); transform: none; gap: 0; height: 34px; padding: 0 6px; }
.room-btn.mini > svg, .room-btn.mini b, .room-btn.mini .chev { max-width: 0; opacity: 0; margin: 0; }
.room-btn.mini .room-n { padding: 3px 8px; font-size: 12.5px; background: none; }
.room-btn.mini.swap { animation: none; }

dialog.roomsheet { width: min(420px, calc(100vw - 24px)); max-height: 80vh; display: none; flex-direction: column; }
dialog.roomsheet[open] { display: flex; }
.roomsheet header { padding-bottom: 6px; }
.roomsheet .who { margin: 0; animation: none; }
.room-list { list-style: none; margin: 0; padding: 4px 10px 14px; overflow: auto; flex: 1; }
.room-list li { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 14px; cursor: pointer; transition: background .2s; }
.room-list li + li { border-top: 1px solid rgba(243, 231, 207, .06); }
.room-list li:active { background: rgba(231, 181, 106, .14); }
.room-list .num { flex: none; width: 34px; height: 40px; border-radius: 17px 17px 4px 4px; display: grid; place-items: center; font: 500 13px var(--serif); color: #ffe7bf;
  background: linear-gradient(180deg, rgba(90, 70, 140, .5), rgba(40, 25, 20, .5)); border: 1px solid rgba(231, 181, 106, .35); }
.room-list .nm { flex: 1; min-width: 0; }
.room-list .nm b { display: block; font: 500 15px/1.25 var(--serif); color: #fff3dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-list .nm small { display: block; font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.room-list .cnt { flex: none; display: flex; align-items: center; gap: 5px; font: 600 13px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.room-list .cnt i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 231, 207, .2); }
.room-list li.busy .cnt { color: #fbe9c8; } .room-list li.busy .cnt i { background: #7fdc8a; box-shadow: 0 0 6px rgba(127, 220, 138, .8); }
.room-list li.here { background: rgba(231, 181, 106, .12); box-shadow: inset 0 0 0 1px rgba(231, 181, 106, .45); }
.room-list li.here .num { border-color: #ffe2a8; box-shadow: 0 0 14px rgba(231, 181, 106, .5); }
.room-list li.full { opacity: .45; pointer-events: none; }
.roomsheet .open-ext { margin: 0 auto 14px; }


/* the great doors' marker: a glowing gold ring with a doorway icon (outward: down the steps; outside: back into the church) */
.door-mark { position: fixed; left: 0; top: 0; z-index: 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #ffe2a8;
  background: radial-gradient(circle, rgba(60, 40, 18, .7), rgba(20, 14, 8, .55)); border: 1.5px solid rgba(255, 214, 150, .85); box-shadow: 0 0 24px rgba(255, 190, 110, .55);
  opacity: 0; pointer-events: none; transition: opacity .5s; }
.door-mark.on { opacity: 1; pointer-events: auto; }
.door-mark svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.door-mark .in, .door-mark.back .out { display: none; } .door-mark.back .in { display: block; }
/* join the prayer (user 2026-11-02): over a circle I stand in; only its tap joins */
.pray-join { width: 70px; height: 70px; z-index: 3; background: radial-gradient(circle at 50% 38%, rgba(96, 66, 28, .82), rgba(26, 17, 8, .72)); border: 1.5px solid rgba(255, 220, 160, .95); box-shadow: 0 0 30px rgba(255, 196, 110, .6), inset 0 0 14px rgba(255, 210, 140, .25); transform-origin: 0 0; }
.pray-join svg { width: 40px; height: 40px; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(255, 210, 130, .7)); }
.pray-join .pj-glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .35), rgba(255, 200, 120, 0) 70%); animation: pj-breathe 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes pj-breathe { 50% { transform: scale(1.12); opacity: .6; } }
.pray-join.on svg { animation: pj-in .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pj-in { from { transform: scale(.4); opacity: 0; } }
/* (user 2026-11-04) leaving: the glow widens and dims, the medallion settles smaller, then the whole fades (0.9 s) */
.pray-join { transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.pray-join svg, .pray-join .ring { transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .9s; }
.pray-join.leave svg { transform: scale(.82); opacity: .55; }
.pray-join.leave .pj-glow { animation: pj-leave .9s ease-out forwards; }
.pray-join:not(.on) svg { transform: scale(.7); }
@keyframes pj-leave { to { transform: scale(1.6); opacity: 0; } }
/* the stair's sign (user 2026-11-04): the choir sign's gilded pill — steps with an arrow + "Upstairs"/"Downstairs" — over the
   floor's lit chevrons before the stair (or the landing upstairs); the steps climb in place, a glint runs across */
.stair-sign:not(.up) .up, .stair-sign.up .dn { display: none; }
.stair-sign { overflow: hidden; }
.stair-sign.on > svg { animation: stairClimb 2.2s ease-in-out infinite; }
.stair-sign:not(.up).on > svg { animation-name: stairDown; }
@keyframes stairClimb { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(1px, -2px); } 55% { transform: translate(1px, -2px); } }
@keyframes stairDown { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(1px, 2px); } 55% { transform: translate(1px, 2px); } }
.stair-sign::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 232, 190, .28), transparent); transform: translateX(0); opacity: 0; }
.stair-sign.on::after { animation: stairGlint 4.6s ease-in-out infinite; }
@keyframes stairGlint { 0%, 62% { transform: translateX(0); opacity: 0; } 66% { opacity: 1; } 84% { transform: translateX(420%); opacity: 0; } 100% { opacity: 0; } }
body:not(.in) .stair-sign, body.confessing .stair-sign, body.choiring .stair-sign, body.robing .stair-sign, body.soloing .stair-sign { display: none; }
.door-mark .ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 214, 150, .7); animation: enter-pulse 1.8s ease-out infinite; }
body.confessing .door-mark, body.ascending .door-mark, body:not(.in) .door-mark { display: none; }

/* room sheet: a fixed height so the list scrolls (iOS collapsed the flex list to one row) */
dialog.roomsheet[open] { height: min(80vh, 680px); height: min(80dvh, 680px); }
.room-list { min-height: 0; -webkit-overflow-scrolling: touch; }

/* sound waiting for the first touch (browser autoplay rules): the sound button glows softly */
body.sound-locked #btn-music { position: relative; color: #ffd27a; }
body.sound-locked #btn-music::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid rgba(255, 210, 140, .8); animation: enter-pulse 1.8s ease-out infinite; pointer-events: none; }
/* turn the sound on (title, from the first moment): a glass pill with a gold hairline, a speaker whose waves breathe
   outward in turn, the ask in serif and the reason small below; it settles in after the wordmark */
.sound-ask { position: absolute; left: 16px; right: 16px; margin: 0 auto; width: fit-content; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 11px 20px 11px 13px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 26, 18, .62), rgba(14, 11, 8, .7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(231, 190, 120, .38), 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 190, 110, .1);
  animation: sa-in 1.1s cubic-bezier(.2, .8, .2, 1) .5s both; pointer-events: none; }
.sound-ask .sa-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 214, 150, .28), rgba(231, 181, 106, .08) 70%); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .45); }
.sound-ask svg { width: 22px; height: 22px; fill: none; stroke: #ffe3b0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 200, 120, .55)); }
.sound-ask .sa-sp { fill: rgba(255, 227, 176, .22); }
.sound-ask .sa-w { opacity: .2; animation: sa-wave 2.2s ease-in-out infinite; }
.sound-ask .w2 { animation-delay: .22s; } .sound-ask .w3 { animation-delay: .44s; }
.sound-ask .sa-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.sound-ask b { text-wrap: balance; font: 600 15.5px/1.2 var(--serif); letter-spacing: .4px; color: #fff1d8; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.sound-ask small { text-wrap: balance; font: 400 12px/1.3 var(--sans); letter-spacing: .3px; color: rgba(243, 222, 186, .78); }
@keyframes sa-wave { 0%, 100% { opacity: .18; } 35% { opacity: 1; } 70% { opacity: .35; } }
@keyframes sa-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sound-ask, .sound-ask .sa-w { animation: none; opacity: 1; } }
@media (max-height: 560px) { .sound-ask { display: none; } }
.enter-label { margin: 22px 0 0; color: #fff1d8; font: 500 17px var(--sans); letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); animation: label-breathe 2.4s ease-in-out infinite; }

/* names hidden for now: the room sheet header keeps only its close button */
.roomsheet .who { display: none; }
.roomsheet header { justify-content: flex-end; }
dialog.shot .shot-views img { width: 100%; margin: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }

/* first visit only: the Christmas tree can be touched — a golden ripple, a tapping hand and a small arrow over the
   tree, three soft taps, then never again (localStorage inpeace.treeHint) */
.tree-hint { position: fixed; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.tree-hint.on { opacity: 1; }
.tree-hint::before { content: ''; position: absolute; left: -78px; top: -78px; width: 156px; height: 156px; border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 7, 3, .62) 0%, rgba(12, 7, 3, .38) 45%, rgba(12, 7, 3, 0) 70%); }   /* (a soft dark pool: the hint reads over a blaze of bulbs) */
.tree-hint .rip { position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255, 226, 168, .95);
  box-shadow: 0 0 14px rgba(255, 200, 120, .45), inset 0 0 10px rgba(255, 200, 120, .25); transform: scale(.25); opacity: 0; animation: treeRip 1.5s cubic-bezier(.2, .7, .3, 1) infinite; }
.tree-hint .rip.r2 { animation-delay: .22s; }
.tree-hint .dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 0%, #ffd890 45%, rgba(255, 190, 100, 0) 72%); animation: treeDot 1.5s ease-in-out infinite; }
.tree-hint .hand { position: absolute; left: -8px; top: -2px; width: 56px; height: 56px; fill: #fff5e2; stroke: #3a2614; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 30% 10%; animation: treeTap 1.5s ease-in-out infinite; }
.tree-hint .arrow { position: absolute; left: -16px; top: -92px; width: 32px; height: 32px; fill: none; stroke: #ffe6b4; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 8px rgba(255, 200, 120, .6)); animation: treeArrow 1.5s ease-in-out infinite; }
@keyframes treeRip { 0%, 22% { transform: scale(.25); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes treeDot { 0%, 100% { transform: scale(.8); opacity: .7; } 25% { transform: scale(1.35); opacity: 1; } }
@keyframes treeTap { 0%, 100% { transform: translate(12px, 14px) scale(1); } 22% { transform: translate(2px, 3px) scale(.9); } 34% { transform: translate(2px, 3px) scale(.9); } 60% { transform: translate(12px, 14px) scale(1); } }
@keyframes treeArrow { 0%, 100% { transform: translateY(-6px); opacity: .55; } 30% { transform: translateY(4px); opacity: 1; } }
body.confessing .tree-hint, body:not(.in) .tree-hint { display: none; }

/* my gifts (#giftshelf, user 2026-10-31): a row of jewel-box tiles at the top beside the head-count chip — each a
   picture of the gift itself (rendered from its model), the rim and aura in its rarity's colour, ×n for repeats; the
   legendary ones breathe. Tap = hold it up and rejoice. The picture of a new gift flies in on an arc of sparks. */
.giftshelf { position: fixed; z-index: 3; top: calc(max(16px, env(safe-area-inset-top)) + 46px); left: 78px; right: 58px; height: 54px; display: flex; align-items: center; gap: 8px;
  padding: 0 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.giftshelf::-webkit-scrollbar { display: none; }
body.in .giftshelf:not([hidden]) { opacity: 1; pointer-events: auto; }
body.room-full .giftshelf, body.confessing .giftshelf, body.ascending .giftshelf, body.rosary .giftshelf, body.film .giftshelf { opacity: 0 !important; pointer-events: none !important; }
.giftshelf .gift { --rare: #fff1d6; position: relative; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--rare) 34%, transparent), transparent 68%), linear-gradient(180deg, rgba(64, 44, 26, .78), rgba(16, 11, 8, .78));
  border: 1px solid color-mix(in srgb, var(--rare) 58%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 238, 205, .2), inset 0 -6px 12px rgba(0, 0, 0, .25), 0 0 12px color-mix(in srgb, var(--rare) 24%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .2s ease; }
.giftshelf .gift:active { transform: scale(.9); }
.giftshelf .gift img { position: relative; width: 38px; height: 38px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); transform: translateY(-1px); }
.giftshelf .gift .aura { position: absolute; inset: -5px; border-radius: 18px; pointer-events: none; opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--rare) 55%, transparent), transparent 70%); }
.giftshelf .gift[data-rare="2"] .aura { animation: giftaura 3.4s ease-in-out infinite; }
@keyframes giftaura { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }
.giftshelf .gift .n { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center;
  font: 700 10px/1 var(--sans); font-variant-numeric: tabular-nums; color: #2b1906; background: linear-gradient(#fff3cf, #e3b257); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.giftshelf .gift .n:empty { display: none; }
.giftshelf .gift .shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.giftshelf .gift .shine::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 249, 228, .7), transparent); }
.giftshelf .gift.arriving img { opacity: 0; }
.giftshelf .gift.pop { animation: giftpop .95s cubic-bezier(.2, .9, .3, 1.35); }
.giftshelf .gift.pop .shine::after { animation: giftshine .9s .12s ease-out; }
.giftshelf .gift.pop .aura { animation: giftflash .95s ease-out; }
.giftshelf .gift.lifted { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--rare), 0 0 18px color-mix(in srgb, var(--rare) 60%, transparent), 0 6px 16px rgba(0, 0, 0, .38); }
@keyframes giftpop { 0% { transform: scale(.35); } 45% { transform: scale(1.3); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes giftshine { to { left: 135%; } }
@keyframes giftflash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.gift-fly { position: fixed; left: 0; top: 0; z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 214, 140, .85)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); will-change: transform; }
.gift-spark { position: fixed; z-index: 6; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fffdf2 0 22%, var(--c, #ffd27a) 40%, transparent 70%); animation: giftspark .75s ease-out forwards; }
@keyframes giftspark { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(.2); } }

/* the keepsake shutter while I hold a gift up (#joy-shot, body.joy-shoot): a slowly turning gold ring round a pearl
   disc with a fine gold camera, a breathing glow and a twinkling glint; it takes the place of the action bar */
body.joying .actions { opacity: 0 !important; pointer-events: none !important; transform: translate(-50%, 24px) !important; }
.joy-shot { position: fixed; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 4; width: 78px; height: 78px; margin-left: -39px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(30px) scale(.6); cursor: pointer;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.35); -webkit-tap-highlight-color: transparent; }
body.joy-shoot .joy-shot { opacity: 1; pointer-events: auto; transform: none; }
.joy-shot:active .core { transform: scale(.88); }
.joy-shot .halo { position: absolute; inset: -22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 140, .5), rgba(255, 190, 100, .14) 45%, transparent 70%); animation: shothalo 2.6s ease-in-out infinite; }
.joy-shot .ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #fff7dc, #e8b65a, #8f611f, #f1cf7e, #fffbe9, #d9a24a, #8f611f, #f6d98f, #fff7dc);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
  box-shadow: 0 0 14px rgba(255, 200, 110, .55); animation: shotring 9s linear infinite; }
.joy-shot .core { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s ease;
  background: radial-gradient(circle at 34% 28%, #ffffff, #fbf1dc 38%, #edd7a6 72%, #c9a265);
  box-shadow: inset 0 -3px 8px rgba(150, 100, 30, .35), inset 0 2px 3px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .45); }
.joy-shot .core svg { width: 30px; height: 30px; fill: none; stroke: #7a5214; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.joy-shot .core svg .iris { fill: #7a5214; stroke: none; opacity: .85; }
.joy-shot .core svg .dot { fill: #b5802a; stroke: none; }
.joy-shot .glint { position: absolute; right: 2px; top: 0; width: 16px; height: 16px; fill: #fffaf0; stroke: none; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 230, 170, .95)); animation: shotglint 2.2s ease-in-out infinite; }
@keyframes shothalo { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes shotring { to { transform: rotate(360deg); } }
@keyframes shotglint { 0%, 55%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 70% { opacity: 1; transform: scale(1) rotate(45deg); } 85% { opacity: 0; transform: scale(.5) rotate(90deg); } }

/* ---------------------------------------------------------------- choir game (choirgame.js) */
/* the hint over the choir (first visits, until it is tapped): a gilded medallion of the chorister, ripples, a tapping hand */
.choir-hint { position: fixed; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.choir-hint.on { opacity: 1; }
.choir-hint::before { content: ''; position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 7, 3, .6) 0%, rgba(12, 7, 3, .32) 48%, rgba(12, 7, 3, 0) 70%); }
.choir-hint .rip { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(255, 226, 168, .9);
  box-shadow: 0 0 14px rgba(255, 200, 120, .45); transform: scale(.4); opacity: 0; animation: treeRip 1.8s cubic-bezier(.2, .7, .3, 1) infinite; }
.choir-hint .rip.r2 { animation-delay: .3s; }
.choir-hint .medal { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #3a2a1a, #120c08 70%); box-shadow: 0 0 0 2px #e9b95e, 0 0 0 4px rgba(60, 36, 10, .9), 0 0 0 5px rgba(255, 216, 140, .55), 0 6px 18px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 190, 90, .5);
  animation: cgBob 1.8s ease-in-out infinite; }
.choir-hint .medal svg { width: 50px; height: 50px; stroke: none; }
.choir-hint .fly { position: absolute; left: 14px; top: -46px; width: 18px; height: 18px; fill: #ffe7a8; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 200, 110, .9)); animation: cgFly 1.8s ease-out infinite; }
.choir-hint .hand { position: absolute; left: 6px; top: 8px; width: 50px; height: 50px; fill: #fff5e2; stroke: #3a2614; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 30% 10%; animation: treeTap 1.8s ease-in-out infinite; }
@keyframes cgBob { 0%, 100% { transform: translateY(0) scale(1); } 22% { transform: translateY(1px) scale(.94); } 50% { transform: translateY(-3px) scale(1.03); } }
@keyframes cgFly { 0% { transform: translate(-10px, 22px) scale(.4) rotate(-20deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -18px) scale(1) rotate(15deg); opacity: 0; } }
body:not(.in) .choir-hint, body.confessing .choir-hint, body.choiring .choir-hint { display: none; }

/* the game: the lanes are one canvas over the scene; everything else steps aside */
.cg { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 6; display: none; touch-action: none; }
.cg.on { display: block; }
.cg-exit { position: fixed; z-index: 7; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 44px; height: 44px; border-radius: 50%;
  display: none; place-items: center; background: rgba(14, 11, 9, .55); border: 1px solid rgba(243, 231, 207, .22); color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cg-exit svg { width: 20px; height: 20px; }
body.choiring .cg-exit { display: grid; }
body.choiring > :is(.hud, .actions, .ritual-ui, .room-btn, .giftshelf, .toasts, #marks, #reach, #beacon, #intents, .tree-hint, .door-mark, .tags, .pcard, .stick, .hint, .joy-shot, #pill-stick) { opacity: 0 !important; pointer-events: none !important; }

/* the chooser: a dark glass card, two great medallions (baton / folder), three carols below */
dialog.choirpick { width: min(360px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 26px 18px 18px; text-align: center; overflow: visible;
  background: radial-gradient(120% 80% at 50% 0%, rgba(70, 46, 18, .55), rgba(16, 12, 9, .92) 60%), rgba(16, 12, 9, .9);
  border: 1px solid rgba(233, 185, 94, .5); box-shadow: inset 0 0 0 3px rgba(16, 12, 9, .9), inset 0 0 0 4px rgba(233, 185, 94, .28), 0 24px 70px rgba(0, 0, 0, .6); }
dialog.choirpick[open] { animation: cgIn .42s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cgIn { from { transform: translateY(18px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.choirpick .close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-dim); font-size: 14px; }
.cp-roles { display: flex; justify-content: center; gap: 18px; margin: 6px 0 20px; }
.cp-role { position: relative; width: 132px; height: 132px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; border: 0;
  background: radial-gradient(circle at 50% 38%, #3a2716 0%, #170f09 62%, #0b0805 100%);
  box-shadow: 0 0 0 2px #e9b95e, 0 0 0 5px #24170b, 0 0 0 6.5px rgba(255, 216, 140, .65), 0 14px 30px rgba(0, 0, 0, .6), 0 0 36px rgba(255, 186, 90, .28);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s; animation: cpBreath 3.2s ease-in-out infinite; }
.cp-role:nth-child(2) { animation-delay: 1.6s; }
.cp-role:hover { transform: translateY(-3px) scale(1.04); }
.cp-role:active { transform: scale(.94); }
.cp-role .cp-ic { width: 112px; height: 112px; stroke: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.cp-role .cp-ring { position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 236, 190, .95) 80%, transparent 90% 100%);
  -webkit-mask: radial-gradient(circle, transparent 64px, #000 65px, #000 67px, transparent 68px); mask: radial-gradient(circle, transparent 64px, #000 65px, #000 67px, transparent 68px);
  animation: cpSpin 3.6s linear infinite; }
.cp-role:nth-child(2) .cp-ring { animation-direction: reverse; }
@keyframes cpSpin { to { transform: rotate(360deg); } }
@keyframes cpBreath { 0%, 100% { box-shadow: 0 0 0 2px #e9b95e, 0 0 0 5px #24170b, 0 0 0 6.5px rgba(255, 216, 140, .65), 0 14px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 186, 90, .22); }
  50% { box-shadow: 0 0 0 2px #ffd88a, 0 0 0 5px #24170b, 0 0 0 6.5px rgba(255, 226, 160, .9), 0 14px 30px rgba(0, 0, 0, .6), 0 0 54px rgba(255, 196, 100, .5); } }
.cp-pips, .cs-stars { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); display: flex; gap: 4px; }
.cp-pips i, .cs-stars i, .cs-lv i { width: 9px; height: 9px; background: rgba(243, 231, 207, .18); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.cp-pips i.on, .cs-stars i.on { background: #ffd56a; filter: drop-shadow(0 0 3px rgba(255, 200, 100, .9)); }
.cg-songs { display: flex; justify-content: center; gap: 16px; margin: 14px 0 10px; }
.cg-songs button { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2c1f12, #0e0a07 72%); box-shadow: 0 0 0 1.5px rgba(233, 185, 94, .45), 0 6px 14px rgba(0, 0, 0, .5); opacity: .62;
  transition: opacity .2s, transform .2s, box-shadow .3s; }
.cg-songs button.sel { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 2px #ffd27a, 0 0 0 4px rgba(36, 23, 11, .95), 0 0 0 5px rgba(255, 216, 140, .6), 0 0 26px rgba(255, 190, 90, .55), 0 6px 14px rgba(0, 0, 0, .5); }
.cg-songs .cs-ic { width: 52px; height: 52px; stroke: none; }
.cg-songs .cs-lv { position: absolute; top: -6px; right: -6px; display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(12, 9, 6, .85); }
.cg-songs .cs-lv i { width: 6px; height: 6px; border-radius: 50%; clip-path: none; }
.cg-songs .cs-lv i.on { background: #ff8f6a; box-shadow: 0 0 4px rgba(255, 120, 80, .9); }
.cg-songs .cs-stars { bottom: -14px; gap: 2px; }
.cg-songs .cs-stars i { width: 8px; height: 8px; }

/* the results: stars land one by one, the score counts in gold, the four marks, then again / photo / leave */
dialog.cgres { width: min(360px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 18px 18px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(90, 58, 20, .6), rgba(16, 12, 9, .94) 62%), rgba(16, 12, 9, .92);
  border: 1px solid rgba(233, 185, 94, .55); box-shadow: inset 0 0 0 3px rgba(16, 12, 9, .9), inset 0 0 0 4px rgba(233, 185, 94, .3), 0 24px 70px rgba(0, 0, 0, .6); }
dialog.cgres::backdrop { background: rgba(0, 0, 0, .2); }
dialog.cgres[open] { animation: cgIn .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.cr-head { position: relative; width: 92px; height: 92px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #3a2716, #120c07 70%); box-shadow: 0 0 0 2px #e9b95e, 0 0 0 4px #24170b, 0 0 0 5px rgba(255, 216, 140, .6), 0 0 30px rgba(255, 186, 90, .35); }
.cr-head .cr-ic { width: 80px; height: 80px; stroke: none; }
.cr-crown { position: absolute; top: -26px; left: 50%; width: 46px; height: 46px; margin-left: -23px; stroke: none; opacity: 0; transform: translateY(8px) scale(.6); filter: drop-shadow(0 0 10px rgba(255, 200, 100, .9)); }
dialog.cgres.full[open] .cr-crown { animation: crCrown .6s 1.3s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes crCrown { to { opacity: 1; transform: none; } }
.cr-stars { display: flex; justify-content: center; gap: 10px; margin: 10px 0 2px; }
.cr-stars i { width: 40px; height: 40px; display: grid; place-items: center; }
.cr-stars i:nth-child(2) { width: 50px; height: 50px; margin-top: -8px; }
.cr-stars svg { width: 100%; height: 100%; fill: rgba(243, 231, 207, .14); stroke: none; }
dialog.cgres[open] .cr-stars i.on svg { fill: url(#cGold); filter: drop-shadow(0 0 8px rgba(255, 196, 90, .9)); animation: crStar .55s var(--d, .3s) cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes crStar { from { transform: scale(2.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cr-score { font: 600 40px/1.1 var(--serif); letter-spacing: .02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px;
  background: linear-gradient(#fffaf0, #ffd36e 55%, #c4852a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255, 170, 60, .45)); }
dialog.cgres.best .cr-score::after { content: '✦'; display: inline-block; margin-left: 6px; font-size: 22px; vertical-align: super; color: #ffe39a; -webkit-text-fill-color: #ffe39a; animation: cgBob 1.4s ease-in-out infinite; }
.cr-stats { display: flex; justify-content: center; gap: 22px; margin: 4px 0 10px; color: var(--ink); font: 500 18px var(--serif); font-variant-numeric: tabular-nums; }
.cr-stats span { display: inline-flex; align-items: center; gap: 6px; }
.cr-stats svg { width: 18px; height: 18px; color: var(--gold); }
.cr-stats small { font-size: 12px; color: var(--ink-dim); margin-left: -3px; }
.cr-marks { display: flex; justify-content: center; gap: 14px; padding: 8px 0 4px; border-top: 1px solid rgba(233, 185, 94, .2); border-bottom: 1px solid rgba(233, 185, 94, .2); }
.cr-marks span { display: inline-flex; align-items: center; gap: 4px; font: 500 15px var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.cr-marks svg { width: 16px; height: 16px; stroke: none; }
.cr-perfect svg { fill: #ffd56a; filter: drop-shadow(0 0 3px rgba(255, 200, 100, .9)); } .cr-great svg { fill: #dfe8f8; } .cr-good svg { fill: #d49a62; } .cr-miss svg { fill: #6f6c70; }
dialog.cgres .cg-songs { margin: 14px 0 22px; }
dialog.cgres .cg-songs button { width: 52px; height: 52px; }
dialog.cgres .cg-songs .cs-ic { width: 40px; height: 40px; }
.cr-btns { display: flex; justify-content: center; gap: 14px; }
.cr-btns button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 231, 207, .08); border: 1px solid rgba(243, 231, 207, .22); color: var(--ink); }
.cr-btns button svg { width: 24px; height: 24px; }
.cr-btns button.gold { width: 64px; height: 64px; margin-top: -5px; background: radial-gradient(circle at 50% 30%, #ffe7a6, #d79a35 70%, #9c661a); color: #2a1a08; border: 0; box-shadow: 0 8px 22px rgba(255, 180, 70, .35); }
.cr-btns button.gold svg { width: 28px; height: 28px; stroke-width: 2.2; }
/* loading the carol (choir game): the role medallion, a gold ring filling with the download; small at the top while I
   walk in, large in the middle when I am in place before the music; a flash when ready */
.cgload { position: fixed; z-index: 7; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 4px); width: 64px; height: 64px; margin-left: -32px; border-radius: 50%;
  display: none; place-items: center; pointer-events: none; --p: 0;
  background: radial-gradient(circle at 50% 38%, #3a2716, #120c07 70%); box-shadow: 0 0 0 3px #24170b, 0 10px 26px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 186, 90, .35);
  transition: top .6s cubic-bezier(.2, .9, .3, 1), transform .6s cubic-bezier(.2, .9, .3, 1), opacity .4s; }
.cgload.on { display: grid; animation: clIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.cgload.wait { top: 15%; transform: scale(1.7); }
.cgload .cl-ic { width: 54px; height: 54px; stroke: none; animation: cgBob 2.2s ease-in-out infinite; }
.cgload .cl-ring { position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(#fff3c8 0deg, #f0c35a calc(var(--p) * 360deg), rgba(243, 231, 207, .14) calc(var(--p) * 360deg) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 31px, #000 32px); mask: radial-gradient(circle, transparent 31px, #000 32px); transition: background .2s; }
.cgload .cl-glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 110, .45), rgba(255, 200, 110, 0) 70%); animation: clGlow 1.6s ease-in-out infinite; }
.cgload .cl-song { position: absolute; right: -10px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2c1f12, #0e0a07 72%); box-shadow: 0 0 0 1.5px #e9b95e; }
.cgload .cl-song svg { width: 24px; height: 24px; stroke: none; }
.cgload.done { animation: clDone .45s ease-out both; }
@keyframes clIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; } }
@keyframes clGlow { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes clDone { 0% { filter: brightness(1); } 40% { filter: brightness(2.2) drop-shadow(0 0 18px #ffd27a); } 100% { opacity: 0; transform: scale(1.25); } }
body.choiring .hud { transition: opacity .3s 0s; }   /* (its own fade waits 1.5 s: the loading medallion would sit on it) */
/* the choir game is full: a card at the top, in the visitor's language (the only words besides the offering sheet) */
.cgfull { position: fixed; z-index: 20; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 56px); width: min(340px, calc(100vw - 32px)); transform: translate(-50%, -12px);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; pointer-events: none; opacity: 0;
  background: rgba(20, 15, 10, .9); border: 1px solid rgba(233, 185, 94, .5); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); transition: opacity .35s, transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.cgfull.on { opacity: 1; transform: translate(-50%, 0); }
.cgfull .cf-ic { position: relative; flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #3a2716, #120c07 70%); box-shadow: 0 0 0 1.5px #e9b95e; }
.cgfull .cf-ic > svg:first-child { width: 46px; height: 46px; stroke: none; filter: saturate(.6) brightness(.85); }
.cgfull .cf-glass { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #1a120a; color: #ffd27a; stroke-width: 1.6; animation: cfTurn 2.4s ease-in-out infinite; }
@keyframes cfTurn { 0%, 40% { transform: rotate(0); } 55%, 100% { transform: rotate(180deg); } }
.cgfull p { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--ink-dim); word-break: keep-all; }
.cgfull p b { display: block; font: 500 15px/1.35 var(--serif); color: #f6e6c4; margin-bottom: 2px; }
.cgfull:lang(ja) p { word-break: normal; line-break: strict; }
/* how many places are free (shown when someone else is in the choir game) */
.cp-role .cp-n { position: absolute; top: -4px; right: -4px; min-width: 22px; padding: 2px 7px; border-radius: 12px; font: 600 12px/1.3 var(--sans); font-variant-numeric: tabular-nums;
  color: #2a1a08; background: linear-gradient(#ffe7a6, #d79a35); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.cp-role .cp-n:empty { display: none; }
.cp-role.full { filter: grayscale(.7) brightness(.7); }
.cp-role.full .cp-n { background: #6f6c70; color: #fff; }
/* the results: flames left (a row of five), or — when the last flame went out — a blown-out candle and how far the song got */
.cr-lives { display: flex; justify-content: center; gap: 7px; margin: 2px 0 6px; }
.cr-lives i { width: 12px; height: 18px; background: rgba(243, 231, 207, .16); clip-path: path('M6 0C9 5 10.5 9 10 12.5 9.5 16 7.8 18 6 18S2.5 16 2 12.5C1.5 9 3 5 6 0Z'); }
.cr-lives i.on { background: radial-gradient(circle at 50% 70%, #fff 0, #fff2b8 25%, #ffb543 65%, #d86a1a 100%); filter: drop-shadow(0 0 5px rgba(255, 180, 80, .9)); animation: crFlick 1.6s ease-in-out infinite; }
.cr-lives i.on:nth-child(2n) { animation-delay: .4s; } .cr-lives i.on:nth-child(3n) { animation-delay: .9s; }
@keyframes crFlick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.94, 1.06); } 60% { transform: scale(1.04, .96); } }
.cr-fail { display: none; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 4px; }
dialog.cgres.failed .cr-fail { display: flex; }
dialog.cgres.failed .cr-stars, dialog.cgres.failed .cr-lives, dialog.cgres.failed .cr-crown { display: none; }
dialog.cgres.failed .cr-head { box-shadow: 0 0 0 2px #8a7a6a, 0 0 0 4px #1a120b, 0 0 0 5px rgba(160, 150, 140, .45); filter: grayscale(.55) brightness(.85); }
dialog.cgres.failed .cr-score { filter: grayscale(.6); opacity: .8; }
.cr-out { width: 44px; height: 58px; stroke: none; }
.cr-out .smoke { fill: none; stroke: rgba(220, 210, 200, .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 40; animation: crSmoke 2.4s ease-out infinite; }
.cr-out .smoke.s2 { animation-delay: .9s; }
@keyframes crSmoke { 0% { stroke-dashoffset: 40; opacity: 0; } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-6px); } }
.cr-fail span { font: 600 34px/1 var(--serif); color: #e9dccb; font-variant-numeric: tabular-nums; }
.cr-fail small { font-size: 16px; color: var(--ink-dim); margin-left: 2px; }

/* ---- the choir game's curtain (loading): crimson velvet closes over the cathedral; on it the role's medallion with a
   gold ring filling with the music, the carol's emblem and its stars, five candles, a staff with notes drifting, gold
   motes rising; ready → the ring flashes and the curtains part (all compositor animations: no main-thread cost) */
.cgcurtain { position: fixed; inset: 0; z-index: 6; display: none; pointer-events: none; overflow: hidden; --p: 0; }
.cgcurtain.on { display: block; pointer-events: auto; }
.cc-back { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 42%, #3a0c14 0%, #1a0509 55%, #070203 100%); opacity: 0; transition: opacity .5s .25s; }
.cgcurtain.on .cc-back { opacity: 1; }
.cgcurtain.open .cc-back { opacity: 0; transition: opacity .9s .15s; }
.cc-motes { position: absolute; inset: 0; opacity: 0; transition: opacity .6s .4s; }
.cgcurtain.on .cc-motes { opacity: 1; }
.cgcurtain.open .cc-motes { opacity: 0; transition: opacity .5s; }
.cc-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff6d6, rgba(255, 200, 110, 0) 70%);
  animation: ccMote var(--d) linear var(--w) infinite; }
@keyframes ccMote { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(-60vh) scale(1.2); opacity: 0; } }
.cc-drape { position: absolute; top: 0; bottom: 0; width: 51%; transition: transform .65s cubic-bezier(.55, .05, .35, 1);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .45) 100%),
    repeating-linear-gradient(90deg, #3c040d 0px, #7d0f20 14px, #b71c33 26px, #d23a4f 30px, #9a1428 38px, #5a0816 52px, #3c040d 60px);
  box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .5); }
.cc-drape.l { left: 0; transform: translateX(-102%); transform-origin: left; }
.cc-drape.r { right: 0; transform: translateX(102%); transform-origin: right; }
.cc-drape.l::after, .cc-drape.r::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; }
.cc-drape.l::after { right: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.cc-drape.r::after { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.cgcurtain.on .cc-drape { transform: none; }
.cgcurtain.open .cc-drape.l { transform: translateX(-104%) scaleX(.55); transition: transform 1.15s cubic-bezier(.6, 0, .25, 1); }
.cgcurtain.open .cc-drape.r { transform: translateX(104%) scaleX(.55); transition: transform 1.15s cubic-bezier(.6, 0, .25, 1); }
.cc-fringe { position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(180deg, #f6d27a 0, #c48a2a 5px, rgba(0, 0, 0, 0) 6px), repeating-linear-gradient(90deg, #f2c45e 0 2px, #a8701f 2px 3px, rgba(0, 0, 0, 0) 3px 5px);
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.cc-tie { position: absolute; top: 46%; width: 34px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #fff1c4, #d9a344 50%, #8a5a18); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.cc-drape.l .cc-tie { left: 10px; } .cc-drape.r .cc-tie { right: 10px; }
.cc-stage { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.85); display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0;
  transition: opacity .45s .35s, transform .7s .3s cubic-bezier(.2, 1.3, .4, 1); }
.cgcurtain.on .cc-stage { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cgcurtain.open .cc-stage { opacity: 0; transform: translate(-50%, -50%) scale(1.25); transition: opacity .35s, transform .5s ease-in; }
.cc-staff { position: absolute; left: 50%; top: 92px; width: min(560px, 120vw); height: 62px; transform: translate(-50%, -50%); overflow: visible; }
.cc-n { animation: ccNote var(--d) linear var(--w) infinite; }
@keyframes ccNote { 0% { transform: translateX(-30px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(430px); opacity: 0; } }
.cc-medal { position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #3e2a16, #150d07 70%); box-shadow: 0 0 0 3px #e9b95e, 0 0 0 7px #24170b, 0 0 0 8.5px rgba(255, 216, 140, .7), 0 22px 50px rgba(0, 0, 0, .6); }
.cc-role { width: 142px; height: 142px; stroke: none; animation: cgBob 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.cc-halo { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 110, .38), rgba(255, 170, 70, .1) 45%, rgba(255, 170, 70, 0) 68%); animation: clGlow 2.2s ease-in-out infinite; }
.cc-ring { position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(from -90deg, #fff3c8 0deg, #f0c35a calc(var(--p) * 360deg), rgba(243, 231, 207, .12) calc(var(--p) * 360deg) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 92px, #000 93px, #000 97px, transparent 98px); mask: radial-gradient(circle, transparent 92px, #000 93px, #000 97px, transparent 98px);
  filter: drop-shadow(0 0 6px rgba(255, 196, 90, .9)); }
.cc-glint { position: absolute; inset: -24px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 244, 210, .9) 86%, transparent 94%);
  -webkit-mask: radial-gradient(circle, transparent 102px, #000 103px, #000 105px, transparent 106px); mask: radial-gradient(circle, transparent 102px, #000 103px, #000 105px, transparent 106px); animation: cpSpin 2.8s linear infinite; }
.cgcurtain.ready .cc-medal { animation: ccFlash .55s ease-out; }
.cgcurtain.ready .cc-ring { filter: drop-shadow(0 0 16px #ffd27a) brightness(1.6); }
@keyframes ccFlash { 0% { box-shadow: 0 0 0 3px #e9b95e, 0 0 0 7px #24170b, 0 0 0 8.5px rgba(255, 216, 140, .7), 0 0 0 rgba(255, 220, 140, 0); } 35% { box-shadow: 0 0 0 3px #fff3c8, 0 0 0 7px #24170b, 0 0 0 8.5px #fff3c8, 0 0 90px rgba(255, 220, 140, .95); } 100% { box-shadow: 0 0 0 3px #e9b95e, 0 0 0 7px #24170b, 0 0 0 8.5px rgba(255, 216, 140, .7), 0 0 30px rgba(255, 220, 140, .4); } }
.cc-song { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2c1f12, #0e0a07 72%);
  box-shadow: 0 0 0 2px #ffd27a, 0 0 0 4px rgba(36, 23, 11, .95), 0 0 24px rgba(255, 190, 90, .5); }
.cc-song svg { width: 60px; height: 60px; stroke: none; }
.cc-lv { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 9px; background: rgba(12, 9, 6, .85); }
.cc-lv i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 231, 207, .18); }
.cc-lv i.on { background: #ff8f6a; box-shadow: 0 0 5px rgba(255, 120, 80, .9); }
.cc-lives { display: flex; gap: 10px; }
.cc-lives i { width: 14px; height: 21px; clip-path: path('M7 0C10.5 6 12.2 10.5 11.7 14.6 11.1 18.7 9.1 21 7 21S2.9 18.7 2.3 14.6C1.8 10.5 3.5 6 7 0Z');
  background: radial-gradient(circle at 50% 70%, #fff 0, #fff2b8 25%, #ffb543 65%, #d86a1a 100%); filter: drop-shadow(0 0 6px rgba(255, 180, 80, .9)); animation: crFlick 1.4s ease-in-out infinite; opacity: 0; }
.cgcurtain.on .cc-lives i { animation: crFlick 1.4s ease-in-out infinite, ccLight .4s ease-out both; }
.cgcurtain.on .cc-lives i:nth-child(1) { animation-delay: 0s, .7s; } .cgcurtain.on .cc-lives i:nth-child(2) { animation-delay: .3s, .85s; } .cgcurtain.on .cc-lives i:nth-child(3) { animation-delay: .6s, 1s; }
.cgcurtain.on .cc-lives i:nth-child(4) { animation-delay: .2s, 1.15s; } .cgcurtain.on .cc-lives i:nth-child(5) { animation-delay: .5s, 1.3s; }
@keyframes ccLight { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
/* the song carousel (7 carols): a row that scrolls sideways, snapping to each medallion */
.cg-songs { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 10px 12px 18px; margin-left: -12px; margin-right: -12px; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain; -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.cg-songs::-webkit-scrollbar { display: none; }
.cg-songs button { flex: 0 0 auto; scroll-snap-align: center; }

/* the smooth ring (src/ring.js): two half arcs and a glowing head, each only ever rotated by the compositor */
.sring { position: absolute; inset: -9px; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255, 200, 110, .9)); --sr-col: #f6d385; --sr-w: 3px; }
.sr-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sr-track circle { fill: none; stroke: rgba(255, 226, 176, .14); stroke-width: var(--sr-w); }
.sr-h { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.sr-r { left: 50%; } .sr-l { left: 0; }
.sr-h svg { position: absolute; top: 0; width: 200%; height: 100%; overflow: visible; transform-origin: 50% 50%; will-change: transform; transform: rotate(0deg); }
.sr-r svg { left: -100%; } .sr-l svg { left: 0; }
.sr-h path { fill: none; stroke: var(--sr-col); stroke-width: var(--sr-w); }
.sr-cap, .sr-head { position: absolute; left: 50%; top: 2.857%; border-radius: 50%; }
.sr-cap { width: var(--sr-w); height: var(--sr-w); margin: calc(var(--sr-w) / -2); background: var(--sr-col); opacity: 0; }
.sr-headw { position: absolute; inset: 0; will-change: transform; opacity: 0; }
.sr-head { width: calc(var(--sr-w) * 2.6); height: calc(var(--sr-w) * 2.6); margin: calc(var(--sr-w) * -1.3);
  background: radial-gradient(circle, #ffffff 0, #fff3c8 35%, rgba(255, 210, 120, .6) 60%, rgba(255, 190, 90, 0) 72%); box-shadow: 0 0 10px 3px rgba(255, 214, 140, .85); }
.cc-medal .sring { inset: -14px; --sr-col: #f3c867; --sr-w: 4px; filter: drop-shadow(0 0 6px rgba(255, 196, 90, .95)); }
.cgcurtain.ready .cc-medal .sring { filter: drop-shadow(0 0 16px #ffd27a) brightness(1.5); transition: filter .3s; }
.cg-songs button.shuffle .cs-ic { width: 46px; height: 46px; }
.cg-songs button.shuffle.sel { box-shadow: 0 0 0 2px #fff3c8, 0 0 0 4px rgba(36, 23, 11, .95), 0 0 0 5px rgba(255, 216, 140, .7), 0 0 30px rgba(255, 210, 120, .7), 0 6px 14px rgba(0, 0, 0, .5); }
.cg-songs:focus, .cg-songs:focus-visible { outline: none; }   /* (Chrome makes scrollers focusable: the dialog's autofocus landed on the row) */
/* line breaking per language (src/i18n.js sets <html lang>): Korean keeps words whole; Chinese and Japanese have no
   spaces, so keep-all would never wrap them — normal breaking with strict punctuation rules there */
:lang(zh) .offer-thanks, :lang(zh) .cgfull p, :lang(zh) .about p, :lang(ja) .about p { word-break: normal; line-break: strict; }
:lang(ko) .about p { word-break: keep-all; }
:lang(ja) .place, :lang(zh) .place, :lang(ko) .place { letter-spacing: 3px; }
/* the tree in the taper bar (user 2026-11-01): to the great tree outside with the candle in hand (goToTree keeps it) */
#act-tree { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--glass); border: 1px solid rgba(255, 214, 140, .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 12px rgba(255, 200, 110, .18); }
#act-tree svg.xtree { width: 38px; height: 38px; overflow: visible; stroke: none; fill: none; filter: drop-shadow(0 0 6px rgba(255, 196, 96, .45)); }
#act-tree:active svg.xtree { transform: scale(.9); }
/* the taper bar has up to six buttons: narrow phones get smaller ones and tighter gaps (390 px: 382 px wide) */
@media (max-width: 400px) {
  .ritual-ui { gap: 8px; }
  #act-cancel, #act-sit, #act-veil { width: 42px; height: 42px; }
  #act-give { width: 54px; height: 54px; } #act-next { width: 68px; height: 68px; } #act-tree { width: 46px; height: 46px; }
}
@media (max-width: 340px) {
  .ritual-ui { gap: 5px; }
  #act-cancel, #act-sit, #act-veil { width: 40px; height: 40px; }
  #act-give { width: 50px; height: 50px; } #act-next { width: 62px; height: 62px; } #act-tree { width: 44px; height: 44px; }
  #act-tree svg.xtree { width: 34px; height: 34px; }
}
/* a gift someone got (main.js giftToast): its picture, the rim in its rarity's colour */
.toast img.tgift { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; border: 2px solid var(--c, #fff1d6); box-shadow: 0 0 12px color-mix(in srgb, var(--c, #fff1d6) 60%, transparent); margin: -3px 0; }
/* the gallery's card (main.js admireGo): the statue's name, its maker and its church, a moment over the scene */
#gcard { position: fixed; left: 50%; top: calc(max(16px, env(safe-area-inset-top)) + 64px); transform: translate(-50%, -8px); z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s, transform .6s;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 20px 11px; border-radius: 16px; background: rgba(20, 15, 10, .55); border: 1px solid rgba(233, 200, 140, .45); color: #f3e7cf; text-align: center; max-width: calc(100vw - 48px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#gcard.on { opacity: 1; transform: translate(-50%, 0); }
#gcard b { font: 600 17px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; color: #f1d08a; }
#gcard i { font: italic 14px/1.25 Georgia, "Times New Roman", serif; }
#gcard small { font-size: 11.5px; opacity: .78; letter-spacing: .04em; }
/* the cashier's "Free!" (main.js marketStep): a gilded speech bubble over the cashier that pops in */
#free { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; padding: 10px 22px 12px; border-radius: 22px;
  background: linear-gradient(180deg, #fff7e2, #f3d590); color: #8a1418; font: 800 30px/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 3px #c8963c, 0 0 28px rgba(255,200,90,.7); }
#free::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: #f3d590; border-bottom: 0; }
#free.on { animation: freePop 2s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes freePop { 0% { opacity: 0; scale: .3; } 14% { opacity: 1; scale: 1.15; } 24% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: 1.05; } }
#free b { display: block; font: inherit; } #free small { display: block; margin-top: 4px; font: 700 14px/1.1 system-ui, sans-serif; letter-spacing: .02em; color: #6a1014; text-align: center; }

/* a letter to Santa (2026-11-01): cream paper with holly in the corners, a gold title, ruled lines, a wax seal to send */
.letter { position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 58px)); transform: translate(-50%, 10px) rotate(-0.6deg); width: min(400px, calc(100vw - 28px)); box-sizing: border-box; padding: 22px 20px 12px; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 0%, #fffaf0 0%, #f7ecd6 60%, #eedcb8 100%); color: #4a2b17; box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(160, 110, 50, .35), inset 0 0 30px rgba(170, 120, 50, .18);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.2); z-index: 6; }
.letter::before { content: ''; position: absolute; inset: 7px; border: 1.5px solid rgba(176, 20, 30, .55); border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(255, 250, 240, .9), inset 0 0 0 4.5px rgba(31, 107, 60, .5); pointer-events: none; }
body.lettering .letter { opacity: 1; transform: translate(-50%, 0) rotate(-0.6deg); pointer-events: auto; }
.letter .lt-holly { position: absolute; width: 46px; height: 46px; top: -14px; }
.letter .lt-holly.l { left: -12px; transform: rotate(-20deg); } .letter .lt-holly.r { right: -12px; transform: scaleX(-1) rotate(-20deg); }
.letter .lt-title { display: block; text-align: center; font: italic 600 25px/1.2 "Snell Roundhand", "Apple Chancery", "Palatino", "Georgia", "Apple SD Gothic Neo", serif; color: #9c121c; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); margin: 2px 0 8px; }
html[lang="ko"] .letter .lt-title, html[lang^="zh"] .letter .lt-title, html[lang="ja"] .letter .lt-title { font: 700 21px/1.3 "Apple SD Gothic Neo", "Hiragino Mincho ProN", "Noto Serif KR", serif; font-style: normal; }
.letter textarea { display: block; width: 100%; box-sizing: border-box; min-height: 118px; padding: 2px 8px 4px; border: 0; outline: none; resize: none; font-size: 17px;
  background: repeating-linear-gradient(180deg, transparent 0 28px, rgba(120, 80, 40, .22) 28px 29px); color: #3a1f0e; font: 500 17px/29px "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", Georgia, serif; caret-color: #b0121c; }
.letter textarea::placeholder { color: rgba(90, 55, 25, .5); }
.letter .lt-note { display: block; margin: 6px 4px 0; text-align: center; font: 400 11.5px/1.4 -apple-system, "Apple SD Gothic Neo", sans-serif; color: rgba(90, 55, 25, .62); text-wrap: balance; word-break: keep-all; }
.lt-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.lt-btns button { width: 44px; height: 44px; border-radius: 999px; color: rgba(90, 55, 25, .7); }
#letter-send { width: 62px; height: 62px; margin: -6px -6px -4px 0; filter: drop-shadow(0 4px 8px rgba(120, 10, 20, .45)); transition: transform .25s; }
#letter-send svg { width: 100%; height: 100%; stroke: none; }
#letter-send:active { transform: scale(.92); }
body.lettering .actions, body.lettering .hud, body.lettering .giftshelf, body.lettering .room-btn, body.santaing .actions, body.santaing .hud, body.santaing .giftshelf, body.santaing .room-btn, body.santaing .toasts { opacity: 0 !important; pointer-events: none !important; }
.letter-done { position: fixed; left: 50%; bottom: max(96px, calc(env(safe-area-inset-bottom) + 92px)); transform: translate(-50%, 20px); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 20, 18, .9), rgba(30, 10, 10, .92)); border: 1px solid rgba(255, 200, 120, .45); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 190, 100, .25); color: #ffe6b8; text-decoration: none;
  opacity: 0; pointer-events: none; transition: opacity .6s, transform .6s; z-index: 6; max-width: calc(100vw - 32px); box-sizing: border-box; }
.letter-done.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.letter-done svg { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .8)); }
.letter-done span { display: flex; flex-direction: column; font: 600 14.5px/1.3 -apple-system, "Apple SD Gothic Neo", sans-serif; white-space: nowrap; }
.letter-done u { font-weight: 400; font-size: 12.5px; color: #ffd27a; text-underline-offset: 3px; }
/* the envelope over Santa (first visits: a gentle invitation to tap him) */
.santa-mark { position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .6s; animation: sm-bob 2.2s ease-in-out infinite; }
.santa-mark.on { opacity: 1; }
.santa-mark::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 140, .45), rgba(255, 215, 140, 0) 70%); animation: sm-glow 2.2s ease-in-out infinite; }
.santa-mark svg { position: relative; width: 100%; height: 100%; stroke: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
@keyframes sm-bob { 50% { translate: 0 -6px; } }
@keyframes sm-glow { 50% { transform: scale(1.25); opacity: .6; } }
body:not(.in) .santa-mark, body.lettering .santa-mark, body.santaing .santa-mark { display: none; }

/* the controls hint is gone (user 2026-11-01: no key/arrow pictures on screen) */
.hint { display: none !important; }

/* praying together (2026-11-01): the ask, and the Amen that lets go */
.pray-ask { position: fixed; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 76px)); transform: translate(-50%, -12px); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 999px; z-index: 7;
  background: linear-gradient(180deg, rgba(48, 30, 12, .9), rgba(26, 16, 8, .92)); border: 1px solid rgba(255, 210, 140, .45); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 190, 100, .25);
  color: #ffe9c2; font: 600 15px/1.2 -apple-system, "Apple SD Gothic Neo", sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .45s, transform .45s; }
.pray-ask.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: pa-glow 2.4s ease-in-out infinite; }
.pray-ask > svg { width: 34px; height: 34px; flex: none; }
.pray-ask button { width: 40px; height: 40px; border-radius: 999px; color: rgba(255, 233, 194, .7); }
.pray-ask button.yes { width: 52px; height: 52px; background: radial-gradient(circle at 50% 40%, rgba(255, 214, 140, .35), rgba(255, 190, 100, .12)); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .55); }
.pray-ask button.yes svg { width: 40px; height: 40px; stroke: none; }
@keyframes pa-glow { 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 200, 110, .45); } }
.pray-ask, .pray-wait { overflow: hidden; }
.pa-time { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 214, 140, .2), rgba(255, 222, 160, .85)); transform-origin: left; transform: scaleX(0); }
.pray-ask.on .pa-time, .pray-wait.on .pa-time { animation: pa-time var(--t, 12s) linear forwards; }
@keyframes pa-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* waiting for their answer (the hand held out): the same pill, small, at the top; a yes glows, a no dims away */
.pray-wait { position: fixed; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 76px)); transform: translate(-50%, -12px); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 999px; z-index: 7;
  background: linear-gradient(180deg, rgba(48, 30, 12, .9), rgba(26, 16, 8, .92)); border: 1px solid rgba(255, 210, 140, .4); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 190, 100, .2); opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s, filter .4s; }
.pray-wait.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pray-wait > svg { width: 32px; height: 32px; flex: none; stroke: none; }
.pray-wait .pw-dots { display: flex; gap: 4px; }
.pray-wait .pw-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ffd99a; opacity: .3; animation: pw-dot 1.2s ease-in-out infinite; }
.pray-wait .pw-dots i:nth-child(2) { animation-delay: .2s; } .pray-wait .pw-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pw-dot { 40% { opacity: 1; transform: translateY(-2px); } }
.pray-wait button { width: 36px; height: 36px; border-radius: 999px; color: rgba(255, 233, 194, .65); }
.pray-wait.ok { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 44px rgba(255, 210, 120, .7); border-color: rgba(255, 224, 160, .9); }
.pray-wait.ok .pa-time, .pray-wait.no .pa-time { animation: none; transform: scaleX(0); }
.pray-wait.no { filter: grayscale(.8) brightness(.7); animation: pw-no .4s; }
@keyframes pw-no { 25% { transform: translate(calc(-50% - 6px), 0); } 75% { transform: translate(calc(-50% + 6px), 0); } }

/* the "pray together" drawing (#btn-circle) shares the tree's look; no one near: a little shake */
.actions button.circle.nope svg.xtree { animation: nope .45s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* before the script has started the ring (the page's first second or so): its head already goes round, on the compositor */
@keyframes sr-wait { to { transform: rotate(360deg); } }
body:not(.ringon) .enter .sr-headw { opacity: .85; animation: sr-wait 1.8s linear infinite; }

/* every letter to Santa, in a window over the game (user 2026-11-02: not another page; ✕ closes) */
.letters-win { position: fixed; inset: 0; width: min(100vw - 24px, 1100px); height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid rgba(255, 200, 120, .4); border-radius: 18px; overflow: hidden; background: #0b1024; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 190, 100, .18); }
.letters-win::backdrop { background: rgba(4, 6, 14, .62); backdrop-filter: blur(3px); }
.letters-win iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b1024; }
.letters-win .close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 210, 140, .5); background: rgba(20, 12, 10, .78); color: #ffe6b8; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }

/* ---- my robe's colour (user 2026-11-02): the button in the room sheet's corner, the palette over the scene ---- */
.robe-btn { position: relative; width: 40px; height: 40px; margin-left: auto; margin-right: 4px; border-radius: 50%; display: grid; place-items: center; isolation: isolate; cursor: pointer; }
.robe-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2; padding: 2px;
  background: conic-gradient(from 0deg, #f1ede6, #e8d07a, #b8862b, #d8682c, #c8243a, #e07a8f, #9c2f6e, #5b2a86, #1d4fa0, #7ab3d9, #0f7c80, #1f6b45, #a7d3c4, #f1ede6);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rb-turn 9s linear infinite; filter: saturate(1.15) drop-shadow(0 0 5px rgba(255, 200, 130, .45)); }
.robe-btn::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 50% 38%, rgba(70, 52, 36, .95), rgba(18, 13, 10, .98) 72%); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .2); }
.robe-btn svg { width: 24px; height: 24px; stroke: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.robe-btn:hover svg, .robe-btn:focus-visible svg { transform: scale(1.1); }
.robe-btn:active svg { transform: scale(.92); }
@keyframes rb-turn { to { transform: rotate(1turn); } }
.robe-btn svg .rb, .rp-orn svg .rb { fill: var(--c, #e9dcc4); transition: fill .6s ease; }
.robe-btn svg .rs, .rp-orn svg .rs { fill: rgba(255, 255, 255, .16); }
.robe-btn svg .rf, .rp-orn svg .rf { fill: #f2d4bf; }
.robe-btn svg .rh, .rp-orn svg .rh { fill: none; stroke: #e7bf6a; stroke-width: 1.1; stroke-linecap: round; }

/* ---- the wardrobe (user 2026-11-08: the old sheet stacked every row and hid the figure; research: avatar editors keep the
   figure whole above a ~40 % panel — one row of icon tabs at the thumb, one category's content at a time, preview at once,
   ✕ / ✓ clear). Portrait: a bottom sheet (top row ✕ · title · ✓, a fixed-height pane, tabs at the bottom; the grab handle
   folds it to tabs only). Landscape: a side panel on the right, tabs as a rail. No backdrop blur (over the WebGL canvas
   phones re-blur every frame): painted translucent walnut instead. */
dialog.robe-pick { position: fixed; inset: auto auto max(10px, calc(env(safe-area-inset-bottom) + 6px)) 50%; transform: translateX(-50%); z-index: 40; margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  width: min(440px, calc(100vw - 16px)); overflow: visible; --ph: 236px; --gold: #f0d29a; }
dialog.robe-pick[open] { animation: rp-in .6s cubic-bezier(.2, 1.15, .3, 1) both; }
dialog.robe-pick.out { animation: rp-out .3s ease both; pointer-events: none; }
@keyframes rp-in { from { opacity: 0; transform: translate(-50%, 46px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rp-out { to { opacity: 0; transform: translate(-50%, 30px) scale(.98); } }
.robe-pick .rp { position: relative; padding: 14px 12px 8px; border-radius: 26px; border: 1px solid rgba(255, 214, 150, .36);
  background: radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--c, #e9dcc4) 20%, transparent), transparent 62%), linear-gradient(180deg, rgba(36, 27, 21, .93), rgba(14, 10, 9, .96));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 236, 200, .2); transition: background .8s ease; }
.robe-pick .rp::before { content: ''; position: absolute; inset: 5px; border-radius: 21px; border: 1px solid rgba(255, 214, 150, .1); pointer-events: none; }
.rp-grab { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 72px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.rp-grab i { display: block; width: 38px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: rgba(255, 220, 160, .38); transition: background .2s, width .3s; }
.rp-grab:hover i { background: rgba(255, 220, 160, .7); width: 46px; }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; margin-bottom: 8px; }
.rp-top button { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.rp-top button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-top button:active { transform: scale(.9); }
.rp-x { color: rgba(243, 222, 186, .7); background: rgba(255, 236, 200, .06); border: 1px solid rgba(255, 214, 150, .18); }
.rp-ok { color: #2a1a08; background: radial-gradient(circle at 35% 30%, #fff1c8, #f0c560 45%, #b9842a); border: 1px solid rgba(255, 236, 190, .8); box-shadow: 0 4px 14px rgba(240, 190, 90, .35); }
.rp-ok svg { stroke-width: 2.6; }
.rp-title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.rp-title i { height: 1px; flex: 0 1 46px; background: linear-gradient(90deg, transparent, rgba(255, 214, 150, .7)); }
.rp-title i:last-child { background: linear-gradient(270deg, transparent, rgba(255, 214, 150, .7)); }
.rp-title b { flex: none; width: 5px; height: 5px; transform: rotate(45deg); background: #f0c870; box-shadow: 0 0 8px rgba(255, 200, 110, .8); }
.rp-tt { font: 600 15px/1 inherit; letter-spacing: .08em; color: #f6e4bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.rp-tt.swap { animation: rp-tt .35s ease; }
@keyframes rp-tt { from { opacity: 0; transform: translateY(5px); } }
/* panes: one at a time, a fixed height so the sheet never jumps */
.rp-panes { position: relative; height: var(--ph); overflow: hidden; transition: height .38s cubic-bezier(.3, 1, .4, 1); }
.rp-pane { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.rp-pane[hidden] { display: none; }
.rp-pane.in { animation: rp-pane .38s cubic-bezier(.2, 1, .35, 1); }
@keyframes rp-pane { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 26px)); } }
.rp.fold .rp-panes { height: 0; }
.rp.fold .rp-top { margin-bottom: 2px; }
/* the tabs: icon + a small word, a gold pill gliding under the chosen one */
.rp-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; padding: 4px; border-radius: 18px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .06), inset 0 0 0 1px rgba(255, 214, 150, .1); }
.rp-tabmark { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - 8px) / 3); border-radius: 14px; transform: translateX(calc(var(--ti, 0) * (100% + 4px))); transition: transform .42s cubic-bezier(.3, 1.3, .45, 1);
  background: linear-gradient(180deg, rgba(255, 226, 170, .26), rgba(255, 210, 140, .1)); box-shadow: inset 0 0 0 1px rgba(255, 226, 170, .55), 0 0 16px rgba(255, 200, 110, .18); pointer-events: none; }
.rp-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 4px 2px; border: 0; background: none; color: rgba(240, 210, 154, .62); cursor: pointer; transition: color .25s, transform .2s; }
.rp-tabs button:active { transform: scale(.94); }
.rp-tabs button[aria-selected="true"] { color: #fff1d4; }
.rp-tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.rp-tabs button[aria-selected="true"] svg { transform: translateY(-1px) scale(1.1); }
.rp-tabs span { font-size: 11px; letter-spacing: .03em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rp-tabs .rp-orn svg .rb { fill: var(--c, #e9dcc4); stroke: none; transition: fill .6s ease; }
.rp-tabs .rp-orn svg .rs { fill: rgba(255, 255, 255, .16); stroke: none; }
.rp-tabs .rp-orn svg .rf { fill: #f2d4bf; stroke: none; }
.rp-tabs .rp-orn svg .rh { fill: none; stroke: #e7bf6a; stroke-width: 1.1; }
.rp-tabs .rp-cattab .dot { fill: currentColor; stroke: none; }
.rp-tabs .rp-fantab .gb { fill: rgba(255, 255, 255, .06); }
/* the event tab: a segment per event (fan jersey, Pepero Day…), one strip each */
.rp-evpane { justify-content: flex-start; gap: 8px; padding-top: 2px; }
.rp-evseg[hidden] { display: none; }
.rp-evseg { flex: none; grid-template-columns: repeat(2, 1fr); }
.rp-evseg i { width: calc((100% - 6px) / 2); }
.rp-ev { display: flex; flex-direction: column; gap: 6px; }
.rp-ev[hidden] { display: none; }
.rp-evpane .rp-teams button { height: 100px; }
.rp-pepid { display: grid; place-items: center; height: 30px; font-size: 12.5px; color: rgba(255, 220, 230, .82); text-align: center; }
.rp-strip.rp-peps button.on { border-color: rgba(255, 170, 200, .9); background: linear-gradient(180deg, rgba(150, 70, 40, .45), rgba(80, 36, 20, .35)); box-shadow: 0 0 0 1px rgba(255, 190, 210, .3) inset, 0 0 24px rgba(255, 140, 180, .25); }
.rp-strip.rp-peps button.on::after { background-color: #ffb3c8; }
.rp-fanoff .po { stroke: rgba(240, 210, 154, .55); stroke-width: 3; stroke-linecap: round; fill: none; }
.rp-tabs button .badge { position: absolute; top: 5px; right: calc(50% - 21px); width: 7px; height: 7px; border-radius: 50%; background: #6aa2ff; box-shadow: 0 0 6px #6aa2ff; }
/* colour: all 32 at once, 8 × 4 */
.rp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px 6px; padding: 2px; justify-items: center; align-content: center; }
.rp-grid .sw { --s: min(38px, calc((100vw - 16px - 24px - 42px - 4px) / 8)); }
.rp-grid .sw { position: relative; width: var(--s); height: var(--s); border-radius: 50%; cursor: pointer; isolation: isolate;
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 30%, transparent 46%),
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .16) 49%, transparent 58%),
    radial-gradient(circle at 70% 82%, rgba(0, 0, 0, .42), transparent 58%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px),
    var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .5);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; animation: sw-in .55s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--i) * 13ms + 140ms); }
@keyframes sw-in { from { opacity: 0; transform: scale(.2) translateY(8px); } }
.rp-grid .sw:hover { transform: scale(1.08); }
.rp-grid .sw[aria-checked="true"] { transform: scale(1.16); z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 0 0 2.5px #140e0a, 0 0 0 4.5px #f3c873, 0 0 18px 3px rgba(255, 200, 110, .55); }
.rp-grid .sw svg { position: absolute; inset: 22%; width: 56%; height: 56%; fill: none; stroke: #fff8e6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.8, .5, 1); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); }
.rp-grid .sw.lt svg { stroke: #3a2a18; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.rp-grid .sw[aria-checked="true"] svg { opacity: 1; transform: none; }
.rp-grid .sw i { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; pointer-events: none; z-index: -1; }
.rp-grid .sw.pop i { animation: sw-ring .7s ease-out; }
@keyframes sw-ring { from { opacity: .9; transform: scale(.9); box-shadow: 0 0 12px var(--c); } to { opacity: 0; transform: scale(1.9); } }
/* cards (the veil): two big choices with a little drawn figure */
.rp-cards { display: flex; gap: 12px; justify-content: center; }
.rp-cards button, .rp-strip button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 18px; cursor: pointer; color: rgba(246, 228, 189, .82);
  border: 1px solid rgba(232, 196, 122, .26); background: linear-gradient(180deg, rgba(255, 240, 210, .07), rgba(255, 240, 210, .02)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), border-color .25s, background .25s, color .25s; }
.rp-cards button { flex: 0 1 150px; height: 150px; font-size: 14px; }
.rp-cards button:active, .rp-strip button:active { transform: scale(.95); }
.rp-cards button.on, .rp-strip button.on { color: #fff3d8; border-color: rgba(255, 226, 170, .85); background: linear-gradient(180deg, rgba(255, 226, 170, .22), rgba(255, 210, 140, .07)); box-shadow: 0 0 0 1px rgba(255, 226, 170, .25) inset, 0 6px 22px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 200, 110, .16); }
.rp-cards button.on::after, .rp-strip button.on::after { content: ''; position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; background: #f0c560 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%232a1a08' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 8px rgba(255, 200, 110, .6); }
.rp-cards svg { width: 76px; height: 76px; }
.rp-veils .sk { fill: #f2d4bf; } .rp-veils .hr { fill: #5c3b24; } .rp-veils .rb { fill: var(--c, #e9dcc4); }
.rp-veils .lace { fill: rgba(255, 255, 255, .5); stroke: rgba(255, 255, 255, .85); stroke-width: .8; } .rp-veils .lace-d { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; }
/* strips: one row, scrolls sideways, the next card half shown */
.rp-strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; padding: 6px 4px 8px; margin: 0 -4px; scrollbar-width: none; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); }
.rp-strip::-webkit-scrollbar { display: none; }
.rp-strip[hidden] { display: none; }
.rp-strip button { flex: none; scroll-snap-align: center; }
/* centred while it fits, scrollable from its first card when it does not (justify-content: center cut the first cards off) */
.rp-strip > :first-child { margin-left: auto; } .rp-strip > :last-child { margin-right: auto; }
.rp-strip.rp-coats button { width: 66px; height: 66px; padding: 4px; border-radius: 50%; }
.rp-strip.rp-coats button svg { width: 100%; height: 100%; }

.rp-strip.rp-faces button { width: 74px; height: 74px; }
.rp-strip.rp-coats button.on::after { top: -1px; right: -1px; }

.rp-strip.rp-outfits button { width: 100px; height: 92px; font-size: 12px; }
.rp-strip.rp-outfits svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-strip.rp-outfits span { white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
/* cat: the switch, the segments, a line while it is off */
.rp-catbar { display: flex; align-items: center; gap: 8px; }
.rp-switch { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 18px; border: 1px solid rgba(232, 196, 122, .3); background: rgba(255, 240, 210, .05); color: #f6e4bd; font: 600 13px/1 inherit; cursor: pointer; }
.rp-switch i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .25); transition: background .3s; }
.rp-switch b { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d9c39a; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .3s; }
.rp-switch.on i { background: linear-gradient(180deg, #f0c560, #b9842a); }
.rp-switch.on b { transform: translateX(16px); background: #fff7e4; }
.rp-seg { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); height: 36px; padding: 3px; border-radius: 18px; background: rgba(0, 0, 0, .3); transition: opacity .3s; }
.rp-seg button { position: relative; z-index: 1; border: 0; background: none; color: rgba(240, 210, 154, .65); font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.rp-seg button[aria-selected="true"] { color: #2a1a08; font-weight: 600; }
.rp-seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 15px; background: linear-gradient(180deg, #f6d68a, #d7a548); transform: translateX(calc(var(--si, 0) * 100%)); transition: transform .38s cubic-bezier(.3, 1.3, .45, 1); }
.rp-pane[data-p="cat"]:not(.cat-on) .rp-catbar .rp-seg { opacity: .3; pointer-events: none; }
/* which animal (user 2026-11-08: guinea pigs too): human / cat / guinea pig, a gold pill gliding */
.rp-species { flex: none; height: 38px; }
/* (user 2026-11-09: no events tab — the pill's quick button wears the jersey / sticks; the baptismal name lives under the colours) */
.rp-tabs button[data-p="fan"] { display: none; }
.rp-pane[data-p="color"] { gap: 12px; }
.rp-saint { opacity: 1 !important; }
/* (user 2026-11-09: hidden for now — the pill's kitten / guinea pig switch the animal; only the coats here) */
#rp-species, .rp-pane[data-p="cat"] .rp-catbar { display: none !important; }
/* the veil tab holds the outfits too (veil / outfit): smaller cards when both show */
.rp-pane[data-p="veil"].with-outfits { justify-content: flex-start; gap: 8px; }
.rp-pane[data-p="veil"].with-outfits .rp-cards button { height: 92px; flex-basis: 132px; font-size: 13px; flex-direction: row; gap: 8px; }
.rp-pane[data-p="veil"].with-outfits .rp-cards svg { width: 52px; height: 52px; }
.rp-pane[data-p="veil"] .rp-cards span { white-space: nowrap; }
.rp-pane[data-p="veil"].with-outfits .rp-cards button { flex-basis: 150px; padding: 0 10px; }
.rp-pane[data-p="veil"] .rp-outfits button { height: 84px; }
.rp-species button { font-size: 13px; }
.rp-pane[data-p="cat"] { gap: 8px; }
.rp-catoff { flex: 1; display: grid; place-items: center; text-align: center; color: rgba(246, 228, 189, .7); font-size: 13px; line-height: 1.4; padding: 0 20px; }
.rp-pane[data-p="cat"].cat-on .rp-catoff { display: none; }
/* the fan jersey: "none" + one card per club, then my number and baptismal name */

.rp-teams button { width: 104px; height: 112px; font-size: 12px; text-align: center; line-height: 1.2; padding: 6px; }
.rp-teams button svg { width: 52px; height: 52px; }
.rp-teams button span { max-width: 96px; }
.rp-teams button.on { border-color: rgba(120, 170, 255, .9); background: linear-gradient(180deg, rgba(40, 100, 220, .42), rgba(14, 52, 140, .3)); box-shadow: 0 0 0 1px rgba(120, 170, 255, .3) inset, 0 0 24px rgba(70, 130, 255, .25); }
.rp-teams button.on::after { background-color: #8fb8ff; }
.rp-fanoff .jo { fill: rgba(255, 255, 255, .06); stroke: rgba(240, 210, 154, .55); stroke-width: 1.5; stroke-linejoin: round; } .rp-fanoff .jx { stroke: rgba(240, 210, 154, .55); stroke-width: 1.5; stroke-linecap: round; }
.rp-fanoff.on { border-color: rgba(255, 226, 170, .85); }
.rp-fanid { display: flex; align-items: center; justify-content: center; gap: 10px; height: 34px; color: #e9eefc; font-size: 14px; transition: opacity .3s; }
.rp-pane[data-p="fan"]:not(.fan-on) .rp-fanid { opacity: .45; }
.rp-fanid .fno { font: 800 13px/1 "Arial Black", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; color: #8fb8ff; }
.rp-fanid .fno b { font-size: 17px; margin-left: 2px; color: #cfe0ff; }
#rp-fan-name { font: italic 700 17px/1 Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 0 10px rgba(110, 160, 255, .5); }
#rp-fan-name.swap { animation: rp-tt .4s ease; }
#rp-fan-roll { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; border: 1px solid rgba(120, 170, 255, .5); background: rgba(40, 90, 200, .18); color: #cfe0ff; font-size: 12px; cursor: pointer; }
#rp-fan-roll svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; } #rp-fan-roll .pip { fill: currentColor; stroke: none; }
#rp-fan-roll:active svg { transform: rotate(90deg); transition: transform .2s; }
/* landscape / desktop: a side panel on the right, the tabs a rail on its left edge */
@media (orientation: landscape) and (min-width: 700px) {
  dialog.robe-pick { inset: 50% max(16px, env(safe-area-inset-right)) auto auto; transform: translateY(-50%); width: 468px; --ph: 268px; }
  @keyframes rp-in { from { opacity: 0; transform: translate(40px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
  @keyframes rp-out { to { opacity: 0; transform: translate(30px, -50%); } }
  .robe-pick .rp { display: grid; grid-template-columns: 66px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 14px 14px 14px 10px; }
  .rp-grab { display: none; }
  .rp-top { grid-column: 2; grid-row: 1; }
  .rp-panes { grid-column: 2; grid-row: 2; }
  .rp-tabs { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; grid-auto-rows: 66px; align-content: start; margin: 0; }
  .rp-tabmark { width: auto; right: 4px; height: 66px; bottom: auto; transform: translateY(calc(var(--ti, 0) * (100% + 4px))); }
  .rp-grid .sw { --s: 38px; }
  .rp.fold .rp-panes { height: var(--ph); }
}
.rp-turn { display: none; }
@media (prefers-reduced-motion: reduce) { .robe-btn::before { animation: none; } dialog.robe-pick[open], .rp-grid .sw, .rp-pane.in { animation: none; } }

/* the robe button in the top bar (user 2026-11-02): a line pilgrim like its neighbours, a swatch of my colour at its hem */
.tools .robe-top svg .rdot { fill: var(--c, #e9dcc4); stroke: #f3c873; stroke-width: 1.3; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c, #e9dcc4) 70%, transparent)); transition: fill .6s ease; }
.tools .robe-top:active svg { transform: scale(.9); }
.tools .robe-top svg { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); overflow: visible; }
@media (max-width: 370px) { .tools { padding: 0 3px; gap: 0; } .tools button { padding: 0 3px; min-width: 36px; gap: 4px; } .tools .offer { padding: 0 3px; } }   /* (seven buttons on a 320 px phone) */
/* the jersey's quick switch beside the kitten (user 2026-11-08): a little home jersey; a blue ring while worn */
.tools .fanq { position: relative; padding: 0 4px; }
.tools .fanq svg { width: 28px; height: 28px; stroke: none; fill: none; overflow: visible; filter: drop-shadow(0 0 4px rgba(120, 170, 255, .3)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tools .fanq::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #6aa2ff; box-shadow: 0 0 10px rgba(90, 150, 255, .55); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.tools .fanq.on::after { opacity: 1; transform: scale(1); }
.tools .fanq .q-pep, .tools .fanq.pep .q-fan { display: none; }
.tools .fanq.pep .q-pep { display: block; }
.tools .fanq.pep::after { border-color: #ff8fb1; box-shadow: 0 0 10px rgba(255, 140, 180, .6); }
.tools .fanq.on svg { transform: scale(1.06); }
.tools .fanq:active svg { transform: scale(.88); }
@media (max-width: 340px) { .tools .fanq svg { width: 24px; height: 24px; } .tools .fanq::after { width: 32px; height: 32px; margin: -16px 0 0 -16px; } }
@media (max-width: 340px) { .tools button { min-width: 32px; padding: 0 2px; } .tools .catbtn svg { width: 26px; height: 26px; } .tools .catbtn::after { width: 32px; height: 32px; margin: -16px 0 0 -16px; } .tools .offer svg.votive { width: 28px; height: 28px; } }   /* (eight with the kitten: clear of the cross at 320 px) */

/* ---- a prayer circle's intention (user 2026-11-02): the host's chip over the action bar, the sheet, the report flag ---- */
.pray-topic { position: fixed; left: 50%; bottom: max(104px, calc(env(safe-area-inset-bottom) + 98px)); z-index: 5; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 40px);
  padding: 9px 16px 9px 12px; border-radius: 999px; color: #ffe6b8; font: 500 15px var(--serif); letter-spacing: .3px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(58, 40, 22, .86), rgba(24, 16, 10, .9)); border: 1px solid rgba(255, 214, 150, .55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 190, 100, .22), inset 0 1px 0 rgba(255, 236, 200, .2);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .45s, transform .45s cubic-bezier(.2, 1.2, .3, 1); }
.pray-topic.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* ---- the cheer button (user 2026-11-08): only while the fan jersey is worn, over the pray button (in its place when that is
   away) — royal-blue glass with a white-gold rim, crossed thundersticks in a lit disc, a light sweeping across, a soft
   halo breathing (opacity/transform only: no repaint over the canvas); a tap bursts eight sparks, and while I cheer it
   pulses on the claps and swells at the peak */
.cheer-cta { position: fixed; left: 50%; bottom: calc(max(104px, calc(env(safe-area-inset-bottom) + 98px)) + 54px); z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 7px 22px 7px 8px; border-radius: 999px; border: 0; cursor: pointer; isolation: isolate;
  color: #fff; font: 800 17px/1 var(--serif); letter-spacing: .6px; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 20, 70, .55), 0 0 12px rgba(160, 200, 255, .55);
  background: linear-gradient(180deg, #4d8dff 0%, #1f5fd6 46%, #0b3d9e 54%, #0a2f80 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 0 3.5px rgba(40, 100, 220, .9), 0 0 0 4.5px rgba(255, 226, 140, .7), 0 10px 26px rgba(0, 20, 70, .55), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 10, 50, .45);
  opacity: 0; transform: translate(-50%, 18px) scale(.9); pointer-events: none; transition: opacity .45s, transform .5s cubic-bezier(.2, 1.4, .3, 1), bottom .4s ease; }
.cheer-cta.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.cheer-cta.low { bottom: max(104px, calc(env(safe-area-inset-bottom) + 98px)); }
.cheer-cta:active { transform: translate(-50%, 0) scale(.94); }
.cheer-cta .cc-ico { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 40% 32%, #ffffff 0%, #d9e8ff 38%, #7fb0ff 100%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 0 14px rgba(150, 200, 255, .9), inset 0 -2px 4px rgba(20, 70, 170, .35); }
.cheer-cta .cc-ico svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 30, 90, .45)); }
.cheer-cta .cc-t { position: relative; }
.cheer-cta .cc-glow { position: absolute; inset: -10px; border-radius: inherit; background: radial-gradient(closest-side, rgba(90, 150, 255, .55), rgba(90, 150, 255, 0)); z-index: -1; opacity: .5; }
.cheer-cta.on .cc-glow { animation: cc-breathe 2.4s ease-in-out infinite; }
@keyframes cc-breathe { 50% { opacity: 1; transform: scale(1.06); } }
.cheer-cta .cc-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.cheer-cta .cc-sheen { position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); opacity: 0; }
.cheer-cta.on .cc-sheen { animation: cc-sheen 3.6s ease-in-out .6s infinite; }
@keyframes cc-sheen { 0% { transform: translateX(-130%) skewX(-20deg); opacity: 0; } 8% { opacity: 1; } 34% { transform: translateX(360%) skewX(-20deg); opacity: 1; } 35%, 100% { transform: translateX(360%) skewX(-20deg); opacity: 0; } }
.cheer-cta .cc-dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.4px) 0 0 / 9px 9px; opacity: .55; }
.cheer-cta > * { position: relative; z-index: 1; }
.cheer-cta .cc-glow { position: absolute; z-index: -1; }
.cheer-cta .cc-clip, .cheer-cta .cc-ring, .cheer-cta .cc-sparks { position: absolute; }
.cheer-cta .cc-ring { inset: -2px; border-radius: inherit; border: 2px solid rgba(170, 210, 255, .95); opacity: 0; pointer-events: none; }
.cheer-cta.burst .cc-ring { animation: cc-ring .8s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cc-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.9); } }
.cheer-cta .cc-sparks { left: 27px; top: 50%; width: 0; height: 0; pointer-events: none; }
.cheer-cta .cc-sparks b { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #9cc4ff, 0 0 3px #ffe27a; opacity: 0; transform: rotate(var(--a)) translateX(0); }
.cheer-cta.burst .cc-sparks b { animation: cc-spark .75s cubic-bezier(.15, .8, .3, 1) both; }
@keyframes cc-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(4px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(46px) scale(.4); } }
/* while cheering: a pulse on each clap (0.45, 0.75, 1.05, 1.25, 1.45 s), a swell at the peak (1.95 s), then calm */
.cheer-cta.live .cc-ico { animation: cc-beat 3.3s linear both; }
@keyframes cc-beat { 0%, 11%, 17%, 20%, 26%, 29%, 35%, 36%, 41%, 42%, 47%, 72%, 100% { transform: scale(1); } 13.6%, 22.7%, 31.8%, 37.9%, 43.9% { transform: scale(1.22) rotate(-6deg); } 59% { transform: scale(1.4) rotate(8deg); } }
.cheer-cta.live { pointer-events: none; }
@media (max-width: 340px) { .cheer-cta { font-size: 15px; padding: 6px 18px 6px 7px; } .cheer-cta .cc-ico { width: 34px; height: 34px; } .cheer-cta .cc-ico svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .cheer-cta .cc-sheen, .cheer-cta .cc-glow, .cheer-cta.live .cc-ico { animation: none !important; } }
#btn-cheer { display: none !important; }
/* ---- the share button (user 2026-11-08: like the cheer's, for the chocolate-stick costume): glossy chocolate with a
   strawberry-pink rim, sprinkles in the glass, a snapped stick and a heart in a pink disc; pink sparks; pulses on the
   snap, the give and the nibble */
.share-cta { background: linear-gradient(180deg, #8a4a2c 0%, #5e2e18 46%, #4a2012 54%, #34160c 100%); text-shadow: 0 1px 0 rgba(40, 10, 0, .6), 0 0 12px rgba(255, 170, 200, .5);
  box-shadow: 0 0 0 1.5px rgba(255, 236, 244, .95), 0 0 0 3.5px rgba(240, 110, 160, .95), 0 0 0 4.5px rgba(255, 226, 140, .7), 0 10px 26px rgba(40, 10, 0, .55), inset 0 2px 0 rgba(255, 220, 200, .35), inset 0 -3px 6px rgba(20, 5, 0, .5); }
.share-cta .cc-ico { background: radial-gradient(circle at 40% 32%, #ffffff 0%, #ffe3ec 40%, #ff9fbf 100%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 150, 190, .9), inset 0 -2px 4px rgba(170, 40, 90, .3); }
.share-cta .cc-glow { background: radial-gradient(closest-side, rgba(255, 120, 170, .5), rgba(255, 120, 170, 0)); }
.share-cta .cc-dots { opacity: .9; background:
  radial-gradient(ellipse 3px 1.2px at 20% 30%, #ff8fb1 98%, transparent 100%) 0 0 / 26px 22px,
  radial-gradient(ellipse 3px 1.2px at 70% 65%, #7cc7ff 98%, transparent 100%) 0 0 / 30px 20px,
  radial-gradient(ellipse 3px 1.2px at 45% 85%, #ffd85a 98%, transparent 100%) 0 0 / 34px 24px,
  radial-gradient(ellipse 3px 1.2px at 85% 20%, #ffffff 98%, transparent 100%) 0 0 / 28px 26px; }
.share-cta .cc-ring { border-color: rgba(255, 190, 215, .95); }
.share-cta .cc-sparks b { box-shadow: 0 0 8px #ff9fbf, 0 0 3px #ffe27a; }
.share-cta.live .cc-ico { animation: cc-beat-share 3.2s linear both; }
@keyframes cc-beat-share { 0%, 26%, 34%, 37%, 44%, 57%, 65%, 100% { transform: scale(1); } 29.7% { transform: scale(1.3) rotate(-10deg); } 40.6% { transform: scale(1.35) rotate(8deg); } 61% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .share-cta.live .cc-ico { animation: none !important; } }
#btn-share { display: none !important; }
/* the flavour switch at the share button's end: a lit disc in the flavour's colour with its little bundle, a cycle badge */
.share-cta { padding-right: 6px; }
.share-cta .cc-t { margin-right: 4px; }
.pep-flav { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 38% 30%, #ffffff, #fdeef2 55%, #f3cdd8); box-shadow: 0 0 0 2px rgba(255, 240, 246, .95), 0 0 12px rgba(255, 150, 190, .6), inset 0 -3px 6px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.pep-flav:active { transform: scale(.9); }
.pep-flav .pf-chip svg { width: 33px; height: 33px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.pep-flav .pf-cyc { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; padding: 2px; border-radius: 50%; background: #fff; color: #d9487a; stroke-width: 2.6; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pep-flav.spin .pf-chip { animation: pf-spin .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pf-spin { from { transform: rotate(-200deg) scale(.4); } }
.share-cta.live .pep-flav { pointer-events: none; opacity: .7; }   /* (the action bar's share gave way to the centre button) */   /* (the action bar's cheer gave way to the centre button) */
.pray-topic svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #f3c873; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pray-topic.on:not(.set) { animation: tp-call 2.8s ease-in-out infinite; }   /* (only while shown: its opacity keyframes (the later tp-call) beat the hidden opacity 0 — the button stood on the title screen) */
.pray-topic:not(.set) span { color: rgba(255, 230, 184, .82); }
.pray-topic.set span { font-weight: 600; background: linear-gradient(180deg, #fff3d4, #f0c870); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pray-topic .tp-lock { display: none; width: 16px; height: 16px; opacity: .75; }
.pray-topic.mine .tp-lock { display: block; }
.pray-topic .tp-lock svg { width: 16px; height: 16px; stroke-width: 1.8; }
@keyframes tp-call { 0%, 100% { box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 190, 100, .18), inset 0 1px 0 rgba(255, 236, 200, .2); } 50% { box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 32px rgba(255, 200, 110, .5), inset 0 1px 0 rgba(255, 236, 200, .2); } }
.topic-flag { position: fixed; left: 0; top: 0; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 226, 180, .7);
  background: rgba(20, 14, 10, .45); border: 1px solid rgba(255, 214, 150, .25); opacity: 0; pointer-events: none; transition: opacity .4s; }
.topic-flag.on { opacity: .7; pointer-events: auto; } .topic-flag.on:hover { opacity: 1; }
.topic-flag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
dialog.topic-sheet { width: min(372px, calc(100vw - 24px)); padding: 18px 16px 14px; overflow: visible;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255, 200, 120, .16), transparent 60%), linear-gradient(180deg, rgba(38, 28, 21, .92), rgba(15, 11, 10, .95)); }
dialog.topic-sheet[open] { animation: rp-in .5s cubic-bezier(.2, 1.15, .3, 1) both; }
@keyframes tp-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
dialog.topic-sheet[open] { animation: tp-in .45s cubic-bezier(.2, 1.15, .3, 1) both; }
dialog.topic-sheet .close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 14px; }
.tp-head { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 14px; }
.tp-head i { height: 1px; flex: 0 1 60px; background: linear-gradient(90deg, transparent, rgba(255, 214, 150, .7)); }
.tp-head i:last-child { background: linear-gradient(270deg, transparent, rgba(255, 214, 150, .7)); }
.tp-head b { width: 6px; height: 6px; transform: rotate(45deg); background: #f0c870; box-shadow: 0 0 8px rgba(255, 200, 110, .8); }
.tp-head svg { width: 30px; height: 30px; fill: none; stroke: #f3c873; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 200, 110, .6)); }
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tp-grid .tp { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px 8px; border-radius: 14px; color: #f6e3c0; cursor: pointer;
  background: rgba(255, 236, 200, .05); border: 1px solid rgba(255, 214, 150, .16); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s;
  animation: sw-in .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.tp-grid .tp:nth-child(1) { animation-delay: .05s; } .tp-grid .tp:nth-child(2) { animation-delay: .09s; } .tp-grid .tp:nth-child(3) { animation-delay: .13s; } .tp-grid .tp:nth-child(4) { animation-delay: .17s; }
.tp-grid .tp:nth-child(5) { animation-delay: .21s; } .tp-grid .tp:nth-child(6) { animation-delay: .25s; } .tp-grid .tp:nth-child(7) { animation-delay: .29s; } .tp-grid .tp:nth-child(8) { animation-delay: .33s; }
.tp-grid .tp:hover { background: rgba(255, 220, 160, .12); border-color: rgba(255, 214, 150, .4); }
.tp-grid .tp:active { transform: scale(.94); }
.tp-grid .tp.sel { background: rgba(255, 210, 130, .18); border-color: #f0c870; box-shadow: 0 0 16px rgba(255, 196, 100, .35); }
.tp-grid .tp svg { width: 24px; height: 24px; fill: none; stroke: #f3c873; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tp-grid .tp span { font: 500 12.5px/1.2 var(--sans); text-align: center; word-break: keep-all; }
.tp-or { display: flex; align-items: center; gap: 8px; margin: 14px 4px 12px; }
.tp-or i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 214, 150, .35), transparent); }
.tp-or b { width: 5px; height: 5px; transform: rotate(45deg); background: rgba(240, 200, 112, .7); }
.tp-write { display: flex; gap: 8px; }
.tp-write input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; font: 500 17px var(--serif); color: #fff3dc; letter-spacing: .4px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 214, 150, .35); outline: none; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.tp-write input:focus { border-color: #f0c870; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 3px rgba(240, 200, 112, .18); }
.tp-write input::placeholder { color: rgba(243, 222, 186, .38); }
.tp-write button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #2a1a08; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff1c8, #f0c560 45%, #b9842a); border: 1px solid rgba(255, 236, 190, .8); box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 196, 100, .4); transition: opacity .2s, transform .2s; }
.tp-write button:disabled { opacity: .3; box-shadow: none; }
.tp-write button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tp-beads { display: flex; justify-content: center; gap: 7px; margin: 10px 0 2px; }
.tp-beads i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 236, 200, .14); box-shadow: inset 0 0 0 1px rgba(255, 214, 150, .25); transition: background .25s, box-shadow .25s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.tp-beads i.on { background: radial-gradient(circle at 35% 30%, #fff1c8, #e8b456); box-shadow: 0 0 8px rgba(255, 200, 110, .7); transform: scale(1.15); }
.tp-note { margin: 8px 6px 0; text-align: center; font: 400 11.5px/1.4 var(--sans); color: rgba(243, 222, 186, .55); word-break: keep-all; }
@media (prefers-reduced-motion: reduce) { .pray-topic, .tp-grid .tp { animation: none; } }
.pray-topic .tp-wait { display: none; gap: 3px; align-items: center; }
.pray-topic.wait .tp-wait { display: flex; }
.pray-topic .tp-wait b { width: 4px; height: 4px; border-radius: 50%; background: #f0c870; opacity: .3; animation: tp-dot 1.4s ease-in-out infinite; }
.pray-topic .tp-wait b:nth-child(2) { animation-delay: .2s; } .pray-topic .tp-wait b:nth-child(3) { animation-delay: .4s; }
@keyframes tp-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.taps-trace { position: fixed; left: 6px; bottom: 90px; z-index: 50; margin: 0; padding: 6px 8px; max-width: calc(100vw - 12px); font: 10px/1.35 ui-monospace, Menlo, monospace; color: #b9ffb0; background: rgba(0, 0, 0, .6); border-radius: 6px; pointer-events: none; white-space: pre-wrap; }
/* walking to where a circle will open (off the red runner): the prayer button breathes gold until it opens */
.actions button#btn-circle.going { animation: circ-going 1.2s ease-in-out infinite; }
@keyframes circ-going { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 200, 110, .4)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 210, 120, .95)); transform: translateY(-2px); } }
/* the letter's way to everyone's wishes (user 2026-11-02): a little stack of letters with a red heart seal on a cream
   pill edged in gold — it opens the wall in the window over the game (#letters) */
.letter .lt-others { display: flex; align-items: center; gap: 8px; margin: 8px auto 0; padding: 6px 14px 6px 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #fffaf0, #f6e7c8); border: 1px solid rgba(176, 136, 80, .55); color: #7a3f1a;
  box-shadow: 0 2px 6px rgba(120, 70, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.letter .lt-others:hover { box-shadow: 0 3px 10px rgba(120, 70, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .9); }
.letter .lt-others:active { transform: scale(.96); }
.letter .lt-others svg { width: 30px; height: 21px; flex: none; filter: drop-shadow(0 1px 1px rgba(120, 70, 20, .25)); }
.letter .lt-others span { font: 600 13px/1.2 var(--serif); letter-spacing: .2px; white-space: nowrap; }
.letter .lt-others i { font: 600 15px/1 var(--serif); color: #c4161f; font-style: normal; transform: translateY(-1px); }
.letter-done.alone u { text-decoration: none; color: #f0d9b0; }

/* fun park: get off a ride (src/funpark.js, main rideEnd) */
.ride-off { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 76px); right: calc(env(safe-area-inset-right, 0px) + 14px); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(240, 200, 112, .7); background: rgba(20, 14, 10, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 6; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .4s, transform .4s; }
.ride-off.on { opacity: 1; pointer-events: auto; transform: none; }
.ride-off svg { width: 22px; height: 22px; stroke: #f5d48a; stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* removing gifts from the shelf (user 2026-11-02): a bin at the shelf's right end → edit mode: the tiles shiver, each
   wears a ✕ (a tap takes it off the shelf in a puff), a "remove all" tile leads the row (two taps); ✓ or a scene tap ends it */
.shelf-edit { position: fixed; z-index: 3; top: calc(max(16px, env(safe-area-inset-top)) + 52px); right: 12px; width: 42px; height: 42px; border-radius: 14px; padding: 0;
  display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(240, 200, 112, .45);
  background: linear-gradient(180deg, rgba(64, 44, 26, .78), rgba(16, 11, 8, .78)); box-shadow: 0 6px 16px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 238, 205, .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .6s ease, transform .2s ease, background .3s; }
.shelf-edit svg { width: 21px; height: 21px; stroke: #f0cf8a; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shelf-edit .ok { display: none; stroke-width: 2.4; }
body.in .shelf-edit:not([hidden]) { opacity: .85; pointer-events: auto; }
body.shelfedit .shelf-edit { opacity: 1; background: linear-gradient(180deg, #f3d48d, #c9953f); border-color: #fff0c4; }
body.shelfedit .shelf-edit .bin { display: none; } body.shelfedit .shelf-edit .ok { display: block; stroke: #2b1906; }
.shelf-edit:active { transform: scale(.9); }
body.room-full .shelf-edit, body.confessing .shelf-edit, body.ascending .shelf-edit, body.rosary .shelf-edit, body.film .shelf-edit, body.joying .shelf-edit { opacity: 0 !important; pointer-events: none !important; }
body.shelfedit .giftshelf { padding-top: 6px; height: 60px; }
body.shelfedit .giftshelf .gift:not(.all) { animation: giftshiver .32s ease-in-out infinite alternate; }
body.shelfedit .giftshelf .gift:nth-child(2n) { animation-delay: -.16s; }
@keyframes giftshiver { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.giftshelf .gift .x { display: none; position: absolute; left: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; place-items: center;
  background: linear-gradient(#e2555a, #a9161f); box-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 0 0 1.5px rgba(255, 236, 210, .85); }
.giftshelf .gift .x::before, .giftshelf .gift .x::after { content: ''; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.giftshelf .gift .x::after { transform: rotate(-45deg); }
body.shelfedit .giftshelf .gift:not(.all) .x { display: grid; }
.giftshelf .gift.all { display: none; --rare: #ff8a7a; }
body.shelfedit .giftshelf .gift.all { display: grid; }
.giftshelf .gift.all svg { width: 20px; height: 20px; stroke: #ffb4a6; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.giftshelf .gift.all .n2 { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; font: 800 10px/1 var(--sans); color: #fff; background: #b3202a; }
.giftshelf .gift.all.armed { background: linear-gradient(180deg, #d8434b, #8f1219); border-color: #ffd0c8; animation: giftarmed .5s ease-in-out infinite alternate; }
.giftshelf .gift.all.armed svg { stroke: #fff; }
@keyframes giftarmed { from { transform: scale(1); } to { transform: scale(1.08); } }
.giftshelf .gift.gone { animation: giftgone .42s ease-in forwards !important; pointer-events: none; }
@keyframes giftgone { 30% { transform: scale(1.12); opacity: 1; filter: brightness(1.6); } 100% { transform: scale(.2) translateY(-14px); opacity: 0; filter: brightness(2); } }

/* fun park guides (user 2026-11-02, main rideMarks): in the action bar's language — a disc of dark glass, a hairline
   rim, the ride drawn in thin gold lines with a soft glow, a small tail pointing down at the ride; a slow gold halo
   breathes round it. A tap boards that ride straight away. */
.ride-mark { position: fixed; left: 0; top: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border-radius: 50%; z-index: 2; cursor: pointer;
  display: grid; place-items: center; color: var(--gold); background: radial-gradient(circle at 50% 30%, rgba(70, 58, 44, .55), var(--glass) 70%);
  border: 1px solid rgba(231, 181, 106, .42); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 238, 205, .12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .35s; will-change: transform; }
.ride-mark.on { opacity: 1; pointer-events: auto; }
.ride-mark:active { filter: brightness(1.25); }
.ride-mark > svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(231, 181, 106, .55)); }
.ride-mark .halo { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(231, 181, 106, .55); animation: ridehalo 2.8s ease-out infinite; pointer-events: none; }
@keyframes ridehalo { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.42); opacity: 0; } }
.ride-mark .tail { position: absolute; left: 50%; top: 100%; width: 1px; height: 11px; margin-left: -.5px; background: linear-gradient(rgba(231, 181, 106, .7), rgba(231, 181, 106, 0)); pointer-events: none; }
.ride-mark .tail::after { content: ''; position: absolute; left: -2px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 214, 150, .85); box-shadow: 0 0 6px rgba(255, 200, 120, .9); }
body:not(.in) .ride-mark, body.santaing .ride-mark, body.lettering .ride-mark, body.robing .ride-mark { display: none; }

/* a treat in my hands (user 2026-11-02, main foodStep): two round buttons above the action bar in its glass and gold —
   eat (a fork and knife) and throw away (a bin) */
.foodbar { position: fixed; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 70px); transform: translate(-50%, 14px) scale(.92); display: flex; gap: 12px; padding: 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 4; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s cubic-bezier(.2, 1.3, .4, 1); }
body.food-holding .foodbar { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.foodbar button { width: 52px; height: 46px; border-radius: 999px; display: grid; place-items: center; color: var(--gold); padding: 0; }
.foodbar button:active { transform: scale(.9); }
.foodbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#food-eat { background: radial-gradient(circle at 50% 35%, rgba(231, 181, 106, .28), rgba(231, 181, 106, .06) 70%); box-shadow: inset 0 0 0 1px rgba(231, 181, 106, .45); }
#food-eat svg { filter: drop-shadow(0 0 3px rgba(231, 181, 106, .6)); animation: foodeat 1.8s ease-in-out infinite; }
@keyframes foodeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
body:not(.in) .foodbar, body.film .foodbar { display: none; }
/* the get coffee (user 2026-11-10, main cof*, cupgauge.js): the sip button and, standing on the bar's left end, the glass of
   what is left — its canvas rises above the bar; the fork's place taken by a steaming cup and the word "sip" */
.fb-glass { display: none; position: relative; width: 112px; flex: none; pointer-events: none; }
.fb-glass canvas { position: absolute; left: -12px; bottom: -8px; width: 136px; height: 132px; }
.foodbar.coffee .fb-glass { display: block; }
.fb-cup, .fb-l { display: none; }
.foodbar.coffee .fb-fork { display: none; }
.foodbar.coffee .fb-cup { display: block; width: 22px; height: 22px; }
.foodbar.coffee #food-eat { width: 66px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.foodbar.coffee .fb-l { display: block; font-size: 10.5px; line-height: 1.1; color: var(--gold); opacity: .92; white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.foodbar.coffee #food-drop { align-self: center; }
.foodbar.sipping #food-eat { opacity: .45; pointer-events: none; }
.foodbar.sipping #food-eat svg { animation: none; }
/* the desserts (user 2026-11-10, main snackBite): their own "a bite" button; alone, it takes the eat button's place; with the
   coffee (both hands) the bar holds the glass, sip, blow, bite and the bin — tighter on narrow phones */
#food-bite { display: none; color: #ffd9a8; background: radial-gradient(circle at 50% 35%, rgba(255, 170, 110, .3), rgba(255, 170, 110, .06) 70%); box-shadow: inset 0 0 0 1px rgba(255, 190, 130, .5); }
#food-bite svg { width: 22px; height: 22px; filter: drop-shadow(0 0 3px rgba(255, 180, 110, .6)); }
.foodbar.snack #food-bite { display: flex; width: 58px; height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.foodbar.snack #food-bite .fb-l { display: block; font-size: 10px; line-height: 1.05; color: #ffe0b8; max-width: 56px; text-align: center; word-break: keep-all; }
.foodbar.snack:not(.coffee) #food-eat { display: none; }
.foodbar.snack { gap: 8px; }
.foodbar.snack #food-drop { align-self: center; width: 42px; }
.foodbar.biting #food-bite, .foodbar.biting #food-eat, .foodbar.biting #food-blow, .foodbar.sipping #food-bite, .foodbar.blowing #food-bite { opacity: .45; pointer-events: none; }
@media (max-width: 380px) {
  .foodbar.both { gap: 5px; padding: 5px; }
  .foodbar.both .fb-glass { width: 96px; }
  .foodbar.both #food-eat, .foodbar.both #food-blow, .foodbar.both #food-bite { width: 50px; }
  .foodbar.both .fb-l, .foodbar.both #food-bite .fb-l { font-size: 9px; max-width: 48px; }
  .foodbar.both #food-drop { width: 36px; }
}
/* each picture dessert's place (user 2026-11-10 c): its picture rises over its own "a bite" button */
.fb-dess { display: contents; }
.fb-ds { position: relative; width: 58px; flex: none; display: flex; align-items: flex-end; }
.fb-dsc { position: absolute; left: -18px; bottom: 48px; width: 94px; height: 132px; pointer-events: none; }
.fb-db { width: 58px !important; height: 52px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #ffd9a8 !important; background: radial-gradient(circle at 50% 35%, rgba(255, 170, 110, .3), rgba(255, 170, 110, .06) 70%); box-shadow: inset 0 0 0 1px rgba(255, 190, 130, .5); }
.fb-db svg { width: 21px !important; height: 21px !important; filter: drop-shadow(0 0 3px rgba(255, 180, 110, .6)); }
.fb-db .fb-l { display: block !important; font-size: 10px; line-height: 1.05; color: #ffe0b8; max-width: 56px; text-align: center; word-break: keep-all; }
.fb-ds.rest .fb-db, .fb-ds.done .fb-db { opacity: .45; pointer-events: none; }
.foodbar.dess #food-bite { display: none !important; }
.foodbar.dess { gap: 6px; }
@media (max-width: 400px) { .foodbar.dess.both { zoom: .9; } }
@media (max-width: 350px) { .foodbar.dess.both { zoom: .8; } .foodbar.dess:not(.both) { zoom: .9; } }
/* blow on it (user 2026-11-10, main cofBlow): an icy button beside the sip; while a sip or a blow runs both rest */
#food-blow { display: none; color: #bfe4ff; background: radial-gradient(circle at 50% 35%, rgba(130, 200, 255, .3), rgba(130, 200, 255, .06) 70%); box-shadow: inset 0 0 0 1px rgba(150, 210, 255, .5); }
#food-blow svg { width: 22px; height: 22px; filter: drop-shadow(0 0 3px rgba(140, 205, 255, .7)); }
#food-blow .fb-l { color: #cfeaff; }
.foodbar.coffee { gap: 8px; }
.foodbar.coffee #food-blow { display: flex; width: 58px; height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.foodbar.coffee #food-eat { width: 58px; }
.foodbar.coffee .fb-l { max-width: 56px; font-size: 10px; white-space: normal; word-break: keep-all; text-align: center; line-height: 1.05; overflow: visible; }
.foodbar.coffee #food-drop { width: 42px; }
.foodbar.hot #food-blow svg { animation: fbblow 1.2s ease-in-out infinite; }
@keyframes fbblow { 0%, 100% { transform: translateX(0) scale(1); } 50% { transform: translateX(2px) scale(1.1); } }
.foodbar.sipping #food-blow, .foodbar.blowing #food-blow, .foodbar.blowing #food-eat { opacity: .45; pointer-events: none; }
.foodbar.blowing #food-eat svg { animation: none; }
/* the frost at the screen's edges while the great breath blows (opacity only) */
#frost-vig { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(170, 215, 255, 0) 55%, rgba(170, 215, 255, .2) 82%, rgba(220, 240, 255, .42) 100%); }
#frost-vig svg { position: absolute; width: 34vmin; height: 34vmin; opacity: .7; }
#frost-vig.on { animation: frostvig 2.6s ease-out forwards; }
@keyframes frostvig { 0% { opacity: 0; } 18% { opacity: 1; } 60% { opacity: .85; } 100% { opacity: 0; } }
/* what that sip felt like, over my head: pops in, floats up, fades (transform/opacity only) */
#sip-pop { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
#sip-pop span { display: block; padding: 6px 14px 7px; border-radius: 999px; font: 700 15px/1.15 system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; white-space: nowrap; opacity: 0;
  transform: translate(-50%, -100%); color: #fff6e8; background: rgba(32, 18, 10, .78); border: 1px solid rgba(255, 220, 160, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
#sip-pop span.on { animation: sippop 1.9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
#sip-pop span.hot { color: #ffd2c2; border-color: rgba(255, 110, 70, .8); background: rgba(70, 16, 8, .82); }
#sip-pop span.best, #sip-pop span.now, #sip-pop span.done { color: #ffe39a; border-color: rgba(255, 210, 110, .95); background: linear-gradient(180deg, rgba(74, 44, 10, .9), rgba(40, 22, 6, .9)); }
#sip-pop span.warm { color: #ffe6c8; }
#sip-pop span.cold { color: #cfe7ff; border-color: rgba(150, 200, 255, .7); background: rgba(12, 26, 46, .82); }
#sip-pop span.chomp { color: #fff3d6; border-color: rgba(255, 190, 110, .95); background: linear-gradient(180deg, rgba(150, 60, 20, .92), rgba(90, 30, 8, .92)); font-size: 22px; font-weight: 900; }
#sip-pop span.chomp.on { animation-name: sippopfrost; }
#sip-pop span.frost { color: #e6f5ff; border-color: rgba(170, 220, 255, .95); background: linear-gradient(180deg, rgba(40, 90, 150, .88), rgba(14, 34, 70, .9)); text-shadow: 0 0 6px rgba(150, 210, 255, .9); font-size: 18px; }
#sip-pop span.frost.on { animation-name: sippopfrost; }
@keyframes sippopfrost { 0% { opacity: 0; transform: translate(-50%, -100%) scale(.4); } 10% { opacity: 1; transform: translate(-50%, -100%) scale(1.25, .9); } 18% { transform: translate(-50%, -100%) scale(.95, 1.08); } 26% { transform: translate(-50%, -100%) scale(1.05, .97); } 34% { transform: translate(-50%, -100%) scale(1); } 75% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 26px)); } }
@keyframes sippop { 0% { opacity: 0; transform: translate(-50%, -100%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.12); } 22% { transform: translate(-50%, -100%) scale(1); } 75% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 26px)) scale(.96); } }
#sip-pop span.hot.on { animation-name: sippophot; }
@keyframes sippophot { 0% { opacity: 0; transform: translate(-50%, -100%) scale(.5); } 10% { opacity: 1; transform: translate(-50%, -100%) scale(1.15) rotate(-4deg); } 16% { transform: translate(-46%, -100%) rotate(4deg); } 22% { transform: translate(-54%, -100%) rotate(-3deg); } 28% { transform: translate(-50%, -100%) rotate(0); } 75% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 26px)); } }

/* burning a worry at the campfire (user 2026-11-03, main campGo/worrySend): a sheet of warm parchment scorched at its
   edges, glowing from below as if held near the flames; a flame over it; the burn button an ember */
.worry { position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 58px)); transform: translate(-50%, 12px) rotate(0.5deg); width: min(390px, calc(100vw - 28px)); box-sizing: border-box; padding: 34px 20px 12px; border-radius: 4px;
  background: radial-gradient(130% 80% at 50% 110%, rgba(255, 150, 60, .55), rgba(255, 150, 60, 0) 60%), radial-gradient(120% 90% at 50% 0%, #fbf0d8 0%, #f0dcb0 62%, #d9b57a 100%); color: #4a2a14;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(120, 70, 30, .4), inset 0 0 26px rgba(120, 60, 20, .35), 0 10px 60px rgba(255, 120, 40, .35);
  -webkit-mask-image: radial-gradient(140% 120% at 50% 50%, #000 82%, rgba(0, 0, 0, .9) 90%, transparent 100%); mask-image: radial-gradient(140% 120% at 50% 50%, #000 82%, rgba(0, 0, 0, .9) 90%, transparent 100%);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.2); z-index: 6; }
body.worrying .worry { opacity: 1; transform: translate(-50%, 0) rotate(0.5deg); pointer-events: auto; }
.worry .wr-flame { position: absolute; left: 50%; top: -30px; width: 54px; height: 54px; margin-left: -27px; filter: drop-shadow(0 0 12px rgba(255, 150, 50, .9)); animation: wrflick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wrflick { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07, 1.12) rotate(2deg); } }
.worry .wr-title { display: block; text-align: center; font: italic 600 25px/1.2 "Snell Roundhand", "Apple Chancery", Palatino, Georgia, serif; color: #8a3a12; margin: 0 0 8px; }
html[lang="ko"] .worry .wr-title, html[lang^="zh"] .worry .wr-title, html[lang="ja"] .worry .wr-title { font: 700 21px/1.3 "Apple SD Gothic Neo", "Hiragino Mincho ProN", "Noto Serif KR", serif; }
.worry textarea { display: block; width: 100%; box-sizing: border-box; min-height: 112px; padding: 4px 8px; border: 0; outline: none; resize: none; font-size: 17px; line-height: 30px; color: #3a1c0c; background: repeating-linear-gradient(transparent 0 29px, rgba(140, 90, 40, .22) 29px 30px); font-family: "Apple SD Gothic Neo", Georgia, serif; }
.worry textarea::placeholder { color: rgba(90, 50, 20, .5); }
.worry .wr-note { display: block; text-align: center; font-size: 11.5px; line-height: 1.35; color: rgba(90, 50, 20, .72); margin: 6px 4px 2px; }
.worry .wr-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
#worry-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(90, 50, 20, .1); }
#worry-close svg { width: 18px; height: 18px; stroke: #6a3a18; stroke-width: 2; fill: none; }
#worry-burn { width: 62px; height: 62px; margin: -6px -6px -4px 0; padding: 0; filter: drop-shadow(0 4px 12px rgba(220, 90, 20, .6)); transition: transform .25s; animation: wrglow 2.2s ease-in-out infinite; }
#worry-burn svg { width: 100%; height: 100%; stroke: none; }
#worry-burn:active { transform: scale(.92); }
@keyframes wrglow { 0%, 100% { filter: drop-shadow(0 4px 12px rgba(220, 90, 20, .55)); } 50% { filter: drop-shadow(0 4px 20px rgba(255, 140, 40, .95)); } }
body.worrying .actions, body.burning .actions { opacity: 0 !important; pointer-events: none !important; }

/* praying alone (main.js soloStep): the page dims round the light and the controls step back until touched */
#solo-vig { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2.6s ease;
  background: radial-gradient(ellipse 80% 64% at 50% 47%, rgba(0, 0, 0, 0) 42%, rgba(6, 4, 10, .38) 78%, rgba(4, 3, 8, .66) 100%); }
body.soloing #solo-vig { opacity: 1; }
body.soloing .hud, body.soloing .actions, body.soloing #giftshelf, body.soloing .shelf-edit { opacity: .2 !important; transition: opacity 2.2s ease !important; }
body.soloing .hud:hover, body.soloing .actions:hover { opacity: 1 !important; transition: opacity .3s !important; }

/* the choir game's sign (user 2026-11-03): a small gilded pill over the choir, only while it is near and in view */
.choir-sign { position: fixed; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 9px; border-radius: 999px; cursor: pointer;
  color: var(--gold); font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .02em; white-space: nowrap; background: radial-gradient(circle at 50% 20%, rgba(70, 58, 44, .6), var(--glass) 75%);
  border: 1px solid rgba(231, 181, 106, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 238, 205, .14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .45s; will-change: transform; }
.choir-sign.on { opacity: 1; pointer-events: auto; }
.choir-sign:active { filter: brightness(1.25); }
.choir-sign > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(231, 181, 106, .6)); }
.choir-sign > svg.play { width: 14px; height: 14px; fill: currentColor; stroke: none; margin-left: -1px; opacity: .9; }
.choir-sign > span { color: #f3dfb6; }
.choir-sign .tail { position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: rgba(40, 33, 26, .8); border-right: 1px solid rgba(231, 181, 106, .5); border-bottom: 1px solid rgba(231, 181, 106, .5); }
.choir-sign.on > svg:first-child { animation: cgSignBob 2.4s ease-in-out infinite; }
@keyframes cgSignBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-6deg); } }
body:not(.in) .choir-sign, body.confessing .choir-sign, body.choiring .choir-sign, body.robing .choir-sign, body.soloing .choir-sign { display: none; }

/* loading in figures (user 2026-11-03, src/ring.js pctHTML/pctFollow): a rolling counter in a high-contrast didone, gold
   figures fading in and out at the top and bottom of their windows as they roll, a small spaced label between two
   hairlines. On the title it stands where "Tap to enter" will appear and gives way to it; on the choir curtain it sits
   under the medallions. */
.pct { display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; user-select: none; }
.pc-num { display: flex; align-items: flex-start; font-family: "Bodoni 72", Didot, "Bodoni MT", "Playfair Display", "Noto Serif Display", "Noto Serif", Georgia, serif; font-weight: 400;
  font-size: 42px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
  filter: drop-shadow(0 0 12px rgba(255, 186, 96, .42)) drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.pc-col { position: relative; height: 1.08em; width: .6em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); }
.pc-strip { display: flex; flex-direction: column; will-change: transform; }
.pc-strip i { display: block; height: 1.08em; line-height: 1.08em; font-style: normal; text-align: center;
  background: linear-gradient(180deg, #fff7e2 8%, #f6d58a 46%, #d39b45 78%, #a56d27 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-sign { font-size: .46em; margin: .2em 0 0 .1em; background: linear-gradient(180deg, #fff1cf, #e2b25e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-label { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 228, 184, .74); margin-right: -.34em; white-space: nowrap; }
.pc-label::before, .pc-label::after { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 213, 138, .7)); }
.pc-label::after { transform: scaleX(-1); margin-left: -.34em; }
:lang(ko) .pc-label, :lang(ja) .pc-label, :lang(zh) .pc-label { letter-spacing: .2em; margin-right: -.2em; font-size: 11.5px; }
.pc-label { animation: pcBreathe 2.6s ease-in-out infinite; }
@keyframes pcBreathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
/* title: in the place of "Tap to enter" (which takes it back when ready) */
.title .pct { height: 72px; margin: 14px 0 -64px; transition: opacity .7s ease, transform .7s ease; }
body.ready .title .pct { opacity: 0; transform: translateY(-6px) scale(.96); }
/* choir curtain: under the medallions */
.cc-stage .pct { margin-top: -6px; }
.cc-stage .pc-num { font-size: 38px; }
.cgcurtain.ready .pc-num { filter: drop-shadow(0 0 18px rgba(255, 210, 120, .8)) drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); transition: filter .3s; }

/* the crypt of remembrance (user 2026-11-04, src/crypt.js, main.js memo*): the sign over the doorway (and "to the
   cathedral" from below), the book's marker, the book itself, a plaque read close, the first-visit card. Dark stone,
   warm parchment light, thin gold rules with a small cross; words in a serif. A deep vignette while down there. */
.crypt-sign .up, .crypt-sign.up .dn { display: none; }
.crypt-sign.up .up { display: inline; }
.crypt-sign.up svg.up { display: block; }
.crypt-sign.on > svg.dn { animation: cgSignBob 2.6s ease-in-out infinite; }
.memo-mark.on > svg:first-child { animation: cgSignBob 2.8s ease-in-out infinite; }
body.crypting .crypt-sign:not(.up), body.memoing .choir-sign, body.memoing .memo-mark { display: none; }
body.crypting::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 78% 70% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(6, 4, 2, .42) 82%, rgba(4, 3, 2, .72) 100%); }
dialog.memo-sheet { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 30; width: min(368px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 18px 18px 14px; border-radius: 20px;
  background: radial-gradient(130% 80% at 50% 0%, rgba(74, 56, 34, .55), rgba(20, 16, 12, .9) 70%), rgba(16, 13, 10, .92); border: 1px solid rgba(231, 181, 106, .42);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 236, 200, .12); color: #efe2c8; }
dialog.memo-sheet[open] { animation: mm-in .5s cubic-bezier(.2, 1.15, .3, 1) both; }
@keyframes mm-in { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
dialog.memo-sheet .close { position: absolute; right: 10px; top: 10px; }
.mm-orn { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold); margin: 2px 0 6px; }
.mm-orn i { flex: 0 1 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 181, 106, .7), transparent); }
.mm-orn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 190, 110, .6)); }
dialog.memo-sheet h2 { margin: 0 0 10px; text-align: center; font: 500 18px var(--serif); letter-spacing: .04em; color: #f6e6c4; text-shadow: 0 0 14px rgba(255, 180, 100, .35); word-break: keep-all; }
.mm-about { margin: 0 2px 10px; font: 400 14px/1.62 var(--serif); color: #e6d6b8; word-break: keep-all; }
.mm-rite { margin: 10px 4px 0; font: 400 11.5px/1.5 var(--sans, system-ui); color: rgba(230, 214, 184, .62); text-align: center; word-break: keep-all; }
.mm-note { margin: 6px 2px 0; font: 400 12px/1.45 var(--sans, system-ui); color: rgba(240, 222, 190, .78); word-break: keep-all; }
#memo-name, #memo-text { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .32);
  background: linear-gradient(180deg, rgba(248, 236, 210, .95), rgba(232, 214, 180, .95)); color: #3a2c1c; font: 400 16px/1.5 var(--serif); outline: none; resize: none; }
#memo-name { font-weight: 600; }
#memo-name:focus, #memo-text:focus { border-color: rgba(231, 181, 106, .85); box-shadow: 0 0 0 3px rgba(231, 181, 106, .18); }
#memo-name::placeholder, #memo-text::placeholder { color: rgba(80, 60, 36, .55); }
.mm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memo-vis { display: flex; padding: 3px; gap: 3px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(231, 181, 106, .25); }
.memo-vis button { padding: 7px 11px; border-radius: 999px; border: 0; background: none; color: rgba(240, 222, 190, .7); font: 600 12px var(--sans, system-ui); cursor: pointer; white-space: nowrap; }
.memo-vis button.on { background: linear-gradient(180deg, rgba(231, 181, 106, .9), rgba(190, 140, 70, .9)); color: #2a1e10; }
.mm-count { font: 400 11px var(--sans, system-ui); color: rgba(240, 222, 190, .55); font-variant-numeric: tabular-nums; }
.memo-msg { min-height: 0; margin: 8px 2px 0; font: 500 13px/1.5 var(--sans, system-ui); word-break: keep-all; }
.memo-msg:empty { display: none; }
.memo-msg.wait { color: #f0d9a8; } .memo-msg.wait::after { content: ''; display: inline-block; width: 1em; animation: mmDots 1.2s steps(4) infinite; }
.memo-msg.no { color: #ffc9a8; } .memo-msg.care { color: #f6e6c4; padding: 10px 12px; border-radius: 12px; background: rgba(120, 80, 40, .28); border: 1px solid rgba(231, 181, 106, .3); }
@keyframes mmDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.mm-act { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mm-go { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 220, 160, .55);
  background: linear-gradient(180deg, #e9bd73, #b8853f); color: #2a1c0c; font: 700 14px var(--sans, system-ui); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 18px rgba(255, 180, 90, .25); }
.mm-go:disabled { opacity: .45; cursor: default; }
.mm-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.mm-x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(231, 181, 106, .35); background: rgba(0, 0, 0, .3); color: #efe2c8; font-size: 15px; cursor: pointer; }
.mm-sm { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(231, 181, 106, .3); background: rgba(0, 0, 0, .25); color: rgba(240, 222, 190, .8); font: 600 12px var(--sans, system-ui); cursor: pointer; }
.mm-sm[hidden], .mm-go[hidden] { display: none; }
.memo-card .mc-text { margin: 0 4px; font: 400 15.5px/1.75 var(--serif); color: #f2e4c8; white-space: pre-wrap; word-break: keep-all; text-align: center; }
.memo-card .mc-meta { display: flex; justify-content: center; gap: 10px; margin: 10px 0 0; font: 400 11.5px var(--sans, system-ui); color: rgba(230, 214, 184, .6); }
.memo-card.fresh h2 { animation: mcGlow 2.4s ease-out both; }
@keyframes mcGlow { 0% { text-shadow: 0 0 0 rgba(255, 200, 120, 0); opacity: 0; } 40% { text-shadow: 0 0 26px rgba(255, 200, 120, .9); opacity: 1; } 100% { text-shadow: 0 0 14px rgba(255, 180, 100, .35); } }
body:not(.in) .memo-mark, body:not(.in) .crypt-sign { display: none; }
/* everyone's words (user 2026-11-04): the book's button — a gilded pill with three breathing flames — and the wall of
   cards it opens */
.mm-wall { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 11px 14px; border-radius: 16px; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(240, 200, 130, .62); color: #f8e8c6; font: 600 14px var(--sans, system-ui); text-align: left;
  background: radial-gradient(120% 140% at 12% 50%, rgba(255, 176, 86, .28), rgba(70, 46, 22, .7) 46%, rgba(26, 18, 12, .92));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 170, 80, .18), inset 0 1px 0 rgba(255, 236, 196, .22); }
.mm-wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, .22) 50%, transparent 65%); transform: translateX(-120%); animation: mwSheen 5.5s ease-in-out infinite 1.2s; pointer-events: none; }
@keyframes mwSheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.mm-wall:active { transform: scale(.985); filter: brightness(1.15); }
.mw-flames { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.mw-flames i { width: 6px; height: 14px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff3c4, #ffb24a 55%, rgba(255, 120, 30, 0) 75%);
  filter: drop-shadow(0 0 5px rgba(255, 170, 70, .9)); transform-origin: 50% 100%; animation: mwFlame 2.6s ease-in-out infinite; }
.mw-flames i:nth-child(2) { height: 18px; animation-delay: -.9s; } .mw-flames i:nth-child(3) { animation-delay: -1.7s; }
@keyframes mwFlame { 0%, 100% { transform: scale(1, 1) rotate(-2deg); opacity: .95; } 50% { transform: scale(.92, 1.08) rotate(2deg); opacity: 1; } }
.mw-label { flex: 1; letter-spacing: .02em; word-break: keep-all; }
.mw-count { font: 700 12px var(--sans, system-ui); color: #2a1c0c; background: linear-gradient(180deg, #f2cf86, #c8954a); border-radius: 999px; padding: 2px 8px; }
.mw-count:empty { display: none; }
.mw-go { width: 18px; height: 18px; fill: none; stroke: #f2cf86; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
dialog.memo-wall { width: min(420px, calc(100vw - 20px)); height: min(640px, calc(100vh - 36px)); height: min(640px, calc(100dvh - 36px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; }   /* (a set height, never fit-content: iOS in-app WebKit sized it on the empty list and kept it — the cards came later, squeezed to a 8 px strip; user 2026-11-05) */
dialog.memo-wall:not([open]) { display: none; }
.mw-sub { margin: -4px 0 10px; text-align: center; font: 400 12px var(--sans, system-ui); color: rgba(240, 222, 190, .7); }
.mw-list { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 8px; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.mw-card { position: relative; padding: 14px 16px 10px; border-radius: 14px; border: 1px solid rgba(231, 181, 106, .28);
  background: linear-gradient(180deg, rgba(246, 232, 204, .1), rgba(246, 232, 204, .04)), rgba(24, 18, 13, .8); animation: mwIn .5s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes mwIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mw-card h3 { margin: 0 0 6px; font: 600 15px var(--serif); color: #f6e6c4; letter-spacing: .02em; word-break: keep-all; }
.mw-card p { margin: 0; font: 400 14px/1.7 var(--serif); color: #eadbbd; white-space: pre-wrap; word-break: keep-all; }
.mw-card footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 400 11px var(--sans, system-ui); color: rgba(230, 214, 184, .55); }
.mw-card footer time { flex: 1; }
.mw-light { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(231, 181, 106, .35); background: rgba(0, 0, 0, .25); cursor: pointer; display: grid; place-items: center; }
.mw-light svg { width: 18px; height: 18px; fill: none; stroke: rgba(240, 210, 150, .8); stroke-width: 1.6; }
.mw-card.lit .mw-light { background: radial-gradient(circle, rgba(255, 190, 90, .45), rgba(0, 0, 0, .2)); box-shadow: 0 0 14px rgba(255, 170, 70, .55); }
.mw-card.lit .mw-light .fl { fill: #ffd27a; stroke: #ffe8b0; animation: mwFlame 2.2s ease-in-out infinite; transform-origin: 12px 9px; }
.mw-card.lit { border-color: rgba(255, 196, 110, .5); box-shadow: inset 0 0 22px rgba(255, 170, 70, .08); }
.mw-flag { border: 0; background: none; color: rgba(230, 214, 184, .45); font: 500 11px var(--sans, system-ui); cursor: pointer; }
.mw-none { text-align: center; color: rgba(240, 222, 190, .75); font: 400 14px/1.6 var(--serif); margin: 18px 6px; word-break: keep-all; }
.mw-more { align-self: center; margin-top: 8px; }
/* the book's marker over the great votive table (user 2026-11-04: plain to see from down the hall): larger, a warm
   breathing halo and a slow ring of light round it */
.memo-mark.big { height: 40px; padding: 0 14px 0 12px; font-size: 14px; border-color: rgba(255, 206, 130, .75);
  background: radial-gradient(circle at 50% 30%, rgba(120, 82, 40, .75), rgba(30, 22, 14, .82) 78%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 170, 80, .35), inset 0 1px 0 rgba(255, 238, 205, .2); }
.memo-mark.big.on { animation: mmBreath 3.2s ease-in-out infinite; }
.memo-mark.big::before { content: ''; position: absolute; inset: -7px; border-radius: 999px; border: 1px solid rgba(255, 200, 120, .45); opacity: 0; animation: mmRing 3.2s ease-out infinite; pointer-events: none; }
@keyframes mmBreath { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 170, 80, .25), inset 0 1px 0 rgba(255, 238, 205, .2); } 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 180, 90, .55), inset 0 1px 0 rgba(255, 238, 205, .2); } }
@keyframes mmRing { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.14); } }
.memo-mark.big > svg { width: 20px; height: 20px; }
/* the language flags on the title (user 2026-11-04): under "tap to enter", a dark glass band with a gold hairline (the
   offering sheet's look), the flags rising in one after another; the one in use larger, ringed in gold with a glow; its
   name below in spaced small caps after a thin globe, cross-fading on a change */
.langbox { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: default; max-width: 100%; }
.langs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 5px; padding: 7px 10px; border-radius: 999px; position: relative;
  max-width: 252px; /* 15 flags: two rows of 8 + 7 on phones (one row was 450 px) */
  background: linear-gradient(180deg, rgba(34, 24, 14, .62), rgba(12, 9, 6, .72)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, .34), inset 0 1px 0 rgba(255, 236, 200, .12), 0 6px 22px rgba(0, 0, 0, .45); }
.langs::before, .langs::after { content: ''; position: absolute; top: 50%; width: 34px; height: 1px; pointer-events: none; display: none; }
@media (max-width: 559.9px) { .langs { border-radius: 22px; } }
@media (min-width: 480px) and (max-width: 559.9px) { .langs { max-width: 284px; } }
@media (min-width: 560px) { .langs { max-width: none; flex-wrap: nowrap; } }
@media (min-width: 480px) { .langs { gap: 7px; padding: 8px 13px; } .langs::before, .langs::after { display: block; } }
.langs::before { right: 100%; margin-right: 8px; background: linear-gradient(90deg, rgba(232, 196, 122, 0), rgba(232, 196, 122, .55)); }
.langs::after { left: 100%; margin-left: 8px; background: linear-gradient(90deg, rgba(232, 196, 122, .55), rgba(232, 196, 122, 0)); }
.langs button { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; position: relative;
  opacity: .5; filter: saturate(.55) brightness(.8); transition: opacity .35s, filter .35s, transform .35s cubic-bezier(.2, .9, .3, 1.3);
  -webkit-tap-highlight-color: transparent; animation: flagin .7s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(.25s + var(--i) * 55ms); }
@keyframes flagin { from { opacity: 0; transform: translateY(8px) scale(.7); } }
.langs button svg { width: 100%; height: 100%; border-radius: 50%; display: block; stroke: none; box-shadow: 0 0 0 1px rgba(255, 236, 200, .25), 0 2px 5px rgba(0, 0, 0, .6); }
.langs button::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
.langs button::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #e8c47a; pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 196, 100, .6), inset 0 0 6px rgba(255, 210, 140, .35); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.langs button.on { opacity: 1; filter: none; transform: scale(1.2); z-index: 1; }
.langs button.on::after { opacity: 1; transform: none; }
@media (hover: hover) { .langs button:not(.on):hover { opacity: .95; filter: none; transform: translateY(-2px) scale(1.08); } }
.lang-name { display: flex; align-items: center; gap: 7px; margin: 0; color: #e8c47a; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9); animation: flagin .8s ease both .9s; }
.lang-name svg { width: 13px; height: 13px; stroke: #e8c47a; stroke-width: 1.3; opacity: .85; flex: none; }
.lang-name span.swap { animation: lnswap .5s ease both; }
@keyframes lnswap { from { opacity: 0; letter-spacing: .5em; filter: blur(2px); } }
body.in .langbox { pointer-events: none; }
@media (max-width: 359px) { .langs { gap: 5px 4px; padding: 6px 7px; max-width: 196px; } .langs button { width: 19px; height: 19px; } .langs button::after { inset: -3px; } }
/* short screens (≤ 640 px tall, e.g. 320 × 568): the flags pushed the head count under the sound pill — tighter spacing */
@media (max-height: 640px) { .title { gap: 7px; } .enter { width: 108px; height: 108px; } .title .here { margin-top: 2px; } .langbox { margin-top: 2px; gap: 6px; } }

/* one note per person (user 2026-11-05): with mine kept, the book shows it instead of the form */
#memo.once #memo-name, #memo.once #memo-text, #memo.once .mm-row, #memo.once #memo-note, #memo.once #memo-send { display: none; }
.memo-mine { margin: 4px 0 10px; text-align: center; }
.memo-mine p { margin: 0 0 10px; font: 400 13px/1.6 var(--sans, system-ui); color: rgba(240, 222, 190, .82); word-break: keep-all; }
.memo-mine blockquote { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .3); background: rgba(246, 232, 204, .06); text-align: left; max-height: 9.5em; overflow: hidden; }
.memo-mine .mm-to { display: block; margin-bottom: 4px; font: 600 14px var(--serif); color: #f6e6c4; }
.memo-mine .mm-to:empty { display: none; }
.memo-mine .mm-tx { font: 400 13px/1.65 var(--serif); color: #eadbbd; white-space: pre-wrap; word-break: keep-all; }

/* the seed field (user 2026-11-05): the stand's sheet, a plot's card, the PIN, the harvest's card, the board, my plot's medallion */
.seed-sheet .seed-mine { display: none; text-align: center; }
.seed-sheet.has .seed-form, .seed-sheet.has .seed-go { display: none; }
.seed-sheet.has .seed-mine { display: block; }
.seed-sheet .seed-lead { text-align: center; margin-bottom: 12px; }
.seed-sheet select, .seed-sheet textarea { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .4); background: rgba(246, 232, 204, .92); color: #2a1c0e; font: 500 16px var(--serif); }
.seed-sheet select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7a5a34 50%), linear-gradient(135deg, #7a5a34 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.seed-sheet textarea { resize: none; line-height: 1.45; } .seed-wishnote { margin: -4px 0 10px !important; font-size: 12px !important; }
.seed-mine blockquote q, .plot-wish q, .hv-wish q { display: block; margin-top: 8px; font: italic 400 15px/1.5 var(--serif); color: #ffe6b0; quotes: '“' '”'; word-break: keep-all; }
.seed-mine blockquote q[hidden], .plot-wish[hidden], .hv-wish[hidden], .plot-saint[hidden] { display: none; }
.plot-saint { margin: -4px 0 6px; font: 500 13px var(--serif); color: #e9cf8e; letter-spacing: .04em; }
.plot-wish, .hv-wish { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .3); background: rgba(246, 232, 204, .06); text-align: center; }
.plot-wish small, .hv-wish small { font: 500 11px var(--sans, system-ui); color: rgba(240, 222, 190, .7); letter-spacing: .04em; }
.seed-sheet input[type=text] { width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .4); background: rgba(246, 232, 204, .92); color: #2a1c0e; font: 500 17px var(--serif); }
.seed-pinrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; font: 500 14px var(--sans, system-ui); color: #efe2c8; }
.seed-pinrow input { width: 128px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .45); background: rgba(246, 232, 204, .92); color: #2a1c0e; font: 600 20px/1 ui-monospace, Menlo, monospace; letter-spacing: .5em; text-align: center; }
.seed-mine blockquote { margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(231, 181, 106, .3); background: rgba(246, 232, 204, .06); }
.seed-mine blockquote b { display: block; font: 600 18px var(--serif); color: #f6e6c4; } .seed-mine blockquote span { font: 400 13px var(--sans, system-ui); color: rgba(240, 222, 190, .75); }
.plot-sheet { text-align: center; }
.plot-sheet .plot-tag { margin: 0 0 4px; display: inline-block; padding: 2px 10px; border-radius: 999px; background: linear-gradient(180deg, #f2cf86, #c8954a); color: #2a1c0c; font: 700 11px var(--sans, system-ui); letter-spacing: .06em; }
.plot-sheet .plot-tag[hidden] { display: none; }
.plot-meta { margin: 0 0 10px; font: 400 13px var(--sans, system-ui); color: rgba(240, 222, 190, .78); }
.plot-crop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 8px; } .plot-crop[hidden] { display: none; }
.plot-crop b { font: 600 22px var(--serif); color: #fff0c8; text-shadow: 0 0 16px rgba(255, 200, 110, .45); }
.plot-crop i, .hv-rare { font: 700 11px var(--sans, system-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(246, 232, 204, .12); color: #e9d6a8; }
.plot-crop[data-r="1"] i, .harvest-sheet[data-r="1"] .hv-rare { background: rgba(120, 170, 255, .22); color: #cfe0ff; }
.plot-crop[data-r="2"] i, .harvest-sheet[data-r="2"] .hv-rare { background: linear-gradient(90deg, #f6d27a, #ffefb8, #e4a63a); color: #3a2408; }
.plot-left { margin: 0 0 12px; font: 500 13px var(--sans, system-ui); color: #ffd98a; } .plot-left[hidden] { display: none; }
.plot-harvest { margin: 4px auto 2px; } .plot-harvest[hidden] { display: none; }
.plot-pinbox { display: none; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 8px; }
.plot-sheet.pin .plot-pinbox { display: flex; } .plot-sheet.pin .plot-harvest { display: none; }
.plot-sheet.shake { animation: plShake .45s; } @keyframes plShake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.harvest-sheet { text-align: center; overflow: hidden; }
.harvest-sheet .hv-title { margin: 6px 0 2px; font: 600 13px var(--sans, system-ui); letter-spacing: .2em; text-transform: uppercase; color: #ffd98a; }
.harvest-sheet h2 { font-size: 30px !important; margin: 4px 0 8px !important; }
.harvest-sheet .hv-line { margin: 12px 0 14px; font: 400 14px var(--serif); color: #eadbbd; }
.hv-burst { position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(circle at 50% 30%, rgba(255, 214, 130, .35), transparent 60%); pointer-events: none; animation: hvGlow 2.4s ease-in-out infinite alternate; }
@keyframes hvGlow { from { opacity: .55; } to { opacity: 1; } }
.lost-card h3 { margin-bottom: 2px !important; }
.field-mine { position: fixed; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid rgba(231, 181, 106, .6); background: rgba(22, 18, 14, .62); color: #f6e2b0; font: 600 12px var(--sans, system-ui); opacity: 0; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.field-mine.on { opacity: 1; pointer-events: auto; }
.field-mine svg { width: 18px; height: 18px; fill: none; stroke: #9fdc7a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the field's ledger (user 2026-11-05): what was gathered in and what was thrown away, how long ago */
.seed-ledger-open { margin: 2px 0 10px; }
.ledger-leaves i { background: radial-gradient(circle at 50% 70%, #e6ffcf, #7fd45a 55%, rgba(60, 160, 60, 0) 75%) !important; }
.ledger-sheet { background: radial-gradient(130% 70% at 50% 0%, rgba(70, 92, 48, .5), rgba(20, 18, 12, .92) 70%), rgba(16, 14, 10, .94) !important; }
.lg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 12px; }
.lg-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; border-radius: 14px; border: 1px solid rgba(231, 181, 106, .22); background: linear-gradient(180deg, rgba(246, 232, 204, .07), rgba(246, 232, 204, .02)); }
.lg-stats b { font: 600 24px/1 var(--serif); color: #fff0c8; text-shadow: 0 0 14px rgba(255, 210, 120, .35); font-variant-numeric: tabular-nums; }
.lg-stats span { font: 500 11px var(--sans, system-ui); color: rgba(240, 222, 190, .72); text-align: center; word-break: keep-all; }
.lg-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 0 10px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(231, 181, 106, .2); }
.lg-tabs button { position: relative; z-index: 1; padding: 8px 0; border: 0; background: none; color: rgba(240, 222, 190, .7); font: 600 13px var(--sans, system-ui); cursor: pointer; transition: color .3s; }
.lg-tabs button.on { color: #2a1c0c; }
.lg-ink { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(33.333% - 2px); border-radius: 999px; background: linear-gradient(180deg, #f2cf86, #c8954a); box-shadow: 0 2px 10px rgba(200, 150, 74, .35); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.lg-tabs[data-t="harv"] .lg-ink { transform: translateX(100%); }
.lg-tabs[data-t="lost"] .lg-ink { transform: translateX(200%); background: linear-gradient(180deg, #b9a58a, #7d6a52); }
.lg-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px solid rgba(231, 181, 106, .2); background: linear-gradient(180deg, rgba(246, 232, 204, .08), rgba(246, 232, 204, .03)); animation: mwIn .45s cubic-bezier(.2, 1, .3, 1) both; }
.lg-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--c) 40%, white), var(--c) 58%, color-mix(in srgb, var(--c) 55%, black)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -3px 6px rgba(0, 0, 0, .25); }
.lg-ic svg { width: 20px; height: 20px; fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-row.lost .lg-ic { filter: grayscale(.75) brightness(.8); }
.lg-mid { min-width: 0; } .lg-mid b { display: block; font: 600 15px var(--serif); color: #f6e6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-mid span { font: 400 12px var(--sans, system-ui); color: rgba(240, 222, 190, .75); }
.lg-mid .lg-r { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; background: rgba(246, 232, 204, .12); color: #e9d6a8; }
.lg-mid .lg-r[data-r="1"] { background: rgba(120, 170, 255, .22); color: #cfe0ff; } .lg-mid .lg-r[data-r="2"] { background: linear-gradient(90deg, #f6d27a, #ffefb8, #e4a63a); color: #3a2408; }
.lg-when { text-align: right; font: 500 12px var(--sans, system-ui); color: #ffd98a; white-space: nowrap; } .lg-when small { display: block; font-weight: 400; color: rgba(240, 222, 190, .6); }
.lg-row.lost .lg-when { color: rgba(240, 222, 190, .7); }
.lg-row.grow { cursor: pointer; } .lg-row.grow:active { transform: scale(.985); }
.lg-row.grow .lg-when { color: #bfe6a0; } .lg-row.grow.ready .lg-when { color: #ffd98a; }
.lg-row.grow:not(.ready) .lg-ic { animation: lgSway 3.2s ease-in-out infinite; }
@keyframes lgSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.lg-bar { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; position: relative; }
.lg-bar::after { content: ''; position: absolute; inset: 0; width: calc(var(--f) * 100%); border-radius: inherit; background: linear-gradient(90deg, #4f9a3c, #9be070); box-shadow: 0 0 8px rgba(155, 224, 112, .5); }
.lg-mine { font-style: normal; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font: 700 10px var(--sans, system-ui); vertical-align: 2px; background: linear-gradient(90deg, #f6d27a, #e4a63a); color: #3a2408; }

/* the GPU lost or blocked (main glCard): a calm card instead of a white page */
#glcard { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 80% at 50% 30%, #2a2016, #0c0a08 70%); }
#glcard .gl-in { max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #f2e4c4; }
#glcard b { font: 600 20px/1.35 var(--serif, Georgia, serif); word-break: keep-all; }
#glcard p { margin: 0; font: 400 14px/1.6 var(--sans, system-ui); color: rgba(242, 228, 196, .78); word-break: keep-all; white-space: pre-line; }
#glcard button { margin-top: 6px; padding: 11px 26px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f2cf86, #c8954a); color: #2a1c0c; font: 600 15px var(--sans, system-ui); cursor: pointer; }
#glcard .gl-flame { width: 18px; height: 30px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 70%, #fff6d8, #ffc05a 45%, #e8701a 75%, rgba(232, 112, 26, 0) 80%); box-shadow: 0 0 30px 10px rgba(255, 170, 70, .35); animation: glFlick 1.6s ease-in-out infinite; }
@keyframes glFlick { 0%, 100% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.92, 1.06); opacity: .85; } }

/* ---- the virtual wedding (main.js wed*) ---- */
.wed-panel { position: fixed; right: max(14px, env(safe-area-inset-right)); top: calc(max(16px, env(safe-area-inset-top)) + 54px); z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wed-panel[hidden], .wed-panel.waiting .wed-btns, .wed-panel:not(.waiting) .wed-wait { display: none; }
.wed-btns { display: flex; flex-direction: column; gap: 6px; }
.wed-btn { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; min-width: 116px; padding: 6px 12px 6px 9px; border-radius: 16px; border: 1px solid rgba(231, 196, 128, .55); color: #fff6e2; cursor: pointer; text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .2s; }
.wed-btn:active { transform: scale(.96); }
.wed-btn.g { background: linear-gradient(135deg, rgba(28, 26, 36, .88), rgba(54, 48, 66, .82)); }
.wed-btn.b { background: linear-gradient(135deg, rgba(120, 72, 86, .86), rgba(210, 150, 160, .78)); }
.wed-btn svg { grid-row: 1 / 3; width: 22px; height: 22px; fill: none; stroke: #ffe3a8; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.wed-btn b { font: 600 13px/1.15 var(--sans, system-ui); letter-spacing: .02em; white-space: nowrap; }
.wed-btn small { font: 500 11px/1.2 var(--sans, system-ui); color: rgba(255, 236, 200, .78); white-space: nowrap; }
.wed-wait { display: flex; align-items: center; gap: 10px; max-width: min(320px, calc(100vw - 32px)); padding: 9px 10px 9px 12px; border-radius: 18px; border: 1px solid rgba(231, 196, 128, .55); background: linear-gradient(135deg, rgba(30, 24, 22, .9), rgba(70, 44, 50, .86)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); color: #fff3dc; }
.wed-rings svg, .wm-rings svg { width: 40px; height: 28px; fill: none; stroke: #f3cf6a; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .6)); }
.wed-rings svg .gem, .wm-rings svg .gem { fill: #fffbe8; stroke: #fff; stroke-width: 1; }
.wed-rings svg circle:last-of-type { animation: wedRing 2.4s ease-in-out infinite; transform-origin: 30px 19px; }
@keyframes wedRing { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
.ww-txt { display: flex; flex-direction: column; min-width: 0; } .ww-txt b { font: 600 13px/1.3 var(--sans, system-ui); word-break: keep-all; } .ww-txt span { font: 400 11.5px/1.3 var(--sans, system-ui); color: rgba(255, 230, 200, .75); }
.wed-wait em { font: 600 15px var(--serif); font-style: normal; color: #ffd98a; font-variant-numeric: tabular-nums; }
.wed-wait button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 230, 190, .35); background: rgba(0, 0, 0, .25); color: #fff; font-size: 13px; cursor: pointer; flex: none; }
.wed-match { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 236, 214, .38), rgba(40, 20, 24, .7) 70%); }
.wed-match[hidden] { display: none; }
.wed-match.go { animation: wedMatch 3.6s ease forwards; }
@keyframes wedMatch { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.wm-in { text-align: center; color: #fff6e6; transform: scale(.9); animation: wedPop 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes wedPop { to { transform: scale(1); } }
.wm-rings svg { width: 96px; height: 64px; }
.wm-k { margin: 6px 0 2px; font: 700 15px var(--sans, system-ui); letter-spacing: .3em; color: #ffd98a; text-transform: uppercase; }
.wed-match h2 { margin: 0; font: 600 clamp(30px, 8vw, 48px)/1.15 var(--serif); text-shadow: 0 2px 24px rgba(255, 190, 140, .7); }
.wm-role { margin: 8px 0 0; font: 500 14px var(--sans, system-ui); color: #ffe7c4; } .wm-sub { margin: 4px 0 0; font: 400 13px var(--sans, system-ui); color: rgba(255, 236, 214, .8); }
.wed-title { position: fixed; left: 50%; top: 22%; z-index: 7; transform: translateX(-50%); text-align: center; color: #fff8ec; pointer-events: none; width: min(92vw, 560px); }
.wed-title[hidden] { display: none; }
.wed-title.go { animation: wedTitle 6.4s ease forwards; }
@keyframes wedTitle { 0% { opacity: 0; letter-spacing: .02em; filter: blur(6px); } 18% { opacity: 1; filter: blur(0); } 80% { opacity: 1; } 100% { opacity: 0; letter-spacing: .08em; } }
.wed-title p { margin: 0; font: 600 13px var(--sans, system-ui); letter-spacing: .5em; color: #ffd98a; text-transform: uppercase; }
.wed-title h2 { margin: 8px 0; font: 600 clamp(32px, 9vw, 58px)/1.1 var(--serif); text-shadow: 0 2px 30px rgba(255, 200, 140, .75), 0 0 2px rgba(0, 0, 0, .6); }
.wt-orn { display: block; height: 1px; margin: 0 auto; width: 60%; background: linear-gradient(90deg, transparent, #f3cf6a, transparent); }
.wed-sub { position: fixed; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 112px); z-index: 7; transform: translate(-50%, 10px); width: min(92vw, 520px); padding: 12px 18px 14px; border-radius: 16px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s, transform .6s; background: linear-gradient(180deg, rgba(24, 18, 14, .62), rgba(24, 18, 14, .78)); border: 1px solid rgba(231, 196, 128, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wed-sub.on { opacity: 1; transform: translate(-50%, 0); }
.wed-sub small { display: block; font: 700 10.5px var(--sans, system-ui); letter-spacing: .28em; color: #e9c27a; text-transform: uppercase; margin-bottom: 4px; } .wed-sub small:empty { display: none; }
.wed-sub p { margin: 0; font: 500 16px/1.55 var(--serif); color: #fff6e6; word-break: keep-all; }
.wed-act { position: fixed; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 26px); z-index: 8; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 14px 26px 14px 18px; border-radius: 999px; border: 0; cursor: pointer; color: #2c1a0c; font: 700 17px var(--sans, system-ui); background: linear-gradient(180deg, #fff1c8, #e8b55c); box-shadow: 0 0 0 3px rgba(255, 236, 190, .35), 0 10px 30px rgba(232, 160, 80, .55); }
.wed-act[hidden] { display: none; }
.wed-act.pop { animation: wedAct 1.6s ease-in-out infinite; }
@keyframes wedAct { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 3px rgba(255, 236, 190, .35), 0 10px 30px rgba(232, 160, 80, .55); } 50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 0 9px rgba(255, 236, 190, .12), 0 10px 40px rgba(232, 160, 80, .8); } }
.wa-ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #b8862e; box-shadow: inset 0 0 0 1px #ffe39a; position: relative; } .wa-ring::after { content: ''; position: absolute; left: 50%; top: -7px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: #fff; box-shadow: 0 0 6px #fff; }
.wed-exit { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); z-index: 8; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 230, 190, .35); background: rgba(20, 14, 10, .45); color: #fff; font-size: 15px; cursor: pointer; display: none; }
body.wedding .wed-exit { display: block; }
.wed-hearts { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.wed-heart { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; animation: wedHeart 2.1s ease-out forwards; opacity: 0; }
.wed-heart::before { content: ''; position: absolute; inset: 0; background: currentColor; clip-path: path('M11 20C5 15 1 11.5 1 7.2 1 4 3.5 1.6 6.5 1.6c1.9 0 3.5 1 4.5 2.5 1-1.5 2.6-2.5 4.5-2.5 3 0 5.5 2.4 5.5 5.6 0 4.3-4 7.8-10 12.8z'); filter: drop-shadow(0 0 4px rgba(255, 120, 150, .6)); }
@keyframes wedHeart { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--r)); } }
.wed-bubble { position: absolute; left: 0; top: 0; padding: 8px 14px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f6e2bd); color: #4a2a10; font: 700 15px var(--serif); white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 0 2px rgba(201, 162, 78, .6); }
.wed-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #f6e2bd; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 0 1px rgba(201, 162, 78, .45); }
body.wedding .actions, body.wedding .hud, body.wedding #giftshelf, body.wedding .room-btn, body.wedding #sky, body.wedding .shelf-edit, body.wedding .ride-mark, body.wedding #choir-sign { opacity: 0 !important; pointer-events: none !important; }
.wed-panel.aside { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* the action bar always fits the screen (user 2026-11-05: on phones its last buttons ran off the edge — 11 buttons at a
   38 px minimum are ~470 px): every button shares the width (≤ 58 px), the icons shrink with them */
.actions { gap: clamp(0px, 0.8vw, 4px); padding: 6px clamp(3px, 1.4vw, 6px); box-sizing: border-box; }
.actions button { flex: 1 1 0; min-width: 0; width: auto; max-width: 58px; padding: 0; }
.actions svg { width: min(23px, 78%); height: auto; aspect-ratio: 1; }
.actions button.tree svg.xtree, .actions button.candles svg.xcandles { width: min(44px, 100%); height: auto; }

/* phones: no endless animation repaints over the 3D canvas (user 2026-11-05: a prayer ask made the game stutter).
   box-shadow / filter / background keyframes are painted again every frame on the CPU (iOS Safari above all) — these
   pulses now move only opacity or transform, which the compositor does alone; each keeps its glow at rest */
.pray-ask.on { animation: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 200, 110, .38); }
.pray-ask.on > svg { animation: pa-breath 2.4s ease-in-out infinite; }
@keyframes pa-breath { 50% { opacity: .72; transform: scale(1.06); } }
@keyframes tp-call { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }
@keyframes going { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes circ-going { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes mmBreath { 0%, 100% { opacity: 1; } 50% { opacity: .84; } }
@keyframes givepulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes peacepulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes wrglow { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes cpBreath { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes going-room { 50% { opacity: .7; } }
@keyframes wedAct { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }

/* the title before the scripts run: never blank (user 2026-11-05) */
.pre-load { margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px; font: 500 14px/1 var(--sans, system-ui); letter-spacing: .14em; color: rgba(246, 226, 186, .86); }
.pre-load span { animation: preBlink 1.6s ease-in-out infinite; }
.pre-load i { width: 4px; height: 4px; border-radius: 50%; background: #f1cf86; opacity: .25; animation: preDot 1.2s ease-in-out infinite; }
.pre-load i:nth-of-type(2) { animation-delay: .2s; } .pre-load i:nth-of-type(3) { animation-delay: .4s; }
@keyframes preBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes preDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
#title-pct ~ #pre-load, body.ready #pre-load { display: none; }
.langbox:has(#langs:empty) { opacity: 0; }
#enter-count:empty::after { content: '· · ·'; letter-spacing: .1em; animation: preBlink 1.6s ease-in-out infinite; }

/* the prayer intention chip is not shown (user 2026-11-05); its code stays for later */

/* a newer build is out (main.js verCheck): a small pill above the action bar, tap = reload */
.new-build { position: fixed; left: 50%; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 70px); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(231, 196, 128, .6); background: linear-gradient(180deg, rgba(40, 28, 16, .94), rgba(24, 16, 10, .96)); color: #ffe9c2; font: 600 13.5px var(--sans, system-ui); white-space: nowrap; max-width: calc(100vw - 32px); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.new-build[hidden], body.wedding .new-build { display: none; }
.new-build svg { width: 18px; height: 18px; fill: none; stroke: #f3cf6a; stroke-width: 2; stroke-linecap: round; }

/* the wedding's flags (each one's game language) and the name tags over the two heads */
.wflag { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin: 0 .3em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255, 226, 170, .85), 0 2px 8px rgba(0, 0, 0, .4); }
.wflag svg { width: 100%; height: 100%; display: block; }
.wed-match h2 .wflag, .wed-title h2 .wflag { width: .8em; height: .8em; }
.wed-tag { position: fixed; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px 10px 4px 4px; border-radius: 999px; pointer-events: none; background: rgba(24, 16, 10, .62); border: 1px solid rgba(231, 196, 128, .45); color: #fff1d6; font: 600 12.5px var(--serif); white-space: nowrap; will-change: transform; }
.wed-tag[hidden] { display: none; }
.wed-tag .wflag { width: 18px; height: 18px; margin: 0 4px 0 0; }
.wed-tag.b { border-color: rgba(246, 190, 200, .55); }
.wed-title h2, .wed-match h2 { white-space: nowrap; font-size: clamp(24px, 7vw, 52px); }
/* flags whole, not cut to a circle (user 2026-11-05: a tiny round-cropped taegeukgi lost its trigrams and read as nothing) */
.wflag { border-radius: 3px; width: 1.25em; height: 1.25em; }
.wed-match h2 .wflag, .wed-title h2 .wflag { width: .95em; height: .95em; }
.wed-tag .wflag { width: 24px; height: 24px; border-radius: 3px; }
.wed-tag { padding: 3px 10px 3px 3px; }

/* the action bar sized to the phone (user 2026-11-05 b: shared widths with a shrink-to-fit bar collapsed it to tiny
   icons): the bar takes the screen's width (minus 12 px a side, at most 560 px), every button an equal share of it */
.actions { width: min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)), 560px); justify-content: space-between; }
.actions button { flex: 1 1 0; max-width: 62px; height: clamp(46px, 12.5vw, 54px); }
.actions svg { width: clamp(22px, 6.6vw, 28px); height: clamp(22px, 6.6vw, 28px); }
@media (orientation: landscape) and (max-height: 500px) { .actions { width: min(calc(100vw - 24px), 520px); } .actions button { height: 44px; } .actions svg { width: 22px; height: 22px; } }
@media (orientation: landscape) and (max-height: 500px) { .actions button { height: 48px; } .actions svg { width: 25px; height: 25px; } }

/* the letters window loading (user 2026-11-05): an envelope rocking and a blinking word until the page stands */
.lw-load { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0b1024; color: #f3e6c8; font: 500 15px var(--sans, system-ui); letter-spacing: .1em; }
.letters-win.loading .lw-load { display: flex; }
.lw-load svg { width: 64px; height: 64px; animation: lwRock 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.lw-load span { animation: preBlink 1.6s ease-in-out infinite; }
.lw-load i { display: inline-block; width: 5px; height: 5px; margin: 0 3px; border-radius: 50%; background: #f1cf86; opacity: .25; animation: preDot 1.2s ease-in-out infinite; }
.lw-load i:nth-of-type(2) { animation-delay: .2s; } .lw-load i:nth-of-type(3) { animation-delay: .4s; }
@keyframes lwRock { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
/* action bar labels (user 2026-11-07: say what each button does, quietly): icon over a small spaced word in muted gold;
   a word too wide for its button is shrunk to fit by main `abFit` (--abf), never cut */
.actions { border-radius: 30px; }
.actions button { flex-direction: column; gap: 3px; height: clamp(54px, 14.2vw, 62px); }
.actions svg { width: clamp(20px, 5.8vw, 25px); height: clamp(20px, 5.8vw, 25px); flex: none; }
.actions .ab-l { display: block; max-width: 100%; font-size: var(--abf, clamp(9px, 2.55vw, 10.5px)); line-height: 1; font-weight: 500; letter-spacing: .02em;
  color: var(--gold); opacity: .78; white-space: nowrap; overflow: hidden; pointer-events: none; }
html[lang|="en"] .actions .ab-l, html[lang|="es"] .actions .ab-l, html[lang|="fr"] .actions .ab-l, html[lang|="it"] .actions .ab-l, html[lang|="pt"] .actions .ab-l, html[lang|="ms"] .actions .ab-l, html[lang|="vi"] .actions .ab-l, html[lang|="id"] .actions .ab-l, html[lang|="de"] .actions .ab-l, html[lang|="nl"] .actions .ab-l, html[lang|="tr"] .actions .ab-l { letter-spacing: .03em; }
#btn-pray .l-peace { display: none; }
body.peace-time #btn-pray .l-pray { display: none; }
body.peace-time #btn-pray .l-peace { display: block; }
.actions button:active .ab-l { opacity: 1; }
@media (orientation: landscape) and (max-height: 500px) { .actions button { height: 50px; gap: 2px; } .actions svg { width: 21px; height: 21px; } .actions .ab-l { font-size: var(--abf, 9px); } }
/* the pray-together button (user 2026-11-07, main `topicChip`): 'go' = "Pray together" on the main screen, the same
   button turns into "Set an intention" the moment the circle opens ('morph': a ring of light bursts from it). Motion is
   transform/opacity only (phones repaint box-shadow keyframes over the canvas). */
.pray-topic .pt-go, .pray-topic.go .pt-tp { display: none; }
.pray-topic.go .pt-go { display: block; }
.pray-topic.go { padding: 10px 22px 10px 14px; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: .4px;
  background: linear-gradient(180deg, rgba(74, 50, 24, .9), rgba(28, 18, 10, .92)); border-color: rgba(255, 222, 160, .75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 196, 104, .3), inset 0 1px 0 rgba(255, 240, 210, .28); animation: none; }
.pray-topic.go span { background: linear-gradient(180deg, #fff6dc, #f2c76c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pray-topic.go svg.pt-go { width: 26px; height: 26px; overflow: visible; animation: pt-breathe 3.2s ease-in-out infinite; }
.pray-topic svg.pt-go .pt-halo { stroke: rgba(255, 214, 140, .55); stroke-width: 1; stroke-dasharray: 2 2.2; transform-origin: 12px 12px; animation: pt-turn 14s linear infinite; }
@keyframes pt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes pt-turn { to { transform: rotate(360deg); } }
.pray-topic .pt-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pray-topic .pt-sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .32), transparent); transform: translateX(-120%) skewX(-18deg); }
.pray-topic.go.on .pt-sheen { animation: pt-sheen 5.5s ease-in-out 1.2s infinite; }
@keyframes pt-sheen { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 6% { opacity: 1; } 30% { transform: translateX(340%) skewX(-18deg); opacity: 1; } 31%, 100% { transform: translateX(340%) skewX(-18deg); opacity: 0; } }
.pray-topic .pt-burst { position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(255, 220, 150, .95); opacity: 0; pointer-events: none; }
.pray-topic.morph .pt-burst { animation: pt-burst .9s cubic-bezier(.2, .7, .3, 1) both; }
.pray-topic.morph span, .pray-topic.morph svg.pt-tp { animation: pt-in .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pt-burst { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45, 2.1); } }
@keyframes pt-in { 0% { opacity: 0; transform: translateY(6px) scale(.92); } 100% { opacity: 1; transform: none; } }
.pray-topic.go:active { transform: translate(-50%, 0) scale(.96); }
@media (prefers-reduced-motion: reduce) { .pray-topic.go svg.pt-go, .pray-topic .pt-halo, .pray-topic .pt-sheen, .pray-topic.morph * { animation: none !important; } }
/* the intention's state, for its writer only (user 2026-11-07): checking → everyone sees it / only you (honest, never silent) */
.topic-st { position: fixed; left: 50%; bottom: max(108px, calc(env(safe-area-inset-bottom) + 102px)); z-index: 5; display: flex; align-items: center; gap: 7px; max-width: calc(100vw - 40px);
  padding: 6px 14px 6px 10px; border-radius: 999px; color: rgba(255, 232, 192, .9); font: 500 13px var(--serif); letter-spacing: .2px; white-space: nowrap;
  background: rgba(22, 15, 9, .78); border: 1px solid rgba(255, 214, 150, .32); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .5s, transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.topic-st span { overflow: hidden; text-overflow: ellipsis; }
.topic-st.on { opacity: 1; transform: translate(-50%, 0); }
.topic-st.on.dim { opacity: .55; }
.topic-st .ts-ic { display: flex; align-items: center; gap: 3px; flex: none; }
.topic-st .ts-ic svg { width: 15px; height: 15px; fill: none; stroke: #f3c873; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.topic-st .ts-ic b { width: 4px; height: 4px; border-radius: 50%; background: #f0c870; opacity: .3; animation: tp-dot 1.4s ease-in-out infinite; }
.topic-st .ts-ic b:nth-child(2) { animation-delay: .2s; } .topic-st .ts-ic b:nth-child(3) { animation-delay: .4s; }
.topic-st.ok { color: #ffeccb; border-color: rgba(255, 214, 150, .6); }
.topic-st.ok.on .ts-ic svg { animation: pt-in .55s cubic-bezier(.2, 1.3, .4, 1) both; }
body.robing .topic-st { opacity: 0 !important; }
/* ---- the futsal match (user 2026-11-07, main.js fs*): the medallion over the arena, my pad, the HUD, the cards.
   Only opacity/transform animate (no repaint loops over the canvas on phones). */
.fs-mark { position: fixed; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; cursor: pointer;
  color: var(--gold); font-family: inherit; font-weight: 600; font-size: 13.5px; line-height: 1; white-space: nowrap;
  background: linear-gradient(180deg, rgba(58, 40, 22, .92), rgba(24, 16, 10, .92)); border: 1px solid rgba(255, 214, 150, .6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .45s; will-change: transform; }
.fs-mark.on { opacity: 1; pointer-events: auto; }
.fs-mark:active { filter: brightness(1.25); }
.fs-mark svg { width: 19px; height: 19px; fill: none; stroke: #f3c873; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fs-mark.on svg { animation: fs-spin 3.6s ease-in-out infinite; }
.fs-mark span { color: #f6e2b8; }
@keyframes fs-spin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(160deg); } }
body:not(.in) .fs-mark, body.futsaling .fs-mark, body.robing .fs-mark { display: none; }
.fs-pad { position: fixed; inset: 0; z-index: 3; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fs-hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.fs-board { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 30, 26, .9), rgba(8, 14, 12, .9)); border: 1px solid rgba(214, 168, 74, .7); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  font: 700 22px Georgia, serif; color: #ffe2a0; font-variant-numeric: tabular-nums; }
.fs-board span { font: 600 15px Georgia, serif; color: #cfe9dc; min-width: 40px; text-align: center; }
.fs-board i { width: 12px; height: 12px; border-radius: 3px; } .fs-t0 { background: #c8243a; } .fs-t1 { background: #1d4fa0; }
.fs-exit { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; pointer-events: auto; display: grid; place-items: center;
  background: rgba(16, 12, 8, .72); border: 1px solid rgba(255, 214, 150, .45); }
.fs-exit svg { width: 20px; height: 20px; fill: none; stroke: #f3dfb6; stroke-width: 1.8; stroke-linecap: round; }
.fs-keys { position: absolute; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%); display: flex; gap: 6px; width: max-content; max-width: calc(100vw - 20px); }
.fs-keys .fk { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px 6px 7px; border-radius: 14px; background: rgba(14, 11, 8, .72); border: 1px solid rgba(255, 214, 150, .22); opacity: .5; transition: opacity .3s, border-color .3s; }
.fs-keys .fk.hot { opacity: 1; border-color: rgba(255, 214, 150, .7); background: rgba(30, 22, 12, .82); }
.fs-keys .fk i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #f3c873; }
.fs-keys .fk i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fs-keys .fk > span { display: grid; min-width: 0; line-height: 1.15; }
.fs-keys .fk small { font-size: 10.5px; color: rgba(246, 226, 184, .78); }
.fs-keys .fk b { font-size: 13.5px; font-weight: 700; color: #fff0cc; }
@media (max-width: 360px) { .fs-keys { gap: 4px; } .fs-keys .fk { padding: 5px 7px 5px 5px; gap: 4px; } .fs-keys .fk i, .fs-keys .fk i svg { width: 18px; height: 18px; } .fs-keys .fk small { font-size: 9.5px; } .fs-keys .fk b { font-size: 12.5px; } }
.fs-big { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.6); font: 800 clamp(26px, 8.4vw, 64px) Georgia, serif; letter-spacing: .03em; white-space: nowrap; max-width: calc(100vw - 24px); text-align: center;
  color: #fff3d4; text-shadow: 0 0 22px rgba(255, 200, 110, .9), 0 4px 14px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.fs-big.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fs-swipe { position: absolute; height: 4px; margin-top: -2px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(var(--a, 0)); opacity: 0;
  background: linear-gradient(90deg, rgba(255, 220, 150, 0), rgba(255, 236, 190, .95)); }
.fs-swipe.go { animation: fs-swipe .5s ease-out; }
@keyframes fs-swipe { 0% { opacity: 1; } 100% { opacity: 0; } }
body.futsaling > :not(canvas#c, .fs-pad, .fs-hud, dialog, .veil, script, style, #glcard, #new-build) { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
.fs-card { width: min(320px, calc(100vw - 40px)); padding: 26px 22px 20px; border-radius: 22px; text-align: center; color: #f6e2b8;
  background: linear-gradient(180deg, rgba(38, 30, 20, .97), rgba(16, 12, 8, .97)); border: 1px solid rgba(255, 214, 150, .55); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.fs-card::backdrop { background: rgba(0, 0, 0, .35); }
.fs-card h2 { margin: 6px 0 8px; font: 700 26px Georgia, serif; color: #ffe8b8; }
.fs-card .fs-rules { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: #e9d3a8; }
.fs-card .fs-how { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: rgba(246, 226, 184, .75); }
.fs-card .fs-score { margin: 2px 0 18px; font: 700 44px Georgia, serif; color: #fff1cc; font-variant-numeric: tabular-nums; }
.fs-card.win h2 { color: #ffd76a; text-shadow: 0 0 18px rgba(255, 200, 100, .7); }
.fs-ball { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, rgba(255, 230, 170, .28), rgba(255, 200, 110, .06)); border: 1px solid rgba(255, 214, 150, .5); }
.fs-ball svg { width: 30px; height: 30px; fill: none; stroke: #f3c873; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fs-btn { display: block; width: 100%; height: 48px; border-radius: 999px; border: 0; font: 700 16px inherit; font-family: inherit; color: #2a1c0c; background: linear-gradient(180deg, #ffe39a, #e2b04e); box-shadow: 0 6px 16px rgba(226, 176, 78, .35); cursor: pointer; }
.fs-btn2 { display: block; width: 100%; height: 42px; margin-top: 10px; border-radius: 999px; font-family: inherit; font-size: 14.5px; color: #f3dfb6; background: transparent; border: 1px solid rgba(255, 214, 150, .4); cursor: pointer; }
.fs-x { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.fs-x svg { width: 18px; height: 18px; fill: none; stroke: #f3dfb6; stroke-width: 1.8; stroke-linecap: round; }
/* the curtain while the match pack is made (main.js fsLaunch): only opacity and the ring's turn animate */
.fs-load { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(20, 30, 26, .82), rgba(6, 8, 7, .92)); opacity: 0; transition: opacity .35s; }
.fs-load.on { opacity: 1; }
.fs-load-in { display: grid; justify-items: center; gap: 14px; color: #f3dfb6; font-size: 15px; letter-spacing: .04em; }
.fs-ring { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(214, 168, 74, .22); border-top-color: #f0c870; animation: fs-turn .9s linear infinite; }
@keyframes fs-turn { to { transform: rotate(360deg); } }
.fs-load .fs-x { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: auto; }
body.futsaling > .fs-load { opacity: 0 !important; }
body.choiring .pray-topic, body.choiring .topic-st { opacity: 0 !important; pointer-events: none !important; }   /* (the choir game: no pray-together button over the lanes) */
/* the Fellowship card (main.js btn-fellow): two tiles in the futsal card's dark glass and gold */
.fellow-card h2 { margin-top: 2px; }
.fel-tile { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 12px 12px 10px; border-radius: 16px; text-align: left; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, rgba(60, 44, 26, .55), rgba(26, 19, 12, .65)); border: 1px solid rgba(255, 214, 150, .4); color: #f6e2b8; }
.fel-tile:active { filter: brightness(1.2); }
.fel-tile svg { flex: none; width: 44px; height: 44px; fill: none; stroke: #f3c873; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fel-tile > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.fel-tile b { font: 700 17px Georgia, serif; color: #ffe8b8; }
.fel-tile small { font-size: 12.5px; line-height: 1.35; color: rgba(246, 226, 184, .75); }
.fel-go { flex: none; font-style: normal; font-size: 24px; color: rgba(243, 200, 115, .8); }
.actions .ab-l.two { white-space: normal; text-align: center; line-height: 1.04; }   /* (main.js abFit: a long name on two lines rather than 7 px) */
.fel-tile small, .fel-tile b { word-break: keep-all; overflow-wrap: anywhere; }   /* (Korean: never split a word — "노/래하기") */
/* ---- the shot duel's HUD (main.js fsStepUI / fsZones / fsHud): only opacity and transform animate */
.fs-dots { position: absolute; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 46px); transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; }
.fs-dots span { display: flex; gap: 5px; } .fs-dots span:first-child i.g { background: #e0475c; } .fs-dots span:last-child i.g { background: #4f7fd6; }
.fs-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 226, 160, .55); background: rgba(10, 8, 6, .5); }
.fs-dots i.g { border-color: #ffe2a0; box-shadow: 0 0 6px rgba(255, 210, 120, .7); }
.fs-dots i.x { background: rgba(10, 8, 6, .5); border-color: rgba(255, 226, 160, .3); position: relative; }
.fs-dots i.x::after { content: ''; position: absolute; left: 50%; top: -1px; width: 1.5px; height: 9px; background: rgba(255, 226, 160, .6); transform: translateX(-50%) rotate(45deg); }
.fs-step { position: absolute; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); transform: translate(-50%, 12px); display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100vw - 28px);
  padding: 11px 18px 11px 13px; border-radius: 999px; background: linear-gradient(180deg, rgba(48, 34, 18, .92), rgba(18, 12, 8, .92)); border: 1px solid rgba(255, 214, 150, .7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: #fff0cc; font-size: 15.5px; font-weight: 600; opacity: 0; transition: opacity .35s, transform .35s; }
.fs-step.on { opacity: 1; transform: translate(-50%, 0); }
.fs-step span { word-break: keep-all; text-align: center; line-height: 1.3; }
.fs-finger { display: none; width: 24px; height: 24px; flex: none; color: #f3c873; }
.fs-finger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fs-step.first .fs-finger { display: block; animation: fs-tapme 1.1s ease-in-out infinite; }
@keyframes fs-tapme { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.88); } }
.fs-pow { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 50%; width: 16px; height: min(46vh, 260px); transform: translateY(-50%); border-radius: 10px;
  background: linear-gradient(0deg, rgba(120, 60, 40, .55), rgba(40, 30, 20, .7) 50%, rgba(140, 40, 40, .6)); border: 1.5px solid rgba(255, 214, 150, .6); opacity: 0; transition: opacity .3s; }
.fs-pow.on { opacity: .55; } .fs-pow.on.live { opacity: 1; }
.fs-pow .fp-green { position: absolute; left: 0; right: 0; background: rgba(80, 210, 120, .55); border-top: 1.5px solid #8ef0a8; border-bottom: 1.5px solid #8ef0a8; }
.fs-pow .fp-mark { position: absolute; left: -7px; right: -7px; bottom: 0; height: 100%; pointer-events: none; }
.fs-pow .fp-mark::before { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; border-radius: 3px; background: #fff3d0; box-shadow: 0 0 10px rgba(255, 220, 140, .9); }
.fs-pow b { position: absolute; left: 50%; transform: translateX(-50%); font: 700 13px system-ui, sans-serif; color: rgba(255, 236, 200, .8); }
.fs-pow .fp-hi { top: -20px; } .fs-pow .fp-lo { bottom: -20px; }
.fs-zones { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.fs-zones.on { opacity: 1; }
.fs-zones i { position: absolute; border: 2px dashed rgba(255, 226, 160, .7); border-radius: 6px; background: rgba(255, 214, 140, .08); transition: background .2s, border-color .2s; }
.fs-zones i.pick { border-style: solid; border-color: #ffe7b0; background: rgba(255, 214, 140, .32); }
/* near someone's ring: two plain choices instead of the pray-together button (main.js topicChip) */
.pray-split { position: fixed; left: 50%; bottom: max(104px, calc(env(safe-area-inset-bottom) + 98px)); z-index: 5; display: flex; gap: 8px; width: max-content; max-width: calc(100vw - 24px);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .4s, transform .4s cubic-bezier(.2, 1.2, .3, 1); }
.pray-split.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ps-btn { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 10px 15px 10px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid rgba(255, 214, 150, .6); box-shadow: 0 8px 22px rgba(0, 0, 0, .42); }
.ps-btn span { word-break: keep-all; line-height: 1.2; text-align: left; }
.ps-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #f3c873; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-join { color: #2a1c0c; background: linear-gradient(180deg, #ffe39a, #e2b04e); border-color: #ffe7b0; }
.ps-join svg { stroke: #3a2610; }
.ps-new { color: #ffe6b8; background: linear-gradient(180deg, rgba(58, 40, 22, .9), rgba(24, 16, 10, .92)); }
.ps-btn:active { transform: scale(.96); }
body.robing .pray-split, body.choiring .pray-split, body.soloing .pray-split { opacity: 0 !important; pointer-events: none !important; }
/* popular ideas under the eight intentions (main.js topicIdeas): a row of small pills, one tap fills the field */
.tp-ideas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.tp-ideas > span { width: 100%; text-align: center; font-size: 11.5px; letter-spacing: .06em; color: rgba(243, 213, 142, .7); }
.tp-idea { padding: 6px 11px; border-radius: 999px; font-family: inherit; font-size: 13px; color: #f6e2b8; cursor: pointer; word-break: keep-all;
  background: rgba(255, 214, 150, .08); border: 1px solid rgba(255, 214, 150, .35); }
.tp-idea:active { background: rgba(255, 214, 150, .22); }
#topic-send.nudge { animation: tp-nudge .5s ease-out; }
@keyframes tp-nudge { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* the pray-together button's switch in the tool pill (user 2026-11-08): a slash and dimmed while the button is hidden */
#btn-praybtn .pb-off { display: none; }
#btn-praybtn:not(.on) .pb-off { display: inline; }
/* off (user 2026-11-08: easy to see it is hidden): coral icon with a bold slash on a coral-ringed disc; one pop when switched */
#btn-praybtn { border-radius: 50%; transition: background .3s, box-shadow .3s, color .3s; }
#btn-praybtn:not(.on) { color: #ff9b8a; background: rgba(255, 120, 100, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 130, .75), 0 0 10px rgba(255, 120, 100, .25); }
#btn-praybtn:not(.on) svg { opacity: 1; }
#btn-praybtn:not(.on) svg .pb-off { stroke: #ff7a66; stroke-width: 2.6; }
#btn-praybtn.pop svg { animation: pb-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pb-pop { 40% { transform: scale(1.25); } }

/* the pray button coming back slowly after the fireworks view opens (user 2026-11-08) */
.pray-topic.slow { transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2, .9, .3, 1); animation: none !important; }   /* (its opacity pulse would cut the fade short) */

/* the cat mode switch in the tool pill (user 2026-11-08): a drawn kitten face; lit with a gold ring while cat mode is on */
.tools .catbtn { position: relative; padding: 0 5px; }
/* eight buttons in the pill now (the guinea pig joined): tighter on phones, the "?" disc never squeezed */
.qbtn { flex: none; width: 42px; min-width: 42px; height: 42px; border-radius: 50%; }
@media (max-width: 430px) { .tools { padding: 0 4px; gap: 0; } .tools button { padding: 0 3px; min-width: 34px; } .tools .catbtn svg { width: 28px; height: 28px; } .tools .fanq svg { width: 25px; height: 25px; } }
@media (max-width: 340px) { .qbtn { width: 38px; min-width: 38px; height: 38px; } .tools button { min-width: 30px; padding: 0 2px; } .tools .catbtn svg { width: 25px; height: 25px; } }
.tools .pigbtn::after { border-color: #ffb3c8 !important; box-shadow: 0 0 10px rgba(255, 150, 190, .55) !important; }   /* (the guinea pig's ring: pink while it is on) */
.tools .catbtn svg { width: 30px; height: 30px; stroke: none; fill: none; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 180, 110, .3)); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.tools .catbtn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #f2c46a; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; pointer-events: none; box-shadow: 0 0 10px rgba(255, 196, 100, .55); }
.tools .catbtn.on::after { opacity: 1; transform: scale(1); }
.tools .catbtn.on svg { transform: scale(1.08); }
.tools .catbtn:active svg { transform: scale(.9); }

/* the fireworks' wait on phones (user 2026-11-08: the nave showed through): an opaque night sky with a few gold sparks */
.fs-load.fwc { z-index: 60; background: radial-gradient(120% 80% at 50% 30%, #1b2442 0%, #0b0f1e 55%, #05060c 100%); }
.fs-load.fwc::before { content: ''; position: absolute; inset: 0; background: radial-gradient(2px 2px at 22% 28%, #ffd98a, transparent), radial-gradient(2px 2px at 71% 18%, #ffe7b0, transparent), radial-gradient(1.5px 1.5px at 58% 40%, #ffcf6e, transparent), radial-gradient(1.5px 1.5px at 34% 52%, #fff1c9, transparent); opacity: .9; pointer-events: none; }

/* the fireworks' making (user 2026-11-09): a gilded percentage over the night sky — a thin arc filling round a little
   golden burst, serif figures, a quiet line; transform/opacity only */
.fw-prep { position: fixed; left: 50%; top: 34%; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%) scale(.92); opacity: 0; transition: opacity .45s, transform .5s cubic-bezier(.2, 1.2, .3, 1); pointer-events: none; }
.fw-prep.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* everything building behind it (phones): a night curtain under the percentage */
.fw-prep.full { position: fixed; inset: 0; left: 0; top: 0; transform: none; justify-content: center; background: radial-gradient(120% 70% at 50% 20%, #1b2140, #0b0d1a 70%); z-index: 60; }
.fw-prep.full.on { transform: none; }
.fw-prep.full .fp-pct { position: absolute; top: calc(50% - 31px); left: 0; right: 0; }
.fw-prep svg { width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 200, 110, .45)); }
.fw-prep .fp-track { fill: rgba(10, 8, 20, .55); stroke: rgba(255, 220, 160, .18); stroke-width: 2; }
.fw-prep .fp-arc { fill: none; stroke: #f3c873; stroke-width: 3; stroke-linecap: round; stroke-dasharray: calc(var(--fp, 0) * 100) 100; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .12s linear; }
.fw-prep .fp-burst path { stroke: #ffe2a0; stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.fw-prep .fp-burst { transform-origin: 60px 60px; animation: fp-spin 6s linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
.fw-prep .fp-pct { position: absolute; top: 38px; left: 0; right: 0; text-align: center; font: 600 30px/1 var(--serif); letter-spacing: .02em; color: #fff3d4; text-shadow: 0 0 14px rgba(255, 200, 110, .7); font-variant-numeric: tabular-nums; }
.fw-prep .fp-pct i { font-style: normal; font-size: 15px; margin-left: 2px; color: #f3c873; }
.fw-prep .fp-l { font: 500 13px var(--serif); letter-spacing: .12em; color: rgba(255, 236, 200, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) { .fw-prep .fp-burst { animation: none; } }

/* the cheer / share buttons the pray button's size (48 px tall, its padding and type), side by side with it — the pray
   button on the left, the costume's on the right, 10 px between; alone, either stands in the middle (user 2026-11-09).
   Phones: each pair member at most half the screen less the gutters, the words shrink before they are cut */
.cheer-cta { height: 48px; box-sizing: border-box; padding: 5px 20px 5px 6px; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: .4px; }
.cheer-cta .cc-ico { width: 36px; height: 36px; } .cheer-cta .cc-ico svg { width: 28px; height: 28px; }
.share-cta { padding-right: 6px; }
.share-cta .pep-flav { width: 36px; height: 36px; } .share-cta .pep-flav .pf-chip svg { width: 29px; height: 29px; }
.cheer-cta.low, body.cta-pair .cheer-cta { bottom: max(104px, calc(env(safe-area-inset-bottom) + 98px)); }
body.cta-pair .pray-topic.on { transform: translate(var(--pairP, calc(-100% - 5px)), 0); max-width: calc(50vw - 21px); height: 48px; box-sizing: border-box; }
body.cta-pair .cheer-cta.on { transform: translate(var(--pairC, 5px), 0) scale(1); max-width: calc(50vw - 21px); }
body.cta-pair .cheer-cta.on:active { transform: translate(var(--pairC, 5px), 0) scale(.94); }
body.cta-pair .pray-topic span, body.cta-pair .cheer-cta .cc-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 420px) {
  body.cta-pair .pray-topic.go { padding: 10px 14px 10px 10px; gap: 7px; font-size: 14.5px; }
  body.cta-pair .pray-topic.go svg.pt-go { width: 24px; height: 24px; }
  body.cta-pair .cheer-cta { padding: 5px 14px 5px 6px; gap: 7px; font-size: 14.5px; }
  body.cta-pair .share-cta { padding-right: 6px; }
}
@media (max-width: 345px) {
  body.cta-pair .pray-topic.go, body.cta-pair .cheer-cta { font-size: 13px; letter-spacing: .1px; }
  body.cta-pair .cheer-cta .cc-ico, body.cta-pair .share-cta .pep-flav { width: 32px; height: 32px; }
}
.fw-prep .fp-burst path { opacity: .32; }   /* (behind the figures: they must read first) */
.fw-prep svg { width: 128px; height: 128px; }

/* the animal toggle in the tool pill (user 2026-11-09 c: the kitten and guinea pig buttons made one): the current animal
   large in its ring (gold kitten, pink guinea pig), the other small at its lower right; a tap swaps them (transform only) */
.tools .animaltog { position: relative; width: 56px; min-width: 56px; padding: 0; }
.tools .animaltog .at-face { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(18%, -8%) scale(.56); opacity: .62; z-index: 1; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .35s; pointer-events: none; }
.tools .animaltog .at-face svg { width: 100%; height: 100%; stroke: none; fill: none; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 180, 110, .3)); }
.tools .animaltog[data-sp="cat"] .at-cat, .tools .animaltog[data-sp="pig"] .at-pig, .tools .animaltog[data-sp="human"] .at-human { transform: translate(-62%, -50%) scale(1.04); opacity: 1; z-index: 2; }
.tools .animaltog::after { content: ''; position: absolute; left: calc(50% - 21.6px); top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 2px solid #f2c46a; box-shadow: 0 0 10px rgba(242, 196, 106, .45); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s, border-color .3s, box-shadow .3s; pointer-events: none; }
.tools .animaltog.on::after { opacity: 1; transform: scale(1); }
.tools .animaltog[data-sp="pig"]::after { border-color: #ffb3c8; box-shadow: 0 0 10px rgba(255, 150, 190, .55); }
.tools .animaltog.swap[data-sp="cat"] .at-cat, .tools .animaltog.swap[data-sp="pig"] .at-pig, .tools .animaltog.swap[data-sp="human"] .at-human { animation: at-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.tools .animaltog:active .at-face { transition-duration: .15s; }
@keyframes at-pop { 0% { transform: translate(-62%, -50%) scale(.62); } 60% { transform: translate(-62%, -50%) scale(1.16); } 100% { transform: translate(-62%, -50%) scale(1.04); } }
@media (max-width: 430px) { .tools .animaltog { width: 52px; min-width: 52px; } .tools .animaltog .at-face { width: 28px; height: 28px; } .tools .animaltog::after { width: 34px; height: 34px; margin-top: -17px; left: calc(50% - 20.4px); } }
@media (max-width: 340px) { .tools .animaltog { width: 46px; min-width: 46px; } .tools .animaltog .at-face { width: 25px; height: 25px; } .tools .animaltog::after { width: 30px; height: 30px; margin-top: -15px; left: calc(50% - 18.3px); } }
@media (max-width: 340px) { .tools button { min-width: 27px; } .tools .animaltog { width: 42px; min-width: 42px; } }   /* (320 px: the pill ran 7 px past the edge) */

/* a taper in hand (user 2026-11-09): the action bar stays; only the candle button floats over it, its job written under it
   (choose a flame: light my candle; choose a place: offer it); the other taper buttons are gone, the pray button steps aside */
.ritual-ui { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 88px); flex-direction: column; gap: 7px; }
#act-sit, #act-veil, #act-tree { display: none !important; }
.ritual-ui #act-cancel { position: absolute; right: -30px; top: -10px; width: 34px; height: 34px; }   /* (user 2026-11-09: a small ✕ beside the candle button — put the taper back) */
.ritual-ui #act-cancel svg { width: 16px; height: 16px; }
#act-next { width: 66px; height: 66px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 170, 80, .25); }
.rit-l { font: 600 13px/1.2 var(--sans); color: #f6d9a0; letter-spacing: .02em; padding: 5px 13px; border-radius: 999px; white-space: nowrap; background: rgba(22, 17, 12, .78); border: 1px solid rgba(255, 210, 150, .38); box-shadow: 0 3px 12px rgba(0, 0, 0, .35); }
.rit-l .rl-p, body.choose-slot .rit-l .rl-f { display: none; }
body.choose-slot .rit-l .rl-p { display: inline; }
body.choose-flame .pray-topic, body.choose-slot:not(.carrying) .pray-topic, body.choose-flame .cheer-cta, body.choose-slot .cheer-cta { opacity: 0 !important; pointer-events: none !important; }   /* (carrying: the pray button stays — user 2026-11-09) */

/* ---- foldables (user 2026-11-09; research: Samsung One UI foldable guide, Android large-screen quality) */
/* the folded cover screen and other narrow phones (341–360 px): the tool pill ran past the right edge */
@media (min-width: 341px) and (max-width: 360px) { .qbtn { width: 38px; min-width: 38px; height: 38px; } .tools { padding: 0 3px; } .tools button { min-width: 30px; padding: 0 2px; } .tools .animaltog { width: 46px; min-width: 46px; } }
/* unfolded (body.fold, main.js foldCheck: a touch screen near square, its short side ≥ 600 px): the controls grow to the
   screen and come to the thumbs — the action bar spreads wide with larger buttons, the often-tapped centre buttons (pray,
   cheer / share, the candle) move off the crease in the middle to the right thumb, the top pill and chips grow */
body.fold .actions { width: min(calc(100vw - 32px), 860px); }
body.fold .actions button { max-width: 104px; height: 70px; }
body.fold .actions button svg { width: 31px; height: 31px; }
body.fold .actions .ab-l { font-size: 12.5px; }
body.fold .pray-topic, body.fold .cheer-cta, body.fold .ritual-ui { left: 70%; }
body.fold .pray-topic, body.fold .cheer-cta.low, body.fold.cta-pair .cheer-cta { bottom: max(122px, calc(env(safe-area-inset-bottom) + 116px)); }
body.fold .ritual-ui { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 106px); }
body.fold .hud { zoom: 1.22; }
/* the camera's drag direction (user 2026-11-09): two small switches in the music sheet — gold while inverted */
#music .mixrow.cam .invs { display: flex; gap: 8px; flex: 1; }
#music .invb { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink-dim); font: 500 12.5px var(--sans); }
#music .invb b { font-size: 15px; font-weight: 600; }
#music .invb[aria-pressed="true"] { color: #1d1408; background: linear-gradient(180deg, #f6d68e, #d7a64e); border-color: #f3cf86; }

/* the taper's three choices (user 2026-11-09): carry it · offer it · give it — each with its words under it; the side
   ones only once it burns; give is faint with nobody near to take it (a tap says so); carrying folds them to the candle */
.ritual-ui .rit-row { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.ritual-ui .rit-b { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ritual-ui .rb-carry, .ritual-ui .rb-give { display: none; padding-top: 8px; }
body.choose-slot .ritual-ui .rb-carry, body.choose-slot .ritual-ui .rb-give { display: flex; }
.ritual-ui .rit-side { display: flex !important; width: 50px; height: 50px; border-radius: 50%; align-items: center; justify-content: center; color: #f6d9a0; background: rgba(22, 17, 12, .72); border: 1px solid rgba(255, 210, 150, .38); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: none; }
.ritual-ui .rit-side svg { width: 26px; height: 26px; }
.ritual-ui #act-give { opacity: 1; }   /* (always on: it seeks someone at any distance, user 2026-11-09) */
body.can-give .ritual-ui #act-give { opacity: 1; animation: givepulse 2.2s ease-in-out infinite; }
.ritual-ui .rit-c { font: 600 11.5px/1.2 var(--sans); color: #f2d6a2; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: rgba(22, 17, 12, .72); border: 1px solid rgba(255, 210, 150, .3); }
body.carrying .ritual-ui .rb-carry, body.carrying .ritual-ui .rb-give, body.carrying .ritual-ui #act-cancel { display: none !important; }
body.carrying #act-next { width: 52px; height: 52px; animation: none; }
body.carrying #act-next svg { width: 26px; height: 26px; }
/* three in the cycle (user 2026-11-09: human too): cat → guinea pig → human → cat — the current one large, the next small, the third hidden */
.tools .animaltog[data-sp="cat"] .at-human, .tools .animaltog[data-sp="pig"] .at-cat, .tools .animaltog[data-sp="human"] .at-pig { opacity: 0; transform: translate(18%, -8%) scale(.3); }
.tools .animaltog[data-sp="capy"]::after { border-color: #e7a75e; box-shadow: 0 0 10px rgba(240, 160, 80, .55); }
.tools .animaltog[data-sp="human"]::after { border-color: #ecdcbc; box-shadow: 0 0 10px rgba(236, 220, 188, .5); }
.tools .animaltog { outline: none; -webkit-tap-highlight-color: transparent; }
/* the button shows only the one a tap makes me (user 2026-11-09): that face alone, centred in its ring */
.tools .animaltog .at-face { opacity: 0 !important; transform: translate(-50%, -50%) scale(.5) !important; }
.tools .animaltog[data-sp="cat"] .at-cat, .tools .animaltog[data-sp="pig"] .at-pig, .tools .animaltog[data-sp="capy"] .at-capy, .tools .animaltog[data-sp="human"] .at-human { opacity: 1 !important; transform: translate(-50%, -50%) scale(1.04) !important; }
.tools .animaltog.swap[data-sp="cat"] .at-cat, .tools .animaltog.swap[data-sp="pig"] .at-pig, .tools .animaltog.swap[data-sp="capy"] .at-capy, .tools .animaltog.swap[data-sp="human"] .at-human { animation: at-pop2 .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes at-pop2 { 0% { transform: translate(-50%, -50%) scale(.55); } 60% { transform: translate(-50%, -50%) scale(1.16); } 100% { transform: translate(-50%, -50%) scale(1.04); } }
.tools .animaltog { width: 46px; min-width: 46px; }
.tools .animaltog::after { left: 50%; margin-left: -18px; }
@media (max-width: 430px) { .tools .animaltog { width: 44px; min-width: 44px; } .tools .animaltog::after { left: 50%; margin-left: -17px; } }
@media (max-width: 360px) { .tools .animaltog { width: 40px; min-width: 40px; } .tools .animaltog::after { left: 50%; margin-left: -15px; } }
/* the gift shelf's remove button on the left, beside the gifts (user 2026-11-09: on the right it hid under the wedding
   panel): the button at the shelf's start, the gifts after it */
.shelf-edit { right: auto; left: 78px; }
.giftshelf { left: 126px; }
body:has(#wed-panel:not([hidden])) .giftshelf { right: 148px; }   /* (the shelf stops before the wedding panel; more gifts scroll sideways) */
body.carrying .ritual-ui { opacity: 0 !important; pointer-events: none !important; }   /* (carrying: no taper buttons at all, user 2026-11-09 — they come back at a stand) */
/* the stick-sharing switch (user 2026-11-09): on = I keep going round handing sticks to people, off = I stop */
.share-cta .cc-sw { position: relative; flex: none; width: 34px; height: 20px; margin-left: 2px; border-radius: 999px; background: rgba(60, 20, 30, .55); border: 1px solid rgba(255, 200, 220, .55); transition: background .25s; }
.share-cta .cc-sw b { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff3f6; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.share-cta.auto .cc-sw { background: linear-gradient(90deg, #ff7aa8, #ffb3c8); }
.share-cta.auto .cc-sw b { transform: translateX(14px); }
/* one gate (user 2026-11-09): during any full-screen moment (main sceneBusy: wedding, choir game, futsal, ride, stays,
   devotion, rosary, wardrobe, fireworks curtain, letters, Santa, confession, photo) every everyday element marked
   .hud-day goes — mark new everyday buttons with it and they follow every scene */
body.scene .hud-day, body.scene .ride-mark { opacity: 0 !important; pointer-events: none !important; visibility: hidden; }

/* the controls hint (user 2026-11-09, docs/CONTROLS_HINT.md): one small glyph beside me, never over the view; taps pass
   through; transform + opacity only (no repaint over the canvas); hidden in every scene (.hud-day) */
.ctl-hint { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 11px 6px; border-radius: 16px; background: rgba(16, 12, 8, .64); border: 1px solid rgba(255, 214, 150, .26); opacity: 0; transition: opacity .5s ease; will-change: transform, opacity; transform: translate3d(-200px, -200px, 0); }
.ctl-hint.on { opacity: 1; transition-duration: .35s; }
.ctl-hint svg { display: none; width: 40px; height: 40px; fill: none; stroke: #f6dca8; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ctl-hint:not(.pc)[data-g="walk"] .g-walk.t, .ctl-hint.pc[data-g="walk"] .g-walk.m, .ctl-hint[data-g="turn"]:not(.pc) .g-turn.t, .ctl-hint.pc[data-g="turn"] .g-turn.m, .ctl-hint:not(.pc)[data-g="zoom"] .g-zoom.t, .ctl-hint.pc[data-g="zoom"] .g-zoom.m { display: block; }
.ctl-hint .ch-w { font-size: 11.5px; line-height: 1.2; letter-spacing: .02em; color: rgba(243, 212, 154, .92); white-space: nowrap; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
.ctl-hint .lit { fill: rgba(243, 212, 154, .55); stroke: none; }
.ctl-hint .hand, .ctl-hint .rip, .ctl-hint .slide, .ctl-hint .pa, .ctl-hint .pb, .ctl-hint .wheel { transform-box: fill-box; transform-origin: center; }
.ctl-hint .rip { opacity: 0; }
.ctl-hint.on [class*="g-walk"] .hand { animation: ch-press 1.8s ease-in-out infinite; }
.ctl-hint.on [class*="g-walk"] .rip { animation: ch-rip 1.8s ease-out infinite; }
.ctl-hint.on [class*="g-walk"] .rip.r2 { animation-delay: .25s; }
.ctl-hint.on [class*="g-turn"] .slide { animation: ch-slide 3.6s ease-in-out infinite; }
.ctl-hint.on .g-zoom .pa { animation: ch-pa 1.8s ease-in-out infinite; }
.ctl-hint.on .g-zoom .pb { animation: ch-pb 1.8s ease-in-out infinite; }
.ctl-hint.on .g-zoom .wheel { animation: ch-wheel 1.2s ease-in-out infinite; }
.ctl-hint.ok svg { animation: ch-ok .38s ease-out both !important; }
@keyframes ch-press { 0%, 30%, 100% { transform: translateY(0); } 42% { transform: translateY(2.5px) scale(.97); } 56% { transform: translateY(0); } }
@keyframes ch-rip { 0%, 40% { opacity: 0; transform: scale(.6); } 46% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes ch-slide { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes ch-pa { 0%, 15% { transform: translate(0, 0); } 60%, 85% { transform: translate(-8px, 8px); } 100% { transform: translate(0, 0); } }
@keyframes ch-pb { 0%, 15% { transform: translate(0, 0); } 60%, 85% { transform: translate(8px, -8px); } 100% { transform: translate(0, 0); } }
@keyframes ch-wheel { 0% { transform: translateY(-1px); opacity: 1; } 70% { transform: translateY(3px); opacity: .2; } 100% { transform: translateY(-1px); opacity: 1; } }
@keyframes ch-ok { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ctl-hint *, .ctl-hint.on * { animation: none !important; } .ctl-hint .rip { opacity: .5; } }
.hint-replay { display: flex; align-items: center; gap: 8px; margin: 10px auto 2px; padding: 8px 14px; min-height: 40px; border-radius: 20px; border: 1px solid rgba(255, 214, 150, .3); background: rgba(255, 214, 150, .06); color: #f3d49a; font: inherit; font-size: 13px; cursor: pointer; }
.hint-replay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* ---- the CU pop-up's menu (user 2026-11-10, main.js cuMenu*): a deep purple glass sheet rising from the bottom (a panel on
   the right on wide screens), the get coffee drinks as glossy cards, a lime order button; motion = transform/opacity only */
.cu-menu { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(560px, calc(100vw - 20px)); max-height: min(78dvh, 640px); padding: 0; border: 0; border-radius: 30px 30px 0 0;
  background: linear-gradient(160deg, rgba(76, 26, 140, .96), rgba(36, 10, 74, .97) 55%, rgba(22, 6, 46, .98)); color: #fff; overflow: hidden; z-index: 60;
  box-shadow: 0 -18px 60px rgba(120, 40, 220, .45), inset 0 1px 0 rgba(214, 255, 90, .55); font-family: "Arial Rounded MT Bold", "Nunito", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  transform: translateY(105%); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.15, .3, 1), opacity .3s; padding-bottom: env(safe-area-inset-bottom); }
.cu-menu[open] { transform: translateY(0); opacity: 1; }
.cu-menu[open]:not(.shown) { animation: cm-rise .62s cubic-bezier(.2, 1.15, .3, 1) both; }
.cu-menu.closing { transform: translateY(105%); opacity: 0; transition: transform .26s ease-in, opacity .26s; animation: none; }
@keyframes cm-rise { from { transform: translateY(105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cu-menu::before { content: ''; position: absolute; inset: 0; border-top: 3px solid #c6f22e; border-radius: inherit; pointer-events: none; opacity: .9; }
.cm-aura { position: absolute; left: 50%; top: -120px; width: 520px; height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 190, 110, .32), rgba(255, 170, 90, 0)); pointer-events: none; }
.cm-lights { position: absolute; left: 14px; right: 14px; top: 9px; height: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.cm-lights i { width: 7px; height: 7px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255, 196, 100, .75); animation: cm-twinkle 2.4s ease-in-out infinite; }
.cm-lights i:nth-child(3n) { background: #ff8fc8; box-shadow: 0 0 8px 2px rgba(255, 120, 190, .7); animation-delay: -.8s; }
.cm-lights i:nth-child(3n+1) { background: #c6f22e; box-shadow: 0 0 8px 2px rgba(198, 242, 46, .6); animation-delay: -1.6s; }
@keyframes cm-twinkle { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.cm-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 26px 18px 8px; }
.cm-logo { width: 74px; height: auto; filter: drop-shadow(0 6px 10px rgba(10, 0, 30, .55)); animation: cm-bob 3.2s ease-in-out infinite; }
@keyframes cm-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
.cm-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-tag { align-self: flex-start; font-size: 11px; letter-spacing: .14em; color: #1d0a3a; background: linear-gradient(90deg, #e4ff6a, #b8e81c); padding: 3px 9px; border-radius: 999px; font-weight: 800; }
.cm-get { font: italic 700 30px/1.05 Georgia, "Times New Roman", serif; color: #fff; text-shadow: 0 2px 0 #0f5530, 0 0 18px rgba(80, 230, 140, .45); }
.cm-get i { font-size: 18px; font-weight: 400; color: #bdf5d0; margin-left: 2px; }
.cm-hi { font-size: 14px; color: rgba(255, 236, 214, .88); }
.cm-x { position: absolute; top: 20px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.cm-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cm-x:active { transform: scale(.9); }
.cm-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 14px 6px; }
.cm-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 20px; color: #fff; text-align: center;
  background: linear-gradient(170deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1.5px solid rgba(255, 255, 255, .14);
  opacity: 0; transform: translateY(18px) scale(.94); animation: cm-in .5s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(.12s + var(--d) * .055s); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cm-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.cm-card::after { content: ''; position: absolute; inset: -2px; border-radius: 22px; border: 2.5px solid #c6f22e; box-shadow: 0 0 22px rgba(198, 242, 46, .55), inset 0 0 18px rgba(198, 242, 46, .25); opacity: 0; transition: opacity .25s; pointer-events: none; }
.cm-card.on { transform: translateY(-4px) scale(1.04); }
.cm-card.on::after { opacity: 1; }
.cm-card:active { transform: scale(.95); }
.cm-cup { width: 100%; display: grid; place-items: center; height: 92px; }
.cm-svg { height: 92px; width: auto; filter: drop-shadow(0 8px 10px rgba(8, 0, 24, .5)); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.cm-card.on .cm-svg { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.cm-steam path { opacity: 0; animation: cm-steam 2.6s ease-out infinite; transform-box: fill-box; }
.cm-steam path:nth-child(2) { animation-delay: -.9s; } .cm-steam path:nth-child(3) { animation-delay: -1.7s; }
.cm-card:not(.on) .cm-steam { display: none; }
@keyframes cm-steam { 0% { opacity: 0; transform: translateY(8px) scaleY(.7); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scaleY(1.1); } }
.cm-card b { font-size: 13.5px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; word-break: keep-all; }
.cm-card small { font-size: 10.5px; color: rgba(255, 228, 196, .8); line-height: 1.2; word-break: keep-all; }
.cm-badge { position: absolute; top: 6px; right: 6px; font: 800 9px/1 "Arial Rounded MT Bold", Arial, sans-serif; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, #e8323e, #b8141f); padding: 4px 6px; border-radius: 999px; box-shadow: 0 2px 8px rgba(200, 20, 30, .5); font-style: normal; }
.cm-card.xmas { background: linear-gradient(170deg, rgba(255, 210, 140, .22), rgba(255, 255, 255, .05)); }
.cm-foot { position: relative; padding: 8px 14px 16px; }
.cm-order { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; border-radius: 999px; color: #1d0a3a; text-align: left;
  background: linear-gradient(180deg, #ecff7a, #c6f22e 45%, #9fd014); box-shadow: 0 10px 26px rgba(160, 230, 30, .35), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 110, 0, .35); position: relative; overflow: hidden; }
.cm-order::before { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: cm-sheen 2.8s ease-in-out infinite; }
@keyframes cm-sheen { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(720px); } }
.cm-order:active { transform: scale(.97); }
.cm-ocup { width: 44px; height: 50px; display: grid; place-items: center; background: rgba(255, 255, 255, .55); border-radius: 50%; flex: none; }
.cm-mini { height: 40px; width: auto; }
.cm-olabel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cm-olabel b { font-size: 19px; line-height: 1.1; }
.cm-olabel small { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-free { font: 800 13px/1 "Arial Rounded MT Bold", Arial, sans-serif; color: #fff; background: #7a2fd0; padding: 7px 10px; border-radius: 999px; font-style: normal; white-space: nowrap; }
@media (orientation: landscape) and (min-width: 700px) {
  .cu-menu { inset: 50% 18px auto auto; margin: 0; width: 440px; max-height: calc(100dvh - 40px); border-radius: 30px; transform: translate(110%, -50%); }
  .cu-menu[open] { transform: translate(0, -50%); }
  .cu-menu[open]:not(.shown) { animation: cm-side .62s cubic-bezier(.2, 1.15, .3, 1) both; }
  .cu-menu.closing { transform: translate(110%, -50%); }
  @keyframes cm-side { from { transform: translate(110%, -50%); opacity: 0; } to { transform: translate(0, -50%); opacity: 1; } }
}
@media (max-width: 360px) { .cm-card b { font-size: 12px; } .cm-svg, .cm-cup { height: 78px; } .cm-get { font-size: 26px; } .cm-logo { width: 62px; } }
@media (prefers-reduced-motion: reduce) { .cm-lights i, .cm-logo, .cm-steam path, .cm-order::before { animation: none; } }
body.cu-ordering #free { z-index: 70; }
body.cu-ordering nav.actions, body.cu-ordering .hud-day, body.cu-ordering #ctl-hint { opacity: 0 !important; pointer-events: none !important; transition: opacity .4s; }
#free.cu-thx { white-space: normal; width: max-content; max-width: min(78vw, 360px); text-align: center; }
#free.cu-thx b { font-size: 17px; line-height: 1.25; }
/* the single-drink hero (user 2026-11-10: only the get coffee) */
/* two treats now (user 2026-11-10): a pill of two tabs over the hero, the hero swapping with a pop */
/* "+ add a dessert" above the order (user 2026-11-10): a dashed gold pill that opens into the two desserts; the chosen one
   pops in beside the coffee in the hero, tagged as the free extra */
.cm-add { position: relative; margin: 2px 14px 0; }
/* (user 2026-11-10 b: the desserts always shown, each with its own "+ add" — one at a time, a hand each) */
.cm-addh { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 6px; color: #ffe8c4; }
.cm-addh b { font-size: 14.5px; } .cm-addh small { flex: 1; min-width: 0; font-size: 11.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-addh .cm-bon { align-self: center; }
.cm-add .cm-dess { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-dcard { position: relative; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 8px; border-radius: 18px; text-align: left; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background .25s, border-color .25s, transform .2s; }
.cm-dcard:active { transform: scale(.96); }
.cm-dimg { grid-row: 1 / 3; display: grid; place-items: center; }
.cm-dimg .cm-mini { height: 46px; }
.cm-dn { font-size: 14px; font-weight: 800; line-height: 1.15; word-break: keep-all; }
.cm-dadd { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px 4px 4px; border-radius: 999px; font: 800 12.5px/1 system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; font-style: normal; color: #3a1400; background: linear-gradient(90deg, #ffd36b, #ff9a5a); box-shadow: 0 0 12px rgba(255, 180, 90, .45); }
.cm-dplus { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .55); }
.cm-dplus svg { width: 13px; height: 13px; fill: none; stroke: #3a1400; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-dplus .ck, .cm-dadd .a2 { display: none; }
.cm-dcard.on { background: linear-gradient(160deg, rgba(228, 255, 106, .3), rgba(184, 232, 28, .14)); border-color: #c6f22e; box-shadow: 0 0 16px rgba(198, 242, 46, .35); }
.cm-dcard.on .cm-dadd { background: linear-gradient(90deg, #e4ff6a, #b8e81c); color: #1d0a3a; }
.cm-dcard.on .cm-dplus .pl, .cm-dcard.on .cm-dadd .a1 { display: none; }
.cm-dcard.on .cm-dplus .ck, .cm-dcard.on .cm-dadd .a2 { display: inline; }
.cm-addbtn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; color: #ffe8c4; text-align: left; border: 1.5px dashed rgba(255, 214, 120, .75); background: linear-gradient(90deg, rgba(255, 200, 100, .14), rgba(255, 140, 200, .1)); animation: cm-addpulse 2.4s ease-in-out infinite; }
@keyframes cm-addpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.cm-addbtn:active { transform: scale(.97); }
.cm-plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ffd36b, #ff9a5a); box-shadow: 0 0 14px rgba(255, 190, 90, .55); }
.cm-plus svg { width: 18px; height: 18px; fill: none; stroke: #3a1400; stroke-width: 3; stroke-linecap: round; }
.cm-addbtn span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-addbtn b { font-size: 15.5px; } .cm-addbtn small { font-size: 11.5px; opacity: .8; }
.cm-bon { font: 800 11px/1 "Arial Rounded MT Bold", Arial, sans-serif; font-style: normal; color: #fff; background: linear-gradient(90deg, #ff7ab0, #e8323e); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.cm-dess { display: none; grid-template-columns: 1fr 1fr 34px; gap: 7px; align-items: center; }
.cm-add.open .cm-addbtn { display: none; }
.cm-add.open .cm-dess { display: grid; animation: cm-swap .4s cubic-bezier(.2, 1.4, .4, 1); }
.cm-dess .cm-tab { flex-direction: row; justify-content: center; gap: 6px; padding: 5px 24px 5px 6px; font-size: 13px; }
.cm-dess .cm-tab .cm-mini { height: 34px; }
.cm-dess .cm-tab span { min-height: 0; }
.cm-dx { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.cm-dx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cm-bonus { position: absolute; right: -14%; bottom: 2%; width: 40%; display: grid; place-items: center; animation: cm-bonus .55s cubic-bezier(.2, 1.5, .4, 1) both; filter: drop-shadow(0 8px 10px rgba(8, 0, 24, .5)); }
.cm-bonus .cm-mini { height: auto; width: 100%; }
.cm-mini.cm-pic { width: auto; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.cm-bonus .cm-pic { height: 64px; width: auto; }
.cm-bonus.two { width: 62%; right: -26%; grid-auto-flow: column; } .cm-bonus.two .cm-mini { width: 60%; margin: 0 -10%; }
.cm-bonus em { position: absolute; top: -6%; left: -8%; font: 800 11px/1 "Arial Rounded MT Bold", Arial, sans-serif; font-style: normal; color: #fff; background: linear-gradient(90deg, #ff7ab0, #e8323e); padding: 4px 7px; border-radius: 999px; transform: rotate(-10deg); white-space: nowrap; }
@keyframes cm-bonus { 0% { opacity: 0; transform: translate(-30%, 20%) scale(.3) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
.cm-pick { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 2px 14px 4px; }
.cm-tab { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; border-radius: 16px; color: rgba(255, 236, 214, .85); font-size: 11.5px; font-weight: 700; line-height: 1.1; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: background .25s, color .25s, transform .2s; }
.cm-tab span { white-space: normal !important; word-break: keep-all; text-align: center; min-height: 2.2em; display: flex; align-items: center; }
.cm-chk { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.cm-chk svg { width: 12px; height: 12px; fill: none; stroke: #1d0a3a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cm-tab.on .cm-chk { background: #1d0a3a; border-color: #1d0a3a; } .cm-tab.on .cm-chk svg { opacity: 1; stroke: #d8ff4a; }
.cm-tab.cur { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
.cm-order.off { filter: grayscale(.7) brightness(.8); }
.cm-ocup.two { width: 70px; border-radius: 26px; grid-auto-flow: column; } .cm-ocup.two .cm-mini { height: 34px; margin: 0 -5px; }
.cm-tab .cm-mini { height: 40px; flex: none; }

.cm-tab.on { background: linear-gradient(90deg, #e4ff6a, #b8e81c); color: #1d0a3a; box-shadow: 0 0 14px rgba(198, 242, 46, .45); }
.cm-tab:active { transform: scale(.95); }
.cm-hero.swap { animation: cm-swap .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cm-swap { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 100% { opacity: 1; transform: none; } }
.cm-hot.new { background: linear-gradient(90deg, #ff7ab0, #e8323e); }
.cm-hot.warm { background: linear-gradient(90deg, #f0a03c, #c46a1e); }
.cm-get.cm-stk { font: 800 26px/1.1 system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; text-shadow: 0 2px 0 #8a1030, 0 0 18px rgba(255, 120, 170, .45); word-break: keep-all; }
.cm-halo.pink { background: radial-gradient(closest-side, rgba(255, 150, 190, .55), rgba(255, 120, 170, .18) 55%, rgba(255, 120, 170, 0)); }
.cm-sticks .cm-fan { transform-box: fill-box; transform-origin: 50% 100%; animation: cm-fan 3s ease-in-out infinite; }
@keyframes cm-fan { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.cm-hero { position: relative; display: flex; align-items: center; gap: 8px; padding: 2px 16px 4px; }
.cm-stage { position: relative; width: 46%; max-width: 220px; aspect-ratio: 140 / 180; display: grid; place-items: center; flex: none; }
.cm-halo { position: absolute; inset: 6% -8% -2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .55), rgba(255, 160, 80, .18) 55%, rgba(255, 150, 80, 0)); animation: cm-breathe 3.4s ease-in-out infinite; }
@keyframes cm-breathe { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.cm-hero-svg { position: relative; width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(8, 0, 24, .55)); animation: cm-float 3.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes cm-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.cm-hero-svg .cm-steam path { opacity: 0; animation: cm-steam2 3s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cm-hero-svg .cm-steam path:nth-child(2) { animation-delay: -1s; } .cm-hero-svg .cm-steam path:nth-child(3) { animation-delay: -2s; }
@keyframes cm-steam2 { 0% { opacity: 0; transform: translateY(14px) scale(.8, .6); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateY(-18px) scale(1.15, 1.1); } }
.cm-slosh { transform-box: fill-box; transform-origin: 50% 50%; animation: cm-slosh 2.6s ease-in-out infinite; }
@keyframes cm-slosh { 0%, 100% { transform: rotate(-2.5deg) scaleY(1); } 50% { transform: rotate(2.5deg) scaleY(.92); } }
.cm-sparks { position: absolute; inset: 0; pointer-events: none; }
.cm-sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 10px 3px rgba(255, 200, 110, .8); opacity: 0; animation: cm-spark 3.2s ease-out infinite; }
.cm-sparks i:nth-child(1) { left: 14%; top: 40%; animation-delay: 0s; } .cm-sparks i:nth-child(2) { left: 82%; top: 34%; animation-delay: -.5s; }
.cm-sparks i:nth-child(3) { left: 22%; top: 70%; animation-delay: -1.1s; } .cm-sparks i:nth-child(4) { left: 78%; top: 66%; animation-delay: -1.6s; }
.cm-sparks i:nth-child(5) { left: 50%; top: 8%; animation-delay: -2.1s; } .cm-sparks i:nth-child(6) { left: 6%; top: 18%; animation-delay: -2.6s; background: #c6f22e; box-shadow: 0 0 10px 3px rgba(198, 242, 46, .7); }
.cm-sparks i:nth-child(7) { left: 92%; top: 12%; animation-delay: -.8s; background: #ff9fd0; box-shadow: 0 0 10px 3px rgba(255, 140, 200, .7); } .cm-sparks i:nth-child(8) { left: 60%; top: 86%; animation-delay: -1.9s; }
@keyframes cm-spark { 0% { opacity: 0; transform: translateY(8px) scale(.4); } 30% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(.5); } }
.cm-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-hot { align-self: flex-start; font: 800 11px/1 "Arial Rounded MT Bold", Arial, sans-serif; letter-spacing: .16em; color: #fff; background: linear-gradient(90deg, #ff6a3a, #e8323e); padding: 5px 10px; border-radius: 999px; box-shadow: 0 3px 12px rgba(255, 90, 50, .45); }
.cm-info .cm-get { font-size: 40px; }
.cm-info .cm-get i { font-size: 22px; display: block; margin: -4px 0 0 4px; }
.cm-desc { font-size: 14.5px; line-height: 1.35; color: rgba(255, 236, 214, .92); word-break: keep-all; }
.cm-dots { display: flex; gap: 6px; margin-top: 2px; }
.cm-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c6f22e; opacity: .35; animation: cm-twinkle 1.8s ease-in-out infinite; }
.cm-dots i:nth-child(2) { animation-delay: -.6s; } .cm-dots i:nth-child(3) { animation-delay: -1.2s; }
.cm-head .cm-titles { gap: 6px; }
.cm-head .cm-hi { font-size: 16px; }
@media (max-width: 360px) { .cm-info .cm-get { font-size: 32px; } .cm-desc { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cm-halo, .cm-hero-svg, .cm-hero-svg .cm-steam path, .cm-slosh, .cm-sparks i, .cm-dots i { animation: none; } }

/* rebrand (scripts/inpeace/rebrand.py): the developer contact, the offering sheet and the letters wall are not part of this version */
.dev-contact, #btn-offer, #letter-done, #letter-others { display: none !important; }
/* who adapted this version: under everything on the title, and at the top of About */
.title .adapted-by { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); margin: 0; text-align: center;
  font: 400 11px var(--serif); letter-spacing: .12em; color: rgba(231, 181, 106, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); pointer-events: none; }
.about .adapted-by { color: var(--gold); font: 400 12.5px var(--serif); letter-spacing: .06em; }