/* tokens.css */
/* Illuminated: the design tokens and the shared pieces every screen uses (ported from design/board/System.dc.html).
   Owned by the integrator; screens add their own files in src/css/ and never redefine these. */
:root {
  --ink: #0A0D18;
  --night: #141936;
  --teal: #0F2D31;
  --parchment: #F3EBDD;
  --gold: #E9C46A;
  --gold-hi: #F7E2A6;
  --gold-lo: #A97A35;
  --aether: #A6F4E6;
  --ember: #FF8A5B;
  --muted: rgba(243, 235, 221, .74);
  --faint: rgba(243, 235, 221, .5);
  --hair: rgba(243, 235, 221, .12);
  --gold-hair: rgba(233, 196, 106, .32);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.4, .4, 1);
}

html, body { margin: 0; height: 100%; background: var(--ink); color: var(--parchment); font-family: var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }
.screen { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.screen-enter { animation: screen-in .5s var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
button { font-family: var(--sans); color: inherit; }
img { -webkit-user-drag: none; }

/* type */
.eyebrow { font: 600 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.display { font-family: var(--serif); font-weight: 380; line-height: 1.05; }
.story { font-family: var(--serif); font-style: italic; font-weight: 300; line-height: 1.38; }
.wordmark { font-family: var(--serif); font-weight: 380; letter-spacing: .34em; padding-left: .34em; text-shadow: 0 0 28px rgba(233, 196, 106, .35); }
.num { font-variant-numeric: tabular-nums; }

/* materials */
.gold-fill { background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 40%, #C9973F 76%, #A97A35 100%); }
.glass { background: rgba(10, 13, 24, .52); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.veil { background: rgba(10, 13, 24, .62); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.seam-glow { filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95)) drop-shadow(0 0 16px rgba(233, 196, 106, .6)); }

/* buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 0; padding: 0 22px; border-radius: 999px; font: 650 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease-out), filter .2s; }
.btn:active { transform: scale(.97); }
.btn-gold { height: 58px; color: #1A1305; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 40%, #C9973F 76%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 14px 34px rgba(233, 196, 106, .3); }
.btn-ghost { height: 52px; color: var(--parchment); background: transparent; border: 1px solid rgba(233, 196, 106, .6); font-weight: 600; font-size: 15px; }
.btn-text { min-height: 44px; padding: 0 12px; color: rgba(243, 235, 221, .85); background: transparent; font-weight: 600; font-size: 14px; }
.btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 22px; background: rgba(5, 7, 14, .45); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--gold-hair); border-radius: 18px; font-size: 13px; letter-spacing: .02em; }
.chip b { font-weight: 650; }

/* gold motes drifting up (place with inline left/top/animation-delay) */
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFE3A3; box-shadow: 0 0 8px 2px rgba(255, 214, 140, .65); opacity: 0; animation: mote-rise 10s linear infinite; pointer-events: none; }
@keyframes mote-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(24px, -280px); opacity: 0; } }

/* the toast used for small messages */
.toast { position: absolute; left: 50%; bottom: calc(28px + var(--safe-bottom)); transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 16px; background: rgba(20, 25, 54, .92); border: 1px solid var(--gold-hair); font-size: 14px; opacity: 0; transition: opacity .3s, transform .3s var(--ease-out); pointer-events: none; z-index: 50; max-width: 80%; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* atlas.css */
/* The Atlas (design/board/Atlas.dc.html). atlas.css loads before base.css, so rules that meet a base class use two
   classes to win. Realms (src/css/realms.css): the Realms tab, the realm marks on each page and the Strays' accents
   are at the end; then the living map (the Map tab) and its share sheet. The Journal's look is in story.css. */
.atlas { background: var(--ink); color: var(--parchment); }

/* the two views, crossfading under the tabs */
.atlas-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility 0s linear .45s; }
.atlas[data-tab="atlas"] .atlas-view[data-view="atlas"], .atlas[data-tab="feed"] .atlas-view[data-view="feed"], .atlas[data-tab="strays"] .atlas-view[data-view="strays"], .atlas[data-tab="realms"] .atlas-view[data-view="realms"], .atlas[data-tab="map"] .atlas-view[data-view="map"], .atlas[data-tab="journal"] .atlas-view[data-view="journal"] { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out); }
.atlas-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(102px + var(--safe-bottom)); box-sizing: border-box; }

/* "Chapter I · The Thinning", "Your Atlas", the chapter's progress */
.atlas-head { display: flex; flex-direction: column; gap: 10px; padding: calc(28px + var(--safe-top)) 24px 0; animation: sh-drop .8s var(--ease-spring) .05s backwards; }
.atlas-title { margin: 0; font-family: var(--serif); font-weight: 380; font-size: 36px; line-height: 1; }
.atlas-progress { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.atlas-track { flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(243, 235, 221, .12); overflow: hidden; }
.atlas-fill { width: 100%; height: 3px; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(var(--to, 0)); background: linear-gradient(90deg, #A97A35, #E9C46A 70%, #FFF1C9); box-shadow: 0 0 10px rgba(233, 196, 106, .6); animation: atlas-fill 1.5s var(--ease-out) .35s backwards; }
@keyframes atlas-fill { from { transform: scaleX(0); } }
.atlas-count, .atlas-sub { font-size: 13px; color: rgba(243, 235, 221, .78); white-space: nowrap; }
.atlas-sub { margin-top: 4px; }

/* the pages and the thread */
.atlas-map { position: relative; margin-top: 55px; }
/* the thread is sewn down the page as the pages arrive, then its stitches keep flowing */
.atlas-threads { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; animation: atlas-sew var(--sew, 1.6s) cubic-bezier(.45, 0, .25, 1) .35s backwards; }
@keyframes atlas-sew { from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
.atlas-thread { stroke-dasharray: 3 7; animation: atlas-flow 6s linear infinite; }
@keyframes atlas-flow { to { stroke-dashoffset: -60; } }
.atlas-thread-tail { animation-delay: -2s; }
.atlas-page { position: absolute; display: flex; flex-direction: column; gap: 8px; color: var(--parchment); text-align: left; transition: transform .35s var(--ease-out); animation: atlas-page-in .95s var(--ease-spring) var(--d, 0s) backwards; }
@keyframes atlas-page-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.atlas-page:active { transform: scale(.97); }
.atlas .atlas-page-frame { position: relative; display: block; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px rgba(233, 196, 106, .5), 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(233, 196, 106, .12); }
.atlas-page-frame img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* tilt parallax, only once the phone shares its tilt */
.atlas.has-tilt .atlas-page-frame { transform: translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0); }
.atlas.has-tilt .atlas-page.is-right .atlas-page-frame { transform: translate3d(calc(var(--tilt-x, 0px) * 1.5), calc(var(--tilt-y, 0px) * 1.5), 0); }
/* positioned, so it paints after the (positioned) frame and its shadow never veils the caption */
.atlas-page-cap { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.atlas-page-name { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atlas-stars { flex: none; font-size: 12px; letter-spacing: .02em; color: var(--gold); }
.atlas-stars-off { color: rgba(243, 235, 221, .3); }
/* a page sealed a moment ago glows twice */
.atlas .atlas-page.is-new .atlas-page-frame { animation: atlas-new 1.7s ease-in-out 1.1s 2; }
@keyframes atlas-new { 50% { box-shadow: 0 0 0 1px rgba(255, 228, 170, .95), 0 18px 40px rgba(0, 0, 0, .5), 0 0 48px rgba(233, 196, 106, .62); } }

/* the next page, waiting */
.atlas-next { position: absolute; left: 0; top: 0; width: max-content; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px dashed rgba(233, 196, 106, .55); border-radius: 20px; font-size: 13px; color: rgba(243, 235, 221, .85); white-space: nowrap; transition: transform .25s var(--ease-out), border-color .3s; animation: sh-fade .9s var(--ease-out) var(--d, 0s) backwards; }
.atlas-next::after { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -4px; }
.atlas-next:active { transform: scale(.96); border-color: rgba(233, 196, 106, .9); }

/* an empty Atlas, an empty case of Strays */
.atlas-empty { display: flex; flex-direction: column; align-items: center; padding: 44px 24px 0; text-align: center; }
.atlas-empty-page { display: flex; align-items: center; justify-content: center; width: 150px; height: 196px; box-sizing: border-box; border: 1px dashed rgba(233, 196, 106, .55); border-radius: 14px; background: radial-gradient(ellipse at 50% 45%, rgba(233, 196, 106, .09), rgba(233, 196, 106, 0) 70%); }
.atlas-empty-thread { display: block; margin: 8px 0 10px; animation: sh-fade 1s var(--ease-out) .25s backwards; }
.atlas .atlas-empty-text { gap: 12px; }
.atlas-empty-strays { padding-top: 64px; }
.atlas-empty-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border: 1px solid var(--gold-hair); border-radius: 32px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .14), rgba(233, 196, 106, 0) 70%); }
.atlas-empty .btn svg { flex: none; }

/* the Strays: small foil cards */
.atlas-strays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 30px 22px 0; }
.atlas .atlas-stray { display: block; transition: transform .3s var(--ease-out); animation-fill-mode: backwards; }
.atlas-stray:active { transform: scale(.97); }
.atlas-stray-foil { display: block; padding: 4px; border-radius: 16px; background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(233, 196, 106, .2); }
.atlas .atlas-stray-card { position: relative; display: block; height: 0; padding-top: 150%; overflow: hidden; border-radius: 12px; background-color: var(--ink); }
.atlas-stray-card img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.atlas-stray-sheen { position: absolute; inset: 0; pointer-events: none; opacity: .4; mix-blend-mode: color-dodge; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 22%, rgba(var(--realm-accent-rgb), .55) 38%, rgba(255, 241, 201, .75) 48%, rgba(255, 138, 91, .35) 58%, rgba(255, 255, 255, 0) 74%); background-size: 260% 260%; animation: atlas-sheen 7s ease-in-out infinite alternate; }
@keyframes atlas-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.atlas-stray-no { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 10px; background: rgba(10, 13, 24, .55); font-size: 9px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: #F7E2A6; }
.atlas-stray-plate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 38px 10px 10px; text-align: left; background: linear-gradient(0deg, rgba(10, 13, 24, .96) 0%, rgba(10, 13, 24, .82) 55%, rgba(10, 13, 24, 0) 100%); }
.atlas-stray-name { font-family: var(--serif); font-size: 18px; line-height: 1.05; color: var(--parchment); }
.atlas-stray-from { display: flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 1.3; color: rgba(243, 235, 221, .72); }
.atlas-stray-from svg { flex: none; color: var(--realm-accent); filter: drop-shadow(0 0 4px rgba(var(--realm-accent-rgb), .85)); }

/* the tabs */
.atlas-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(78px + var(--safe-bottom)); padding: 0 4px calc(8px + var(--safe-bottom)); box-sizing: border-box; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; background: rgba(10, 13, 24, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 rgba(233, 196, 106, .16); }
.atlas-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(243, 235, 221, .6); text-align: center; transition: color .3s; }
/* the way back to the Seam stands a little apart from the five tabs */
.atlas-tab-home::after { content: ''; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, rgba(233, 196, 106, 0), rgba(233, 196, 106, .28), rgba(233, 196, 106, 0)); }
/* a page waiting in the Journal */
.atlas-tab-new { position: absolute; top: 9px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgba(10, 13, 24, .9), 0 0 10px rgba(233, 196, 106, .9); animation: atlas-new-dot 2.6s ease-in-out infinite; }
.atlas-tab-new[hidden] { display: none; }
@keyframes atlas-new-dot { 50% { box-shadow: 0 0 0 2px rgba(10, 13, 24, .9), 0 0 16px rgba(255, 222, 150, 1); } }
.atlas-tab svg { transition: transform .25s var(--ease-spring), filter .3s; }
.atlas-tab:active svg { transform: scale(.88); }
.atlas-tab.is-on { color: var(--gold); font-weight: 650; }
/* six labels in 360 px: "Errantes" needs the room */
@media (max-width: 380px) { .atlas-tab { font-size: 9px; letter-spacing: .03em; } .atlas-tab svg { width: 21px; height: 21px; } }
.atlas-tab.is-on svg { filter: drop-shadow(0 0 6px rgba(233, 196, 106, .5)); }

/* settings, in the corner above every tab */
.atlas-gear { position: absolute; z-index: 3; right: 16px; top: calc(24px + var(--safe-top)); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--gold-hair); transition: transform .25s var(--ease-out); animation: sh-fade .8s var(--ease-out) .3s backwards; }
.atlas-gear::after { content: ''; position: absolute; inset: -3px; }
.atlas-gear:active { transform: scale(.92); }
.atlas-head { padding-right: 64px; }

/* the Strays' odds, published */
.atlas-odds { margin: 22px 22px 0; border-radius: 18px; background: rgba(243, 235, 221, .035); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.atlas-odds .odds-cell { padding: 14px 6px 10px; }
.atlas-odds .odds-pct { font-size: 22px; }
.atlas-odds-note { margin: 0; padding: 0 16px 14px; font-size: 12px; line-height: 1.4; text-align: center; color: rgba(243, 235, 221, .55); }

/* ---------- realms ---------- */
/* each page carries small marks for the realms painted for it */
.atlas-page-marks { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 9px; background: rgba(10, 13, 24, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .08); }
.atlas-page-marks i { display: flex; color: var(--realm-accent); filter: drop-shadow(0 0 3px rgba(var(--realm-accent-rgb), .9)); }

/* the Realms tab: the Cartographer's book of worlds */
.atlas-realm-banner { display: flex; justify-content: center; padding: 22px 18px 0; }
.atlas-realm-banner .rl-banner { max-width: 100%; }
.atlas-dot { color: rgba(243, 235, 221, .45); }
.atlas-realms { display: flex; flex-direction: column; gap: 18px; padding: 22px 18px 6px; }
.atlas .ar-card { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--realm-ink) 0%, #0B0E1B 100%); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); animation-fill-mode: backwards; }
/* its hairline, drawn over the painting too */
.ar-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .22); }
.ar-art { position: relative; height: 196px; overflow: hidden; }
.ar-art .rl-preview { position: absolute; inset: 0; }
.ar-art .rl-preview img { object-position: 50% 18%; transform: scale(1.02); }
.ar-art-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--realm-ink) 0%, rgba(var(--realm-ink-rgb), .62) 34%, rgba(var(--realm-ink-rgb), 0) 68%), radial-gradient(90% 70% at 50% 120%, rgba(var(--realm-accent-rgb), .16), rgba(var(--realm-accent-rgb), 0) 70%); }
.ar-tags { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-tag-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 10px; font-weight: 650; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 235, 221, .85); background: rgba(10, 13, 24, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ar-tag-pill.is-today { color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5); }
.ar-tag-pill.is-event, .ar-tag-pill.is-mythic { color: var(--realm-accent); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .5), 0 0 16px rgba(var(--realm-accent-rgb), .2); }
.ar-tag-pill svg { flex: none; }
.ar-title { position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.atlas .ar-chapter { color: var(--realm-accent); text-shadow: 0 0 2px rgba(0, 0, 0, .6), 0 1px 10px rgba(0, 0, 0, .5); }
.ar-name { margin: 0; font: 380 30px/1.05 var(--serif); color: var(--parchment); text-shadow: 0 0 22px rgba(var(--realm-glow-rgb), .3), 0 2px 16px rgba(0, 0, 0, .55); }
.ar-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; }
.ar-line { margin: 0; font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .78); }
.ar-count { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: rgba(243, 235, 221, .72); }
.ar-pips { display: flex; align-items: center; gap: 4px; }
.ar-pips i { display: flex; color: rgba(243, 235, 221, .2); }
.ar-pip { display: block; flex: none; }
.ar-pips i.is-on { color: var(--realm-accent); filter: drop-shadow(0 0 4px rgba(var(--realm-accent-rgb), .85)); }
.ar-count-text { font-variant-numeric: tabular-nums; }
.ar-lore { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(var(--realm-accent-rgb), .14); }
.ar-lore-line { position: relative; font: italic 300 15.5px/1.42 var(--serif); color: rgba(243, 235, 221, .92); }
.ar-lore-line.is-open::before { content: ''; position: absolute; left: -11px; top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(var(--realm-accent-rgb), 0), rgba(var(--realm-accent-rgb), .8), rgba(var(--realm-accent-rgb), 0)); }
/* a line not yet read: its shape, softly blurred */
.ar-lore-blur { display: block; filter: blur(4.5px); opacity: .62; color: rgba(243, 235, 221, .8); -webkit-user-select: none; user-select: none; pointer-events: none; }
.ar-hint { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 235, 221, .66); }
.ar-hint svg { flex: none; color: var(--realm-accent); }
.ar-hint.is-done { color: var(--realm-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a realm not found yet: its painting is a memory */
.ar-card.is-unfound .rl-preview img.is-in { opacity: .5; filter: saturate(.45); }
.ar-card.is-unfound .ar-name { color: rgba(243, 235, 221, .8); }
/* the Starwell, before a seam opens onto it */
.ar-card.is-hidden .ar-art { background: radial-gradient(80% 90% at 50% 30%, rgba(var(--realm-glow-rgb), .18) 0%, rgba(var(--realm-ink-rgb), 0) 70%), var(--realm-ink); }
.ar-sky { position: absolute; inset: 0; }
.ar-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F4F6FF; box-shadow: 0 0 6px rgba(var(--realm-glow-rgb), .9); animation: rl-twinkle 3.4s ease-in-out var(--d, 0s) infinite; }
.ar-unknown { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; color: rgba(var(--realm-accent-rgb), .55); filter: drop-shadow(0 0 12px rgba(var(--realm-glow-rgb), .8)); }
.ar-card.is-hidden .ar-name { letter-spacing: .2em; color: rgba(243, 235, 221, .78); }

@media (max-width: 380px) {
  .atlas-tab { font-size: 9px; letter-spacing: .03em; }
}
@media (max-height: 700px) {
  .ar-art { height: 170px; }
  .ar-name { font-size: 27px; }
}

@media (max-height: 700px) {
  .atlas-head { padding-top: calc(22px + var(--safe-top)); }
  .atlas-title { font-size: 32px; }
  .atlas-map { margin-top: 40px; }
  .atlas-empty { padding-top: 28px; }
  .atlas .atlas-empty-page { width: 120px; height: 157px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-thread, .atlas-stray-sheen, .atlas-threads, .ar-sky i { animation: none; }
  .atlas.has-tilt .atlas-page-frame, .atlas.has-tilt .atlas-page.is-right .atlas-page-frame { transform: none; }
  .atlas-page { animation-duration: .01s; }
}

/* ---------- Places: your own places, or everyone's ---------- */
.atlas-seg { display: flex; gap: 4px; width: max-content; max-width: calc(100% - 44px); margin: 18px 22px 0; padding: 4px; box-sizing: border-box; border-radius: 22px; background: rgba(243, 235, 221, .035); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .08); }
.atlas .atlas-seg-btn { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border-radius: 18px; font: 600 13px/1 var(--sans); letter-spacing: .01em; color: rgba(243, 235, 221, .62); white-space: nowrap; transition: color .3s, background .3s, box-shadow .3s; }
.atlas .atlas-seg-btn[aria-selected="true"] { color: var(--gold-hi); background: linear-gradient(180deg, rgba(233, 196, 106, .16), rgba(233, 196, 106, .06)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 0 18px rgba(233, 196, 106, .12); }
.atlas-seg-btn svg { flex: none; }
.atlas-seg-btn:active { transform: scale(.97); }
.fd-head + .atlas-seg { margin-top: 16px; }
.atlas-seg + .atlas-map { margin-top: 40px; }

/* ---------- the living map ---------- */
.mp-view { position: absolute; inset: 0; display: flex; flex-direction: column; padding-bottom: calc(92px + var(--safe-bottom)); box-sizing: border-box; }
.mp-view .atlas-head { flex: none; }
/* the realms, a row of chips that scrolls */
.mp-realms { flex: none; display: flex; gap: 8px; margin-top: 16px; padding: 4px 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 16px, #000 calc(100% - 26px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 16px, #000 calc(100% - 26px), rgba(0, 0, 0, 0) 100%); animation: sh-fade .8s var(--ease-out) .1s backwards; }
.mp-realms::-webkit-scrollbar { display: none; }
.atlas .mp-chip { padding-right: 12px; }
.mp-chip-n { margin-left: 1px; font: 650 11px/1 var(--sans); color: rgba(var(--realm-accent-rgb), .9); }
.mp-chip[aria-checked="false"] .mp-chip-n { color: rgba(243, 235, 221, .45); }

/* the map on its stage: as tall as the stage, three wide for every two tall, dragged sideways when it is wider */
.mp-stage { position: relative; flex: 1 1 auto; min-height: 200px; margin-top: 14px; }
.mp-scroller { position: absolute; inset: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mp-scroller::-webkit-scrollbar { display: none; }
/* a map drawn smaller than its stage (so every lit place fits the screen) lies in a mist of itself, its edges feathered */
.mp-mist { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.12); filter: blur(22px) saturate(.5) brightness(.3); opacity: 0; transition: opacity 1.2s var(--ease-out); pointer-events: none; -webkit-user-select: none; user-select: none; }
.mp-stage.is-short .mp-mist { opacity: 1; }
.mp-stage.is-short .mp-map { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%); }
.mp-scroller.is-wide { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, #000 22px, #000 calc(100% - 22px), rgba(0, 0, 0, .25) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, #000 22px, #000 calc(100% - 22px), rgba(0, 0, 0, .25) 100%); }
.mp-map { position: relative; flex: none; margin: 0 auto; overflow: hidden; background: radial-gradient(80% 90% at 50% 40%, rgba(var(--realm-deep-rgb), .55), rgba(var(--realm-ink-rgb), 1) 75%), var(--realm-ink);
  --mp-h: 400px; --mp-r0: calc(var(--mp-h) * .1); --mp-r1: calc(var(--mp-h) * .17); --mp-r2: calc(var(--mp-h) * .27); }
.mp-base, .mp-lit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* what the Thinning took: the map faded, its colour gone */
.mp-base { opacity: 0; filter: saturate(.18) brightness(.34) contrast(1.05); transition: opacity 1.1s var(--ease-out); }
.mp-map.is-in .mp-base { opacity: 1; }
/* a lit district: the painting in its own colours, a soft disc around each sealed place */
.mp-lit { opacity: 0; filter: saturate(1.08) brightness(1.06); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 1.2s var(--ease-out) .25s; }
.mp-map.is-in .mp-lit { opacity: 1; }
.mp-map.is-in .mp-lit-fresh { animation: mp-ink 2.4s var(--ease-out) .7s backwards; }
@keyframes mp-ink { from { opacity: 0; filter: saturate(1.4) brightness(2.2); } 35% { opacity: 1; } to { opacity: 1; filter: saturate(1.08) brightness(1.06); } }
/* the Cartographer's sketch (until the painted maps exist): gold ink on a night-blue parchment in the realm's colours */
.mp-paper { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .78 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 75% at 30% 40%, rgba(var(--realm-deep-rgb), .55), rgba(var(--realm-deep-rgb), 0) 70%),
    radial-gradient(55% 70% at 75% 65%, rgba(var(--realm-accent-rgb), .08), rgba(var(--realm-accent-rgb), 0) 70%),
    radial-gradient(120% 120% at 50% 50%, #141936 0%, var(--realm-ink) 85%); }
.mp-map.is-in .mp-paper { opacity: 1; }
.mp-ink-grid { fill: none; stroke: rgba(233, 196, 106, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-ink-mark { fill: none; stroke: rgba(233, 196, 106, .26); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mp-ink-ring { fill: none; stroke: rgba(var(--realm-accent-rgb), .2); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.mp-ink-ring.is-lit { stroke: rgba(233, 196, 106, .55); stroke-dasharray: none; }
.mp-ink-glow { transform-box: fill-box; transform-origin: center; }
.mp-map.is-in .mp-ink-glow.is-fresh { animation: mp-glow 2.4s var(--ease-out) .8s backwards; }
@keyframes mp-glow { from { opacity: 0; transform: scale(.2); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.mp-ink-compass .is-north { fill: rgba(255, 241, 201, .85); }
.mp-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 50%, rgba(var(--realm-ink-rgb), 0) 55%, rgba(var(--realm-ink-rgb), .7) 100%); }
.mp-ink { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mp-ink-border { fill: none; stroke: rgba(233, 196, 106, .42); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.mp-ink-border.is-thin { stroke: rgba(233, 196, 106, .2); stroke-width: .8; }
.mp-ink-road { fill: none; stroke: rgba(233, 196, 106, .34); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; }
.mp-ink-compass circle { fill: none; stroke: rgba(233, 196, 106, .48); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-ink-compass circle.is-thin { stroke: rgba(233, 196, 106, .26); }
.mp-ink-compass .is-fill { fill: rgba(233, 196, 106, .5); }
.mp-ink-thread-glow { fill: none; stroke: rgba(var(--realm-glow-rgb), .2); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the flowing thread is a layer of its own, so its stitches move without repainting the map under them */
.mp-thread { z-index: 1; will-change: transform; }
.mp-ink-thread { fill: none; stroke: #F7E2A6; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: atlas-flow 6s linear infinite; }
.mp-map:not(.is-in) .mp-ink { opacity: 0; }
.mp-ink { transition: opacity 1s var(--ease-out) .35s; }

/* the plots: a lit one, a small gilt frame with its place's picture and its number; the rest, a faint diamond */
.mp-plot { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); color: var(--parchment); }
.atlas .mp-plot.is-lit { animation: mp-plot-in .9s var(--ease-spring) calc(.35s + var(--i) * .06s) backwards; }
@keyframes mp-plot-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
.atlas .mp-plot.is-fresh { animation: mp-plot-fresh 1.4s var(--ease-spring) 1s backwards; }
@keyframes mp-plot-fresh { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 60% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%); } }
.mp-plot.is-lit:active { transform: translate(-50%, -50%) scale(.94); }
.mp-plot.is-lit::after { content: ''; position: absolute; inset: -8px; }
.mp-plot-frame { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: clamp(34px, calc(var(--mp-h) * .125), 54px); height: clamp(46px, calc(var(--mp-h) * .166), 72px); padding: 2px; border-radius: 7px; color: var(--realm-accent);
  background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 20%, #8A6428 42%, #F7E2A6 60%, #A97A35 80%, #FFF1C9 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .6), 0 0 22px rgba(var(--realm-glow-rgb), .4); }
.mp-plot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; background: var(--realm-ink); }
.mp-plot-frame.sh-shimmer { background-image: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 20%, #8A6428 42%, #F7E2A6 60%, #A97A35 80%, #FFF1C9 100%); }
.mp-plot.is-far .mp-plot-frame { background: rgba(10, 13, 24, .7); box-shadow: inset 0 0 0 1.5px rgba(233, 196, 106, .8), 0 10px 22px rgba(0, 0, 0, .5), 0 0 18px rgba(var(--realm-glow-rgb), .3); }
.mp-plot-no { position: relative; min-width: 17px; height: 17px; margin-top: -8px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .9), 0 2px 6px rgba(0, 0, 0, .5); font: 650 9.5px/17px var(--sans); color: var(--gold-hi); text-align: center; }
.mp-plot.is-fresh .mp-plot-frame::before { content: ''; position: absolute; inset: -6px; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(255, 236, 190, .9), 0 0 26px rgba(233, 196, 106, .9); opacity: 0; animation: mp-ring 1.8s var(--ease-out) 1.4s 2; }
@keyframes mp-ring { 0% { opacity: 0; transform: scale(.9); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
.mp-plot.is-dim { width: 30px; height: 30px; justify-content: center; }
.mp-plot.is-dim::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .14); }
.mp-plot.is-dim i { display: block; width: 9px; height: 9px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .42); }
/* the next plot, waiting for a place */
.mp-plot.is-next::before { box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .4), 0 0 14px rgba(var(--realm-accent-rgb), .25); animation: mp-wait 3.2s ease-in-out infinite; }
.mp-plot.is-next i { box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .85); background: rgba(var(--realm-accent-rgb), .18); }
@keyframes mp-wait { 50% { transform: scale(1.25); opacity: .55; } }

/* gold corners, as on an illuminated plate */
.mp-corners { position: absolute; inset: 8px 12px; pointer-events: none; }
/* the lit places beyond an edge of a map wider than the phone: how many, that way (a tap drags the map there) */
.mp-edge { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 44px; height: 40px; padding: 0 11px; box-sizing: border-box; border-radius: 20px; transform: translateY(-50%);
  background: rgba(10, 13, 24, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F7E2A6; font: 650 13px/1 var(--sans);
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(var(--realm-glow-rgb), .25); animation: sh-fade .5s var(--ease-out) backwards; }
.mp-edge[hidden] { display: none; }
.mp-edge.is-left { left: 10px; --dx: -5px; }
.mp-edge.is-right { right: 10px; --dx: 5px; }
.mp-edge.is-left .mp-edge-chev { transform: scaleX(-1); }
.mp-edge:active { transform: translateY(-50%) scale(.94); }
.mp-edge.is-hello { animation: mp-edge-hello 1.5s var(--ease-out) 1.1s 2; }
@keyframes mp-edge-hello { 0%, 100% { transform: translateY(-50%); } 40% { transform: translateY(-50%) translateX(var(--dx)); box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .95), 0 8px 20px rgba(0, 0, 0, .45), 0 0 26px rgba(233, 196, 106, .7); } }
@media (prefers-reduced-motion: reduce) { .mp-edge, .mp-edge.is-hello { animation: none; } }
.mp-corners i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(233, 196, 106, .75); }
.mp-corners i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.mp-corners i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.mp-corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.mp-corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.mp-corners i::after { content: ''; position: absolute; width: 4px; height: 4px; transform: rotate(45deg); background: var(--gold); }
.mp-corners i:nth-child(1)::after { left: 5px; top: 5px; }
.mp-corners i:nth-child(2)::after { right: 5px; top: 5px; }
.mp-corners i:nth-child(3)::after { left: 5px; bottom: 5px; }
.mp-corners i:nth-child(4)::after { right: 5px; bottom: 5px; }

/* nothing lit yet: a word over the map */
.mp-empty { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(300px, calc(100% - 48px)); transform: translate(-50%, -50%); padding: 18px 20px; box-sizing: border-box; border-radius: 20px; text-align: center; background: rgba(10, 13, 24, .66); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .22), 0 16px 40px rgba(0, 0, 0, .45); animation: sh-rise .9s var(--ease-spring) .5s backwards; }
.mp-empty-title { margin: 0; font: 380 22px/1.15 var(--serif); color: var(--parchment); }
.mp-empty-body { margin: 8px 0 0; font: italic 300 15px/1.42 var(--serif); color: rgba(243, 235, 221, .78); }

.mp-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 24px 0; }
/* the other way to light a realm that isn't today's: a seam onto today's (under "Paint a place into this realm") */
.mp-alt { min-height: 40px; padding: 0 12px; font: 500 14px/1.2 var(--sans); color: rgba(243, 235, 221, .72); text-decoration: underline; text-decoration-color: rgba(233, 196, 106, .45); text-underline-offset: 4px; }
.mp-alt:active { color: #F7E2A6; }
.atlas .mp-share { width: 100%; max-width: 360px; font-size: 16px; border-radius: 29px; }
.mp-share svg { flex: none; }

/* ---------- Share my map: the picture in a sheet ---------- */
.mp-sheet-wrap .sheet-body { padding-bottom: 18px; }
.mp-sheet-head { align-items: center; padding: 2px 4px 14px; text-align: center; }
.mp-sheet-head .sheet-title { font-size: 26px; }
.mp-sheet-stage { display: flex; justify-content: center; height: min(44vh, 380px); }
.mp-sheet-card { position: relative; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px rgba(233, 196, 106, .4), 0 20px 46px rgba(0, 0, 0, .55); transition: aspect-ratio .4s var(--ease-out); }
.mp-sheet-stage[data-format="post"] .mp-sheet-card { aspect-ratio: 4 / 5; }
.mp-sheet-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease-out); }
.mp-sheet-card.is-drawn .mp-sheet-canvas { opacity: 1; }
.mp-sheet-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 14px; text-align: center; font: italic 300 14px/1.35 var(--serif); color: rgba(243, 235, 221, .72); transition: opacity .4s; }
.mp-sheet-card.is-drawn .mp-sheet-wait { opacity: 0; pointer-events: none; }
.mp-formats { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.mp-format { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 20px; font: 600 13px/1 var(--sans); color: rgba(243, 235, 221, .7); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .14); transition: color .3s, box-shadow .3s, background .3s; }
.mp-format[aria-checked="true"] { color: var(--gold-hi); background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .6); }
.mp-format svg { flex: none; }
.mp-sheet-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-width: 360px; margin: 16px auto 0; }
.mp-sheet-actions .btn svg { flex: none; }

@media (max-height: 700px) {
  .mp-realms { margin-top: 10px; }
  .mp-stage { margin-top: 8px; }
  .mp-actions { padding-top: 10px; }
  .mp-sheet-stage { height: min(40vh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-ink-thread, .atlas-tab-new, .mp-plot.is-next::before { animation: none; }
  .atlas .mp-plot.is-lit, .atlas .mp-plot.is-fresh, .mp-map.is-in .mp-lit-fresh, .mp-plot.is-fresh .mp-plot-frame::before, .mp-map.is-in .mp-ink-glow.is-fresh { animation: none; }
  .mp-base, .mp-lit, .mp-ink, .mp-paper { transition-duration: .2s; transition-delay: 0s; }
}

/* a painted map (track S: shared/maps.mjs) has its twelve blank parchment plots painted on it: a dim one is left as it
   is, only the next to light keeps a soft ring */
.mp-map:not(.is-sketch) .mp-plot.is-dim:not(.is-next) { display: none; }
.mp-map:not(.is-sketch) .mp-plot.is-next { width: clamp(40px, calc(var(--mp-h) * .14), 64px); height: clamp(40px, calc(var(--mp-h) * .14), 64px); }
.mp-map:not(.is-sketch) .mp-plot.is-next i { display: none; }
.mp-map:not(.is-sketch) .mp-plot.is-next::before { box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, .75), 0 0 18px rgba(233, 196, 106, .55); }

/* the Strays: the way into the Exchange */
.atlas-xc-row { display: flex; margin: 18px 22px 0; }
.atlas .atlas-xc { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 20px; font: 600 13.5px/1 var(--sans); color: var(--gold-hi); background: rgba(233, 196, 106, .08); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); transition: transform .2s var(--ease-out), background .3s; }
.atlas-xc svg { flex: none; }
.atlas-xc:active { transform: scale(.97); background: rgba(233, 196, 106, .14); }
.atlas-xc-row + .atlas-odds { margin-top: 14px; }
.atlas-stars-seal { margin-left: 3px; text-shadow: 0 0 6px rgba(166, 244, 230, .55); }
.atlas-stars-seal.is-off { color: rgba(243, 235, 221, .3); text-shadow: none; }

/* base.css */
/* Shell: shared pieces for the router and the shell's screens (home, capture, seam, atlas, share).
   Every class and keyframe here is prefixed sh- so nothing meets another part's styles; tokens.css stays untouched. */

/* ---------- router: the old screen fades out beneath the arriving one (which fades in on top, see .screen-enter) ---------- */
.sh-leave { animation: sh-leave .3s cubic-bezier(.4, 0, .9, .6) .08s both; pointer-events: none; }
@keyframes sh-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.985); } }

/* the toast sits above each shell screen's bottom controls */
body[data-screen="capture"] .toast { bottom: calc(150px + var(--safe-bottom)); }
body[data-screen="seam"] .toast { bottom: calc(118px + var(--safe-bottom)); }
body[data-screen="atlas"] .toast { bottom: calc(96px + var(--safe-bottom)); }
body[data-screen="share"] .toast { top: calc(72px + var(--safe-top)); bottom: auto; transform: translate(-50%, -12px); }
body[data-screen="share"] .toast.on { transform: translate(-50%, 0); }

/* ---------- a shell screen ---------- */
.sh-screen { position: absolute; inset: 0; overflow: hidden; }
.sh-screen button:focus-visible, .sh-screen a:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 3px; }
/* [hidden] must win over the display of any class below */
.sh-screen [hidden] { display: none !important; }
/* zero specificity, so any screen's own class wins whatever the order of the stylesheets */
:where(.sh-reset) { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* the round dark icon button of the board (close, switch camera, back) */
.sh-iconbtn { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 22px; background: rgba(5, 7, 14, .45); color: var(--parchment); cursor: pointer; transition: transform .25s var(--ease-out), background .25s; }
.sh-iconbtn:active { transform: scale(.92); background: rgba(5, 7, 14, .62); }

/* ---------- light and paper ---------- */
.sh-sky { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 60% at 50% 45%, rgba(15, 45, 49, .55) 0%, rgba(20, 25, 54, .35) 45%, rgba(10, 13, 24, 0) 80%); }

/* the seam glyph, breathing */
.sh-glyph { display: block; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95)) drop-shadow(0 0 16px rgba(233, 196, 106, .6)); animation: sh-breathe 5.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes sh-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 214, 140, .8)) drop-shadow(0 0 12px rgba(233, 196, 106, .42)); transform: scaleY(1); }
  50% { filter: drop-shadow(0 0 7px rgba(255, 228, 170, 1)) drop-shadow(0 0 26px rgba(233, 196, 106, .88)); transform: scaleY(1.05); }
}

/* images arrive, never pop; a soft shimmer holds their place */
.sh-img { opacity: 0; transition: opacity .8s var(--ease-out); }
.sh-img.is-in { opacity: 1; }
.sh-shimmer { background-color: #121733; background-image: linear-gradient(105deg, rgba(233, 196, 106, 0) 35%, rgba(233, 196, 106, .1) 48%, rgba(166, 244, 230, .06) 52%, rgba(233, 196, 106, 0) 65%); background-size: 260% 100%; animation: sh-shimmer 2.4s ease-in-out infinite; }
@keyframes sh-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* the spinner of the steps */
.sh-spin { animation: sh-spin 1.1s linear infinite; transform-origin: 50% 50%; }
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* entrances: things arrive on a spring (set --d for the delay). Fill backwards only, so once arrived an element
   answers to its own styles again (press feedback, state changes). */
.sh-rise { animation: sh-rise .8s var(--ease-spring) var(--d, 0s) backwards; }
@keyframes sh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sh-drop { animation: sh-drop .8s var(--ease-spring) var(--d, 0s) backwards; }
@keyframes sh-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.sh-fade { animation: sh-fade .9s var(--ease-out) var(--d, 0s) backwards; }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }

/* a quiet message: camera trouble, an empty Atlas */
.sh-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sh-panel-title { margin: 0; font-family: var(--serif); font-weight: 380; font-size: 28px; line-height: 1.12; color: var(--parchment); }
.sh-panel-body { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.sh-panel-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin-top: 14px; }

/* the last resort when a screen cannot mount */
.sh-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: var(--ink); }
.sh-fallback-mark { font-size: 24px; }
.sh-fallback .story { margin: 0; font-size: 19px; color: var(--muted); }

/* ---------- Elsewhere is held upright: a quiet veil when a phone turns sideways ---------- */
@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  body::after { content: 'Elsewhere is held upright'; position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding-top: 70px; box-sizing: border-box; font: italic 300 20px/1.3 var(--serif); color: var(--parchment); text-align: center;
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9C46A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.2'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E") no-repeat center calc(50% - 22px) / 44px 44px; }
}

/* ---------- reduced motion: keep the light, drop the drift ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-leave { animation-duration: .2s; animation-delay: 0s; }
  .sh-rise, .sh-drop, .sh-fade { animation-duration: .01s; animation-delay: 0s; }
  .sh-glyph, .sh-shimmer { animation: none; }
  .sh-motes { display: none; }
}

/* ---------- words in two languages (docs/I18N.md): Spanish runs about 20% longer ----------
   Titles break into even lines rather than leaving one word behind; paragraphs avoid a lone last word. Browsers without
   text-wrap simply wrap as before. */
#app :is(h1, h2, .sh-panel-title, .sheet-title, .pl-veil-title, .cs-title, .pw-title, .ar-name, .om-title, .om-odds, .rs-name, .lm-title, .set-confirm-title) { text-wrap: balance; }
#app :is(p, .sh-panel-body, .sheet-row-sub, .cs-point-text span, .ar-line, .ar-lore-line, .rs-tag) { text-wrap: pretty; }
.toast { text-wrap: balance; }

/* capture.css */
/* Capture (design/board/Capture.dc.html). */
.capture { background: #05070E; color: var(--parchment); --frame-top: 96px; --voice-bottom: 172px; --frame-bottom: 256px; --controls-bottom: 42px; }

/* the backdrop for the invite and for camera trouble: the key art, far away */
.capture-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(22px) brightness(.3) saturate(1.1); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.capture[data-state="invite"] .capture-backdrop, .capture[data-state="error"] .capture-backdrop, .capture[data-state="refused"] .capture-backdrop { opacity: 1; }

/* the live feed (ctx.gfx.edges draws it, traced in gold, onto the canvas; the video stays beneath as a fallback) */
.capture-video, .capture-canvas, .capture-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.capture-video, .capture-canvas { opacity: 0; transition: opacity .7s var(--ease-out); }
.capture.is-live .capture-video, .capture.is-live .capture-canvas { opacity: 1; }
.capture.is-selfie .capture-video { transform: scaleX(-1); }   /* the edges canvas mirrors a selfie feed itself */

/* the snapped moment, held still and dimming toward the seam while it uploads */
.capture-still { opacity: 0; visibility: hidden; transition: opacity .12s linear, filter 1.6s var(--ease-out); }
.capture.has-still .capture-still { opacity: 1; visibility: visible; }
.capture.still-settle .capture-still { filter: grayscale(.75) brightness(.4) contrast(1.04); }   /* exactly where the seam's develop begins */

.capture-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: calc(340px + var(--safe-bottom)); pointer-events: none; background: linear-gradient(0deg, rgba(5, 7, 14, .96) 0%, rgba(5, 7, 14, .8) 45%, rgba(5, 7, 14, 0) 100%); }

/* the viewfinder */
.capture-frame { position: absolute; left: 26px; right: 26px; top: calc(var(--frame-top) + var(--safe-top)); bottom: calc(var(--frame-bottom) + var(--safe-bottom)); pointer-events: none; transition: opacity .5s, transform .9s var(--ease-spring); }
.capture-corner { position: absolute; width: 28px; height: 28px; border: 0 solid #E9C46A; opacity: .85; filter: drop-shadow(0 0 6px rgba(233, 196, 106, .7)); transition: transform .9s var(--ease-spring), opacity .6s; }
.capture-corner.is-tl { left: 0; top: 0; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; }
.capture-corner.is-tr { right: 0; top: 0; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; }
.capture-corner.is-bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; }
.capture-corner.is-br { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; }
.capture[data-state="starting"] .capture-corner { opacity: .4; }
.capture[data-state="starting"] .capture-corner.is-tl { transform: translate(-8px, -8px); }
.capture[data-state="starting"] .capture-corner.is-tr { transform: translate(8px, -8px); }
.capture[data-state="starting"] .capture-corner.is-bl { transform: translate(-8px, 8px); }
.capture[data-state="starting"] .capture-corner.is-br { transform: translate(8px, 8px); }
.capture[data-state="sending"] .capture-frame { transform: scale(.97); }
.capture[data-state="sending"] .capture-corner { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 214, 140, .95)) drop-shadow(0 0 18px rgba(233, 196, 106, .6)); }

/* while the lens wakes, the seam glyph breathes in the middle of the viewfinder */
.capture-wake { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -7px; opacity: 0; transition: opacity .6s var(--ease-out); }
.capture[data-state="starting"] .capture-wake { opacity: 1; transition-delay: .3s; }

/* top: close, what the lens is doing, switch camera */
.capture-top { position: absolute; left: 12px; right: 12px; top: calc(18px + var(--safe-top)); display: flex; justify-content: space-between; align-items: center; }
.capture-status { text-align: center; transition: opacity .4s; }
.capture-top-spacer { width: 44px; height: 44px; flex: none; }
.capture-flip:not([hidden]) + .capture-top-spacer { display: none; }

/* where the seam opens: "Toward the Lantern City · Change" (the chosen realm, else today's) */
.capture-realm { position: absolute; left: 50%; top: calc(72px + var(--safe-top)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 40px); min-height: 36px; padding: 0 14px; box-sizing: border-box; border-radius: 18px;
  background: rgba(10, 13, 24, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .42); color: var(--parchment); font: 600 13px/1.2 var(--sans); white-space: nowrap; animation: sh-fade .8s var(--ease-out) .4s backwards; }
.capture-realm-to { overflow: hidden; text-overflow: ellipsis; }
.capture-realm-mark { flex: none; color: #E9C46A; }
.capture-realm-change { flex: none; color: #F7E2A6; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(233, 196, 106, .5); text-underline-offset: 3px; }
.capture[data-state="sending"] .capture-realm { opacity: .5; pointer-events: none; }
.cr .cr-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.cr .cr-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .08); text-align: left; }
.cr .cr-row[aria-checked="true"] { background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1.5px rgba(233, 196, 106, .8); }
.cr .cr-prev { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
.cr .cr-prev .rl-preview, .cr .cr-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr .cr-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr .cr-text b { font: 600 16px/1.25 var(--sans); color: var(--parchment); }
.cr .cr-text i { font: italic 400 14px/1.3 var(--serif); color: rgba(243, 235, 221, .65); }
.cr .cr-tick { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(243, 235, 221, .3); }
.cr .cr-row[aria-checked="true"] .cr-tick { background: radial-gradient(circle, #E9C46A 0 5px, transparent 5.5px); box-shadow: inset 0 0 0 1.5px #E9C46A; }

/* the Cartographer */
.capture-voice { position: absolute; left: 32px; right: 32px; bottom: calc(var(--voice-bottom) + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none; transition: opacity .5s; }
.capture-line { margin: 0; font-size: 21px; line-height: 1.38; color: var(--parchment); text-shadow: 0 1px 14px rgba(5, 7, 14, .7); transition: opacity .26s, transform .26s var(--ease-out), filter .26s; }
.capture-line.is-changing { opacity: 0; transform: translateY(4px); filter: blur(3px); }

/* atlas, shutter, film */
.capture-controls { position: absolute; left: 28px; right: 28px; bottom: calc(var(--controls-bottom) + var(--safe-bottom)); display: flex; justify-content: space-between; align-items: center; transition: opacity .5s; }
.capture-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid rgba(233, 196, 106, .6); border-radius: 14px; overflow: hidden; background: rgba(10, 13, 24, .52); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .25s var(--ease-out); }
.capture-thumb:active { transform: scale(.92); }
.capture-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capture-thumb.has-img svg { opacity: 0; }

.capture-shutter { position: relative; display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 41px; background: rgba(5, 7, 14, .35); box-shadow: 0 0 0 2px #E9C46A, 0 0 26px rgba(233, 196, 106, .55); transition: transform .3s var(--ease-spring), box-shadow .4s, opacity .4s; }
.capture-shutter-core { display: block; width: 64px; height: 64px; border-radius: 32px; background: radial-gradient(circle at 50% 35%, #FFFDF6 0%, #F3EBDD 60%, #D9CDB6 100%); transition: transform .35s var(--ease-spring), opacity .4s; }
.capture-shutter:active .capture-shutter-core { transform: scale(.88); }
.capture-shutter:active { transform: scale(.97); }
.capture-shutter[disabled] { cursor: default; }
.capture[data-state="starting"] .capture-shutter { opacity: .45; box-shadow: 0 0 0 2px rgba(233, 196, 106, .6), 0 0 14px rgba(233, 196, 106, .25); }
.capture-shutter-arc { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .9)); }
.capture[data-state="sending"] .capture-shutter { box-shadow: 0 0 0 2px rgba(233, 196, 106, .35), 0 0 30px rgba(233, 196, 106, .45); }
.capture[data-state="sending"] .capture-shutter-core { transform: scale(.8); animation: capture-hold 1.6s ease-in-out infinite; }
.capture[data-state="sending"] .capture-shutter-arc { opacity: 1; animation: sh-spin 1.1s linear infinite; }
@keyframes capture-hold { 0%, 100% { opacity: .95; } 50% { opacity: .7; } }

.capture-film { display: flex; flex-direction: column; align-items: center; width: 50px; gap: 2px; }
.capture-film-n { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--parchment); font-variant-numeric: tabular-nums; }
.capture-film-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 235, 221, .7); }
.capture-film.is-unknown .capture-film-n { width: 8px; height: 8px; margin: 8px 0; border-radius: 4px; background: var(--gold); box-shadow: 0 0 10px rgba(233, 196, 106, .6); animation: capture-wait 1.8s ease-in-out infinite; }
@keyframes capture-wait { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: .9; transform: none; } }

/* entrances */
.capture-top { animation: sh-drop .7s var(--ease-spring) .1s backwards; }
.capture-voice { animation: sh-fade 1s var(--ease-out) .35s backwards; }
.capture-controls { animation: sh-rise .8s var(--ease-spring) .2s backwards; }

/* the invite and camera trouble */
.capture-panel { position: absolute; left: 28px; right: 28px; top: 50%; transform: translateY(-46%); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring); }
.capture-panel.is-on { opacity: 1; transform: translateY(-50%); }
.capture-panel[hidden] { display: none; }
.capture-panel .btn svg { flex: none; }
.capture-panel-glyph { margin-bottom: 8px; }
.capture-panel-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 32px; border: 1px solid var(--gold-hair); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .14), rgba(233, 196, 106, 0) 70%); }
.capture[data-state="invite"] .capture-voice, .capture[data-state="error"] .capture-voice, .capture[data-state="refused"] .capture-voice,
.capture[data-state="invite"] .capture-controls, .capture[data-state="error"] .capture-controls, .capture[data-state="refused"] .capture-controls,
.capture[data-state="invite"] .capture-frame, .capture[data-state="error"] .capture-frame, .capture[data-state="refused"] .capture-frame,
.capture[data-state="invite"] .capture-status, .capture[data-state="error"] .capture-status, .capture[data-state="refused"] .capture-status { opacity: 0; pointer-events: none; }
.capture[data-state="invite"] .capture-controls *, .capture[data-state="error"] .capture-controls *, .capture[data-state="refused"] .capture-controls * { visibility: hidden; }

/* the soft white flash of the shutter */
.capture-flash { position: absolute; inset: 0; background: #FFFDF6; opacity: 0; pointer-events: none; }
.capture-flash.is-on { animation: capture-flash .7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes capture-flash { 0% { opacity: 0; } 9% { opacity: .82; } 100% { opacity: 0; } }

/* the lens is slow to wake: a quiet way round it */
.capture-slow { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; top: calc(var(--frame-top) + var(--safe-top) + (100% - var(--frame-top) - var(--frame-bottom) - var(--safe-top) - var(--safe-bottom)) / 2 + 34px); animation: sh-fade .8s var(--ease-out) backwards; }
.capture-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

/* short screens */
@media (max-height: 740px) {
  .capture { --frame-top: 82px; --voice-bottom: 150px; --frame-bottom: 234px; --controls-bottom: 30px; }
}
@media (max-height: 640px) {
  .capture { --frame-top: 74px; --voice-bottom: 132px; --frame-bottom: 208px; --controls-bottom: 20px; }
  .capture-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .capture-flash.is-on { animation-duration: .3s; }
  .capture-film.is-unknown .capture-film-n { animation: none; }
}
/* a refused photo (402 paused, 422 photo): the lens stays awake but steps back behind the message */
.capture[data-state="refused"] .capture-video, .capture[data-state="refused"] .capture-canvas, .capture[data-state="refused"] .capture-still { opacity: 0; transition: opacity .5s var(--ease-out); }

/* coach.css */
/* Coach marks (src/ui/coach.js): the Cartographer's word in a small glass bubble with a pointer, and a breathing gold
   ring around what it's about. They never take a touch. */
.coach { position: absolute; z-index: 30; box-sizing: border-box; width: max-content; max-width: min(300px, calc(100% - 32px)); padding: 13px 17px 15px; border-radius: 18px; pointer-events: none;
  background: rgba(15, 19, 42, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .4), 0 18px 44px rgba(0, 0, 0, .5), 0 0 36px rgba(233, 196, 106, .14);
  opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 50% 100%; transition: opacity .5s var(--ease-out), transform .7s var(--ease-spring); }
.coach[data-side="below"] { transform-origin: 50% 0; transform: translateY(-8px) scale(.97); }
.coach.is-on { opacity: 1; transform: none; }
.coach.is-leaving { opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .35s var(--ease-out), transform .4s var(--ease-out); }
.coach-eyebrow { display: block; margin-bottom: 5px; font: 600 10px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.coach-text { margin: 0; font: italic 300 18px/1.36 var(--serif); color: var(--parchment); text-wrap: balance; }
.coach-tip { position: absolute; width: 14px; height: 14px; background: rgba(15, 19, 42, .96); transform: rotate(45deg); }
.coach[data-side="above"] .coach-tip { bottom: -7px; box-shadow: 1px 1px 0 rgba(233, 196, 106, .4); }
.coach[data-side="below"] .coach-tip { top: -7px; box-shadow: -1px -1px 0 rgba(233, 196, 106, .4); }
.coach[data-side="inside"] .coach-tip, .coach[data-side="none"] .coach-tip { display: none; }

.coach-ring { position: absolute; z-index: 29; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(247, 226, 166, .85), 0 0 22px rgba(233, 196, 106, .5); opacity: 0; transition: opacity .5s var(--ease-out); }
.coach-ring.is-on { opacity: 1; animation: coach-ring 2s ease-in-out infinite; }
@keyframes coach-ring { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(247, 226, 166, .85), 0 0 18px rgba(233, 196, 106, .4); } 50% { box-shadow: 0 0 0 2px rgba(255, 238, 196, 1), 0 0 30px rgba(233, 196, 106, .75); } }

@media (prefers-reduced-motion: reduce) {
  .coach, .coach.is-leaving { transition: opacity .2s; transform: none; }
  .coach-ring.is-on { animation: none; }
}

/* consent.css */
/* The AI consent (src/screens/consent.js): the key art far behind, dark and soft; the Cartographer's promise in three
   lines; one gold action. */
.cs { display: flex; flex-direction: column; background: var(--ink); color: var(--parchment); }
.cs-art-wrap { position: absolute; inset: -30px; overflow: hidden; }
.cs-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(1.15); transform: scale(1.04); transition: opacity 1.2s var(--ease-out); }
.cs-art.is-in { opacity: .62; }
.cs-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 24, .5) 0%, rgba(10, 13, 24, .62) 24%, rgba(10, 13, 24, .9) 52%, rgba(10, 13, 24, .985) 78%), radial-gradient(ellipse 70% 40% at 50% 22%, rgba(15, 45, 49, .45), rgba(15, 45, 49, 0) 70%); }

.cs-top { position: relative; z-index: 2; flex: none; display: flex; padding: calc(14px + var(--safe-top)) 12px 0; animation: sh-drop .7s var(--ease-spring) .05s backwards; }
.cs-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%); }
.cs-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; box-sizing: border-box; padding: 6px 28px 18px; }

.cs-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cs-glyph { margin-bottom: 6px; animation: sh-fade 1.1s var(--ease-out) .1s backwards, sh-breathe 5.4s ease-in-out 1.2s infinite; }
.cs-hero .eyebrow { animation: sh-rise .8s var(--ease-spring) .18s backwards; }
.cs-title { margin: 0; font: 380 32px/1.08 var(--serif); text-wrap: balance; animation: sh-rise .8s var(--ease-spring) .24s backwards; }
.cs-lead { margin: 2px 0 0; max-width: 300px; font-size: 18px; color: rgba(243, 235, 221, .86); animation: sh-rise .8s var(--ease-spring) .3s backwards; }

.cs-points { display: flex; flex-direction: column; gap: 0; margin: 26px 0 0; padding: 4px 0; list-style: none; border-radius: 20px; background: linear-gradient(180deg, rgba(24, 29, 62, .74), rgba(16, 20, 44, .82)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2), 0 20px 50px rgba(0, 0, 0, .35); animation: sh-rise .9s var(--ease-spring) .38s backwards; }
.cs-point { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; }
.cs-point + .cs-point::before { content: ''; position: absolute; left: 68px; right: 18px; top: 0; height: 1px; background: rgba(243, 235, 221, .08); }
.cs-point-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; margin-top: 1px; border-radius: 19px; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .38); background: radial-gradient(circle at 50% 38%, rgba(233, 196, 106, .16), rgba(233, 196, 106, 0) 72%); }
.cs-point-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; line-height: 1.45; color: rgba(243, 235, 221, .74); }
.cs-point-text b { font: 400 18px/1.25 var(--serif); color: var(--parchment); }

.cs-links { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; text-align: center; color: rgba(243, 235, 221, .6); }
.cs-links a { padding: 6px 0; color: rgba(243, 235, 221, .9); text-decoration: underline; text-decoration-color: rgba(233, 196, 106, .6); text-underline-offset: 3px; }
.cs-links a:active { color: var(--gold-hi); }

.cs-actions { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 24px calc(14px + var(--safe-bottom)); animation: sh-rise .8s var(--ease-spring) .5s backwards; }
.cs-agree[aria-busy="true"] { filter: saturate(.75) brightness(.95); pointer-events: none; }
.cs.is-agreed .cs-agree { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 4px rgba(233, 196, 106, .25), 0 14px 40px rgba(233, 196, 106, .5); }
.cs-later { align-self: center; color: rgba(243, 235, 221, .72); }

@media (max-height: 740px) {
  .cs-hero { gap: 9px; }
  .cs-title { font-size: 28px; }
  .cs-lead { font-size: 15.5px; }
  .cs-points { margin-top: 16px; }
  .cs-point { padding: 10px 16px; gap: 12px; }
  .cs-point + .cs-point::before { left: 64px; }
  .cs-point-icon { width: 34px; height: 34px; }
  .cs-point-text { font-size: 13.5px; line-height: 1.4; }
  .cs-point-text b { font-size: 17px; }
  .cs-glyph { display: none; }
  .cs-inner { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-glyph { animation: none; }
}

/* exchange.css */
/* The Exchange (src/screens/exchange.js; docs/EXCHANGE.md, "The screens"): the board, the offers and your Strays under
   one title; the sheets that give, list, offer and accept; the small foil cards they all show; the gift screen
   (src/screens/gift.js, which wears the Stray card of stray.css) and the nickname editor (src/ui/settings.js).
   Illuminated: ink and night, gold for the one main action, the realm's accent for things from Elsewhere, Fraunces for
   names and titles, Instrument Sans for the rest. Classes: xc-* (the screen, the cards), xs-* (its sheets), gf-* (the
   gift), nick-* (the nickname). */

/* ---------- a Stray's card, small ---------- */
.xc-card { --w: 116px; position: relative; display: inline-block; flex: none; width: var(--w); vertical-align: top; color: var(--parchment); text-align: left; }
.xc-card.is-sm { --w: 96px; }
.xc-card.is-lg { --w: 148px; }
.xc-foil { position: relative; display: block; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .1); background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(var(--realm-glow-rgb), .16); }
.xc-face { position: relative; display: block; height: calc(var(--w) * 1.5 - var(--w) * .06); overflow: hidden; border-radius: calc(var(--w) * .075); background-color: var(--ink); isolation: isolate; }
.xc-face::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .5), inset 0 0 10px rgba(var(--realm-accent-rgb), .18); }
.xc-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.xc-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .38; mix-blend-mode: color-dodge; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 22%, rgba(var(--realm-accent-rgb), .55) 38%, rgba(255, 241, 201, .75) 48%, rgba(255, 138, 91, .35) 58%, rgba(255, 255, 255, 0) 74%); background-size: 260% 260%; animation: xc-sheen 7s ease-in-out infinite alternate; }
@keyframes xc-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.xc-no { position: absolute; z-index: 2; left: 6%; top: 4.5%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 8px; background: rgba(10, 13, 24, .6); font-size: 8px; font-weight: 650; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.xc-card.is-lg .xc-no { font-size: 9px; padding: 4px 8px; }
.xc-no svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 3px rgba(233, 196, 106, .9)); }
.xc-plate { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 30% 8% 8%; background: linear-gradient(0deg, rgba(10, 13, 24, .96) 0%, rgba(10, 13, 24, .8) 55%, rgba(10, 13, 24, 0) 100%); }
.xc-name { font: 400 14px/1.05 var(--serif); color: var(--parchment); text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.xc-card.is-sm .xc-name { font-size: 12.5px; }
.xc-card.is-lg .xc-name { font-size: 17px; }
.xc-gems { display: inline-flex; align-items: center; gap: 2px; color: var(--realm-accent); }
.xc-gem { display: block; flex: none; filter: drop-shadow(0 0 3px rgba(var(--realm-accent-rgb), .85)); }
.xc-gem.is-off { filter: none; opacity: .45; }
.xc-card.is-mythic .xc-gems, .xc-card.is-legendary .xc-gems { color: var(--gold-hi); }
/* the card's back: what stands for a Stray with no art (a stub, a lost one, one still loading) */
.xc-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 72% 56% at 50% 40%, rgba(var(--realm-deep-rgb), .95) 0%, rgba(20, 25, 54, .62) 46%, #0A0D18 82%); }
.xc-back::before { content: ''; position: absolute; inset: 7%; border-radius: calc(var(--w) * .04); border: 1px solid rgba(233, 196, 106, .28); }
.xc-back::after { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .07) 0 1px, rgba(233, 196, 106, 0) 1px 11px); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%); }
.xc-back-glyph { position: relative; z-index: 1; margin-top: -26%; filter: drop-shadow(0 0 2px #FFF1C9) drop-shadow(0 0 9px rgba(255, 214, 140, .9)); }
.xc-card.is-bare .xc-sheen { opacity: .18; }
/* a Stray you never kept, in an offer that has closed: its number and name, silvered; a lost one, greyed */
.xc-card.is-stub .xc-foil, .xc-card.is-lost .xc-foil { background: linear-gradient(135deg, #E8E4DA 0%, #A9A49A 30%, #6F6B66 52%, #C8C3B8 74%, #8E8A82 100%); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.xc-card.is-stub .xc-face, .xc-card.is-lost .xc-face { filter: saturate(.4); }
/* a story Stray: the legendary foil */
.xc-card.is-story .xc-foil { background: linear-gradient(135deg, #FFFBEA 0%, #F7E2A6 14%, #C9973F 30%, #FFF1C9 46%, #E9C46A 60%, #8A6428 76%, #FFF1C9 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(247, 226, 166, .32); }

/* ---------- the screen ---------- */
.xc { display: flex; flex-direction: column; background: var(--ink); color: var(--parchment); }
.xc .xc-sky { background: radial-gradient(ellipse 110% 50% at 50% 0%, rgba(var(--realm-deep-rgb), .62) 0%, rgba(20, 25, 54, .3) 50%, rgba(10, 13, 24, 0) 82%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(233, 196, 106, .07), rgba(233, 196, 106, 0) 70%); }
.xc-top { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: calc(14px + var(--safe-top)) 16px 0; animation: sh-drop .7s var(--ease-spring) .05s backwards; }
.xc-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.xc-title { margin: 0; font: 380 32px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; text-shadow: 0 0 26px rgba(233, 196, 106, .18); }
.xc-top-spacer { flex: none; width: 44px; height: 44px; }

/* the three tabs: a dark track, the chosen one lit in gold (the switch's material) */
.xc-tabs { position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 16px 0; padding: 3px; border-radius: 22px; background: rgba(243, 235, 221, .06); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .1); animation: sh-fade .8s var(--ease-out) .15s backwards; }
.xc-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 38px; margin: 0; padding: 0 8px; border: 0; border-radius: 19px; background: none; color: rgba(243, 235, 221, .72); font: 600 13.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .35s var(--ease-out); }
.xc-tab[aria-selected="true"] { color: #1A1305; }
.xc-tab:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 2px; }
.xc-tab-ink { position: absolute; z-index: 0; left: 0; top: 3px; height: 38px; width: 0; border-radius: 19px; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 45%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 16px rgba(233, 196, 106, .32); transition: transform .45s var(--ease-spring), width .45s var(--ease-spring); }
.xc:not(.is-ready) .xc-tab-ink { transition: none; }
.xc-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--aether); color: #06231F; font: 700 11px/1 var(--sans); box-shadow: 0 0 10px rgba(166, 244, 230, .6); }
.xc-tab[aria-selected="true"] .xc-badge { background: #1A1305; color: var(--gold-hi); box-shadow: none; }

/* the views crossfade under the tabs */
.xc-views { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 8px; }
.xc-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s linear .4s; }
.xc[data-tab="board"] .xc-view[data-view="board"], .xc[data-tab="offers"] .xc-view[data-view="offers"], .xc[data-tab="yours"] .xc-view[data-view="yours"] { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
.xc-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 0 calc(40px + var(--safe-bottom)); box-sizing: border-box; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px); mask-image: linear-gradient(180deg, transparent 0, #000 14px); }
.xc[data-tab="board"] [data-view="board"] .xc-scroll { padding-bottom: calc(118px + var(--safe-bottom)); }

/* the board's filters: two rows of chips that scroll sideways */
.xc-filters { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
.xc-chips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.xc-chips::-webkit-scrollbar { display: none; }
.xc-chip, .xs-chip { position: relative; display: inline-flex; flex: none; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 18px; color: rgba(243, 235, 221, .84); font: 600 12.5px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; background: rgba(10, 13, 24, .58); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .16); transition: transform .22s var(--ease-out), box-shadow .35s var(--ease-out), background .35s, color .35s; }
.xc-chip::after, .xs-chip::after { content: ''; position: absolute; left: -2px; right: -2px; top: -5px; bottom: -5px; }
.xc-chip:active, .xs-chip:active { transform: scale(.96); }
.xc-chip.rl-chip, .xs-chip.rl-chip { padding: 0 14px 0 5px; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .3); }
/* until its painting arrives, a realm's dot is a small orb of its own light */
.xc-chip .rl-chip-dot, .xs-chip .rl-chip-dot { background: radial-gradient(circle at 38% 32%, rgba(var(--realm-accent-rgb), .75) 0%, rgba(var(--realm-glow-rgb), .32) 46%, var(--realm-ink) 100%); }
.xc-chip.is-any[aria-pressed="true"], .xs-chip.is-any[aria-pressed="true"], .xc-rchip[aria-pressed="true"], .xs-rchip[aria-pressed="true"] { color: var(--parchment); background: linear-gradient(180deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .07)), rgba(10, 13, 24, .62); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .85), 0 0 16px rgba(233, 196, 106, .22); }
.xc-rchip .xc-gems, .xs-rchip .xc-gems { color: var(--aether); }
.xc-rchip.is-mythic .xc-gems, .xs-rchip.is-mythic .xc-gems { color: var(--gold-hi); }
.xc-chip:focus-visible, .xs-chip:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 3px; }

/* a listing: its card, and what it is */
.xc-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 10px 16px 0; list-style: none; }
.xc-listing { position: relative; display: flex; gap: 14px; padding: 12px; border-radius: 20px; background: linear-gradient(160deg, rgba(var(--realm-deep-rgb), .3) 0%, rgba(20, 25, 54, .55) 45%, rgba(12, 15, 31, .8) 100%); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07), 0 16px 34px rgba(0, 0, 0, .3); animation-fill-mode: backwards; }
.xc-listing-card { flex: none; align-self: flex-start; border-radius: 12px; transition: transform .25s var(--ease-out); }
.xc-listing-card:active { transform: scale(.97); }
.xc-listing-body { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.xc-l-name { font: 400 20px/1.08 var(--serif); color: var(--parchment); text-wrap: balance; }
.xc-l-of { margin-top: -2px; font: italic 300 14px/1.25 var(--serif); color: var(--realm-accent); text-shadow: 0 0 12px rgba(var(--realm-accent-rgb), .3); }
.xc-l-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 650; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--realm-accent); }
.xc-l-meta .num { color: var(--gold-hi); letter-spacing: .12em; }
.xc-dot { margin: 0 6px; color: rgba(243, 235, 221, .4); }
.xc-l-want { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--parchment); }
.xc-l-want-k { margin-right: 2px; font-size: 10.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.xc-l-by { font-size: 12px; line-height: 1.3; color: rgba(243, 235, 221, .6); }
.xc-ago, .xc-o-ago { white-space: nowrap; }
.xc-l-acts { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: auto; padding-top: 6px; }
.xc-l-acts .xc-pill { flex: 0 1 auto; min-width: 0; }
.xc-l-acts .xc-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xc-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin: 0; padding: 0 15px; border: 0; border-radius: 19px; color: var(--gold-hi); font: 650 13px/1.1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; background: rgba(10, 13, 24, .5); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .62), 0 0 18px rgba(233, 196, 106, .12); transition: transform .2s var(--ease-out), box-shadow .3s; }
.xc-pill::after { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -4px; }
.xc-pill:active { transform: scale(.96); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .95), 0 0 22px rgba(233, 196, 106, .28); }
.xc-pill svg { flex: none; color: var(--gold); }
.xc-pill.is-waiting { color: var(--aether); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .5); }
.xc-pill.is-waiting svg { color: var(--aether); }
.xc-pill.is-small { min-height: 32px; padding: 0 12px; font-size: 12px; }
.xc-pill:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 3px; }
.xc-more { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; margin-left: auto; border-radius: 19px; color: rgba(243, 235, 221, .72); transition: background .25s, transform .2s var(--ease-out); }
.xc-more:active { transform: scale(.92); background: rgba(243, 235, 221, .08); }
.xc-more-row { display: flex; justify-content: center; padding: 14px 0 0; }
.xc-more-btn[aria-busy="true"] { animation: sheet-breathe 1.2s ease-in-out infinite; }

/* the gold action, over a soft fall of ink */
.xc-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 34px 20px calc(18px + var(--safe-bottom)); background: linear-gradient(0deg, rgba(10, 13, 24, .96) 40%, rgba(10, 13, 24, .78) 70%, rgba(10, 13, 24, 0) 100%); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s var(--ease-out), transform .45s var(--ease-spring), visibility 0s linear .35s; }
.xc[data-tab="board"] .xc-foot { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-spring); }
.xc-foot .btn { width: 100%; max-width: 360px; pointer-events: auto; }
.xc-foot .btn svg { flex: none; }
.xc-foot .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* offers: the two cards face to face */
.xc-sec { padding: 14px 16px 4px; }
.xc-h2 { display: flex; align-items: center; gap: 10px; margin: 6px 4px 12px; font: 600 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.xc-h2::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(233, 196, 106, .4), rgba(233, 196, 106, 0)); }
.xc-h2-n { order: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: rgba(233, 196, 106, .14); color: var(--gold-hi); font-size: 11px; letter-spacing: 0; }
.xc-h2-n:empty { display: none; }
.xc-none { margin: 0 4px 10px; font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .62); }
.xc-offer { position: relative; margin: 0 0 12px; padding: 14px 14px 12px; border-radius: 20px; background: linear-gradient(170deg, rgba(20, 25, 54, .7) 0%, rgba(12, 15, 31, .86) 100%); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07), 0 16px 34px rgba(0, 0, 0, .3); animation-fill-mode: backwards; }
.xc-offer.is-open { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .28), 0 16px 34px rgba(0, 0, 0, .32), 0 0 28px rgba(233, 196, 106, .07); }
.xc-offer.is-closed { opacity: .78; }
.xc-o-head { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 10px; }
.xc-o-who { flex: 1 1 auto; min-width: 0; font: italic 400 16px/1.25 var(--serif); color: var(--parchment); }
.xc-o-ago { flex: none; font-size: 12px; color: rgba(243, 235, 221, .5); font-variant-numeric: tabular-nums; }
.xc-o-head .xc-more { margin-left: 0; width: 34px; height: 34px; }
.xc-o-cards { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.xc-o-card { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; transition: transform .25s var(--ease-out); }
.xc-o-card:not([disabled]):active { transform: scale(.97); }
.xc-o-card[disabled] { cursor: default; }
.xc-o-cap { font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 235, 221, .6); }
.xc-o-card.is-get .xc-o-cap { color: var(--aether); }
.xc-o-name { max-width: 104px; font: 400 14px/1.15 var(--serif); color: var(--parchment); text-wrap: balance; }
.xc-o-swap { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: 74px; border-radius: 19px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .18), rgba(233, 196, 106, .03) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .4), 0 0 16px rgba(233, 196, 106, .18); }
.xc-o-acts { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.xc-o-btn { flex: 1 1 0; max-width: 170px; }
.xc-o-acts .btn-gold.xc-o-btn { height: 48px; font-size: 15px; }
.xc-o-acts .btn-ghost.xc-o-btn { height: 48px; font-size: 14.5px; }
.xc-o-btn[aria-busy="true"] { animation: sheet-breathe 1.2s ease-in-out infinite; }
.xc-o-wait { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--aether); }
.xc-o-wait svg { flex: none; }
.xc-o-cancel { color: rgba(243, 235, 221, .7); }
.xc-o-why { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 13px; color: rgba(243, 235, 221, .66); text-align: center; }
.xc-o-why.is-done { color: var(--aether); }
.xc-fine { margin: 18px 24px 0; font-size: 12px; line-height: 1.45; text-align: center; color: rgba(243, 235, 221, .42); }

/* yours: the name others see, your Strays, your listings and gift links */
.xc-me { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 12px 16px 2px; padding: 12px 14px; box-sizing: border-box; border: 0; border-radius: 18px; text-align: left; color: var(--parchment); cursor: pointer; -webkit-appearance: none; appearance: none; background: rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .08); transition: background .25s; }
.xc-me:active { background: rgba(233, 196, 106, .07); }
.xc-me-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 18px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .16), rgba(233, 196, 106, .02) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .35); }
.xc-me-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.xc-me-k { font-size: 10.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 235, 221, .55); }
.xc-me-v { font: 400 18px/1.15 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-me-hidden { margin-left: 8px; font: 600 11px/1 var(--sans); color: var(--ember); }
.xc-me-go { display: flex; align-items: center; gap: 3px; flex: none; font-size: 13px; font-weight: 600; color: var(--gold); }
.xc-seal { display: flex; align-items: flex-start; gap: 10px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; color: rgba(243, 235, 221, .86); background: rgba(233, 196, 106, .07); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .3); }
.xc-seal svg { flex: none; margin-top: 2px; color: var(--gold); }
.xc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.xc-grid-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .25s var(--ease-out); animation-fill-mode: backwards; }
.xc-grid-item:active { transform: scale(.97); }
.xc-grid .xc-card { --w: 100%; max-width: 116px; }
.xc-grid .xc-card .xc-face { height: auto; aspect-ratio: 2 / 3; }
.xc-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 8px; border-radius: 10px; font-size: 9.5px; font-weight: 650; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(243, 235, 221, .8); background: rgba(243, 235, 221, .07); }
.xc-tag svg { flex: none; }
/* under a card in the grid, a tag may take two short lines rather than lose its end */
.xc-grid-item .xc-tag { white-space: normal; text-align: center; justify-content: center; line-height: 1.25; }
.xc-tag.is-gift { color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); }
.xc-tag.is-listed { color: var(--aether); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .4); }
.xc-tag.is-offers { color: #06231F; background: var(--aether); }
.xc-tag.is-story { color: var(--gold-hi); }
.xc-rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xc-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px; border-radius: 18px; background: rgba(243, 235, 221, .035); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.xc-row .xc-card { --w: 72px; }
.xc-row .xc-name { font-size: 10.5px; }
.xc-row .xc-no { display: none; }
.xc-row.is-closed { opacity: .66; }
.xc-row-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.xc-row-name { font: 400 18px/1.1 var(--serif); }
.xc-row-sub { font-size: 12.5px; line-height: 1.35; color: rgba(243, 235, 221, .66); }
.xc-row-sub.is-accent { color: var(--aether); }
.xc-row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.xc-row-btn { min-height: 34px; padding: 0 8px; font-size: 13px; color: rgba(243, 235, 221, .72); }
.xc-row-note { font-size: 12px; color: rgba(243, 235, 221, .5); }

/* empty, waiting */
.xc-empty { padding: 40px 28px 10px; }
.xc-empty-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 30px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .14), rgba(233, 196, 106, 0) 70%); box-shadow: inset 0 0 0 1px var(--gold-hair); }
.xc-empty-glyph { margin-bottom: 8px; }
.xc-wait { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.xc-skel { height: 196px; border-radius: 20px; }

/* ---------- the sheets ---------- */
.xs-sheet .sheet-body { padding-bottom: 20px; }
.xs { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 4px 2px; text-align: center; }
.xs .eyebrow { margin-top: 2px; }
.xs-title { margin: 0; font-size: 28px; line-height: 1.08; text-wrap: balance; }
.xs-body { margin: 0; max-width: 330px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.xs-body b { color: var(--parchment); font-weight: 600; }
.xs .btn { width: 100%; max-width: 330px; }
.xs .btn svg { flex: none; }
.xs .btn-text { margin-top: -4px; }
.xs-note { margin: 0; min-height: 0; max-width: 320px; font-size: 13.5px; line-height: 1.45; color: rgba(243, 235, 221, .72); }
.xs-note:empty { display: none; }
.xs-note.is-warn { color: var(--ember); }
.xs-fine { margin: 2px 0 0; font-size: 12px; color: rgba(243, 235, 221, .44); }
.xs-busy { animation: sheet-breathe 1.2s ease-in-out infinite; }
.xs .btn[aria-busy="true"] { cursor: default; }
.xs-inline { margin-top: -6px; }
/* a card held up, glowing; the gift's ribbon at its corner */
.xs-hero { position: relative; display: flex; justify-content: center; padding: 10px 0 6px; }
.xs-hero::before { content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--realm-glow-rgb, 233, 196, 106), .22), rgba(233, 196, 106, 0) 62%); }
.xs-hero .xc-card { animation: xs-hold 5.5s ease-in-out infinite; }
@keyframes xs-hold { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
.xs-hero.is-ready .xc-card { animation: xs-ready .9s var(--ease-spring) both, xs-hold 5.5s ease-in-out .9s infinite; }
@keyframes xs-ready { from { transform: scale(.9); filter: brightness(1.6); } to { transform: none; filter: none; } }
.xs-ribbon { position: absolute; right: calc(50% - 92px); bottom: 2px; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 23px; color: #1A1305; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 45%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px rgba(0, 0, 0, .45), 0 0 22px rgba(233, 196, 106, .45); }
.xs-points { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 330px; margin: 2px 0 4px; padding: 0; list-style: none; text-align: left; }
.xs-points li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.45; color: rgba(243, 235, 221, .86); }
.xs-points li::before { content: ''; position: absolute; left: 3px; top: .52em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 6px rgba(233, 196, 106, .7); }
.xs-go { margin-top: 4px; }
/* two cards face to face */
.xs-f2f { display: flex; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; padding: 4px 0 2px; }
.xs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.xs-side-cap { font-size: 10.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 235, 221, .64); }
.xs-side.is-get .xs-side-cap { color: var(--aether); }
.xs-side .xc-card { animation: xs-hold 6s ease-in-out infinite; }
.xs-side.is-get .xc-card { animation-delay: -3s; }
.xs-swap { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: 88px; border-radius: 21px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .2), rgba(233, 196, 106, .04) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45), 0 0 18px rgba(233, 196, 106, .22); }
.xs-done .xs-swap { margin-top: 70px; }
.xs-terms { max-width: 320px; }
/* "Looking for": a world and a rarity */
.xs-want { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; text-align: left; }
.xs-label { margin: 4px 4px 0; font-size: 10.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.xs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xs-want-sum { margin: 6px 4px 0; font-size: 14px; line-height: 1.4; color: rgba(243, 235, 221, .78); }
.xs-want-sum b { color: var(--parchment); font-weight: 600; }
/* a picker of your Strays */
.xs-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; width: 100%; padding: 4px 0; }
.xs-pick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: calc((100% - 20px) / 3); margin: 0; padding: 4px 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .22s var(--ease-out), opacity .3s; }
.xs-pick-item:active { transform: scale(.97); }
.xs-pick-item .xc-card { --w: 100%; max-width: 104px; }
.xs-pick-item .xc-card .xc-face { height: auto; aspect-ratio: 2 / 3; }
.xs-pick-item.is-off { opacity: .45; }
.xs-pick-item.is-off .xc-card { filter: saturate(.5); }
.xs-pick-item.is-on .xc-foil { box-shadow: 0 0 0 2px var(--aether), 0 0 24px rgba(166, 244, 230, .45); }
.xs-pick-why { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: rgba(243, 235, 221, .66); text-align: center; }
.xs-pick-item:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 2px; border-radius: 12px; }
.xs-theirs { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; box-sizing: border-box; border-radius: 18px; text-align: left; background: rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .08); }
.xs-theirs .xc-card { --w: 64px; }
.xs-theirs .xc-name, .xs-theirs .xc-no { display: none; }
.xs-theirs-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xs-theirs-name { font: 400 19px/1.1 var(--serif); color: var(--parchment); }
.xs-theirs-want { font-size: 13px; line-height: 1.35; color: rgba(243, 235, 221, .72); }
.xs-theirs-want b { color: var(--parchment); font-weight: 600; }
.xs-empty { margin: 8px 0; max-width: 300px; font: italic 300 16px/1.45 var(--serif); color: rgba(243, 235, 221, .72); }
.xs-loading { display: flex; justify-content: center; gap: 8px; padding: 30px 0; }
.xs-loading i { width: 8px; height: 8px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .7); animation: xs-dot 1.2s ease-in-out infinite; }
.xs-loading i:nth-child(2) { animation-delay: .15s; }
.xs-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes xs-dot { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: none; } }
/* the Stray you get, turning over into your hands */
.xs-turn { position: relative; width: 148px; height: 222px; margin: 8px 0 4px; perspective: 900px; }
.xs-turn-card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg) scale(.92); transition: transform 1.25s cubic-bezier(.3, 1.28, .5, 1); }
.xs-turn.is-turned .xs-turn-card { transform: none; }
.xs-turn-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.xs-turn-face.is-back { transform: rotateY(180deg); }
.xs-turn-face .xc-card { --w: 148px; }
.xs-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; opacity: 0; }
.xs-turn.is-turned .xs-burst { animation: xs-burst 1.4s var(--ease-out) .55s both; }
@keyframes xs-burst { 0% { opacity: .9; box-shadow: 0 0 0 0 rgba(255, 241, 201, .9), 0 0 30px 10px rgba(166, 244, 230, .5); } 100% { opacity: 0; box-shadow: 0 0 0 120px rgba(255, 241, 201, 0), 0 0 90px 40px rgba(166, 244, 230, 0); } }
.xs-got-eyebrow { color: var(--aether); }
/* a mark at the top of a small sheet: report, block, thanks */
.xs-mark { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 4px 0 2px; border-radius: 29px; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .16), rgba(233, 196, 106, 0) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .42); }
.xs-mark.is-ember { color: var(--ember); background: radial-gradient(circle at 50% 40%, rgba(255, 138, 91, .16), rgba(255, 138, 91, 0) 70%); box-shadow: inset 0 0 0 1px rgba(255, 138, 91, .45); }
.xs-reasons { width: 100%; max-width: 360px; margin: 4px 0 0; text-align: left; }
.xs-reasons .sheet-row svg { flex: none; color: rgba(243, 235, 221, .5); }
.xs-reasons .sheet-row[aria-busy="true"] { animation: sheet-breathe 1.2s ease-in-out infinite; }
.xs-menu .sheet-group { width: 100%; text-align: left; }
.xs-row-ember, .xs-row-ember .sheet-row-icon { color: var(--ember); }

/* ---------- the gift (src/screens/gift.js): the Stray card of stray.css, waiting ---------- */
.gf .gf-halo { background: radial-gradient(circle at 50% 42%, rgba(var(--realm-glow-rgb), .3) 0%, rgba(var(--realm-deep-rgb), .46) 34%, rgba(10, 13, 24, 0) 70%); }
.gf-head { gap: 8px; }
.gf-title { margin: 0; max-width: 340px; overflow-wrap: anywhere; font: 380 27px/1.1 var(--serif); color: var(--parchment); text-wrap: balance; text-shadow: 0 0 26px rgba(var(--realm-glow-rgb), .25); }
.gf-title:empty { display: none; }
.gf .gf-sub:empty { display: none; }
.gf.is-waiting .gf-title { animation: st-breathe 2.6s ease-in-out infinite; }
.gf-stage { padding-top: 22px; }
.gf .gf-keepers { margin-top: 10px; }
.gf-actions { align-items: center; }
.gf-actions .btn { width: 100%; max-width: 360px; }
.gf-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; }
.gf-row .gf-main { flex: 1 1 auto; }
.gf-main svg { flex: none; }
.gf-more { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 24px; color: rgba(243, 235, 221, .8); background: rgba(10, 13, 24, .5); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .14); }
.gf-more:active { transform: scale(.94); }
.gf-app { gap: 6px; color: var(--gold); text-decoration: none; }
.gf-links { display: flex; justify-content: center; gap: 4px; width: 100%; max-width: 360px; margin-top: -4px; }
.gf-actions .gf-links .btn { width: auto; flex: 0 1 auto; }
.gf-app svg { flex: none; }
.gf-fine { margin: 0; max-width: 320px; font-size: 12.5px; line-height: 1.45; text-align: center; color: rgba(243, 235, 221, .5); }
.gf-actions .gf-main[aria-busy="true"] span { animation: sheet-breathe 1.2s ease-in-out infinite; }
/* a gift that is gone, a link that leads nowhere: the card stays face down, its light low */
.gf.is-bare .st-halo { opacity: .5; }
.gf.is-bare .st-box { filter: saturate(.7) brightness(.86); }
.gf.is-bare .st-lore, .gf.is-bare .st-actions { opacity: 1; visibility: visible; animation: st-rise-in .75s var(--ease-out) .25s backwards; }
.gf.has-actions .st-actions { opacity: 1; visibility: visible; }
.gf:not(.is-face):not(.is-bare) .st-actions { opacity: 0; visibility: hidden; }
/* claimed: the card turns over once more, into the player's hands, and glows */
.gf.is-turning .st-flip { animation: gf-turn 1.1s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes gf-turn { 0% { transform: rotateY(0deg) scale(1); } 45% { transform: rotateY(200deg) scale(1.06); } 100% { transform: rotateY(360deg) scale(1); } }
.gf.is-arrived .st-foil { animation: gf-glow 2.4s var(--ease-out) both; }
@keyframes gf-glow { 0% { box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 90px rgba(255, 241, 201, .7), 0 0 160px rgba(var(--realm-accent-rgb), .45); } 100% { box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 46px rgba(var(--realm-glow-rgb), .28), 0 0 90px rgba(var(--realm-accent-rgb), .08); } }
.gf.is-claimed .gf-eyebrow { color: var(--aether); }

/* ---------- the nickname (src/ui/settings.js) ---------- */
.nick { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.nick-head { padding-bottom: 4px; }
.nick-field { position: relative; display: block; }
.nick-input { display: block; width: 100%; height: 56px; box-sizing: border-box; margin: 0; padding: 0 64px 0 18px; border: 0; border-radius: 16px; outline: none; color: var(--parchment); font: 400 21px/1 var(--serif); letter-spacing: .01em; background: rgba(10, 13, 24, .6); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .4); -webkit-user-select: text; user-select: text; transition: box-shadow .3s var(--ease-out); -webkit-appearance: none; appearance: none; }
.nick-input::placeholder { color: rgba(243, 235, 221, .36); font-style: italic; }
.nick-input:focus { box-shadow: inset 0 0 0 1.5px rgba(233, 196, 106, .9), 0 0 20px rgba(233, 196, 106, .2); }
.nick-field.is-locked .nick-input { color: rgba(243, 235, 221, .6); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .14); }
.nick-count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgba(243, 235, 221, .45); pointer-events: none; }
.nick-count.is-over { color: var(--ember); }
.nick-rules { margin: 0 4px; font-size: 13px; line-height: 1.45; color: rgba(243, 235, 221, .64); }
.nick-note { margin: 0 4px; font-size: 13.5px; line-height: 1.45; color: rgba(243, 235, 221, .8); }
.nick-note:empty { display: none; }
.nick-note.is-warn { color: var(--ember); }
.nick-hidden { margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: rgba(243, 235, 221, .86); background: rgba(255, 138, 91, .08); box-shadow: inset 0 0 0 1px rgba(255, 138, 91, .35); }
.nick-left { margin: 0 4px; font-size: 12.5px; color: var(--aether); }
.nick-left:empty { display: none; }
.nick-save { margin-top: 6px; }
.nick-finder { margin: 0 4px; font: italic 300 14px/1.4 var(--serif); text-align: center; color: rgba(243, 235, 221, .6); }
.nick .btn-text { align-self: center; }
.nick-row-name { font-weight: 600; color: var(--parchment); }
.nick-row-hidden { color: var(--ember); }
.nick-wait { animation: sheet-breathe 1.2s ease-in-out infinite; }
.nick-delete-note { margin-top: -4px; }

/* ---------- small phones, short screens, calm ---------- */
@media (max-width: 374px) {
  .xc-foot .btn { padding: 0 16px; font-size: 14.5px; }
  .xc-title { font-size: 28px; }
  .xc-tab { font-size: 12.5px; padding: 0 4px; }
  .xc-card.is-md { --w: 104px; }
  .xc-listing { gap: 12px; padding: 10px; }
  .xc-l-name { font-size: 18px; }
  .xc-o-card .xc-card.is-sm { --w: 88px; }
  .xc-o-swap { width: 32px; height: 32px; margin-top: 66px; }
  .xs-f2f { gap: 8px; }
  .xs-f2f .xc-card.is-md { --w: 104px; }
  .xs-swap { width: 36px; height: 36px; margin-top: 78px; }
}
@media (max-height: 700px) {
  .xc-top { padding-top: calc(10px + var(--safe-top)); }
  .xc-title { font-size: 28px; }
  .xc-tabs { margin-top: 12px; }
  .gf-title { font-size: 23px; }
  .xs-hero .xc-card.is-lg { --w: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .xc-sheen, .xs-hero .xc-card, .xs-side .xc-card, .xs-loading i, .gf.is-waiting .gf-title, .nick-wait { animation: none; }
  .xc-tab-ink, .xs-turn-card { transition: none; }
  .gf.is-turning .st-flip, .gf.is-arrived .st-foil { animation: none; }
}

/* feed.css */
/* Everyone's Elsewheres (src/ui/feed.js), a tab of the Atlas: other explorers' pages in two staggered columns. */
.fd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; padding: 30px 22px 50px; }
.fd-card { position: relative; animation: atlas-page-in .95s var(--ease-spring) var(--d, 0s) backwards; transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.fd-card:nth-child(2n) { top: 44px; }
.fd-card.is-leaving { opacity: 0; transform: scale(.94); pointer-events: none; }
.fd-open { display: flex; flex-direction: column; gap: 9px; width: 100%; color: var(--parchment); text-align: left; transition: transform .3s var(--ease-out); }
.fd-open:active { transform: scale(.97); }
.atlas .fd-frame { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background-color: #121733; box-shadow: 0 0 0 1px rgba(233, 196, 106, .42), 0 18px 40px rgba(0, 0, 0, .5), 0 0 26px rgba(233, 196, 106, .1); }
@supports not (aspect-ratio: 1) { .atlas .fd-frame { height: 0; padding-top: 133%; } }
.fd-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.fd-veil { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: linear-gradient(0deg, rgba(10, 13, 24, .62), rgba(10, 13, 24, 0)); }
.fd-stray { position: absolute; left: 9px; bottom: 9px; width: 34px; height: 34px; box-sizing: border-box; padding: 2px; border-radius: 17px; background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 22%, #8A6428 44%, #F7E2A6 62%, #A97A35 82%, #FFF1C9 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 12px rgba(233, 196, 106, .35); }
.fd-stray img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--ink); }
.fd-cap { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.fd-place { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-meta { display: flex; gap: 6px; font-size: 11.5px; color: rgba(243, 235, 221, .6); white-space: nowrap; overflow: hidden; }
.fd-more { position: absolute; right: 7px; top: 7px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 16px; color: var(--parchment); background: rgba(10, 13, 24, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .12); cursor: pointer; transition: transform .2s var(--ease-out); }
.fd-more::after { content: ''; position: absolute; inset: -6px; }
.fd-more:active { transform: scale(.9); }
.fd-more:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 2px; }
.fd-yours { position: absolute; right: 8px; top: 8px; padding: 5px 8px 4px; border-radius: 9px; font: 650 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #1A1305; background: linear-gradient(180deg, #F7E2A6, #E9C46A 50%, #C9973F); pointer-events: none; }

/* waiting for the first page: ghost pages, never a grey box */
.fd-card.is-ghost { pointer-events: none; }
.fd-card.is-ghost .fd-frame { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; box-shadow: 0 0 0 1px rgba(233, 196, 106, .18); }
.fd-card.is-ghost .fd-cap { margin-top: 10px; gap: 7px; }
.fd-ghost-line { display: block; height: 11px; width: 78%; border-radius: 6px; background: rgba(243, 235, 221, .07); }
.fd-ghost-line.is-short { width: 46%; height: 9px; }

.fd-state { padding: 0 24px 24px; }
.fd-state:empty { padding: 0; }
.fd-panel { margin-top: 18px; }
.fd-panel-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 32px; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-hair); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .14), rgba(233, 196, 106, 0) 70%); }
.fd-panel .btn svg { flex: none; }
.fd-more-loading { display: flex; justify-content: center; padding: 26px 0 10px; }
.fd-end { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 6px; font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .55); text-align: center; }
.fd-sentinel { height: 1px; }

@media (prefers-reduced-motion: reduce) {
  .fd-card { animation-duration: .01s; }
}

/* home.css */
/* Home (design/board/Main.dc.html). Realms (src/css/realms.css): the event's banner, and Today's Seam in its realm. */
.home { background: var(--ink); color: var(--parchment);
  /* entrance timings: quick when coming back, a slow first light on launch */
  --t-art: 0s; --t-chips: .12s; --t-glyph: .05s; --t-mark: .08s; --t-tag: .22s; --t-today: .16s; --t-open: .24s; --t-links: .32s; --t-motes: .4s; }
.home.is-first { --t-chips: .95s; --t-glyph: .3s; --t-mark: .42s; --t-tag: 1.05s; --t-today: 1.15s; --t-open: 1.27s; --t-links: 1.42s; --t-motes: 1.6s; }

/* the key art, arriving and then breathing very slowly */
.home-art-wrap { position: absolute; inset: 0; overflow: hidden; }
.home.is-first .home-art-wrap { animation: home-arrive 2.8s var(--ease-out) backwards; }
@keyframes home-arrive { from { transform: scale(1.07); } to { transform: none; } }
.home-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 48% 58%; }
.home-art.is-in { animation: home-drift 32s ease-in-out 3s infinite alternate; }
@keyframes home-drift { from { transform: none; } to { transform: scale(1.045) translate3d(-.4%, -.7%, 0); } }

.home-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: calc(min(320px, 38%) + var(--safe-top)); pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 24, .84) 0%, rgba(10, 13, 24, .42) 55%, rgba(10, 13, 24, 0) 100%); }
.home-scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(min(420px, 50%) + var(--safe-bottom)); pointer-events: none; background: linear-gradient(0deg, rgba(10, 13, 24, .98) 0%, rgba(10, 13, 24, .88) 42%, rgba(10, 13, 24, 0) 100%); }

.home-motes { position: absolute; inset: 0; pointer-events: none; animation: sh-fade 1.4s var(--ease-out) var(--t-motes) backwards; }

/* film, the streak, settings */
.home-chips { position: absolute; left: 20px; right: 20px; top: calc(22px + var(--safe-top)); display: flex; justify-content: space-between; align-items: center; animation: sh-drop .8s var(--ease-spring) var(--t-chips) backwards; }
.home-chips-right { display: flex; align-items: center; gap: 8px; }
.home-chip { color: var(--parchment); white-space: nowrap; }
.home-chip svg { flex: none; }
.home .home-film { position: relative; cursor: pointer; transition: transform .25s var(--ease-out), border-color .3s; }
.home .home-film::after { content: ''; position: absolute; left: -4px; right: -4px; top: -5px; bottom: -5px; }
.home-film:active { transform: scale(.96); border-color: rgba(233, 196, 106, .6); }
.home-film-n { display: inline-block; min-width: .6em; text-align: center; transition: opacity .4s; }
.home-film.is-unknown .home-film-n { display: inline-block; width: 6px; height: 6px; min-width: 0; margin: 0 2px 1px; border-radius: 3px; vertical-align: middle; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .6); animation: home-wait 1.8s ease-in-out infinite; }
@keyframes home-wait { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: .9; transform: none; } }
.home-pass { margin-left: 2px; padding-left: 9px; border-left: 1px solid rgba(166, 244, 230, .3); font-size: 10.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--aether); }
.home-pass[hidden] { display: none; }
.home-streak .home-flame { opacity: .5; transition: opacity .6s, filter .6s; }
.home-streak.is-lit .home-flame { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 196, 110, .75)); }
.home-gear { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--gold-hair); transition: transform .25s var(--ease-out), box-shadow .3s; }
.home-gear::after { content: ''; position: absolute; inset: -5px -4px; }
.home-gear:active { transform: scale(.92); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .6); }

/* the glyph, the wordmark, the line */
.home-title { position: absolute; left: 0; right: 0; top: calc(86px + var(--safe-top)); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none; }
.home-glyph { display: block; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95)) drop-shadow(0 0 16px rgba(233, 196, 106, .6));
  animation: home-glyph-in 1.1s var(--ease-out) var(--t-glyph) backwards, sh-breathe 5.4s ease-in-out calc(var(--t-glyph) + 1.1s) infinite; }
@keyframes home-glyph-in { from { opacity: 0; } to { opacity: 1; } }
/* the wordmark (src/css/wordmark.css): the seam's light crosses it from --t-mark in the old entrance's 1.7 s on launch,
   a little briskly on a return */
.home .home-wordmark { font-size: min(36px, 9.2vw); --wm-delay: var(--t-mark); --wm-dur: 1.4s; }
.home.is-first .home-wordmark { --wm-dur: 1.7s; }
.home-tagline { margin: 0; max-width: 268px; font-size: 18px; line-height: 1.42; color: rgba(243, 235, 221, .88); text-shadow: 0 1px 12px rgba(10, 13, 24, .55); animation: sh-fade 1.2s var(--ease-out) var(--t-tag) backwards; }
/* the display type waits for its font, so the line never flashes in a fallback face; the wordmark (drawn, no font)
   waits with it, so the three still arrive in their order */
.home-title > *, .home-title .wm-art *, .home-title .wm-art *::before, .home-title .wm-art *::after { animation-play-state: paused; }
.fonts-ready .home-title > *, .fonts-ready .home-title .wm-art *, .fonts-ready .home-title .wm-art *::before, .fonts-ready .home-title .wm-art *::after { animation-play-state: running; }

/* today's seam, the main action, the collection */
.home-actions { position: absolute; left: 24px; right: 24px; bottom: calc(30px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 16px; }
.home-today { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid rgba(233, 196, 106, .26); border-radius: 18px; color: var(--parchment); text-align: left; transition: transform .25s var(--ease-out), border-color .3s; animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-today[hidden] { display: none; }
.home-today.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-today:active { transform: scale(.98); border-color: rgba(233, 196, 106, .5); }
.home-today-thumb { position: relative; flex: none; width: 46px; height: 62px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(233, 196, 106, .55), 0 6px 16px rgba(0, 0, 0, .45), 0 0 18px rgba(233, 196, 106, .18); }
.home-today-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.home-today-thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 241, 201, .32) 46%, rgba(255, 255, 255, 0) 62%); background-size: 300% 100%; animation: home-glint 7s ease-in-out 2.4s infinite; mix-blend-mode: soft-light; }
@keyframes home-glint { 0%, 30% { background-position: 120% 0; } 60%, 100% { background-position: -30% 0; } }
.home-today-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.home-today-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-today-left { color: rgba(243, 235, 221, .62); letter-spacing: .12em; }
.home-today-title { font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.home-today-meta { display: flex; align-items: center; gap: 8px; min-height: 15px; font-size: 12.5px; color: rgba(243, 235, 221, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-today-done { color: var(--gold-hi); font-weight: 600; }
.home-today-stars { display: inline-flex; gap: 2px; filter: drop-shadow(0 0 4px rgba(233, 196, 106, .6)); }
.home-today-go { display: flex; flex: none; }
.home-open { font-size: 17px; border-radius: 29px; animation: sh-rise .8s var(--ease-spring) var(--t-open) backwards; }
.home-open svg { flex: none; }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; animation: sh-fade .9s var(--ease-out) var(--t-links) backwards; }
.home-link { display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 14px; color: rgba(243, 235, 221, .8); white-space: nowrap; transition: opacity .2s; }
.home-link:active { opacity: .6; }
.home-link svg { flex: none; }

/* realms: the event's banner above Today's Seam, and the realm Today's Seam was painted in, its painting behind the glass */
.home-event { align-self: center; max-width: 100%; animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-event.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-event[hidden] { display: none; }
.home-event-dot { color: rgba(243, 235, 221, .45); }
.home-today { position: relative; overflow: hidden; isolation: isolate; }
.home-today-world { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.home-today-world img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease-out), transform 2.4s var(--ease-out); }
.home-today-world img.is-in { opacity: .5; transform: none; }
.home-today-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 13, 24, .9) 0%, rgba(10, 13, 24, .74) 48%, rgba(var(--realm-ink-rgb), .42) 100%), radial-gradient(70% 120% at 100% 50%, rgba(var(--realm-accent-rgb), .14), rgba(var(--realm-accent-rgb), 0) 70%); }
.home-today-realm { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--realm-accent); font-weight: 600; }
.home-today-realm .rl-mark { filter: drop-shadow(0 0 4px rgba(var(--realm-accent-rgb), .8)); }
.home-today-dot { flex: none; color: rgba(243, 235, 221, .4); }
.home-today-free { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* short screens (iPhone SE, Safari with its toolbars) */
@media (max-height: 740px) {
  .home-title { top: calc(70px + var(--safe-top)); gap: 12px; }
}
@media (max-height: 700px) {
  .home-event { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .home-event .rl-banner-icon { width: 28px; height: 28px; }
  .home-event .rl-banner-text b { font-size: 14px; }
}
@media (max-height: 640px) {
  .home-chips { top: calc(16px + var(--safe-top)); }
  .home-title { top: calc(60px + var(--safe-top)); gap: 10px; }
  .home .home-wordmark { font-size: min(32px, 9.2vw); }
  .home-tagline { font-size: 16px; max-width: 250px; }
  .home-actions { gap: 12px; bottom: calc(18px + var(--safe-bottom)); }
  .home-today { padding-top: 8px; padding-bottom: 8px; }
  .home-today-thumb { width: 40px; height: 54px; }
}
@media (max-width: 380px) {
  .home-links { gap: 16px; }
  .home-link { font-size: 13.5px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-art.is-in, .home.is-first .home-art-wrap, .home-today-thumb::after, .home-film.is-unknown .home-film-n { animation: none; }
  .home-today-world img { transition: none; transform: none; }
  .home-glyph { animation: home-glyph-in .3s ease-out backwards; }
}
/* a long place (Spanish runs longer) takes a second line rather than losing its end (src/screens/home.js fitLine) */
.home-today-title.is-two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; font-size: 17px; line-height: 1.14; text-wrap: balance; }

/* ---------- the story's prompt (src/screens/story.js nextBeat), in the tale's own colours ---------- */
.home-story { align-self: center; max-width: 100%; padding-right: 12px; animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-story.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-story[hidden] { display: none; }
.home-story .rl-banner-icon svg { width: 16px; height: 16px; }
.home-story-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-story-text b { font-weight: 600; }
.home-story-dot { color: rgba(243, 235, 221, .45); }
.home-story-name { font: 600 13px/1.2 var(--sans); color: var(--realm-accent); }
.home-story-go { position: relative; display: flex; flex: none; margin-left: 2px; opacity: .9; }
/* on most phones one banner at a time: a new page (or the last choice) keeps the place the event's banner would take */
@media (max-height: 880px) { .home.has-story .home-event { display: none; } }

/* ---------- this week's quests: a quiet strip, each ticked when done ---------- */
.home-quests { display: flex; align-items: center; gap: 12px; height: 40px; padding-left: 14px; box-sizing: border-box; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2); animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-quests.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-quests[hidden] { display: none; }
.home-quests-eyebrow { display: flex; flex: none; align-items: baseline; gap: 7px; font: 650 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.home-quests-n { font-weight: 600; letter-spacing: .04em; color: rgba(243, 235, 221, .55); }
.home-quests.is-all .home-quests-n { color: var(--gold-hi); }
.home-quests-list { display: flex; flex: 1 1 auto; align-items: center; gap: 16px; min-width: 0; height: 100%; margin: 0; padding: 0 16px 0 0; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), rgba(0, 0, 0, 0) 100%); }
.home-quests-list::-webkit-scrollbar { display: none; }
.home-quest { display: flex; flex: none; align-items: center; gap: 7px; font-size: 13px; color: rgba(243, 235, 221, .88); white-space: nowrap; }
.home-quest-mark { display: block; flex: none; color: rgba(233, 196, 106, .72); }
.home-quest.is-done { color: rgba(243, 235, 221, .58); }
.home-quest.is-done .home-quest-mark { color: var(--gold); filter: drop-shadow(0 0 4px rgba(233, 196, 106, .7)); }
@media (max-height: 640px) {
  .home-quests { height: 36px; }
}
.home-today-seal { display: inline-flex; filter: drop-shadow(0 0 4px rgba(166, 244, 230, .75)); }

/* ---------- the player's open seam (src/store.js openLevels): a level made and not kept yet, offered back above "Open a
   seam". Its own photo, dimmed, with the seam lit down it, the place and its realm, in the realm's colours ---------- */
.home-resume { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 9px; box-sizing: border-box; border-radius: 18px; overflow: hidden; isolation: isolate; color: var(--parchment); text-align: left; cursor: pointer;
  background: linear-gradient(100deg, rgba(var(--realm-glow-rgb), .17) 0%, rgba(var(--realm-ink-rgb), .62) 46%, rgba(var(--realm-accent-rgb), .1) 100%), rgba(10, 13, 24, .58); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(var(--realm-glow-rgb), .5), 0 10px 30px rgba(0, 0, 0, .32), 0 0 26px rgba(var(--realm-glow-rgb), .16);
  transition: transform .22s var(--ease-out), box-shadow .3s; animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-resume[hidden] { display: none; }
.home-resume.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-resume:active { transform: scale(.98); box-shadow: inset 0 0 0 1px rgba(var(--realm-glow-rgb), .8), 0 10px 30px rgba(0, 0, 0, .32), 0 0 30px rgba(var(--realm-glow-rgb), .26); }
.home-resume:focus-visible { outline: 2px solid rgba(var(--realm-glow-rgb), .8); outline-offset: 3px; }
/* a slow glint crosses the glass, in the seam's light */
.home-resume::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(var(--realm-glow-rgb), .2) 50%, rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: rl-glint 7s ease-in-out 2.4s infinite; }
.home-resume-thumb { position: relative; flex: none; width: 31px; height: 42px; overflow: hidden; border-radius: 7px; background: var(--realm-ink); box-shadow: 0 0 0 1px rgba(var(--realm-glow-rgb), .62), 0 5px 14px rgba(0, 0, 0, .5), 0 0 14px rgba(var(--realm-glow-rgb), .2); }
.home-resume-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.55) brightness(.62) contrast(1.05); transition: opacity .7s var(--ease-out); }
.home-resume-thumb img.is-in { opacity: 1; }
.home-resume-seam { position: absolute; left: 50%; top: 6%; bottom: 6%; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, rgba(var(--realm-glow-mid-rgb), 0), var(--realm-glow-hi) 26%, var(--realm-glow) 50%, var(--realm-glow-hi) 74%, rgba(var(--realm-glow-mid-rgb), 0)); box-shadow: 0 0 5px 1px rgba(var(--realm-glow-mid-rgb), .9), 0 0 12px 3px rgba(var(--realm-glow-rgb), .5); transform-origin: 50% 50%; animation: home-seam 2.8s ease-in-out infinite; }
@keyframes home-seam { 0%, 100% { opacity: .72; transform: scaleY(.9); } 50% { opacity: 1; transform: none; } }
.home-resume-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.home-resume-eyebrow { font: 600 10.5px/1.2 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--realm-glow-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(var(--realm-glow-rgb), .45); }
.home-resume-place { display: flex; align-items: baseline; gap: 9px; min-width: 0; white-space: nowrap; }
.home-resume-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; font: italic 400 17px/1.15 var(--serif); color: var(--parchment); }
.home-resume-realm { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 5px; min-width: 0; font: 600 12px/1 var(--sans); color: var(--realm-accent); }
.home-resume-realm span { overflow: hidden; text-overflow: ellipsis; }
.home-resume-realm .rl-mark { align-self: center; }
.home-resume-go { display: flex; flex: none; opacity: .9; }
/* one banner above it on most phones: the open seam waits first, an event's banner and the story's prompt step aside */
@media (max-height: 880px) { .home.has-resume .home-event { display: none; } }
@media (max-height: 760px) { .home.has-resume .home-story { display: none; } }
@media (max-height: 700px) { .home.has-resume .home-news { display: none; } .home-resume { min-height: 52px; padding-top: 6px; padding-bottom: 6px; } .home-resume-thumb { width: 28px; height: 38px; } }
@media (max-height: 640px) { .home.has-resume .home-quests { display: none; } }
/* narrow phones: the place keeps its whole name; the realm keeps its mark (its colours are the strip's, its name the label's) */
@media (max-width: 380px) { .home-resume-name { font-size: 16px; } .home-resume-realm span { display: none; } }
@media (prefers-reduced-motion: reduce) { .home-resume::before, .home-resume-seam { animation: none; } }

/* intro.css */
/* The opening title (src/screens/intro.js): the first open, one shot from the launch splash's seam to the painted
   Elsewhere and the wordmark. The stage (the seam, its tear, the opening and the art behind it) is moved by the script
   (WAAPI: transform, opacity, clip-path); the title is timed here from the custom properties the script sets (--t-*,
   and the wordmark's own --wm-delay and --wm-dur), held until the run starts (.is-run). Nothing here lays out or paints
   per frame. */

/* The splash seam's height, as each platform's splash draws it (native/assets.mjs): on iOS the launch picture fills the
   screen's height and its seam is 0.1656 of it; on Android the system's splash icon carries a 140 dp seam. Isolated:
   whatever stands above whatever inside the title stays inside it, beneath the next screen as that arrives. */
.intro { background: var(--ink); color: var(--parchment); cursor: pointer; isolation: isolate; --seam-h: 140px; }
.is-ios .intro { --seam-h: 16.56vh; }
.is-android .intro { --seam-h: 140px; }
.in-probe { position: absolute; left: 0; top: 0; width: 1px; height: var(--seam-h); visibility: hidden; }

/* ---------- the stage ---------- */
.in-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.in-stage > * { position: absolute; display: block; }
.in-stage[hidden] { display: none; }
.in-stage i { position: absolute; display: block; }

/* the splash's seam (the same drawing, place and size), centred by its margins: its transform is the script's */
.in-seam { left: 50%; top: 50%; width: calc(var(--seam-h) * 1.3); height: calc(var(--seam-h) * 1.8); margin: calc(var(--seam-h) * -.9) 0 0 calc(var(--seam-h) * -.65); overflow: visible; will-change: transform, opacity; }
.is-draw .in-seam { opacity: 0; }
/* the web, waiting for its art: the seam arrives and breathes */
.intro.is-waiting .in-seam { animation: in-fade .9s var(--ease-out) both, in-wait 3.2s ease-in-out .9s infinite; }
@keyframes in-wait { 0%, 100% { transform: none; } 50% { transform: scale(1.06, 1.02); } }

/* the web: the line of light the seam draws itself from */
.in-line { left: 50%; top: 50%; width: 2px; height: var(--seam-h); margin: calc(var(--seam-h) * -.5) 0 0 -1px; border-radius: 1px; opacity: 0; transform: scaleY(0);
  background: linear-gradient(180deg, rgba(255, 241, 201, 0), #FFF6DE 18%, #FFFFFF 50%, #FFF6DE 82%, rgba(255, 241, 201, 0)); }
.is-launch .in-line { display: none; }

/* the hairline that runs on from the seam's tips: the line the tear follows */
.in-thread { left: 50%; width: 1.5px; height: calc(var(--seam-h) * .82); margin-left: -.75px; opacity: 0; transform: scaleY(0); }
.in-thread.is-up { bottom: calc(50% + var(--seam-h) * .46); transform-origin: 50% 100%; background: linear-gradient(0deg, #FFF6DE, rgba(255, 228, 170, .6) 38%, rgba(255, 228, 170, 0)); }
.in-thread.is-down { top: calc(50% + var(--seam-h) * .46); transform-origin: 50% 0; background: linear-gradient(180deg, #FFF6DE, rgba(255, 228, 170, .6) 38%, rgba(255, 228, 170, 0)); }
/* (no glow of their own: the seam's halo lights them; a shadow would glow round their whole box, faded ends and all) */

/* the light the seam breathes, and its white-hot heart before the rip */
/* (gold is light only where it is bright: dim, over the ink, it would turn to mud; so the glows fall off fast) */
.in-halo { left: 50%; top: 50%; width: calc(var(--seam-h) * 2.4); height: calc(var(--seam-h) * 3.2); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.82); will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .46), rgba(246, 190, 96, .16) 34%, rgba(233, 170, 80, .05) 58%, rgba(233, 170, 80, 0) 78%); }
.in-core { left: 50%; top: 50%; width: calc(var(--seam-h) * .17); height: calc(var(--seam-h) * .92); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #FFFFFF, rgba(255, 251, 239, .85) 40%, rgba(255, 246, 222, 0)); }

/* boxes 100 px square at the middle, scaled by the script to the lenses' bounds */
.in-glow, .in-rim-gold, .in-rim-hot, .in-light { left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%) scale(0); }
/* the light around the opening's rim */
.in-glow { border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 216, 140, 0) 46%, rgba(255, 214, 134, .5) 55%, rgba(244, 184, 90, .12) 66%, rgba(233, 170, 80, 0) 82%); }
/* the rim: gold leaf between the outer lens and the opening (white-hot as it tears) */
.in-rim, .in-open { left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; }
.in-rim-gold { background: linear-gradient(180deg, #FFF8E2 0%, #F6DA90 22%, #E9C46A 50%, #C9973F 78%, #A97A35 100%); }
.in-rim-hot { background: radial-gradient(closest-side, #FFFFFF 40%, #FFF3D4 80%, #FFE6AA); }
/* the opening: the painted Elsewhere, the light along its edge, and the white of the tear the painting develops through */
.in-open { background: #0F2D31; }
.in-art { position: absolute; max-width: none; transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none; }
.in-light { border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 220, 150, 0) 58%, rgba(255, 214, 140, .22) 82%, rgba(255, 236, 196, .85) 100%); }
.in-flash { left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background: radial-gradient(ellipse 40% 34% at 50% 50%, #FFFFFF, #FFF6DE 55%, #FFE8B4); }
/* the bloom of the rip */
.in-bloom { left: 50%; top: 50%; width: calc(var(--seam-h) * 3.4); height: calc(var(--seam-h) * 3.4); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.3);
  background: radial-gradient(closest-side, rgba(255, 253, 244, .96), rgba(255, 236, 190, .6) 20%, rgba(255, 206, 120, .16) 44%, rgba(255, 206, 120, 0) 68%); }

/* motes thrown off the tear (placed and moved by the script) */
.in-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.in-sparks i { position: absolute; display: block; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #FFF1C9; box-shadow: 0 0 6px 2px rgba(255, 214, 140, .7); opacity: 0; }

/* ---------- the finished frame: the art as Home shows it, its own seam breathing, motes rising ---------- */
.in-final { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; will-change: opacity; }
.intro.is-final .in-final { opacity: 1; }
.in-art2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.in-breath { position: absolute; top: 14%; bottom: 0; left: 50%; width: 32%; margin-left: -16%; opacity: .35; animation: in-breathe 6.5s ease-in-out 1s infinite;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .2), rgba(233, 196, 106, .07) 55%, rgba(233, 196, 106, 0)); }
@keyframes in-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- the title: where Home's stands (src/css/home.css), so Home can arrive around it ---------- */
.in-title { position: absolute; inset: 0; pointer-events: none; }
.in-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: calc(min(320px, 38%) + var(--safe-top)); background: linear-gradient(180deg, rgba(10, 13, 24, .84) 0%, rgba(10, 13, 24, .42) 55%, rgba(10, 13, 24, 0) 100%);
  animation: in-fade 1.3s var(--ease-out) var(--t-scrim) both; }
.in-scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(min(250px, 30%) + var(--safe-bottom)); background: linear-gradient(0deg, rgba(10, 13, 24, .8) 0%, rgba(10, 13, 24, .46) 45%, rgba(10, 13, 24, 0) 100%);
  animation: in-fade 1.4s var(--ease-out) var(--t-tag) both; }
.in-head { position: absolute; left: 0; right: 0; top: calc(86px + var(--safe-top)); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* the seam's glyph draws itself, as the seam did */
.in-glyph { display: block; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95)) drop-shadow(0 0 16px rgba(233, 196, 106, .6));
  animation: in-glyph 1s var(--ease-out) var(--t-glyph) both, in-glyph-breathe 5.4s ease-in-out calc(var(--t-glyph) + 1s) infinite; }
@keyframes in-glyph { from { opacity: 0; transform: scaleY(.1); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes in-glyph-breathe { 0%, 100% { transform: none; } 50% { transform: scaleY(1.05); } }
/* the wordmark (src/css/wordmark.css): lit by the seam's light from --wm-delay over --wm-dur; its star glints once as the
   light leaves it, then with each sweep */
.intro .in-wordmark { font-size: min(36px, 9.2vw); --wm-delay: var(--t-mark); --wm-dur: var(--t-mark-dur); }
.in-wordmark::before { content: ''; position: absolute; left: -.6em; right: -.6em; top: -.7em; bottom: -.7em; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .16), rgba(233, 196, 106, .05) 58%, rgba(233, 196, 106, 0));
  animation: in-word-glow 1.6s ease-out calc(var(--wm-delay) + var(--wm-dur) * .3) both, in-word-breath 6.5s ease-in-out calc(var(--wm-delay) + var(--wm-dur) * .3 + 1.6s) infinite; }
@keyframes in-word-glow { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1.04); } }
@keyframes in-word-breath { 0%, 100% { opacity: 1; transform: scale(1.04); } 50% { opacity: .35; transform: scale(.94); } }
.in-wordmark .wm-star { animation: in-star 1.1s linear var(--t-star) both, wm-star 11s linear calc(var(--wm-delay) + var(--wm-dur) + 1.6s) infinite; }
@keyframes in-star { 0% { opacity: 0; transform: scale(0) rotate(-35deg); } 28% { opacity: 1; transform: scale(1.15) rotate(0deg); } 100% { opacity: 0; transform: scale(.15) rotate(50deg); } }
.in-tagline { margin: 0; max-width: 268px; font-size: 18px; line-height: 1.42; color: rgba(243, 235, 221, .88); text-shadow: 0 1px 12px rgba(10, 13, 24, .55);
  animation: in-rise 1.2s var(--ease-out) var(--t-tag) both; }

/* ---------- the way on: the whole screen is the button; its words wait at the bottom ---------- */
.in-tap { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; outline: none; -webkit-tap-highlight-color: transparent; }
.in-prompt { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 40px); display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 600 11px/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(243, 235, 221, .82); text-shadow: 0 1px 10px rgba(10, 13, 24, .85);
  animation: in-rise 1s var(--ease-out) var(--t-prompt) both, in-call 3.6s ease-in-out calc(var(--t-prompt) + 1.6s) infinite; }
.in-prompt span { margin-right: -.26em; }
.in-prompt i { display: block; width: 28px; height: 1px; transform: scaleX(0); animation: in-hair 1.1s var(--ease-out) calc(var(--t-prompt) + .25s) both; }
.in-prompt i:first-child { transform-origin: 100% 50%; background: linear-gradient(90deg, rgba(233, 196, 106, 0), rgba(233, 196, 106, .9)); }
.in-prompt i:last-child { transform-origin: 0 50%; background: linear-gradient(270deg, rgba(233, 196, 106, 0), rgba(233, 196, 106, .9)); }
.intro .in-tap:focus-visible { outline: none; }
.intro.is-going .in-tap { opacity: 0; transition: opacity .35s var(--ease-out); }
.in-tap:focus-visible .in-prompt { color: var(--gold-hi); }
@keyframes in-hair { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes in-call { 0%, 100% { opacity: 1; } 50% { opacity: .52; } }

@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the title waits for the run (the art ready, the first frame drawn), then everything keeps one clock */
.intro:not(.is-run) .in-title *, .intro:not(.is-run) .in-title *::before, .intro:not(.is-run) .in-title *::after,
.intro:not(.is-run) .in-prompt, .intro:not(.is-run) .in-prompt * { animation-play-state: paused; }

/* short screens, as Home (src/css/home.css) */
@media (max-height: 740px) {
  .in-head { top: calc(70px + var(--safe-top)); gap: 12px; }
}
@media (max-height: 640px) {
  .in-head { top: calc(60px + var(--safe-top)); gap: 10px; }
  .intro .in-wordmark { font-size: min(32px, 9.2vw); }
  .in-tagline { font-size: 16px; max-width: 250px; }
  .in-prompt { bottom: calc(var(--safe-bottom) + 28px); }
}

/* reduced motion: the splash's seam, then a calm cross-fade to the finished frame (the wordmark is its still gilt) */
@media (prefers-reduced-motion: reduce) {
  .intro .in-stage > :not(.in-seam):not(.in-probe), .in-sparks, .in-rise, .in-wordmark::before { display: none; }
  .intro .in-seam, .intro.is-waiting .in-seam { opacity: 1; animation: none; }
  .in-breath { animation: none; opacity: .6; }
  .in-scrim-top, .in-scrim-bottom, .in-glyph, .in-tagline, .intro .in-wordmark { animation: in-fade var(--t-fade) ease-in-out var(--t-scrim) both; }
  .in-prompt { animation: in-fade .9s ease-in-out var(--t-prompt) both; }
  .in-prompt i { animation: none; transform: none; }
  #app > .screen-enter.is-after-title { animation-name: in-fade; }
}

/* ---------- the hand-off ---------- */
/* the title appears at once (its first frame is the splash's) and leaves into the ink; the door or the prologue then
   arrives out of it, a beat later (src/screens/intro.js marks it), as a scene follows a title */
#app > .screen[data-screen="intro"].sh-leave { animation-duration: .4s; animation-delay: 0s; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
#app > .screen-enter.is-after-title { animation: in-after .9s cubic-bezier(.3, 0, .2, 1) .22s both; }
@keyframes in-after { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
/* Home (src/screens/home.js) stands where the title stands: its first entrance (the art arriving, the title lighting)
   has just been played by the title, so Home arrives around it, the art and the title already in place, and the title
   stays beneath until Home is in (html.is-titled: set by the title as it hands off, kept only when Home is next) */
.is-titled body[data-screen="home"] #app > .screen[data-screen="intro"].sh-leave { animation: none; }
.is-titled #app > .screen-enter:has(> .home.is-first) { animation-name: in-arrive; }
@keyframes in-arrive { from { opacity: 0; } to { opacity: 1; } }
.is-titled .home.is-first .home-art-wrap { animation: none; }
.is-titled .home.is-first .home-art { opacity: 1; transition: none; }
.is-titled .home.is-first .home-title > *,
.is-titled .home.is-first .home-title :is(.wm-dim, .wm-lit, .wm-lit > span, .wm-light),
.is-titled .home.is-first .home-title .wm-light::before,
.is-titled .home.is-first .home-title .wm-light::after { animation-delay: -12s; }

/* invite.css */
/* The invite screen (src/screens/invite.js), the app's door in a closed beta: the consent screen's room (consent.css:
   the key art far behind, the hero, the gold action) with one field of night glass to paste the invite into. */
/* the keyboard's room (invite.js measures it): the field and the gold action ride up above the keys */
.iv { padding-bottom: var(--iv-keys, 0px); transition: padding-bottom .28s var(--ease-out); }
.iv-inner { justify-content: center; gap: 26px; }
/* the first thing a new phone sees: the key art nearer than on the consent screen, the seam glowing through the dark */
.iv .cs-art { filter: blur(4px) saturate(1.1); }
.iv .cs-art.is-in { opacity: .74; }
.iv .cs-shade { background: linear-gradient(180deg, rgba(10, 13, 24, .3) 0%, rgba(10, 13, 24, .5) 26%, rgba(10, 13, 24, .86) 50%, rgba(10, 13, 24, .97) 72%), radial-gradient(ellipse 70% 40% at 50% 22%, rgba(15, 45, 49, .35), rgba(15, 45, 49, 0) 70%); }
.iv-glyph { transition: scale .9s var(--ease-spring); }

.iv-form { display: flex; flex-direction: column; gap: 8px; margin: 0; animation: sh-rise .9s var(--ease-spring) .38s backwards; }
.iv-label { padding: 0 6px; font: 600 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.iv-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(24, 29, 62, .78), rgba(16, 20, 44, .86)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22), 0 18px 44px rgba(0, 0, 0, .34); transition: box-shadow .3s var(--ease-out); }
.iv-field:focus-within { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .7), 0 0 0 4px rgba(233, 196, 106, .14), 0 18px 44px rgba(0, 0, 0, .34); }
/* typing needs selection back (the page turns it off for the game) and 16px, so iOS never zooms in */
.iv-input { flex: 1 1 auto; min-width: 0; height: 46px; margin: 0; padding: 0; border: 0; outline: none; background: none; color: var(--parchment); font: 500 16px/1.2 var(--sans); caret-color: var(--gold); -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none; }
.iv-input::placeholder { color: rgba(243, 235, 221, .38); }
.iv-paste { flex: none; min-width: 64px; height: 40px; margin: 0; padding: 0 14px; border: 0; border-radius: 13px; background: rgba(233, 196, 106, .12); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .4); color: var(--gold-hi); font: 600 14px var(--sans); cursor: pointer; transition: transform .25s var(--ease-out), background .25s; }
.iv-paste:active { transform: scale(.95); background: rgba(233, 196, 106, .2); }
.iv-note { min-height: 41px; margin: 2px 0 0; padding: 0 6px; font-size: 14px; line-height: 1.45; color: var(--ember); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s var(--ease-out); }
.iv.has-note .iv-note { opacity: 1; transform: none; }
.iv.is-refused .iv-field { animation: iv-nudge .42s var(--ease-out); box-shadow: inset 0 0 0 1px rgba(255, 138, 91, .65), 0 18px 44px rgba(0, 0, 0, .34); }
@keyframes iv-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }

.iv-go[aria-busy="true"] { filter: saturate(.75) brightness(.95); pointer-events: none; }
.iv-get { align-self: center; color: rgba(243, 235, 221, .64); font-weight: 500; }
.iv-get-link { color: var(--parchment); text-decoration: underline; text-decoration-color: rgba(233, 196, 106, .6); text-underline-offset: 3px; }

/* let in: the seam flares and the room warms before the first screen arrives */
.iv.is-open .iv-glyph { scale: 1 1.5; }
.iv.is-open .iv-field { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .85), 0 0 46px rgba(233, 196, 106, .32); }
.iv.is-open .cs-art.is-in { opacity: .9; transition-duration: .9s; }

@media (max-height: 700px) {
  .iv-inner { gap: 16px; }
  .iv .cs-glyph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iv.is-refused .iv-field { animation: none; }
  .iv-glyph { transition: none; }
}

/* levelmenu.css */
/* The ⋯ menu on a level that isn't yours (src/ui/levelmenu.js). */
.lm-title { font-size: 26px; line-height: 1.12; text-wrap: balance; }
.lm .sheet-row-icon { color: rgba(243, 235, 221, .82); }
.lm-cancel { width: 100%; margin-top: 2px; color: rgba(243, 235, 221, .78); }
.lm-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 4px; text-align: center; }
.lm-confirm .btn { width: 100%; max-width: 320px; }
.lm-mark { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 32px; color: var(--parchment); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .22); background: radial-gradient(circle at 50% 40%, rgba(243, 235, 221, .08), rgba(243, 235, 221, 0) 70%); }
.lm-mark.is-done { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5), 0 0 26px rgba(233, 196, 106, .2); background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .16), rgba(233, 196, 106, 0) 70%); animation: lm-done .7s var(--ease-spring) backwards; }
@keyframes lm-done { from { transform: scale(.6); opacity: 0; } }
.lm-body { margin: 0 0 6px; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.lm-thanks { padding: 30px 8px 24px; }
.lm-block { border-color: rgba(255, 138, 91, .7); color: #FFC2A8; }

/* paywall.css */
/* The paywall (src/screens/paywall.js): the key art far above, the Cartographer's supplies laid out like rolls of film
   on a shelf (sprocket holes, gold numerals), the Pass in aether, and one gold action held at the bottom. */
.pw { background: var(--ink); color: var(--parchment); }

/* the art: a window onto Elsewhere at the top, fading into the night */
.pw-art-wrap { position: absolute; left: 0; right: 0; top: 0; height: 62%; overflow: hidden; pointer-events: none; }
.pw-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 50% 40%; }
.pw-art.is-in { opacity: .9; animation: pw-drift 34s ease-in-out infinite alternate; }
@keyframes pw-drift { from { transform: scale(1.04); } to { transform: scale(1.1) translate3d(-1%, -1.2%, 0); } }
.pw-art-fade { position: absolute; left: 0; right: 0; top: 0; height: 62%; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 24, .74) 0%, rgba(10, 13, 24, .36) 22%, rgba(10, 13, 24, .55) 48%, rgba(10, 13, 24, .94) 80%, #0A0D18 100%); }
.pw-motes { position: absolute; inset: 0; pointer-events: none; }

.pw-top { position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(14px + var(--safe-top)); display: flex; justify-content: space-between; align-items: center; animation: sh-drop .7s var(--ease-spring) .05s backwards; }
.pw-restore { min-height: 44px; padding: 0 14px; border-radius: 22px; font-size: 14px; font-weight: 600; color: rgba(243, 235, 221, .86); background: rgba(5, 7, 14, .45); transition: transform .2s var(--ease-out), opacity .2s; }
.pw-restore:active { transform: scale(.96); }
.pw-restore[aria-busy="true"] { opacity: .6; }

.pw-scroll { position: absolute; inset: 0; z-index: 2; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(68px + var(--safe-top)) 0 calc(150px + var(--safe-bottom)); box-sizing: border-box;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(58px + var(--safe-top)), #000 calc(92px + var(--safe-top))); mask-image: linear-gradient(180deg, transparent 0, transparent calc(58px + var(--safe-top)), #000 calc(92px + var(--safe-top))); }

/* what film is */
.pw-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(18px, 9vh, 96px) 30px 0; text-align: center; }
.pw-glyph { margin-bottom: 6px; animation: sh-fade 1s var(--ease-out) .1s backwards, sh-breathe 5.4s ease-in-out 1.1s infinite; }
.pw-eyebrow { animation: sh-rise .8s var(--ease-spring) .14s backwards; }
.pw[data-reason="film"] .pw-eyebrow { color: #FFC2A8; }
.pw-title { margin: 0; font: 380 34px/1.06 var(--serif); text-wrap: balance; text-shadow: 0 2px 24px rgba(10, 13, 24, .6); animation: sh-rise .8s var(--ease-spring) .2s backwards; }
.pw-lead { margin: 2px 0 0; max-width: 300px; font-size: 17px; color: rgba(243, 235, 221, .86); animation: sh-rise .8s var(--ease-spring) .26s backwards; }
.pw-wallet { min-height: 20px; margin: 4px 0 0; max-width: 320px; font-size: 14px; line-height: 1.45; color: rgba(243, 235, 221, .68); transition: opacity .4s; }
.pw-wallet b { font-weight: 650; color: var(--parchment); }
.pw-wallet:empty { opacity: 0; }

/* the shelf */
.pw-options { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding: 0 20px; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring); }
.pw.is-loaded .pw-options { opacity: 1; transform: none; }
.pw-opt { position: relative; box-sizing: border-box; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 20px; font: inherit; color: var(--parchment); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(180deg, rgba(26, 31, 64, .82), rgba(17, 21, 44, .9)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2), 0 16px 34px rgba(0, 0, 0, .34);
  transition: transform .25s var(--ease-out), box-shadow .35s var(--ease-out), background .35s; }
.pw-opt:active { transform: scale(.975); }
.pw-opt[aria-checked="true"] { background: radial-gradient(120% 90% at 50% 0%, rgba(233, 196, 106, .17), rgba(233, 196, 106, 0) 62%), linear-gradient(180deg, rgba(30, 35, 70, .95), rgba(19, 23, 48, .96)); box-shadow: inset 0 0 0 1.5px #E9C46A, 0 0 0 4px rgba(233, 196, 106, .1), 0 18px 40px rgba(0, 0, 0, .42), 0 0 36px rgba(233, 196, 106, .22); }
.pw-opt:focus-visible { outline: 2px solid var(--aether); outline-offset: 3px; }
.pw-opt-name { display: block; font: 400 20px/1.15 var(--serif); }
.pw-opt-line { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(243, 235, 221, .66); }
.pw-badge { display: inline-block; margin-bottom: 5px; font: 650 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--aether); }
.pw-price { font: 650 16px/1 var(--sans); color: var(--gold-hi); white-space: nowrap; }
.pw-unit { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 235, 221, .6); }

/* the Starter Kit: a foil edge and a gold coin */
.pw-starter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px 16px 16px; overflow: hidden; }
.pw-starter::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; transition: opacity .35s; }
.pw-starter[aria-checked="true"]::before { opacity: 1; }
.pw-starter-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 241, 201, .12) 45%, rgba(166, 244, 230, .08) 52%, rgba(255, 255, 255, 0) 64%); background-size: 280% 100%; animation: pw-sheen 6s ease-in-out infinite; }
@keyframes pw-sheen { 0%, 20% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
.pw-starter-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 27px; color: #2A1E08; background: radial-gradient(circle at 35% 30%, #FFF6DA 0%, #F7E2A6 22%, #E9C46A 52%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 4px rgba(90, 60, 15, .45), 0 6px 18px rgba(233, 196, 106, .32); }
.pw-starter-text { min-width: 0; }
.pw-starter-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pw-starter-n { font: 380 30px/1 var(--serif); background: linear-gradient(180deg, #FFF1C9 0%, #E9C46A 55%, #A97A35 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-starter-side .pw-unit { margin-top: -2px; }
.pw-starter-side .pw-price { margin-top: 6px; }

/* the four rolls: frames of film */
.pw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pw-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 8px 22px; text-align: center; }
.pw-holes { position: absolute; left: 16px; right: 16px; top: 9px; height: 5px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(243, 235, 221, .12) 0 7px, rgba(243, 235, 221, 0) 7px 13px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); transition: background .35s; }
.pw-holes.is-low { top: auto; bottom: 9px; }
.pw-pack[aria-checked="true"] .pw-holes { background: repeating-linear-gradient(90deg, rgba(233, 196, 106, .32) 0 7px, rgba(233, 196, 106, 0) 7px 13px); }
.pw-pack-n { font: 380 42px/1 var(--serif); letter-spacing: -.01em; background: linear-gradient(180deg, #FFF1C9 0%, #E9C46A 55%, #A97A35 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(233, 196, 106, .18)); }
.pw-pack .pw-unit { margin-bottom: 8px; }
.pw-pack .pw-opt-name { font: 600 14px/1.2 var(--sans); }
.pw-pack-foot { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 8px; }
.pw-each { font-size: 11px; color: rgba(243, 235, 221, .5); font-variant-numeric: tabular-nums; }
.pw-pack-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 10px 4px; border-radius: 10px; white-space: nowrap; color: #1A1305; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 50%, #C9973F 100%); box-shadow: 0 4px 12px rgba(233, 196, 106, .35); }
.pw-pack.is-featured { overflow: visible; }

/* the Cartographer's Pass, in aether */
.pw-pass { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px 16px 16px;
  background: radial-gradient(120% 140% at 0% 50%, rgba(166, 244, 230, .12), rgba(166, 244, 230, 0) 60%), linear-gradient(180deg, rgba(15, 45, 49, .78), rgba(12, 28, 38, .9)); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .28), 0 16px 34px rgba(0, 0, 0, .34); }
.pw-pass[aria-checked="true"] { background: radial-gradient(120% 140% at 0% 50%, rgba(166, 244, 230, .2), rgba(166, 244, 230, 0) 62%), linear-gradient(180deg, rgba(17, 52, 56, .95), rgba(12, 30, 40, .96)); box-shadow: inset 0 0 0 1.5px #A6F4E6, 0 0 0 4px rgba(166, 244, 230, .1), 0 18px 40px rgba(0, 0, 0, .42), 0 0 36px rgba(166, 244, 230, .2); }
.pw-pass-mark { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 27px; color: var(--aether); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .5), 0 0 24px rgba(166, 244, 230, .2); background: radial-gradient(circle at 50% 42%, rgba(166, 244, 230, .22), rgba(166, 244, 230, 0) 70%); }
.pw-pass-mark svg { animation: pw-turn 40s linear infinite; }
@keyframes pw-turn { to { transform: rotate(360deg); } }
.pw-pass-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pw-pass .pw-price { color: var(--aether); }
.pw-period { font-size: 11px; color: rgba(243, 235, 221, .55); }
.pw-pass.is-owned { cursor: default; }
.pw-pass.is-owned:active { transform: none; }
.pw-owned { display: flex; align-items: center; gap: 4px; font: 650 13px var(--sans); color: var(--aether); }

/* the small print */
.pw-fine { margin: 22px 0 0; padding: 0 30px; font-size: 12px; line-height: 1.55; color: rgba(243, 235, 221, .5); text-align: center; }
.pw-legal { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: rgba(243, 235, 221, .4); }
.pw-legal a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(243, 235, 221, .78); text-decoration: underline; text-decoration-color: rgba(233, 196, 106, .5); text-underline-offset: 3px; }

/* the one action */
.pw-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 34px 24px calc(14px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(10, 13, 24, 0) 0%, rgba(10, 13, 24, .9) 34%, #0A0D18 62%); pointer-events: none; animation: sh-rise .8s var(--ease-spring) .3s backwards; }
.pw-bar > * { pointer-events: auto; }
.pw-buy { position: relative; overflow: hidden; font-size: 17px; border-radius: 29px; }
.pw-buy[disabled] { opacity: 1; filter: saturate(.25) brightness(.62); }
.pw-buy[aria-busy="true"] { filter: saturate(.8) brightness(.92); }
.pw-buy-label { position: relative; }
.pw-buy-shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: pw-shine 5.2s ease-in-out 1.6s infinite; }
.pw-buy[disabled] .pw-buy-shine, .pw-buy[aria-busy="true"] .pw-buy-shine { display: none; }
@keyframes pw-shine { 0% { left: -40%; } 22%, 100% { left: 130%; } }
.pw-note { margin: 0; font-size: 12px; line-height: 1.4; text-align: center; color: rgba(243, 235, 221, .55); }
.pw.is-buying .pw-opt { pointer-events: none; }
.pw.is-buying .pw-opt:not([aria-checked="true"]) { opacity: .55; }

/* bought: the film arrives */
.pw-done { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 32px calc(24px + var(--safe-bottom)); text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 44%, rgba(42, 38, 44, .6) 0%, rgba(10, 13, 24, .94) 58%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .5s var(--ease-out); }
.pw-done[hidden] { display: none; }
.pw.is-done .pw-done { opacity: 1; }
.pw-done > * { position: relative; }
.pw-done-glow { position: absolute; left: 50%; top: 42%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 196, 106, .34) 0%, rgba(233, 196, 106, .08) 40%, rgba(233, 196, 106, 0) 68%); transform: scale(.4); opacity: 0; transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out); }
.pw.is-done .pw-done-glow { transform: none; opacity: 1; }
.pw-done-rays { position: absolute; left: 50%; top: 42%; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(247, 226, 166, .08) 0deg 4deg, rgba(247, 226, 166, 0) 4deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%); animation: pw-turn 60s linear infinite; opacity: 0; transition: opacity 1.6s var(--ease-out) .2s; }
.pw.is-done .pw-done-rays { opacity: 1; }
.pw-done > :nth-child(n+3) { opacity: 0; transform: translateY(14px); }
.pw.is-done .pw-done > :nth-child(n+3) { animation: pw-done-in .8s var(--ease-spring) forwards; }
.pw.is-done .pw-done > :nth-child(4) { animation-delay: .1s; }
.pw.is-done .pw-done > :nth-child(5) { animation-delay: .18s; }
.pw.is-done .pw-done > :nth-child(6) { animation-delay: .32s; }
.pw.is-done .pw-done > :nth-child(7) { animation-delay: .42s; }
.pw.is-done .pw-done > :nth-child(8) { animation-delay: .48s; }
@keyframes pw-done-in { to { opacity: 1; transform: none; } }
.pw-done-glyph { margin-bottom: 2px; }
.pw-done-n { display: flex; align-items: center; justify-content: center; min-height: 96px; font: 380 92px/1 var(--serif); letter-spacing: -.02em; color: var(--gold-hi); background: linear-gradient(180deg, #FFF6DA 0%, #F7E2A6 30%, #E9C46A 62%, #A97A35 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 26px rgba(233, 196, 106, .45)); }
.pw-done-n svg { color: var(--gold-hi); -webkit-text-fill-color: initial; }
.pw-done-line { margin: 0 0 10px; max-width: 280px; font-size: 19px; color: rgba(243, 235, 221, .9); }
.pw-done .btn { width: 100%; max-width: 300px; }
.pw-done-back { margin-top: -4px; }

@media (max-height: 740px) {
  .pw-title { font-size: 30px; }
  .pw-lead { font-size: 16px; }
  .pw-glyph { display: none; }
  .pw-options { margin-top: 18px; }
  .pw-pack { padding: 22px 8px 18px; }
  .pw-pack-n { font-size: 38px; }
}
@media (max-width: 380px) {
  .pw-pass, .pw-starter { gap: 12px; padding-left: 14px; padding-right: 16px; }
  .pw-pass-mark, .pw-starter-mark { width: 48px; height: 48px; }
  .pw-pass .pw-opt-name, .pw-starter .pw-opt-name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-art.is-in, .pw-starter-sheen, .pw-buy-shine, .pw-pass-mark svg, .pw-done-rays, .pw-glyph { animation: none; }
}

/* play.css */
/* Play: find the leaks. Ported from design/board/Play.dc.html (390×844, where the photo box is exactly 390×585 at
   y 84); adapts from 375×667 to 430×932 with safe areas. Everything is scoped under .pl (the screen's section).
   Realms (src/css/realms.css): what comes from Elsewhere (the find's burst and sparks, the lantern, the flight home)
   takes the realm's accent, and the seam the level opens from takes its glow; the gold of the ring, the timer, the
   tray and the stars stays the brand's. */

.pl { display: flex; flex-direction: column; touch-action: none; }

/* ── HUD: place, "Seam n · Chapter I", the timer ring ── */
.pl-hud { position: relative; z-index: 3; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; margin: calc(max(var(--safe-top), 10px) + 6px) 20px 12px; padding-left: 44px; }

/* ── the way out: a close at the top left, beside the HUD's titles and over the seal puzzle's layer (.pz, z-index 12);
   never over a start veil (the tutorial's, a story seam's), which has its own Skip / Not now ── */
.pl-close { position: absolute; left: 12px; top: calc(max(var(--safe-top), 10px) + 12px); z-index: 13; color: rgba(243, 235, 221, .9); background: rgba(5, 7, 14, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .12); animation: pl-fade .5s ease .25s backwards; }
.pl-close::after { content: ''; position: absolute; inset: -4px; }
.pl-close:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 2px; }
.pl.is-veiled .pl-close { display: none; }
/* the seal puzzle's words keep clear of it, centred as before */
.pl .pz-head { padding-left: 62px; padding-right: 62px; }
.pl-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-eyebrow { display: block; min-height: 13.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(3px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pl-eyebrow.is-in { opacity: 1; transform: none; }
.pl-place { display: block; min-height: 22px; padding-bottom: 5px; margin-bottom: -5px; font: italic 300 20px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: pl-rise .6s var(--ease-out) both; } /* the padding keeps descenders out of the ellipsis clip */
.pl-place:empty { animation: none; }
.pl-timer { position: relative; flex: none; width: 52px; height: 52px; }
.pl-timer svg { display: block; overflow: visible; transition: filter .6s var(--ease-out); }
.pl-ring { stroke: var(--gold); transition: stroke .5s var(--ease-out), opacity .3s; }
.pl.is-low .pl-ring, .pl.is-hurt .pl-ring { stroke: var(--ember); }
.pl.is-low .pl-timer svg { filter: drop-shadow(0 0 5px rgba(255, 138, 91, .5)); }
.pl-time { position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 650; }

/* ── the photo: the largest 2:3 box between HUD and tray (sized by play.js) ── */
.pl-mid { position: relative; flex: 1 1 auto; min-height: 0; }
.pl-ambient { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; opacity: 0; pointer-events: none; filter: blur(30px) saturate(1.2) brightness(.46); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); transition: opacity 1.2s var(--ease-out); }
.pl.is-framed.is-ready .pl-ambient { opacity: .5; }
.pl:not(.is-framed) .pl-ambient, .pl.is-settled .pl-loading { display: none; }
.pl-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.pl.is-framed .pl-stage { border-radius: 16px; box-shadow: 0 0 0 1px var(--gold-hair), 0 22px 54px rgba(0, 0, 0, .55); }
.pl-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.pl-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; }
.pl.is-ready .pl-img { opacity: 1; }
.pl-heals { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-heal { position: absolute; overflow: hidden; border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); animation: pl-fade .6s .12s var(--ease-out) both; }
.pl-heal img { position: absolute; max-width: none; pointer-events: none; }
.pl-heal.is-leaving { animation: pl-fade-out .36s ease both; }
.pl-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }

/* the seam opens onto the level: the photo widens out of a line of gold */
.pl.is-opening .pl-world { animation: pl-open .9s var(--ease-out) both; }
@keyframes pl-open { from { -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
.pl-open { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, var(--realm-glow-hi), var(--realm-glow) 50%, var(--realm-glow-hi)); box-shadow: 0 0 6px 1px rgba(var(--realm-glow-mid-rgb), .95), 0 0 24px 4px rgba(var(--realm-glow-rgb), .6); }
.pl.is-opening .pl-open-l { animation: pl-edge-l .9s var(--ease-out) both; }
.pl.is-opening .pl-open-r { animation: pl-edge-r .9s var(--ease-out) both; }
@keyframes pl-edge-l { 0% { left: 50%; opacity: 1; } 70% { opacity: .85; } 100% { left: 0; opacity: 0; } }
@keyframes pl-edge-r { 0% { left: 50%; opacity: 1; } 70% { opacity: .85; } 100% { left: 100%; opacity: 0; } }

/* loading: a breathing seam of light with a glint running down it (never a grey box) */
.pl-loading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse 60% 46% at 50% 50%, rgba(15, 45, 49, .55), rgba(10, 13, 24, 0) 72%); transition: opacity .7s var(--ease-out); }
.pl.is-ready .pl-loading, .pl.is-failed .pl-loading { opacity: 0; }
.pl-load-glow { position: absolute; left: 50%; top: 15%; width: 140px; height: 70%; margin-left: -70px; background: radial-gradient(closest-side, rgba(var(--realm-glow-rgb), .2), rgba(var(--realm-glow-rgb), 0)); animation: pl-breathe 2.4s ease-in-out infinite; }
.pl-load-line { position: absolute; left: 50%; top: 14%; height: 72%; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, rgba(var(--realm-glow-mid-rgb), 0), var(--realm-glow-hi) 22%, var(--realm-glow) 50%, var(--realm-glow-hi) 78%, rgba(var(--realm-glow-mid-rgb), 0)); box-shadow: 0 0 6px 1px rgba(var(--realm-glow-mid-rgb), .85), 0 0 22px 4px rgba(var(--realm-glow-rgb), .45); animation: pl-breathe 2.4s ease-in-out infinite; }
.pl.is-waiting .pl-load-line { top: 10%; height: 60%; }
.pl-loading .mote { background: rgb(var(--realm-glow-mid-rgb)); box-shadow: 0 0 8px 2px rgba(var(--realm-glow-mid-rgb), .65); }
.pl.is-waiting .pl-load-glow { top: 8%; height: 64%; }
.pl-load-line::after { content: ''; position: absolute; left: -3px; top: 0; width: 8px; height: 100%; background: linear-gradient(180deg, rgba(255, 248, 230, 0) 0%, rgba(255, 248, 230, 0) 42%, #FFF8E6 50%, rgba(255, 248, 230, 0) 58%, rgba(255, 248, 230, 0) 100%); background-size: 100% 300%; filter: blur(1.5px); animation: pl-glint 1.8s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pl-breathe { 0%, 100% { opacity: .72; transform: scaleY(.94); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes pl-glint { from { background-position: 0 100%; } to { background-position: 0 0; } }

/* ── marks pinned to the photo: they follow zoom and pan; --z grows them a little when zoomed ── */
.pl-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; --z: 1; }
.pl-mark.is-leaving { animation: pl-fade-out .3s ease both; }
.pl-found-ring { position: absolute; left: calc(-24px * var(--z)); top: calc(-24px * var(--z)); width: calc(48px * var(--z)); height: calc(48px * var(--z)); box-sizing: border-box; border-radius: 50%; border: 2px solid #F0CF85; box-shadow: 0 0 0 1px rgba(10, 13, 24, .35), 0 0 18px 4px rgba(233, 196, 106, .6), inset 0 0 14px rgba(233, 196, 106, .4); animation: pl-pop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.pl-burst { position: absolute; left: calc(-42px * var(--z)); top: calc(-42px * var(--z)); width: calc(84px * var(--z)); height: calc(84px * var(--z)); box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(var(--realm-accent-rgb), .95); animation: pl-burst .9s ease-out both; }
.pl-bloom { position: absolute; left: calc(-46px * var(--z)); top: calc(-46px * var(--z)); width: calc(92px * var(--z)); height: calc(92px * var(--z)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .62) 0%, rgba(var(--realm-accent-rgb), .58) 12%, rgba(var(--realm-accent-rgb), .45) 26%, rgba(var(--realm-accent-rgb), 0) 68%); animation: pl-bloom .85s var(--ease-out) both; }
.pl-spark { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--realm-accent); box-shadow: 0 0 6px 2px rgba(var(--realm-accent-rgb), .75); opacity: 0; animation: pl-spark .8s var(--ease-out) var(--t, 0s) both; }
.pl-spark.is-gold { background: #FFE3A3; box-shadow: 0 0 6px 2px rgba(255, 214, 140, .8); }
.pl-hint-mark { animation: pl-fade .35s var(--ease-out) both; }
.pl-hint { position: absolute; left: calc(-40px * var(--z)); top: calc(-40px * var(--z)); width: calc(80px * var(--z)); height: calc(80px * var(--z)); border-radius: 50%; background: radial-gradient(circle, rgba(var(--realm-accent-rgb), .4) 0%, rgba(var(--realm-accent-rgb), 0) 70%); box-shadow: 0 0 0 1px rgba(var(--realm-accent-rgb), .5); animation: pl-hint 1.2s ease-in-out infinite; }
.pl-miss { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 138, 91, .9); display: flex; align-items: center; justify-content: center; animation: pl-miss .9s ease-out forwards; }
.pl-miss b { font-size: 12px; font-weight: 650; color: var(--ember); text-shadow: 0 1px 6px rgba(10, 13, 24, .55); }
.pl-combo { position: absolute; left: 0; right: 0; top: 22px; z-index: 4; display: flex; justify-content: center; font: italic 400 28px/1.2 var(--serif); color: var(--gold-hi); text-shadow: 0 0 18px rgba(233, 196, 106, .9), 0 2px 10px rgba(10, 13, 24, .8); pointer-events: none; animation: pl-combo 1.3s cubic-bezier(.2, 1.4, .4, 1) both; }

@keyframes pl-pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pl-burst { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes pl-bloom { 0% { transform: scale(.35); opacity: 0; } 22% { opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes pl-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(5px) scale(1.25); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.3); } }
@keyframes pl-hint { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes pl-miss { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes pl-combo { 0% { transform: translateY(10px) scale(.8); opacity: 0; } 25% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pl-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── the flight home: the painted thing, lifted out of the photo, glowing with aether ── */
.pl-flights { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: hidden; }
.pl-fly { position: absolute; will-change: transform, opacity; filter: drop-shadow(0 0 9px rgba(var(--realm-accent-rgb), .75)) drop-shadow(0 8px 14px rgba(10, 13, 24, .45)); }
.pl-trail { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--realm-glow-hi); box-shadow: 0 0 10px 3px rgba(var(--realm-accent-rgb), .6); animation: pl-trail .6s ease-out both; }
@keyframes pl-trail { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(.2); } }

/* ── veils: "The seam is quiet." / "The seam closed" ── */
.pl-veils { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.pl-veil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; animation: pl-fade .5s ease both; }
.pl-veil.is-leaving { animation: pl-fade-out .3s ease both; pointer-events: none; }
.pl-veil > * { animation: pl-rise .6s var(--ease-out) backwards; }
.pl-veil > :nth-child(2) { animation-delay: .06s; }
.pl-veil > :nth-child(3) { animation-delay: .12s; }
.pl-veil > :nth-child(4) { animation-delay: .18s; }
.pl-veil > :nth-child(5) { animation-delay: .24s; }
.pl-veil-eyebrow.is-ember { color: var(--ember); }
.pl-veil-title { margin: 0; font: 380 34px/1.1 var(--serif); text-wrap: balance; }
.pl-veil-title.is-small { font-size: 30px; line-height: 1.15; }
.pl-veil-sub { font-size: 14px; color: rgba(243, 235, 221, .78); }
.pl-veil-stars { display: flex; gap: 6px; margin: -2px 0 -2px; }
.pl-star { filter: drop-shadow(0 0 6px rgba(233, 196, 106, .75)); animation: pl-pop .55s cubic-bezier(.2, 1.6, .4, 1) calc(.3s + var(--i) * .14s) both; }
.pl-star.is-empty { filter: none; }
.pl-veil .pl-veil-btn { width: 220px; height: 54px; margin-top: 8px; border-radius: 27px; }
.pl-veil .pl-veil-leave { margin-top: -6px; }

/* ── notes over the photo: still opening, or couldn't open ── */
.pl-note { position: absolute; left: 28px; right: 28px; top: 78%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; animation: pl-rise .6s var(--ease-out) both; }
.pl-note[hidden] { display: none; }
.pl-note.is-fail { top: 50%; transform: translateY(-50%); animation: pl-fade .5s ease both; }
.pl-note-text { margin: 0; font: italic 300 20px/1.38 var(--serif); color: rgba(243, 235, 221, .86); }
.pl-note-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pl-note .btn-ghost { min-width: 200px; }
.pl.is-failed .pl-timer, .pl.is-failed .pl-slots, .pl.is-failed .pl-tray-foot { opacity: .3; transition: opacity .5s var(--ease-out); }

/* ── the tray: six slots, the count, the lantern ── */
.pl-tray { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 16px max(15px, var(--safe-bottom)); }
.pl-tray-head { display: flex; justify-content: space-between; align-items: baseline; height: 21px; padding: 0 4px; }
.pl-tray-title { font: italic 300 17px/21px var(--serif); white-space: nowrap; }
.pl-count { display: inline-block; font-size: 14px; font-weight: 650; line-height: 21px; color: var(--gold); }
.pl-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pl-slot { position: relative; height: 55px; box-sizing: border-box; border-radius: 14px; background: rgba(243, 235, 221, .04); border: 1px solid rgba(243, 235, 221, .12); transition: background .35s, border-color .35s, box-shadow .35s; }
.pl-slot.is-found { background: radial-gradient(circle at 50% 40%, rgba(233, 196, 106, .24), rgba(233, 196, 106, .04) 70%); border-color: rgba(233, 196, 106, .85); box-shadow: 0 0 16px rgba(233, 196, 106, .32); }
.pl-slot img, .pl-nodim { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.pl-slot img { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.pl-nodim { margin: -11px 0 0 -11px; }
.pl-noicon { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; opacity: 0; filter: drop-shadow(0 0 6px rgba(233, 196, 106, .7)); pointer-events: none; }
.pl-slot.is-found .pl-noicon { opacity: 1; }
.pl-dim, .pl-nodim { opacity: 0; transition: opacity .45s var(--ease-out); }
.pl.is-ready .pl-dim, .pl.is-ready .pl-nodim { opacity: 1; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.pl .pl-slot.is-found .pl-dim, .pl .pl-slot.is-found .pl-nodim { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
.pl-icon { opacity: 0; }
.pl-slot.is-found .pl-icon { opacity: 1; }
.pl-slot-flash { position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 241, 201, .9), 0 0 22px 6px rgba(233, 196, 106, .55); animation: pl-flash .7s var(--ease-out) both; }
@keyframes pl-flash { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.pl-tray.is-complete .pl-slot { animation: pl-slot-glow 1.1s var(--ease-out) calc(var(--i, 0) * 85ms + .15s) backwards; }
@keyframes pl-slot-glow { 0% { box-shadow: 0 0 16px rgba(233, 196, 106, .32); transform: none; } 38% { box-shadow: 0 0 0 1px rgba(255, 241, 201, .9), 0 0 28px 8px rgba(233, 196, 106, .62); transform: translateY(-3px); } 100% { box-shadow: 0 0 16px rgba(233, 196, 106, .32); transform: none; } }
.pl-tray-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px; }
.pl-lantern { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px 0 12px; border: 1px solid rgba(var(--realm-accent-rgb), .45); border-radius: 22px; background: rgba(var(--realm-accent-rgb), .06); color: var(--parchment); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-out), background .3s, box-shadow .3s, opacity .3s; }
.pl-lantern:active { transform: scale(.97); }
.pl-lantern svg { flex: none; color: var(--realm-accent); }
.pl-lantern.is-lit { background: rgba(var(--realm-accent-rgb), .14); box-shadow: 0 0 18px rgba(var(--realm-accent-rgb), .35); }
.pl-lantern.is-out { opacity: .55; }
.pl-lantern:focus-visible, .pl-veil .btn:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }
.pl-cost { font-size: 12px; color: rgba(243, 235, 221, .6); text-align: right; }

.pl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* short screens (iPhone SE and small browser windows): a little less chrome, so the photo stays as large as it can */
@media (max-height: 720px) {
  .pl-hud { margin-bottom: 8px; }
  .pl-tray { gap: 9px; margin-top: 12px; }
  .pl-slot { height: 48px; }
  .pl-slot img { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-load-line, .pl-load-glow, .pl-load-line::after, .pl-hint, .pl-loading .mote { animation: none; }
  .pl.is-opening .pl-world, .pl.is-opening .pl-open-l, .pl.is-opening .pl-open-r, .pl-tray.is-complete .pl-slot { animation: none; }
}

/* ── production v1: the ⋯ menu, the tutorial's opening veil, no clock in the tutorial ── */
.pl-more { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -10px 0 auto; padding: 0; border: 0; border-radius: 22px; background: none; color: rgba(243, 235, 221, .78); cursor: pointer; transition: transform .2s var(--ease-out), background .25s; animation: pl-fade .5s ease .3s backwards; }
.pl-more[hidden] { display: none; }
.pl-more:active { transform: scale(.92); background: rgba(243, 235, 221, .08); }
.pl-more:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 2px; }
.pl.is-tutorial .pl-timer { visibility: hidden; }

.pl-intro { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; padding: calc(24px + var(--safe-top)) 34px calc(28px + var(--safe-bottom)); text-align: center; overflow: hidden;
  background: radial-gradient(ellipse 85% 60% at 50% 46%, rgba(15, 45, 49, .5) 0%, rgba(10, 13, 24, .86) 58%, rgba(10, 13, 24, .96) 100%); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); opacity: 0; transition: opacity .7s var(--ease-out); }
.pl-intro.is-on { opacity: 1; }
.pl-intro.is-leaving { opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.pl-intro > :not(.pl-intro-glow):not(.pl-intro-skip) { position: relative; opacity: 0; transform: translateY(12px); }
.pl-intro.is-on > :not(.pl-intro-glow):not(.pl-intro-skip) { animation: pl-intro-in 1s var(--ease-out) forwards; }
.pl-intro.is-on > :nth-child(4) { animation-delay: .2s; }
.pl-intro.is-on > :nth-child(5) { animation-delay: .9s; }
.pl-intro.is-on > :nth-child(6) { animation-delay: 1.5s; }
.pl-intro.is-on > :nth-child(7) { animation-delay: 2s; }
.pl-intro-skip { position: absolute; top: calc(10px + var(--safe-top)); right: 10px; color: rgba(243, 235, 221, .6); font-weight: 600; opacity: 0; transition: opacity .6s var(--ease-out) 2.6s; }
.pl-intro.is-on .pl-intro-skip { opacity: 1; }
@keyframes pl-intro-in { to { opacity: 1; transform: none; } }
.pl-intro.is-on .pl-intro-mark { animation-name: pl-intro-mark; animation-duration: 1.7s; }
@keyframes pl-intro-mark { from { opacity: 0; letter-spacing: .6em; padding-left: .6em; filter: blur(6px); transform: none; } to { opacity: 1; letter-spacing: .34em; padding-left: .34em; filter: blur(0); transform: none; } }
.pl-intro-glow { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(255, 241, 201, 0), rgba(255, 241, 201, .5) 30%, rgba(233, 196, 106, .55) 70%, rgba(255, 241, 201, 0)); box-shadow: 0 0 18px 4px rgba(233, 196, 106, .25); opacity: .45; }
.pl-intro-glyph { margin-bottom: 4px; }
.pl-intro-mark { margin: 0; font-size: 34px; line-height: 1; white-space: nowrap; }
.pl-intro-line { margin: 4px 0 0; max-width: 290px; font-size: 20px; color: rgba(243, 235, 221, .92); }
.pl-intro-sub { margin: 4px 0 14px; max-width: 290px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pl-intro-go { width: 100%; max-width: 280px; }
@media (max-height: 700px) { .pl-intro { gap: 10px; } .pl-intro-mark { font-size: 30px; } .pl-intro-line { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .pl-intro.is-on > :not(.pl-intro-glow):not(.pl-intro-skip) { animation-duration: .01s; animation-delay: 0s !important; } .pl-intro-skip { transition-delay: 0s; } }

/* prologue.css */
/* The prologue (src/screens/prologue.js; docs/BUILD-1.1-wave2.md O): the Cartographer's opening over painted art the
   game already has, his invitation after the tutorial, and his pages while a first place paints. The house style
   (docs/DESIGN.md): full-bleed paintings breathing slowly, his words in Fraunces italic arriving word by word, one gold
   action, a quiet Skip; reduced motion is respected at the end. */

.pro { background: #05070E; color: var(--parchment); cursor: default; }
.pro-art { position: absolute; inset: 0; overflow: hidden; }
.pro-plate { position: absolute; inset: 0; opacity: 0; transition: opacity 1.7s var(--ease-out); }
.pro-plate.is-in { opacity: 1; }
.pro-plate img { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; object-fit: cover; transform: scale(1.02); transition: transform 16s cubic-bezier(.2, .6, .3, 1); }
.pro-plate.is-in img { transform: scale(1.1); }
/* the map, his: a canvas (the painting and its blank patches spreading) */
.pro-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pro-plate.is-map { transition-duration: 1.2s; }
.pro-plate.is-map::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 64% at 50% 36%, rgba(5, 7, 14, 0), rgba(5, 7, 14, .24) 78%); }
/* a room with a seam open onto its Elsewhere: the push goes toward the seam */
.pro-plate.is-seam img { object-position: 52% 50%; transform-origin: 53% 46%; }
.pro-plate.is-seam.is-in img { transform: scale(1.16); }
/* the tutorial's room, dim, the seam down its middle */
.pro-plate.is-room img { filter: brightness(.58) saturate(.92) contrast(1.04); transform-origin: 50% 40%; }
.pro-room-seam { position: absolute; left: 50%; top: 9%; bottom: 34%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(255, 241, 201, 0), rgba(255, 241, 201, .9) 22%, rgba(233, 196, 106, .95) 78%, rgba(255, 241, 201, 0)); box-shadow: 0 0 16px 4px rgba(233, 196, 106, .45), 0 0 50px 10px rgba(233, 196, 106, .18); opacity: 0; transform: scaleY(.2); transition: opacity 1.2s var(--ease-out) .8s, transform 1.6s var(--ease-out) .8s; }
.pro-plate.is-room.is-in .pro-room-seam { opacity: 1; transform: none; animation: pro-seam 4.8s ease-in-out 2.4s infinite; }
.pro-room-glyph { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -7px; }
@keyframes pro-seam { 0%, 100% { box-shadow: 0 0 16px 4px rgba(233, 196, 106, .45), 0 0 50px 10px rgba(233, 196, 106, .18); } 50% { box-shadow: 0 0 22px 6px rgba(255, 214, 140, .6), 0 0 70px 16px rgba(233, 196, 106, .26); } }
.pro .mote { z-index: 1; }
/* the dark that holds his words, and a little at the top for the dots */
.pro-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(5, 7, 14, .97) 0%, rgba(5, 7, 14, .9) 25%, rgba(5, 7, 14, .55) 38%, rgba(5, 7, 14, 0) 52%), linear-gradient(180deg, rgba(5, 7, 14, .5) 0%, rgba(5, 7, 14, 0) 12%); }

/* the top: three dots for the beats, and a quiet way out */
.pro-top { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 8px); z-index: 4; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 8px 0 26px; }
.pro-dots { display: flex; gap: 7px; }
.pro-dots i { display: block; width: 24px; height: 2px; border-radius: 1px; background: rgba(243, 235, 221, .2); transition: background .6s var(--ease-out), box-shadow .6s; }
.pro-dots i.is-on { background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .6); }
.pro-skip { color: rgba(243, 235, 221, .58); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .7s var(--ease-out) 1.4s, color .2s; }
.pro.is-on .pro-skip { opacity: 1; }
.pro-skip:active { color: var(--parchment); }

/* his words */
.pro-words { position: absolute; left: 30px; right: 30px; bottom: calc(var(--safe-bottom) + 138px); z-index: 4; display: flex; flex-direction: column; gap: 12px; }
.pro-eyebrow { text-shadow: 0 0 2px rgba(5, 7, 14, .9), 0 0 10px rgba(5, 7, 14, .8); }
.pro-line { margin: 0; font-size: 25px; line-height: 1.34; color: var(--parchment); text-wrap: pretty; text-shadow: 0 2px 22px rgba(5, 7, 14, .9); }
.pro-word { display: inline-block; opacity: 0; animation: pro-word 1s var(--ease-out) forwards; }
.pro-line.is-all .pro-word { animation-duration: .25s; animation-delay: 0s !important; }
@keyframes pro-word { from { opacity: 0; transform: translateY(5px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
.pro.is-turning .pro-words { animation: pro-turn .9s var(--ease-out) both; }
@keyframes pro-turn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the way on: a gold ring with an arrow, then the gold action */
.pro-act { position: absolute; left: 30px; right: 30px; bottom: calc(var(--safe-bottom) + 44px); z-index: 4; display: flex; justify-content: center; }
.pro-next { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0; padding: 0; border: 1px solid rgba(233, 196, 106, .72); border-radius: 50%; color: var(--gold); background: rgba(10, 13, 24, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 24px rgba(233, 196, 106, .2), inset 0 0 14px rgba(233, 196, 106, .08); cursor: pointer; animation: sh-rise .8s var(--ease-spring) 1.2s backwards; transition: transform .2s var(--ease-out); }
.pro-next:active { transform: scale(.94); }
.pro-next[hidden], .pro-go[hidden] { display: none; }
.pro-go { width: 100%; max-width: 320px; animation: sh-rise .8s var(--ease-spring) .9s backwards; }
.pro-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 14px); z-index: 4; margin: 0; text-align: center; font: 600 10.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 235, 221, .36); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.pro-hint.is-on { opacity: 1; transition-delay: 3.2s; }

/* the invitation: the tutorial's room, a lit place on his map */
.pro-plot { position: absolute; z-index: 1; overflow: hidden; border-radius: 50%; opacity: 0; transform: scale(.55); box-shadow: 0 0 0 1.5px #F0CF85, 0 0 0 3px rgba(10, 13, 24, .55), 0 0 20px 6px rgba(233, 196, 106, .55); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-spring); }
.pro-plot[hidden] { display: none; }
.pro-plot img { width: 100%; height: 100%; object-fit: cover; }
.pro-plot.is-lit { opacity: 1; transform: none; animation: pro-lit 3.6s ease-in-out 1.4s infinite; }
@keyframes pro-lit { 0%, 100% { box-shadow: 0 0 0 1.5px #F0CF85, 0 0 0 3px rgba(10, 13, 24, .55), 0 0 20px 6px rgba(233, 196, 106, .5); } 50% { box-shadow: 0 0 0 1.5px #FFF1C9, 0 0 0 3px rgba(10, 13, 24, .55), 0 0 30px 10px rgba(255, 214, 140, .68); } }
.pro-invite .pro-shade { background: linear-gradient(0deg, rgba(5, 7, 14, .97) 0%, rgba(5, 7, 14, .9) 30%, rgba(5, 7, 14, .4) 54%, rgba(5, 7, 14, 0) 70%), linear-gradient(180deg, rgba(5, 7, 14, .55) 0%, rgba(5, 7, 14, 0) 14%); }
.pro-invite .pro-words { bottom: calc(var(--safe-bottom) + 138px); }

@media (max-height: 740px) {
  .pro-line { font-size: 22px; }
  .pro-words { bottom: calc(var(--safe-bottom) + 122px); }
  .pro-act { bottom: calc(var(--safe-bottom) + 36px); }
  .pro-next { width: 56px; height: 56px; }
}
@media (max-width: 370px) {
  .pro-words, .pro-act { left: 24px; right: 24px; }
  .pro-line { font-size: 22px; }
}

/* ---------- his pages, while a first place paints (inside the seam screen: src/screens/seam.js, unchanged) ---------- */
.opening.has-pages .opening-steps { display: none; }
.opening.has-pages .opening-scrim { height: calc(500px + var(--safe-bottom)); }
.opening.has-pages .opening-panel { gap: 18px; }
.pro-pages { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 25, 54, .6), rgba(10, 13, 24, .6)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2), 0 14px 30px rgba(0, 0, 0, .35); animation: sh-rise .8s var(--ease-spring) .7s backwards; transition: box-shadow .8s var(--ease-out); }
.pro-pages::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, rgba(233, 196, 106, 0), var(--gold) 30%, var(--gold) 70%, rgba(233, 196, 106, 0)); box-shadow: 0 0 8px rgba(233, 196, 106, .5); }
.pro-pages[hidden] { display: none; }
.pro-pages-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px -8px -6px 0; }
.pro-pages-label { min-width: 0; font: 600 10.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-pages-skip { flex: none; min-height: 38px; padding: 0 8px; font-size: 12.5px; color: rgba(243, 235, 221, .55); }
.pro-page-box { display: block; width: 100%; min-height: calc(3 * 1.42 * 16.5px); margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pro-page { margin: 0; font-size: 16.5px; line-height: 1.42; color: rgba(243, 235, 221, .92); text-wrap: pretty; transition: opacity .38s var(--ease-out), filter .38s var(--ease-out), transform .38s var(--ease-out); }
.pro-page.is-out { opacity: 0; filter: blur(3px); transform: translateX(-8px); }
.pro-pages-dots { display: flex; gap: 8px; margin-top: 2px; }
.pro-pages-dots i { display: block; width: 5px; height: 5px; transform: rotate(45deg); border-radius: 1px; background: rgba(233, 196, 106, .26); transition: background .5s, box-shadow .5s; }
.pro-pages-dots i.is-on { background: var(--gold); box-shadow: 0 0 6px rgba(233, 196, 106, .8); }
.pro-pages.is-ready { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45), 0 0 26px rgba(233, 196, 106, .14), 0 14px 30px rgba(0, 0, 0, .35); }
@media (max-height: 740px) {
  .opening.has-pages .opening-panel { gap: 14px; }
  .pro-page { font-size: 15.5px; }
  .pro-page-box { min-height: calc(3 * 1.42 * 15.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pro-plate, .pro-plate img, .pro-room-seam, .pro-plot { transition-duration: .01s !important; transition-delay: 0s !important; }
  .pro-plate.is-in img { transform: scale(1.04); }
  .pro-word { animation-duration: .01s; animation-delay: 0s !important; opacity: 1; }
  .pro.is-turning .pro-words, .pro-next, .pro-go, .pro-pages, .pro-plate.is-room.is-in .pro-room-seam, .pro-plot.is-lit { animation: none; }
  .pro-page { transition: none; }
}

/* push.css */
/* Push notifications (track N, src/push.js): the soft sheet that asks once, after the first sealed place (a little lock
   screen of what the player would hear, then the question and the gold "Let me know"), and Settings' Notifications page
   (src/ui/settings.js): the phone's state, then the five kinds on their switches. */

/* ---------- the soft sheet ---------- */
.ps-sheet .sheet-body { padding: 4px 20px 16px; }
.ps { display: flex; flex-direction: column; align-items: stretch; }

/* what they'd hear: three notifications as their phone would show them, glass over the night */
.ps-preview { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; padding: 14px 12px 18px; border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15, 45, 49, .55) 0%, rgba(15, 45, 49, 0) 70%), linear-gradient(180deg, rgba(10, 13, 24, .2), rgba(10, 13, 24, .55));
  box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .06);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.ps-note { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px 11px; border-radius: 18px; text-align: left;
  background: rgba(243, 235, 221, .075); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .09), 0 10px 26px rgba(0, 0, 0, .28);
  animation: ps-arrive .7s var(--ease-out) backwards; }
.ps-n1 { animation-delay: .18s; }
.ps-n2 { animation-delay: .34s; opacity: .9; }
.ps-n3 { animation-delay: .5s; opacity: .72; transform: scale(.985); }
@keyframes ps-arrive { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
/* the app's own icon, as the phone shows it beside a notification (native/store/app-store-1024.png at 72 px, 1.6 KB) */
.ps-app { flex: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 8px; overflow: hidden;
  background: #0A0D18 url("data:image/jpeg;base64,/9j/2wBDAAQEBAQFBAUGBgUHCAcIBwoKCQkKChALDAsMCxAYDxEPDxEPGBUZFRMVGRUmHhoaHiYsJSMlLDUvLzVDP0NXV3X/2wBDAQQEBAQFBAUGBgUHCAcIBwoKCQkKChALDAsMCxAYDxEPDxEPGBUZFRMVGRUmHhoaHiYsJSMlLDUvLzVDP0NXV3X/wgARCABIAEgDASIAAhEBAxEB/8QAHAAAAgMAAwEAAAAAAAAAAAAAAAUDBgcCBAgB/8QAGwEAAQUBAQAAAAAAAAAAAAAAAwACBAUGAQf/2gAMAwEAAhADEAAAAPC8pPPF8YSb0F6PHdgsUNebYXSy0Z0yUGpe31mpuahZrRn+SsOVlT123oJMk9B4QW4UHIsI310kapewWeXS+Xamj9Bsu1mdueGbVh806s+FzB49tfPxa25x7YKKfSLjULlG4ry3srNBF4kQRkUoMUzAHrRc6AD18IHZEALv/8QANhAAAgEEAQICBgcJAQAAAAAAAQIDAAQFERIGIRMyBxQVQVFhFyIxRGKBsxYjJDNDUmNxcpH/2gAIAQEAAT8AAoLSpuoLRnIGq+hnqb9jjl/Vv3wfxTZ7HrHqvH+dw+3jU9oyEgimTVFaIpRSrura3LsO1dK4bHdL4iDP5SBJbycE4y0kG10v3iRfeoPkX3mour+oG6k9qNkbkT+MXEnM8tmurMFYdTYafqLF26RXUOjk7SMaXv8AeIx7gT519xq5tyjHtTLTClFQps16OOlIsznLZLg6s41ee5IPcRRdz+bfYK61zNxl8nc+JBGIfC1Bx7GEJ2WMfBdDVSWPgwRQywBOciSo4G2ZCCB/oVhs9Nj8rLfi1QSKyrNCgAgMBTToyj+4V19gLXD5e6S2jElndQpPZyN9ohl+sPzHlNTJommFLVmm2FejKAWHSeVvQyrLdXUdqhKhgVjBkYaPuJ1WY4rmRPJayQxy25HDR83Ltrl7qtsnaTWVru3Cyi6Z/GZxsry0oOj7tVcXKmS88OXkJEI1ojug3/5866gHtL0fYi7YbksbyW0J/wAciiVR+R3V4mmNNS1YecV6M7/E2XS2LlvpNQrf3RK8eQduK6UivSxk+j8p7Oe1V5HSQqSg4h0P4iNdmo4+4a3JVAiDn4CM6huPwbfmPwNXkF7K1vJJcxv4VqYn+sAQwQ9m+JpA30bZZm1wOSs+HbvsRHdX+uZpqWrN9OK6Muxc9H5S2EPjSWtwlwqDzcHHBitQZy3nx8tpcoTIoYcpOxJJDAr86ysMsM8geYsyj60JUAAfBTs0bLVlLMrxytMO225FSd7H/Wqz0jWHQWJsmJD3Vy9yV/CiiMVePtjTUpqF9GuheoExOZiaUg28qmKcDvuOTsa6mwmQtM6ZvBWW35mRXEwTkhGwRWRzkCMYri3dG790nVj3+ejXQiw3l9CscUoUkszM6kRoO5c9uwrrbqSO/wAy8sKqbaACKBG7jw07Cp35MaY0rUrVa3BQjvWFzEGewww15OI50H8JO36bGpeguohlxaS24Mh8vcHtWZyVl0/iWxFjKr3Drq8uF/TX5fGrm4Lk96ZqY0DQalfVW92yEEGvpHy3sD1LmPF58fWP6vhcfJuri7ZySTTPui1E1//EACURAAEEAQMEAgMAAAAAAAAAAAEAAgMRBAUSIRMxUXFhgTIzwf/aAAgBAgEBPwBrVk5DYWdrJ4A8lRZM7H1M0bSRRHYX2BVAhFq7NU2UJ9UliJ/WBtPz3KmlifC5r2myHC6WmTGWAWbIJB+kQnfgtTxXxatJOA41JzVAgFQZm/EMjpGG6qvn2tFaei8+ZHV9cfxFNK1LFc1/Wa0EFu2T15FeFJHFJEyCJoLnjki6DfPpY0DIImMaOAAEXIEo8hQ48MRdsYG2bNIkolf/xAAlEQACAQMEAgEFAAAAAAAAAAABAgMABBEQEiExQVETImFxcuH/2gAIAQMBAT8ApE3d8Admt0EnEbfVzwezjXzTQulqjgZDE5FW1nPHOHVuFZTjdmrqPZIdB3VrMrWqxkgZTz0aktttyFWNxjOf7ir4gyD9Rrburr8bEjByuPfqogVkaRmO1T19/X5qV2dyT5OhoU8sj43MTjX/2Q==") center / cover no-repeat; box-shadow: inset 0 0 0 .5px rgba(243, 235, 221, .16), 0 2px 8px rgba(0, 0, 0, .35); }
.ps-app svg { display: none; }
.ps-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ps-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ps-top b { font: 650 10.5px/1.3 var(--sans); letter-spacing: .16em; color: rgba(243, 235, 221, .62); }
.ps-top i { font: 500 11px/1.3 var(--sans); font-style: normal; color: rgba(243, 235, 221, .48); white-space: nowrap; }
.ps-title { font: 650 14.5px/1.3 var(--sans); color: var(--parchment); text-wrap: pretty; }
.ps-body { font: 400 13.5px/1.35 var(--sans); color: rgba(243, 235, 221, .74); text-wrap: pretty; }

.ps-head { align-items: center; text-align: center; padding: 12px 4px 18px; }
.ps-title-main { font-size: 28px; line-height: 1.08; text-wrap: balance; }
.ps-sub { max-width: 330px; text-wrap: pretty; }
.ps-yes { width: 100%; }
.ps-yes[aria-busy="true"] { filter: saturate(.8) brightness(.95); pointer-events: none; }
.ps-later { align-self: center; margin-top: 4px; }
.ps-note-small { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: rgba(243, 235, 221, .5); }
@media (max-height: 760px) {
  .ps-preview { gap: 6px; padding: 10px 10px 14px; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
  .ps-n3 { display: none; }
  .ps-head { padding: 8px 4px 14px; }
  .ps-title-main { font-size: 25px; }
}

/* ---------- Settings → Notifications ---------- */
.nt-head { padding-bottom: 12px; }
.nt-off { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 6px; padding: 18px 18px 16px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, rgba(233, 196, 106, .09), rgba(233, 196, 106, .025)); box-shadow: inset 0 0 0 1px var(--gold-hair); }
.nt-off-mark { display: flex; height: 28px; }
.nt-glyph { filter: drop-shadow(0 0 4px rgba(255, 214, 140, .85)) drop-shadow(0 0 12px rgba(233, 196, 106, .45)); }
.nt-off-text { margin: 0; max-width: 300px; font-size: 14.5px; line-height: 1.45; color: var(--parchment); }
.nt-act { width: 100%; max-width: 320px; margin-top: 4px; }
.nt-act.btn-gold { height: 52px; }
.nt-act[aria-busy="true"] { opacity: .7; pointer-events: none; }
.nt-kinds .sheet-row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.nt-kinds .sheet-row-sub { line-height: 1.35; }
.nt.is-off .nt-kinds { opacity: .62; }
.nt-quiet { margin: 2px 14px 6px; font-size: 12.5px; line-height: 1.45; color: rgba(243, 235, 221, .55); text-align: center; text-wrap: balance; }
.nt-quiet svg { display: inline-block; width: 5px; height: 14px; margin-right: 7px; vertical-align: -2px; fill: var(--gold); filter: drop-shadow(0 0 3px rgba(255, 214, 140, .7)); }
.nt-back { margin: 2px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .ps-note { animation: none; }
}

/* puzzles.css */
/* 1.1, track P (docs/BUILD-1.1.md 1, 3, 4): the seal puzzles (src/puzzles: mend, riddle, lantern), a story seam in play
   (its start, the lines its objects reveal, the eight-slot tray), and the companions (src/companions.js: "Who comes
   along?", the portrait by the lantern and its gifts). The house style (docs/DESIGN.md): full-bleed paintings, gold for
   the one main action, Fraunces for the Cartographer, springs, never a grey box. Reduced motion is respected at the end. */

/* ───────────────────────── a seal puzzle: the layer over the play screen ───────────────────────── */
.pz { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; padding: calc(max(var(--safe-top), 10px) + 10px) 0 max(14px, var(--safe-bottom));
  background: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; opacity: 0; transition: opacity .55s var(--ease-out); }
.pz.is-in { opacity: 1; }
.pz.is-leaving { opacity: 0; pointer-events: none; transition-duration: .35s; }
.pz-back { position: absolute; inset: -40px; pointer-events: none; }
.pz-back img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.15) brightness(.34); transform: scale(1.06); opacity: 0; transition: opacity 1s var(--ease-out); }
.pz.is-in .pz-back img[src] { opacity: 1; }
.pz-back::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 40%, rgba(var(--realm-deep-rgb, 15, 45, 49), .26), rgba(10, 13, 24, .55) 70%); }

.pz-head { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 24px 12px; text-align: center; }
.pz-eyebrow { opacity: 0; transform: translateY(4px); transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s; }
.pz-title { margin: 0; font: italic 300 25px/1.15 var(--serif); color: var(--parchment); text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease-out) .2s, transform .7s var(--ease-out) .2s; }
.pz.is-in .pz-eyebrow, .pz.is-in .pz-title { opacity: 1; transform: none; }

/* the thread that burns down while the seam is open */
.pz-thread { position: relative; width: min(240px, 62%); height: 2px; margin-top: 8px; border-radius: 1px; background: rgba(243, 235, 221, .1); }
.pz-thread-burn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, #A97A35, #E9C46A 60%, #FFF1C9); box-shadow: 0 0 8px rgba(233, 196, 106, .55); transition: background .6s; }
.pz-thread-ember { position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #FFF1C9; box-shadow: 0 0 6px 2px rgba(255, 214, 140, .9), 0 0 16px 4px rgba(233, 196, 106, .45); }
.pz-thread.is-low .pz-thread-burn { background: linear-gradient(90deg, #A9502F, var(--ember)); box-shadow: 0 0 9px rgba(255, 138, 91, .6); }
.pz-thread.is-low .pz-thread-ember { background: #FFD3BF; box-shadow: 0 0 7px 2px rgba(255, 138, 91, .95), 0 0 18px 5px rgba(255, 138, 91, .45); animation: pz-ember .7s ease-in-out infinite; }
.pz-thread.is-out { opacity: 0; transition: opacity .5s var(--ease-out); }
@keyframes pz-ember { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.pz-field { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; }
.pz-foot { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 20px; }
.pz-count { font: 650 13px/1 var(--sans); letter-spacing: .04em; color: var(--gold); }
.pz-let { color: rgba(243, 235, 221, .7); font-size: 13px; animation: pl-fade .6s var(--ease-out) both; }
.pz-let[hidden] { display: none; }
.pz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── mend: the board, its tear, the pieces ── */
.pz-board { position: absolute; border-radius: 10px; overflow: visible; }
.pz-board::before { content: ''; position: absolute; inset: -1px; border-radius: 11px; background: rgba(5, 7, 14, .55); box-shadow: 0 0 0 1px var(--gold-hair), 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 30px rgba(0, 0, 0, .5); }
.pz-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; opacity: 0; filter: grayscale(.6) brightness(.7); transition: opacity 1.2s var(--ease-out); }
.pz.is-torn .pz-ghost { opacity: .13; }
.pz-cuts, .pz-aim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pz-cuts path { fill: none; stroke: rgba(255, 227, 163, .5); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 5 6; opacity: 0; transition: opacity .6s var(--ease-out); }
.pz.is-torn .pz-cuts path { opacity: .55; }
.pz-aim { opacity: 0; transition: opacity .2s var(--ease-out); }
.pz-aim path { fill: rgba(var(--realm-accent-rgb), .1); stroke: rgba(var(--realm-accent-rgb), .9); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(var(--realm-accent-rgb), .7)); }
.pz-board.is-aiming .pz-aim { opacity: 1; }
.pz-sweep { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; opacity: 0; z-index: 30;
  background: linear-gradient(105deg, rgba(255, 241, 201, 0) 30%, rgba(255, 241, 201, .5) 48%, rgba(233, 196, 106, .3) 52%, rgba(255, 241, 201, 0) 70%); background-size: 260% 100%; mix-blend-mode: screen; }
.pz.is-mended .pz-sweep { animation: pz-sweep 1.3s var(--ease-out) .25s both; }
@keyframes pz-sweep { 0% { opacity: 0; background-position: 100% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.pz.is-mended .pz-cuts path { stroke: #FFF1C9; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .95)); transition: opacity .5s var(--ease-out), stroke .3s; }
.pz.is-whole .pz-cuts path { opacity: 0; transition: opacity 1.4s var(--ease-out) .2s; }

.pz-piece { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 50% 50%; will-change: transform; cursor: grab; touch-action: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); transition: filter .3s var(--ease-out); }
.pz-piece canvas { position: absolute; display: block; pointer-events: none; }
.pz-piece-edge { transition: opacity .6s var(--ease-out); }
.pz-piece.is-held { cursor: grabbing; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(233, 196, 106, .28)); }
.pz-piece.is-placed { cursor: default; pointer-events: none; filter: none; }
.pz-piece.is-placed .pz-piece-edge { opacity: .45; }
.pz-piece.is-flash .pz-piece-edge { animation: pz-flash .9s var(--ease-out) both; }
@keyframes pz-flash { 0% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 6px rgba(255, 214, 140, 1)); } 100% { opacity: .45; filter: none; } }
.pz.is-whole .pz-piece-edge { opacity: 0; transition: opacity 1.2s var(--ease-out) .3s; }

/* the moment it's sealed: the fourth star, the line */
.pz-done { position: absolute; left: 0; right: 0; bottom: calc(max(14px, var(--safe-bottom)) + 56px); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 30px; text-align: center; pointer-events: none; }
.pz-done[hidden] { display: none; }
.pz-done > * { animation: pl-rise .7s var(--ease-out) backwards; }
.pz-done > :nth-child(2) { animation-delay: .08s; }
.pz-done > :nth-child(3) { animation-delay: .16s; }
.pz-done > :nth-child(4) { animation-delay: .5s; }
.pz-done-star { display: block; filter: drop-shadow(0 0 10px rgba(233, 196, 106, .85)); animation: pz-star .8s cubic-bezier(.2, 1.6, .4, 1) .1s both !important; }
@keyframes pz-star { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pz-done-title { margin: 0; font: 380 30px/1.1 var(--serif); color: var(--parchment); text-shadow: 0 2px 18px rgba(5, 7, 14, .8); }
.pz-done-line { margin: 2px 0 0; max-width: 320px; font-size: 17px; color: rgba(243, 235, 221, .9); text-shadow: 0 1px 14px rgba(5, 7, 14, .85); text-wrap: balance; }
.pz-mend.is-mended .pz-foot, .pz-mend.is-mended .pz-title { opacity: 0; transition: opacity .5s var(--ease-out); }
.pz-mend .pz-done { bottom: calc(max(14px, var(--safe-bottom)) + 4px); }

/* ── the riddle ── */
.pz-q { margin: 2px 0 0; max-width: 340px; font-size: 21px; line-height: 1.34; color: var(--parchment); text-wrap: balance; }
.pz-word { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(3px); }
.pz.is-in .pz-word { animation: pz-word .7s var(--ease-out) forwards; }
@keyframes pz-word { to { opacity: 1; filter: none; transform: none; } }
.pz-pic { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--gold-hair), 0 22px 54px rgba(0, 0, 0, .55); cursor: pointer; background: var(--ink); }
.pz-pic-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.pz-pic-img.is-in { opacity: 1; }
.pz-marks { position: absolute; inset: 0; pointer-events: none; }
.pz-ink { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 1.5px solid rgba(255, 138, 91, .85); box-shadow: 0 0 14px rgba(255, 138, 91, .35); animation: pz-ink .85s ease-out forwards; }
@keyframes pz-ink { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* the soft hint: a pool of light that holds the answer, the rest of the picture dimmed around it (.pz-dim) */
.pz-dim { position: absolute; inset: 0; animation: pl-fade 1s var(--ease-out) both; }
.pz-halo { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(var(--realm-accent-rgb), .6), 0 0 18px rgba(var(--realm-accent-rgb), .3), inset 0 0 26px rgba(var(--realm-accent-rgb), .2);
  animation: pz-halo 2.8s ease-in-out infinite, pl-fade .8s var(--ease-out) both; }
.pz-riddle.is-solved .pz-dim { opacity: 0; transition: opacity .6s var(--ease-out); animation: none; }
.pz-riddle.is-solved .pz-halo { opacity: 0; transition: opacity .6s var(--ease-out); animation: none; }
@keyframes pz-halo { 0%, 100% { transform: scale(.97); opacity: .75; } 50% { transform: scale(1.03); opacity: 1; } }
.pz-answer { position: absolute; }
.pz-answer svg { position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; }
.pz-answer rect { fill: rgba(233, 196, 106, .08); stroke: #F0CF85; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255, 214, 140, .9)); animation: pz-draw .9s var(--ease-out) forwards; }
.pz-answer.is-shown rect { stroke: rgba(var(--realm-accent-rgb), .95); fill: rgba(var(--realm-accent-rgb), .08); animation: pz-draw .9s var(--ease-out) forwards, pz-pulse 1.4s ease-in-out .9s infinite; }
@keyframes pz-draw { to { stroke-dashoffset: 0; } }
@keyframes pz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pz-burst { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(var(--realm-accent-rgb), .45) 25%, rgba(var(--realm-accent-rgb), 0) 70%); animation: pl-bloom 1.1s ease-out both; }
.pz-help { margin: 0; font: italic 300 17px/1.35 var(--serif); color: rgba(243, 235, 221, .82); text-align: center; text-wrap: balance; }
.pz-help.is-new { animation: pl-rise .5s var(--ease-out) both; }
.pz-riddle .pz-done { bottom: calc(max(14px, var(--safe-bottom)) + 4px); }
.pz-pic { transition: transform 1s var(--ease-out), box-shadow .8s var(--ease-out); transform-origin: 50% 0; }
.pz-riddle.is-solved .pz-pic { transform: scale(.8); box-shadow: 0 0 0 1px rgba(233, 196, 106, .7), 0 0 34px rgba(233, 196, 106, .25), 0 22px 54px rgba(0, 0, 0, .55); }
.pz-riddle.is-solved .pz-foot { opacity: 0; transition: opacity .4s; }
.pz-riddle.is-solved .pz-pic-img { filter: brightness(.62); transition: filter 1s var(--ease-out) .5s, opacity .8s; }
.pz-riddle .pz-done-title, .pz-riddle .pz-done-line { text-shadow: 0 2px 20px rgba(5, 7, 14, .95); }

/* ── the lantern: the dark, the light, its words ── */
.pz-dark, .pz-glow { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
/* no z-index: they lie between the painting and the marks (rings, the lantern's glow) by their place in the stage */
.pz-glow { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .26), rgba(255, 190, 120, .1) 55%, rgba(255, 190, 120, 0)); mix-blend-mode: screen; }
.pz-dark.is-on, .pz-glow.is-on { opacity: 1; }
.pz-dark.is-lifting, .pz-glow.is-lifting { opacity: 0; transition: opacity 1.1s var(--ease-out); }
/* its words, at the top while the dark falls, then gone (the things wait low, often at the bottom) */
.pz-darknote { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 22px 40px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 11, .85), rgba(3, 5, 11, .5) 60%, rgba(3, 5, 11, 0)); opacity: 0; transform: translateY(-6px); transition: opacity .8s var(--ease-out) .7s, transform .8s var(--ease-out) .7s; }
.pz-darknote.is-on { opacity: 1; transform: none; }
.pz-darknote.is-quiet { opacity: 0; transform: translateY(-6px); transition-delay: 0s; transition-duration: 1s; }
.pz-darknote.is-leaving { opacity: 0; transition-delay: 0s; }
.pz-darknote-line { margin: 0; max-width: 330px; font-size: 17px; line-height: 1.34; color: var(--parchment); text-shadow: 0 1px 12px rgba(3, 5, 11, .95); text-wrap: balance; }
.pz-darknote-how { margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .02em; color: rgba(255, 214, 150, .9); text-shadow: 0 1px 8px rgba(3, 5, 11, .95); }
/* iOS: the phone's tilt waits for a tap; a small pill in the corner until it is given */
.pz-tiltbtn { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: 0; padding: 0 14px 0 12px; border: 1px solid rgba(255, 214, 150, .55); border-radius: 20px;
  background: rgba(5, 7, 14, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--parchment); font: 600 13px var(--sans); cursor: pointer; animation: pl-fade .6s var(--ease-out) 1.2s both; }
.pz-tiltbtn[hidden] { display: none; }
.pz-tiltbtn:active { transform: scale(.97); }
.pz-tiltbtn svg { color: rgba(255, 214, 150, .95); }
.pl-stage.is-dark { cursor: crosshair; }

/* ───────────────────────── "Who comes along?" ───────────────────────── */
.cp { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.cp.is-in { opacity: 1; transform: none; }
.cp[hidden] { display: none; }
.cp-label { font-size: 10.5px; letter-spacing: .22em; }
.cp-track { display: flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 7px 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x; }
.cp-track::-webkit-scrollbar { display: none; }
.cp-opt { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; scroll-snap-align: center; -webkit-appearance: none; appearance: none; }
.cp-opt::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.cp-opt .cp-face { transition: box-shadow .35s var(--ease-out), width .35s var(--ease-spring), height .35s var(--ease-spring); }
.cp-opt:active .cp-face { --s: 40px; }
.cp-opt[aria-checked="true"] .cp-face { --s: 48px; }
.cp-opt[aria-checked="true"] .cp-face { box-shadow: 0 0 0 2px #F0CF85, 0 0 0 4px rgba(10, 13, 24, .7), 0 0 18px 2px rgba(233, 196, 106, .55); }
.cp-opt:not([aria-checked="true"]) .cp-face img { filter: saturate(.75) brightness(.78); }
.cp-opt.is-picked .cp-face { animation: cp-pick .6s var(--ease-out); }
@keyframes cp-pick { 0% { transform: scale(.88); } 55% { transform: scale(1.06); } 100% { transform: none; } }
.cp-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* who it is and what it gives, on one line */
.cp-said { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 8px; min-height: 22px; max-width: calc(100vw - 40px); margin: 0; padding: 0 20px; text-align: center; text-shadow: 0 1px 10px rgba(5, 7, 14, .9); }
.cp-said-name { font: italic 300 16px/1.3 var(--serif); color: var(--parchment); }
.cp-said-gift { font: 600 12px/1.3 var(--sans); letter-spacing: .01em; color: rgba(var(--realm-accent-rgb), .95); }
.cp-said-gift:empty { display: none; }
.cp.is-alone .cp-said-name { color: rgba(243, 235, 221, .7); }

/* a Stray's face in a ring of its rarity */
.cp-face { --s: 44px; position: relative; flex: none; display: block; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1B2140, #0A0D18 75%);
  box-shadow: 0 0 0 1.5px var(--ring, rgba(243, 235, 221, .5)), 0 4px 12px rgba(0, 0, 0, .45); transition: box-shadow .35s var(--ease-out); }
.cp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.35); transform-origin: 50% 30%; opacity: 0; transition: opacity .5s var(--ease-out), filter .35s; }
.cp-face img.is-in { opacity: 1; }
.cp-face.is-none { display: flex; align-items: center; justify-content: center; color: rgba(233, 196, 106, .55); background: rgba(10, 13, 24, .5); box-shadow: inset 0 0 0 1.5px rgba(243, 235, 221, .28); }
.cp-face.is-none svg { filter: drop-shadow(0 0 5px rgba(233, 196, 106, .45)); }
.cp-face.is-common { --ring: rgba(243, 235, 221, .6); }
.cp-face.is-uncommon { --ring: #A6F4E6; }
.cp-face.is-rare { --ring: #E9C46A; }
.cp-face.is-mythic { --ring: #CDB0FF; }
.cp-face.is-legendary { --ring: #FFF1C9; }
.cp-gem { position: absolute; left: 50%; bottom: 2px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); border-radius: 1px; background: var(--ring); box-shadow: 0 0 6px var(--ring); opacity: 0; }
.cp-face.is-rare .cp-gem, .cp-face.is-mythic .cp-gem, .cp-face.is-legendary .cp-gem { opacity: 1; }
.cp-face.is-legendary::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, rgba(255, 241, 201, 0) 35%, rgba(255, 241, 201, .45) 50%, rgba(255, 241, 201, 0) 65%); background-size: 250% 100%; animation: cp-foil 4.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes cp-foil { 0%, 60% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* on the capture screen: above the shutter, the Cartographer's line moves up to make room */
.cp.is-capture { position: absolute; left: 0; right: 0; bottom: calc(var(--controls-bottom) + 92px + var(--safe-bottom)); z-index: 2; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.capture.has-company { --voice-bottom: 258px; --frame-bottom: 354px; }
.capture.has-company .capture-scrim { height: calc(420px + var(--safe-bottom)); }
.capture:not([data-state="live"]):not([data-state="starting"]) .cp.is-capture { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (max-height: 740px) {
  .capture.has-company { --voice-bottom: 238px; --frame-bottom: 326px; }
  .cp.is-capture { bottom: calc(var(--controls-bottom) + 88px + var(--safe-bottom)); }
}
@media (max-height: 660px) {
  .capture.has-company { --voice-bottom: 222px; --frame-bottom: 296px; }
  .capture.has-company .capture-line { font-size: 17px; }
  .cp.is-capture .cp-said-gift { display: none; }
}

/* ───────────────────────── a story seam in play ───────────────────────── */
/* its start: the scene behind, the tale and the act, what waits after the six, who comes along */
.pl-tale { gap: 10px; }
.pl-tale-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pl-tale-art img { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; opacity: 0; filter: blur(2px) brightness(.55) saturate(1.1); transform: scale(1.08); transition: opacity 1.4s var(--ease-out), transform 9s var(--ease-out); }
.pl-tale-art img.is-in { opacity: 1; transform: scale(1.02); }
.pl-tale-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 50% 48%, rgba(10, 13, 24, .35), rgba(10, 13, 24, .9) 78%); }
.pl-tale.is-on > :nth-child(3) { animation-delay: .05s; }
.pl-tale.is-on > :nth-child(4) { animation-delay: .3s; }
.pl-tale.is-on > :nth-child(5) { animation-delay: .5s; }
.pl-tale.is-on > :nth-child(6) { animation-delay: .9s; }
.pl-tale.is-on > :nth-child(7) { animation-delay: 1.2s; }
.pl-tale.is-on > :nth-child(8) { animation-delay: 1.4s; }
.pl-intro.pl-tale > .pl-tale-art { position: absolute !important; opacity: 1 !important; transform: none !important; animation: none !important; }
.pl-tale-eyebrow { text-align: center; text-wrap: balance; }
.pl-tale-title { margin: 0; max-width: 330px; font: 380 36px/1.08 var(--serif); color: var(--parchment); text-align: center; text-wrap: balance; text-shadow: 0 0 30px rgba(233, 196, 106, .25); }
.pl-tale-line { margin: 2px 0 6px; max-width: 300px; font-size: 18px; color: rgba(243, 235, 221, .86); text-align: center; text-wrap: balance; }
.pl-tale-company { min-height: 6px; margin: 4px 0 10px; max-width: 100%; }
.pl-tale-company .cp { max-width: min(360px, 92vw); }
.pl-tale .pl-intro-go { max-width: 280px; }

/* the line each found object reveals: over the top of the painting, never in the way of a tap */
.pl-say { position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none; }
.pl-say-line { position: absolute; left: 0; right: 0; top: 0; padding: 14px 20px 34px; text-align: center; background: linear-gradient(180deg, rgba(5, 7, 14, .82) 0%, rgba(5, 7, 14, .55) 55%, rgba(5, 7, 14, 0) 100%);
  opacity: 0; transform: translateY(-6px); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); }
.pl-say-line.is-on { opacity: 1; transform: none; }
.pl-say-line.is-leaving { opacity: 0; transform: translateY(-4px); transition-duration: .45s; }
.pl-say-name { display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 8px rgba(5, 7, 14, .9); }
.pl-say-text { margin: 0 auto; max-width: 330px; font-size: 17px; line-height: 1.34; color: var(--parchment); text-shadow: 0 1px 12px rgba(5, 7, 14, .95); text-wrap: balance; }
.pl-say-how { margin: 6px auto 0; font: 600 12px/1.3 var(--sans); color: rgba(255, 214, 150, .9); text-shadow: 0 1px 8px rgba(3, 5, 11, .95); }
/* in the dark, the rings of what was found glow softer: the light is what matters now */
.pl-stage.is-dark .pl-found-ring { opacity: .5; transition: opacity .8s var(--ease-out); }

/* eight slots when a light seam's two extra things join the tray */
.pl-slot.is-extra { display: none; }
.pl-tray.is-eight .pl-slots { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.pl-tray.is-eight .pl-slot.is-extra { display: block; animation: pz-slot-in .7s var(--ease-spring) both; }
.pl-tray.is-eight .pl-slot.is-extra:not(.is-found) { border-color: rgba(255, 214, 150, .4); box-shadow: inset 0 0 12px rgba(255, 214, 150, .14); }
.pl-tray.is-eight .pl-slot img { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.pl-tray.is-eight .pl-slot.is-extra:nth-child(8) { animation-delay: .12s; }
@keyframes pz-slot-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ───────────────────────── the companion in play ───────────────────────── */
.pl-mate-slot { flex: none; display: flex; align-items: center; }
.pl-mate-slot:empty { display: none; }
.pl.has-mate .pl-cost { flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.3; }
.pl-mate { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 -2px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .25s var(--ease-out), filter .6s var(--ease-out); }
.pl-mate:active { transform: scale(.94); }
.pl-mate[aria-disabled="true"] { cursor: default; }
.pl-mate-gift { position: absolute; right: -1px; bottom: -1px; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; color: #1A1305; background: linear-gradient(180deg, #F7E2A6, #C9973F); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 6px rgba(0, 0, 0, .5); }
.pl-mate.is-ready .pl-mate-face { animation: pl-mate-ready 2.6s ease-in-out infinite; }
@keyframes pl-mate-ready { 0%, 100% { box-shadow: 0 0 0 1.5px var(--ring), 0 0 0 rgba(233, 196, 106, 0); } 50% { box-shadow: 0 0 0 1.5px var(--ring), 0 0 16px 3px rgba(233, 196, 106, .55); } }
.pl-mate.is-spent { filter: saturate(.4) brightness(.7); }
.pl-mate.is-spent .pl-mate-gift { opacity: .5; }
.pl-mate.is-glow { filter: none; }
.pl-mate.is-glow .pl-mate-face { animation: pl-mate-glow 1.8s var(--ease-out) both; }
.pl-mate.is-glow::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 201, .7), rgba(var(--realm-accent-rgb), .3) 40%, rgba(var(--realm-accent-rgb), 0) 70%); animation: pl-bloom 1.4s ease-out both; pointer-events: none; }
@keyframes pl-mate-glow { 0% { box-shadow: 0 0 0 1.5px var(--ring), 0 0 0 rgba(255, 214, 140, 0); transform: scale(1); } 25% { box-shadow: 0 0 0 2px #FFF1C9, 0 0 26px 8px rgba(255, 214, 140, .85); transform: scale(1.14); } 100% { box-shadow: 0 0 0 1.5px var(--ring), 0 0 10px 2px rgba(233, 196, 106, .3); transform: scale(1); } }

/* its gifts: a trail of sparks, a beam, ten seconds flying to the clock */
.pl-gift-spark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--realm-glow-hi); box-shadow: 0 0 10px 4px rgba(var(--realm-accent-rgb), .75), 0 0 2px 1px rgba(255, 255, 255, .8); animation: pl-gift-spark .8s ease-out both; }
.pl-gift-spark.is-gold { background: #FFF1C9; box-shadow: 0 0 10px 4px rgba(255, 214, 140, .85), 0 0 2px 1px rgba(255, 255, 255, .8); }
@keyframes pl-gift-spark { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(.2) translateY(-6px); } }
.pl-trail-mark { animation: pl-fade .4s var(--ease-out) both; }
.pl-trail-halo { position: absolute; left: calc(-38px * var(--z)); top: calc(-38px * var(--z)); width: calc(76px * var(--z)); height: calc(76px * var(--z)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 201, .5), rgba(var(--realm-accent-rgb), .25) 40%, rgba(var(--realm-accent-rgb), 0) 70%); animation: pl-hint 1.3s ease-in-out infinite; }
.pl-gift-beam { position: absolute; height: 3px; margin-top: -1.5px; transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 241, 201, 0), #FFF1C9 30%, rgba(var(--realm-accent-rgb), .9)); box-shadow: 0 0 12px 3px rgba(255, 214, 140, .6); animation: pl-gift-beam .9s var(--ease-out) both; }
@keyframes pl-gift-beam { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 55% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.pl-gift-time { position: absolute; z-index: 7; font: 700 17px/1 var(--sans); color: #FFF1C9; text-shadow: 0 0 12px rgba(255, 214, 140, .9), 0 2px 8px rgba(5, 7, 14, .8); pointer-events: none; }

/* the seal's star, and what the veil says it waits for */
.pl-star.is-seal { margin-left: 6px; }
.pl-veil-next { max-width: 280px; margin-top: -2px; font: italic 300 15px/1.35 var(--serif); color: rgba(243, 235, 221, .8); text-wrap: balance; }

/* ── Where did it go? (1.1 wave 2, track O: src/puzzles/where.js): the six remembered, the dark, three slip; tap where ──
   The lifted things are circles of the level picture, the covers circles of the clean photo, both feathered; the dark
   is a veil over the picture (the drift shows only as shadows under it). */
.pz-where .pz-pic { cursor: crosshair; }
.pz-where .pz-thread { opacity: 0; transition: opacity .6s var(--ease-out); }
.pz-where.is-search .pz-thread { opacity: 1; }
.pz-where .pz-thread.is-out { opacity: 0; }
.wh-title.is-new { animation: pl-rise .6s var(--ease-out) both; }
.wh-covers, .wh-things { position: absolute; inset: 0; pointer-events: none; }
.wh-cover, .wh-thing { position: absolute; left: 0; top: 0; border-radius: 50%; background-repeat: no-repeat; opacity: 0; }
.wh-cover { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); transition: opacity .9s var(--ease-out); }
.wh-cover.is-on { opacity: 1; }
.wh-cover.is-healing { opacity: 0; transition-duration: 1.2s; }
.wh-thing { will-change: transform; -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%); }
.wh-thing.is-on { opacity: 1; }
.wh-thing.is-home { opacity: 0; transition: opacity 1.4s var(--ease-out) .4s; }
/* the dark: a deep veil, a little lighter at the middle, the drift moving under it as shadows */
.wh-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(6, 8, 18, .84), rgba(3, 4, 10, .97)); transition: opacity .75s var(--ease-out); }
.pz-where.is-dark .wh-dim { opacity: 1; transition-duration: .7s; }
.pz-where.is-dark .pz-pic { box-shadow: 0 0 0 1px rgba(233, 196, 106, .18), 0 22px 54px rgba(0, 0, 0, .65); }
/* rings: the six remembered, a find, those that showed themselves */
.wh-ring { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none; }
.wh-was { border: 1.5px solid rgba(255, 227, 163, .9); box-shadow: 0 0 14px rgba(233, 196, 106, .55), inset 0 0 10px rgba(233, 196, 106, .3); animation: wh-was 1.6s var(--ease-out) both; }
@keyframes wh-was { 0% { transform: scale(.45); opacity: 0; } 25% { opacity: 1; } 60% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.12); opacity: 0; } }
.wh-got { border: 2px solid #F0CF85; box-shadow: 0 0 0 1px rgba(10, 13, 24, .35), 0 0 18px 4px rgba(233, 196, 106, .6), inset 0 0 14px rgba(233, 196, 106, .4); animation: wh-got 1.7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes wh-got { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }
.wh-shown { border: 1.5px solid rgba(var(--realm-accent-rgb), .95); box-shadow: 0 0 16px rgba(var(--realm-accent-rgb), .5); animation: wh-shown 1.1s ease-in-out 2 both; }
@keyframes wh-shown { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
.wh-pool.is-leaving, .pz-where .pz-halo.is-leaving { opacity: 0; transition: opacity .5s var(--ease-out); animation: none; }
/* the count and the help, under the picture */
.wh-foot { flex-direction: column; gap: 4px; min-height: 64px; }
.wh-count { opacity: 0; transition: opacity .5s var(--ease-out); }
.pz-where.is-search .wh-count { opacity: 1; }
.pz-where.is-solved .wh-count, .pz-where.is-solved .pz-help:empty { opacity: 0; }
.pz-where .pz-done { bottom: calc(max(14px, var(--safe-bottom)) + 4px); }
.pz-where.is-whole .pz-pic { transform: scale(.8); box-shadow: 0 0 0 1px rgba(233, 196, 106, .7), 0 0 34px rgba(233, 196, 106, .25), 0 22px 54px rgba(0, 0, 0, .55); }
.pz-where.is-whole .pz-pic-img, .pz-where.is-whole .wh-covers, .pz-where.is-whole .wh-things { filter: brightness(.62); transition: filter 1s var(--ease-out) .4s; }
.pz-where.is-whole .wh-foot { opacity: 0; transition: opacity .4s; }
.pz-where .pz-done-title, .pz-where .pz-done-line { text-shadow: 0 2px 20px rgba(5, 7, 14, .95); }

@media (prefers-reduced-motion: reduce) {
  .pz, .pz-eyebrow, .pz-title, .cp, .pl-say-line { transition-duration: .01s !important; transition-delay: 0s !important; }
  .pz-word { opacity: 1; filter: none; transform: none; }
  .pz.is-in .pz-word, .pz-halo, .pz-thread.is-low .pz-thread-ember, .pl-mate.is-ready .pl-mate-face, .cp-face.is-legendary::after, .pz-answer.is-shown rect, .pl-trail-halo { animation: none; }
  .wh-was, .wh-got, .wh-shown, .wh-title.is-new { animation-duration: .01s; }
  .pz-answer rect { animation: none; stroke-dashoffset: 0; }
  .pz-piece { transition: none !important; }
  .pz-dark, .pz-glow { transition-duration: .3s; }
  .pl-tale-art img { transition: opacity .3s; transform: none; }
}
/* the thing alone, cut out of the level picture (where.js cutout): no circle to feather */
.wh-thing.is-cut { border-radius: 0; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }

/* realms.css */
/* Realms (docs/REALMS.md, "The client"): each seam opens onto one of several worlds. body[data-realm] (and a screen's
   own root, so it keeps its colours while it crossfades away) sets the realm's colours for everything inside:
     --realm-accent  takes the place of the aether (things from Elsewhere: bursts, lanterns, gems, sheens)
     --realm-glow    tints the seam's light (the seam line, its motes, the painting's progress), with -hi (its hot
                     core), -mid-rgb (its halo) and -lo (its shadow side)
     --realm-ink     the world's night, a background tint
     --realm-deep-rgb  its shadows' colour, where the board used the teal of the Elsewhere's shadows (halos, skies)
   The Lantern City is the default and is exactly the board's look. Gold buttons stay gold: they are the brand.
   Values mirror shared/realms.mjs. Also here: the pieces several screens share (rl-*): previews, realm chips and marks,
   the event banner, a sparkle, and the sheet of realms on the reveal. */

:root, [data-realm="lantern"] { --realm-accent: #A6F4E6; --realm-accent-rgb: 166, 244, 230; --realm-glow: #E9C46A; --realm-glow-rgb: 233, 196, 106; --realm-glow-hi: #FFF1C9; --realm-glow-mid-rgb: 255, 227, 163; --realm-glow-lo: #A97A35; --realm-ink: #0A0D18; --realm-ink-rgb: 10, 13, 24; --realm-deep-rgb: 15, 45, 49; }
[data-realm="drowned"] { --realm-accent: #7FE6E0; --realm-accent-rgb: 127, 230, 224; --realm-glow: #F2C9B0; --realm-glow-rgb: 242, 201, 176; --realm-glow-hi: #FBF0E9; --realm-glow-mid-rgb: 247, 223, 208; --realm-glow-lo: #A58978; --realm-ink: #06141A; --realm-ink-rgb: 6, 20, 26; --realm-deep-rgb: 29, 60, 63; }
[data-realm="clockwork"] { --realm-accent: #FFD199; --realm-accent-rgb: 255, 209, 153; --realm-glow: #E8A85A; --realm-glow-rgb: 232, 168, 90; --realm-glow-hi: #F9E7D1; --realm-glow-mid-rgb: 241, 203, 156; --realm-glow-lo: #9E723D; --realm-ink: #140E08; --realm-ink-rgb: 20, 14, 8; --realm-deep-rgb: 65, 52, 37; }
[data-realm="winter"] { --realm-accent: #CFEFFF; --realm-accent-rgb: 207, 239, 255; --realm-glow: #E8F4FF; --realm-glow-rgb: 232, 244, 255; --realm-glow-hi: #F9FCFF; --realm-glow-mid-rgb: 241, 248, 255; --realm-glow-lo: #9EA6AD; --realm-ink: #0A1016; --realm-ink-rgb: 10, 16, 22; --realm-deep-rgb: 48, 59, 66; }
[data-realm="ember"] { --realm-accent: #FFB08A; --realm-accent-rgb: 255, 176, 138; --realm-glow: #F2A945; --realm-glow-rgb: 242, 169, 69; --realm-glow-hi: #FBE7CB; --realm-glow-mid-rgb: 247, 203, 143; --realm-glow-lo: #A5732F; --realm-ink: #150A07; --realm-ink-rgb: 21, 10, 7; --realm-deep-rgb: 66, 42, 33; }
[data-realm="hollow"] { --realm-accent: #CDB0FF; --realm-accent-rgb: 205, 176, 255; --realm-glow: #FFB463; --realm-glow-rgb: 255, 180, 99; --realm-glow-hi: #FFEAD3; --realm-glow-mid-rgb: 255, 210, 161; --realm-glow-lo: #AD7A43; --realm-ink: #0E0A18; --realm-ink-rgb: 14, 10, 24; --realm-deep-rgb: 51, 42, 68; }
[data-realm="starwell"] { --realm-accent: #FFF0B8; --realm-accent-rgb: 255, 240, 184; --realm-glow: #A9C1FF; --realm-glow-rgb: 169, 193, 255; --realm-glow-hi: #E7EEFF; --realm-glow-mid-rgb: 203, 218, 255; --realm-glow-lo: #7383AD; --realm-ink: #070A16; --realm-ink-rgb: 7, 10, 22; --realm-deep-rgb: 39, 46, 66; }

/* ---------- a realm's preview painting: fades in; a shimmer in its own colours until then (or if it never comes) ---------- */
.rl-preview { position: relative; display: block; overflow: hidden; background-color: var(--realm-ink);
  background-image: radial-gradient(130% 70% at 50% 16%, rgba(var(--realm-accent-rgb), .2) 0%, rgba(var(--realm-accent-rgb), 0) 62%), radial-gradient(90% 60% at 50% 100%, rgba(var(--realm-glow-rgb), .16) 0%, rgba(var(--realm-glow-rgb), 0) 70%); }
.rl-preview.sh-shimmer { background-image: linear-gradient(105deg, rgba(var(--realm-glow-rgb), 0) 35%, rgba(var(--realm-glow-rgb), .13) 48%, rgba(var(--realm-accent-rgb), .09) 52%, rgba(var(--realm-glow-rgb), 0) 65%), radial-gradient(130% 70% at 50% 16%, rgba(var(--realm-accent-rgb), .2) 0%, rgba(var(--realm-accent-rgb), 0) 62%), radial-gradient(90% 60% at 50% 100%, rgba(var(--realm-glow-rgb), .16) 0%, rgba(var(--realm-glow-rgb), 0) 70%); background-size: 260% 100%, 100% 100%, 100% 100%; }
.rl-preview img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-out); }
.rl-preview img.is-in { opacity: 1; }

/* ---------- the mark of a realm: a small diamond in its accent ---------- */
.rl-mark { display: block; flex: none; color: var(--realm-accent); filter: drop-shadow(0 0 4px rgba(var(--realm-accent-rgb), .8)); }

/* ---------- a realm chip (reveal): a dot of its painting, its name ---------- */
.rl-chip { position: relative; display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 14px 0 5px; border: 0; border-radius: 18px; color: rgba(243, 235, 221, .86); font: 600 12.5px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: rgba(10, 13, 24, .58); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .3); transition: transform .22s var(--ease-out), box-shadow .35s var(--ease-out), background .35s, color .35s; }
.rl-chip::after { content: ''; position: absolute; left: -2px; right: -2px; top: -5px; bottom: -5px; }
.rl-chip:active { transform: scale(.96); }
.rl-chip-dot { position: relative; flex: none; width: 26px; height: 26px; border-radius: 13px; overflow: hidden; background: var(--realm-ink); box-shadow: 0 0 0 1px rgba(var(--realm-accent-rgb), .55); }
.rl-chip-dot img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); }
.rl-chip-dot img.is-in { opacity: 1; }
.rl-chip[aria-pressed="true"] { color: var(--parchment); background: linear-gradient(180deg, rgba(var(--realm-accent-rgb), .2), rgba(var(--realm-accent-rgb), .08)), rgba(10, 13, 24, .62); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .85), 0 0 18px rgba(var(--realm-accent-rgb), .3); }
.rl-chip[aria-pressed="true"] .rl-chip-dot { box-shadow: 0 0 0 1.5px var(--realm-accent), 0 0 10px rgba(var(--realm-accent-rgb), .7); }
.rl-chip.is-painting { cursor: default; color: rgba(243, 235, 221, .7); }
.rl-chip.is-painting .rl-chip-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(var(--realm-glow-rgb), .9) 0%, rgba(var(--realm-glow-rgb), 0) 62%); animation: rl-breathe 1.6s ease-in-out infinite; }
.rl-chip:focus-visible { outline: 2px solid rgba(var(--realm-accent-rgb), .8); outline-offset: 3px; }
/* "See it in another realm": a gold thread of a pill */
.rl-more { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 16px 0 13px; border: 0; border-radius: 20px; color: var(--gold-hi); font: 600 13.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; position: relative;
  background: rgba(10, 13, 24, .6); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .62), 0 8px 26px rgba(0, 0, 0, .35), 0 0 22px rgba(233, 196, 106, .16); transition: transform .22s var(--ease-out), box-shadow .3s; }
.rl-more::after { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -4px; }
.rl-more svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 4px rgba(233, 196, 106, .7)); }
.rl-more:active { transform: scale(.96); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .9), 0 8px 26px rgba(0, 0, 0, .35), 0 0 26px rgba(233, 196, 106, .3); }
.rl-more:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 3px; }
.rl-more.is-compact { width: 40px; padding: 0; justify-content: center; }

/* ---------- the event banner (Home, the Atlas): "The Hollow Moon is rising · 23 days left" ---------- */
.rl-banner { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 7px 16px 7px 8px; box-sizing: border-box; border: 0; border-radius: 22px; overflow: hidden; color: var(--parchment); font: 500 13.5px/1.25 var(--sans); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(100deg, rgba(var(--realm-accent-rgb), .2) 0%, rgba(var(--realm-ink-rgb), .55) 46%, rgba(var(--realm-glow-rgb), .1) 100%), rgba(10, 13, 24, .55); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .42), 0 10px 30px rgba(0, 0, 0, .3), 0 0 26px rgba(var(--realm-accent-rgb), .16); transition: transform .22s var(--ease-out); }
.rl-banner:active { transform: scale(.98); }
.rl-banner::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(var(--realm-accent-rgb), .22) 50%, rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: rl-glint 6.5s ease-in-out 2s infinite; }
.rl-banner-icon { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; color: var(--realm-accent); background: radial-gradient(circle at 40% 35%, rgba(var(--realm-accent-rgb), .3), rgba(var(--realm-accent-rgb), .05) 70%); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .45), 0 0 14px rgba(var(--realm-accent-rgb), .35); }
.rl-banner-icon svg { display: block; filter: drop-shadow(0 0 4px rgba(var(--realm-accent-rgb), .9)); }
.rl-banner-text { position: relative; min-width: 0; }
.rl-banner-text b { font: italic 400 15px/1.2 var(--serif); letter-spacing: 0; color: var(--parchment); }
.rl-banner-left { color: var(--realm-accent); font-weight: 600; white-space: nowrap; }
.rl-banner:focus-visible { outline: 2px solid rgba(var(--realm-accent-rgb), .8); outline-offset: 3px; }

/* ---------- a short sparkle, bursting from the centre of its parent ---------- */
.rl-sparkle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rl-spark { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #FFFBEF; box-shadow: 0 0 6px 2px rgba(var(--realm-accent-rgb), .85); opacity: 0; animation: rl-spark 1.1s var(--ease-out) var(--d, 0s) both; }
.rl-spark.is-big { left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 0; background: radial-gradient(circle, #FFFFFF 0%, rgba(var(--realm-glow-mid-rgb), .9) 40%, rgba(var(--realm-glow-mid-rgb), 0) 72%); box-shadow: none; -webkit-clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes rl-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(4px) scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(1); } }
@keyframes rl-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: none; } }
@keyframes rl-breathe { 0%, 100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes rl-glint { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }

/* ---------- the sheet of realms (reveal: "See it in another realm") ---------- */
.rs .sheet-body { padding-left: 0; padding-right: 0; padding-bottom: 14px; }
.rs .rs-head { padding: 4px 24px 12px; }
.rs .rs-head .sheet-sub { font-size: 15px; }
.rs-film { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: rgba(243, 235, 221, .72); }
.rs-film svg { flex: none; }
.rs-film b { font-weight: 650; color: var(--parchment); }
.rs-track { --rs-w: 188px; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 8px calc(50% - var(--rs-w) / 2) 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.rs-track::-webkit-scrollbar { display: none; }
.rs-card { position: relative; flex: none; width: var(--rs-w, 196px); display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; background: none; color: var(--parchment); text-align: left; cursor: pointer; scroll-snap-align: center; -webkit-appearance: none; appearance: none; transition: transform .35s var(--ease-out), opacity .35s; }
.rs-card:active { transform: scale(.98); }
.rs-frame { position: relative; display: block; width: 100%; padding-top: 150%; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--realm-accent-rgb), .3), 0 16px 34px rgba(0, 0, 0, .45); transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.rs-frame .rl-preview { position: absolute; inset: 0; }
.rs-frame::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(0deg, rgba(var(--realm-ink-rgb), .92) 0%, rgba(var(--realm-ink-rgb), .5) 45%, rgba(var(--realm-ink-rgb), 0) 100%); }
.rs-card.is-selected .rs-frame { transform: translateY(-3px); box-shadow: 0 0 0 1.5px var(--realm-accent), 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--realm-accent-rgb), .35); }
.rs-badge { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font-size: 10px; font-weight: 650; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--parchment); background: rgba(10, 13, 24, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rs-badge.is-here { color: var(--realm-accent); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .55); }
.rs-badge.is-free { color: var(--realm-accent); }
.rs-badge.is-cost { color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); }
.rs-badge.is-painting { color: var(--realm-glow-hi); }
.rs-badge.is-painting::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--realm-glow); box-shadow: 0 0 6px rgba(var(--realm-glow-rgb), .9); animation: rl-breathe 1.4s ease-in-out infinite; }
.rs-event { position: absolute; right: 10px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 11px; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--realm-accent); background: rgba(var(--realm-ink-rgb), .7); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .4); }
.rs-name { display: block; padding: 0 2px; font: 400 21px/1.1 var(--serif); }
.rs-tag { display: block; margin-top: -4px; padding: 0 2px; font: italic 300 14px/1.38 var(--serif); color: rgba(243, 235, 221, .72); }
.rs-foot { display: flex; flex-direction: column; gap: 8px; padding: 2px 24px 0; }
.rs-foot .btn { width: 100%; }
.rs-go { position: relative; overflow: hidden; }
.rs-go[aria-disabled="true"] { filter: saturate(.55) brightness(.82); cursor: default; }
.rs-go[aria-busy="true"] .rs-go-label { animation: sheet-breathe 1.2s ease-in-out infinite; }
.rs-go-label { display: flex; align-items: center; min-width: 0; }
.rs-go-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-go-cost { display: inline-flex; flex: none; align-items: center; gap: 6px; padding-left: 12px; margin-left: 12px; border-left: 1px solid rgba(26, 19, 5, .25); font-weight: 650; }
.rs-note { margin: 0; min-height: 18px; font-size: 13px; line-height: 1.4; text-align: center; color: rgba(243, 235, 221, .66); }
.rs-note.is-warn { color: var(--ember); }
@media (max-height: 740px) {
  .rs .rs-head { padding-bottom: 6px; }
  .rs .rs-head .sheet-title { font-size: 26px; }
  .rs .rs-head .sheet-sub { font-size: 14px; }
  .rs-track { --rs-w: 150px; padding-bottom: 10px; }
  .rs-name { font-size: 19px; }
  .rs-tag { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-banner::before, .rl-spark, .rl-chip.is-painting .rl-chip-dot::after, .rs-badge.is-painting::before { animation: none; }
  .rl-spark { opacity: 0; }
}

/* reveal.css */
/* Sealed: the tear and the before/after seam. Ported from design/board/Reveal.dc.html (390×844: the top block at y 26,
   the image 390×560 at y 124, the actions 26 from the bottom); the image takes whatever height the phone gives it.
   Realms (src/css/realms.css): the seam is lit in the glow of the realm on show; its name sits under "Its Elsewhere";
   realm chips and "See it in another realm" float over the foot of the painting. */

.rv { display: flex; flex-direction: column; }

/* ── top block: Seam n · Sealed, "Its Elsewhere", stars, time, best combo ── */
.rv-top { position: relative; z-index: 2; flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: calc(max(var(--safe-top), 10px) + 16px) 24px 0; }
.rv-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-eyebrow { display: block; min-height: 13.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .5s var(--ease-out); }
.rv-eyebrow.is-in { opacity: 1; }
.rv-titles { display: grid; min-height: 37.8px; align-items: end; } /* the board's 36px line, even when the title has to give way */
.rv-titles > * { grid-area: 1 / 1; justify-self: start; }
.rv-title { margin: 0; font: 380 36px/1.05 var(--serif); white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv.is-revealed .rv-title { opacity: 1; transform: none; }
.rv-wait-title { align-self: end; font: italic 300 25px/1.2 var(--serif); color: rgba(243, 235, 221, .9); white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease-out); }
.rv.is-developing .rv-wait-title { opacity: 1; animation: rv-breathe 2.6s ease-in-out infinite; }
.rv.is-hidden-elsewhere .rv-title { opacity: .55; transform: none; }
.rv-stats { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 1px; }
.rv-stats[hidden] { display: none; }
.rv-stars { display: flex; gap: 4px; }
.rv-star { display: block; filter: drop-shadow(0 0 6px rgba(233, 196, 106, .75)); opacity: 0; transform: scale(.3); }
.rv-star.is-empty { filter: none; }
.rv.is-scored .rv-star { animation: rv-pop .6s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .15s) forwards; }
.rv-meta { font-size: 13px; color: rgba(243, 235, 221, .75); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .6s var(--ease-out) .5s, transform .6s var(--ease-out) .5s; }
.rv.is-scored .rv-meta { opacity: 1; transform: none; }

/* ── the image: the Elsewhere under your photo, clipped by the seam ── */
.rv-stage { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 41px; overflow: hidden; isolation: isolate; background: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; }
.rv.is-compare .rv-stage { cursor: ew-resize; }
.rv-before, .rv-after, .rv-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rv-before, .rv-after { object-fit: cover; }
.rv-before { opacity: 0; transition: opacity .6s var(--ease-out), filter 1.1s var(--ease-out); }
.rv.is-ready .rv-before { opacity: 1; }
.rv-before.is-dim { filter: grayscale(.75) brightness(.4) contrast(1.06); }
.rv.is-ready .rv-before.is-fading { opacity: 0; }
.rv-after { opacity: 0; }
.rv-after.is-on { opacity: 1; }
.rv-canvas { opacity: 0; transition: opacity .45s var(--ease-out); }
.rv-canvas.is-on { opacity: 1; }
.rv-tear { transition-duration: .2s; }
.rv-csstear { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-csstear img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; -webkit-clip-path: polygon(50% 0, 50% 100%); clip-path: polygon(50% 0, 50% 100%); }

.rv-line { position: absolute; top: 0; left: -1px; width: 2px; height: 100%; pointer-events: none; will-change: transform; background: linear-gradient(180deg, var(--realm-glow-hi), var(--realm-glow) 50%, var(--realm-glow-hi)); box-shadow: 0 0 6px 1px rgba(var(--realm-glow-mid-rgb), .95), 0 0 24px 4px rgba(var(--realm-glow-rgb), .6); opacity: 0; transition: opacity .5s var(--ease-out); }
.rv-handle { position: absolute; top: 50%; left: -23px; width: 46px; height: 46px; margin-top: -23px; border-radius: 23px; display: flex; align-items: center; justify-content: center; pointer-events: none; will-change: transform; background: rgba(10, 13, 24, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1.5px var(--realm-glow), 0 0 22px rgba(var(--realm-glow-rgb), .6); opacity: 0; transition: opacity .5s var(--ease-out), box-shadow .3s var(--ease-out); }
.rv-handle svg { display: block; stroke: var(--realm-glow-hi); transition: transform .3s var(--ease-out); }
.rv.is-compare .rv-line, .rv.is-compare .rv-handle { opacity: 1; }
.rv.is-hidden-elsewhere .rv-line, .rv.is-hidden-elsewhere .rv-handle, .rv.is-hidden-elsewhere .rv-chip { display: none; }
.rv.is-dragging .rv-handle { box-shadow: 0 0 0 1.5px var(--realm-glow-hi), 0 0 32px rgba(var(--realm-glow-rgb), .85); }
.rv.is-dragging .rv-handle svg { transform: scale(.88); }
.rv-range { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; }
.rv-range:focus-visible ~ .rv-handle { box-shadow: 0 0 0 1.5px var(--realm-glow), 0 0 0 4px rgba(var(--realm-accent-rgb), .85), 0 0 22px rgba(var(--realm-glow-rgb), .6); }
.rv-chip { position: absolute; top: 14px; padding: 7px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; background: rgba(10, 13, 24, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; }
.rv-chip-l { left: 14px; }
.rv-chip-r { right: 14px; color: var(--realm-glow); }

/* while it paints: a hairline of gold creeping along the bottom of the print */
.rv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(243, 235, 221, .12); opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.rv.is-developing .rv-progress { opacity: 1; }
/* waiting for the connection: the words say so, the bar rests and the print lies still, dimmed (nothing is being painted
   meanwhile, and the developing print may not have its photo without the connection) */
.rv.is-developing.is-offline .rv-progress, .rv.is-offline .rv-develop { opacity: 0; }
.rv-progress i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--realm-glow-lo), var(--realm-glow) 60%, var(--realm-glow-hi)); box-shadow: 0 0 12px rgba(var(--realm-glow-rgb), .7); transition: transform .3s linear; }
.rv-note { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; font: italic 300 20px/1.38 var(--serif); color: rgba(243, 235, 221, .9); animation: rv-fade .6s var(--ease-out) both; }
.rv.is-hidden-elsewhere .rv-note { top: auto; bottom: 22px; transform: none; padding: 10px 16px; border-radius: 16px; background: rgba(10, 13, 24, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 17px; }
.rv-note[hidden] { display: none; }
.rv-note p { margin: 0; }
.rv-note .btn { font-style: normal; }
.rv-note .btn-ghost { min-width: 200px; }
.rv-note .btn-text { margin-top: -10px; }

/* ── actions: the Stray (once it is painted); Share and Save ── */
.rv-actions { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 8px; margin: 26px 24px max(26px, calc(var(--safe-bottom) + 10px)); visibility: hidden; }
.rv.is-compare .rv-actions { visibility: visible; }
.rv.is-compare .rv-actions > * { animation: rv-rise .7s var(--ease-out) backwards; }
.rv.is-compare .rv-actions > :nth-child(2) { animation-delay: .12s; }
.rv-stray { position: relative; overflow: hidden; height: 56px; border-radius: 28px; transition: transform .2s var(--ease-out), filter .45s var(--ease-out), color .45s; }
.rv-stray-icon { display: flex; }
.rv-stray-icon svg { display: block; }
.rv-stray.is-pending { color: rgba(26, 19, 5, .78); filter: saturate(.55) brightness(.8); cursor: default; }
.rv-stray.is-pending .rv-stray-icon { animation: rv-spin 5s linear infinite; }
.rv-stray.is-pending::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 248, 225, .55) 50%, rgba(255, 255, 255, 0) 70%); background-size: 260% 100%; animation: rv-shimmer 2.2s ease-in-out infinite; }
.rv-stray.is-arriving { animation: rv-arrive 1.4s var(--ease-out); }
.rv-sharing { display: flex; justify-content: center; gap: 6px; }
.rv-sharing[hidden] { display: none; }
.rv-share, .rv-save { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; background: transparent; color: rgba(243, 235, 221, .85); font: 600 14px var(--sans); cursor: pointer; transition: transform .2s var(--ease-out), color .2s; }
.rv-share:active, .rv-save:active { transform: scale(.97); }
.rv-share svg, .rv-save svg { flex: none; }
.rv-save[aria-busy="true"] { color: rgba(243, 235, 221, .6); cursor: default; }
.rv-save[aria-busy="true"] svg { animation: rv-drop 1s var(--ease-out) infinite; }
@keyframes rv-drop { 0% { transform: translateY(-3px); opacity: .4; } 60%, 100% { transform: none; opacity: 1; } }
.rv-stray:focus-visible, .rv-share:focus-visible, .rv-save:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }

.rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes rv-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes rv-spin { to { transform: rotate(360deg); } }
@keyframes rv-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes rv-arrive { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 0 0 0 rgba(247, 226, 166, .8); } 45% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 0 0 10px rgba(247, 226, 166, 0), 0 14px 44px rgba(233, 196, 106, .55); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 14px 34px rgba(233, 196, 106, .3); } }

/* short screens: tighter around the image */
@media (max-height: 720px) {
  .rv-top { margin-top: calc(max(var(--safe-top), 10px) + 8px); }
  .rv-title { font-size: 31px; }
  .rv-titles { min-height: 32.6px; }
  .rv-wait-title { font-size: 22px; }
  .rv-stage { margin-top: 18px; }
  .rv-actions { margin-top: 16px; margin-bottom: max(16px, calc(var(--safe-bottom) + 6px)); }
}

@media (prefers-reduced-motion: reduce) {
  .rv.is-developing .rv-wait-title, .rv-stray.is-pending .rv-stray-icon, .rv-stray.is-pending::after, .rv-save[aria-busy="true"] svg { animation: none; }
}

/* production v1: the ⋯ menu on a painting that isn't yours */
.rv-more { position: absolute; right: 12px; bottom: 14px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 20px; color: var(--parchment); background: rgba(10, 13, 24, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .14); cursor: pointer; animation: rv-more-in .6s var(--ease-out) .9s backwards; transition: transform .2s var(--ease-out); }
.rv-more::after { content: ''; position: absolute; inset: -4px; }
.rv-more[hidden] { display: none; }
.rv-more:active { transform: scale(.92); }
@keyframes rv-more-in { from { opacity: 0; } to { opacity: 1; } }

/* ── realms ── */
/* the realm on show, under "Its Elsewhere" (while a new one is painted: "into the Drowned Garden") */
.rv-realm { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 20px; margin-top: 1px; font: italic 300 16px/1.25 var(--serif); color: rgba(243, 235, 221, .88); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .7s var(--ease-out) .2s, transform .7s var(--ease-out) .2s; }
.rv-realm.is-in { opacity: 1; transform: none; }
.rv-realm-name { overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.rv-realm.is-into .rv-realm-name { animation: rv-breathe 2.6s ease-in-out infinite; }
/* the seam lit in the realm's glow when WebGL can't tear */
.rv-csstear.seam-glow { filter: drop-shadow(0 0 5px rgba(var(--realm-glow-mid-rgb), .95)) drop-shadow(0 0 16px rgba(var(--realm-glow-rgb), .6)); }

/* a painting already made for another realm rises over the one on show */
.rv-after-next { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .65s var(--ease-out); }
.rv-after-next.is-on { opacity: 1; }

/* the realm chips and "See it in another realm", over the foot of the painting */
.rv-realms { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; padding: 40px 10px 12px; pointer-events: none; background: linear-gradient(0deg, rgba(10, 13, 24, .52) 0%, rgba(10, 13, 24, .24) 52%, rgba(10, 13, 24, 0) 100%); animation: rv-rise .7s var(--ease-out) .2s backwards; }
.rv-realms[hidden] { display: none; }
.rv-realms.has-more { padding-right: 60px; }
.rv-realms-track { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 6px 4px; margin: -6px -4px; pointer-events: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rv-realms-track::-webkit-scrollbar { display: none; }
.rv-realms-track.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.rv-realms-track.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.rv-realms-track.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.rv-realms.is-locked .rv-realms-track { pointer-events: none; }
.rv-realms.is-locked .rl-chip:not(.is-painting) { opacity: .5; }
.rv-realms .rl-chip, .rv-realms .rl-more { transition: transform .22s var(--ease-out), box-shadow .35s var(--ease-out), background .35s, color .35s, opacity .35s; }
.rv.is-hidden-elsewhere .rv-realms:not([hidden]) ~ .rv-note { bottom: 74px; }

/* painting it into another realm: the seam steps aside while the print develops, the title waits */
.rv.is-repainting .rv-line, .rv.is-repainting .rv-handle { opacity: 0; }
.rv.is-repainting.is-developing .rv-title { opacity: 0; transform: translateY(10px); }
.rv.is-repainting .rv-realm-mark { animation: rv-breathe 1.6s ease-in-out infinite; }

@media (max-height: 720px) {
  .rv-realm { font-size: 15px; min-height: 19px; }
  .rv-realms { padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-realm.is-into .rv-realm-name, .rv.is-repainting .rv-realm-mark, .rv-realms { animation: none; }
}

/* ── 1.1: the seal's star (docs/BUILD-1.1.md 3): the fourth, a little apart, the seam stitched through it ── */
.rv-star.is-seal { margin-left: 4px; }
.rv-star.is-seal:not(.is-empty) { filter: drop-shadow(0 0 7px rgba(255, 214, 140, .9)); }

/* ── 1.1: a story seam, sealed: its act's page over the painted scene, its stars, what it granted ── */
.rvt { background: var(--realm-ink, var(--ink)); }
.rvt-art { position: absolute; inset: 0; overflow: hidden; }
.rvt-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s var(--ease-out), transform 14s cubic-bezier(.2, .6, .2, 1); }
.rvt.is-in .rvt-scene[src] { opacity: 1; transform: scale(1); }
.rvt-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 14, .78) 0%, rgba(5, 7, 14, .2) 22%, rgba(5, 7, 14, 0) 38%, rgba(5, 7, 14, .55) 58%, rgba(5, 7, 14, .93) 78%, rgba(5, 7, 14, .97) 100%); }
.rvt-scroll { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(max(var(--safe-top), 10px) + 56px) 22px calc(max(var(--safe-bottom), 12px) + 10px); box-sizing: border-box; scrollbar-width: none; }
/* the way out, to the Journal (Android's back presses it): top left over the scene, the page clear of it */
.rvt-close { position: absolute; z-index: 2; left: 14px; top: calc(max(var(--safe-top), 10px) + 4px); background: rgba(5, 7, 14, .48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .1); }
.rvt-close:focus-visible { outline: 2px solid var(--realm-accent, var(--gold)); outline-offset: 3px; }
.rvt-scroll::-webkit-scrollbar { display: none; }
.rvt-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; opacity: 0; transform: translateY(-6px); transition: opacity .8s var(--ease-out) .2s, transform .8s var(--ease-out) .2s; }
.rvt.is-in .rvt-head { opacity: 1; transform: none; }
.rvt-eyebrow { text-wrap: balance; text-shadow: 0 1px 10px rgba(5, 7, 14, .9); }
.rvt-title { margin: 0; max-width: 340px; font: 380 34px/1.08 var(--serif); color: var(--parchment); text-wrap: balance; text-shadow: 0 2px 24px rgba(5, 7, 14, .85); }
.rvt-stats { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.rvt-stats[hidden] { display: none; }
.rvt-stars { display: flex; gap: 4px; }
.rvt-stars .rv-star { animation: rv-pop .6s cubic-bezier(.2, 1.6, .4, 1) calc(.9s + var(--i) * .15s) forwards; }
.rvt-meta { font-size: 13px; font-weight: 650; color: rgba(243, 235, 221, .82); text-shadow: 0 1px 8px rgba(5, 7, 14, .9); }
.rvt-gap { flex: 1 0 22vh; }
.rvt-page { position: relative; margin: 0 auto; max-width: 380px; width: 100%; box-sizing: border-box; padding: 20px 22px 22px; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, rgba(243, 235, 221, .07), rgba(243, 235, 221, .03)), rgba(10, 13, 24, .66); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px var(--gold-hair), 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out) .6s, transform 1s var(--ease-spring) .6s; }
.rvt-page::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(233, 196, 106, 0), rgba(255, 241, 201, .9), rgba(233, 196, 106, 0)); box-shadow: 0 0 10px rgba(233, 196, 106, .7); }
.rvt.is-in .rvt-page { opacity: 1; transform: none; }
.rvt-by { display: block; margin-bottom: 10px; }
.rvt-text { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(243, 235, 221, .95); }
.rvt-done { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(233, 196, 106, .2); font-size: 16px; line-height: 1.4; color: var(--gold-hi); }
.rvt-done[hidden] { display: none; }
.rvt-grants { display: flex; flex-direction: column; gap: 12px; margin: 14px auto 0; max-width: 380px; width: 100%; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-spring); }
.rvt-grants:empty { display: none; }
.rvt-grants.is-in { opacity: 1; transform: none; }
.rvt-clue { padding: 16px 20px; border-radius: 16px; text-align: left; background: radial-gradient(120% 90% at 0% 0%, rgba(233, 196, 106, .14), rgba(233, 196, 106, 0) 60%), rgba(10, 13, 24, .7); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); }
.rvt-clue-name { margin: 6px 0 4px; font: 380 22px/1.15 var(--serif); color: var(--parchment); }
.rvt-clue-text { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(243, 235, 221, .86); }
.rvt-legend { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 14px 16px 14px 14px; border: 0; border-radius: 16px; text-align: left; color: inherit; cursor: pointer;
  background: radial-gradient(100% 120% at 0% 50%, rgba(255, 241, 201, .16), rgba(255, 241, 201, 0) 60%), rgba(10, 13, 24, .72); box-shadow: inset 0 0 0 1px rgba(255, 241, 201, .55), 0 0 30px rgba(233, 196, 106, .15); transition: transform .2s var(--ease-out); }
.rvt-legend:active { transform: scale(.98); }
.rvt-legend-card { position: relative; flex: none; width: 74px; height: 111px; border-radius: 8px; overflow: hidden; background: var(--night); box-shadow: 0 0 0 1.5px #F0CF85, 0 0 0 3px rgba(10, 13, 24, .8), 0 0 22px rgba(255, 214, 140, .5), 0 10px 20px rgba(0, 0, 0, .5); animation: rvt-card 1s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
@keyframes rvt-card { from { opacity: 0; transform: rotateY(80deg) scale(.8); } to { opacity: 1; transform: none; } }
.rvt-legend-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease-out); }
.rvt-legend-card img.is-in { opacity: 1; }
.rvt-legend-foil { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 241, 201, 0) 30%, rgba(255, 241, 201, .5) 46%, rgba(166, 244, 230, .25) 54%, rgba(255, 241, 201, 0) 70%); background-size: 260% 100%; mix-blend-mode: screen; animation: cp-foil 3.6s ease-in-out infinite; }
.rvt-legend-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rvt-legend-name { font: 380 20px/1.15 var(--serif); color: var(--parchment); text-wrap: balance; }
.rvt-legend-lore { font-size: 14.5px; line-height: 1.4; color: rgba(243, 235, 221, .8); }
.rvt-note { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px auto 0; max-width: 340px; text-align: center; font: italic 300 16px/1.4 var(--serif); color: rgba(243, 235, 221, .82); }
.rvt-note[hidden] { display: none; }
.rvt-note p { margin: 0; }
.rvt-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; opacity: 0; transition: opacity .8s var(--ease-out) 1.2s; }
.rvt.is-in .rvt-actions { opacity: 1; }
.rvt-journal { width: 100%; max-width: 300px; }
@media (max-height: 700px) { .rvt-scroll { padding-top: calc(max(var(--safe-top), 10px) + 52px); } .rvt-title { font-size: 29px; } .rvt-text { font-size: 16.5px; } .rvt-gap { flex-basis: 14vh; } }
@media (prefers-reduced-motion: reduce) {
  .rvt-scene { transition: opacity .4s; transform: none; }
  .rvt-head, .rvt-page, .rvt-grants, .rvt-actions { transition-duration: .01s; transition-delay: 0s; transform: none; }
  .rvt-legend-card, .rvt-legend-foil { animation: none; }
  .rvt-stars .rv-star { animation-duration: .01s; animation-delay: 0s; }
}

/* seam.css */
/* The seam opens (design/board/Seam.dc.html). Classes are opening-*, keeping clear of the reveal's seam pieces.
   Realms (src/css/realms.css): the seam's light (motes, progress, the Cartographer's dots and checks) is the realm's
   glow; the Lantern City keeps the board's gold. The realm's name, a rare seam's badge and the Starwell's moment are
   at the end. */
.opening { background: #05070E; color: var(--parchment); }

.opening-canvas, .opening-photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.opening-photo { z-index: 0; }
.opening-canvas { z-index: 1; }
.opening-wash { z-index: 1; }
.opening-motes, .opening-scrim, .opening-top, .opening-panel, .opening-badge-slot { z-index: 2; }
.opening-canvas { opacity: 0; transition: opacity .9s var(--ease-out) .55s, filter 1.4s var(--ease-out); }
.opening-canvas.is-in { opacity: 1; }
.opening-photo { object-fit: cover; opacity: 0; transition: opacity .3s var(--ease-out); filter: grayscale(.75) brightness(.4) contrast(1.04); }
.opening-photo.is-in { opacity: 1; }
.opening[data-phase="error"] .opening-canvas, .opening[data-phase="error"] .opening-photo { filter: grayscale(.8) brightness(.55); }

/* motes drifting out of the seam */
.opening-motes { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.2s; }
.opening-mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgb(var(--realm-glow-mid-rgb)); box-shadow: 0 0 8px 2px rgba(var(--realm-glow-mid-rgb), .7); opacity: 0; animation: opening-drift 7s ease-out infinite; }
@keyframes opening-drift { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -180px) scale(1); opacity: 0; } }
.opening[data-phase="error"] .opening-motes { opacity: 0; }

.opening-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: calc(380px + var(--safe-bottom)); pointer-events: none; background: linear-gradient(0deg, rgba(5, 7, 14, .98) 0%, rgba(5, 7, 14, .9) 50%, rgba(5, 7, 14, 0) 100%); transition: height .9s var(--ease-out); }
.opening.has-realm .opening-scrim { height: calc(430px + var(--safe-bottom)); }

/* "Seam 5 · A warm home kitchen" */
.opening-top { position: absolute; left: 24px; right: 24px; top: calc(30px + var(--safe-top)); display: flex; justify-content: center; text-align: center; }
/* a dark halo keeps the gold type legible where it crosses the bright seam */
.opening-title { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; text-shadow: 0 0 2px rgba(5, 7, 14, .9), 0 0 9px rgba(5, 7, 14, .85), 0 1px 16px rgba(5, 7, 14, .7); } /* one line: a long place gives way (src/ui/fit.js), then ends in an ellipsis */
.opening-seam-n, .opening-place { opacity: 0; transition: opacity .9s var(--ease-out); }
.opening-seam-n.is-in, .opening-place.is-in { opacity: 1; }

/* the panel, anchored to the bottom */
.opening-panel { position: absolute; left: 30px; right: 30px; bottom: calc(40px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 22px; animation: sh-rise .9s var(--ease-spring) .15s backwards; }
.opening-voice { display: flex; flex-direction: column; gap: 10px; }
.opening-eyebrow { transition: color .6s, opacity .26s var(--ease-out); text-shadow: 0 0 2px rgba(5, 7, 14, .9), 0 0 9px rgba(5, 7, 14, .8); }
.opening-eyebrow.is-changing { opacity: 0; }
.opening-line-box.is-growing { overflow: hidden; transition: height .7s var(--ease-out); }
.opening-line { margin: 0; font-size: 22px; line-height: 1.36; color: var(--parchment); text-shadow: 0 1px 12px rgba(5, 7, 14, .6); transition: opacity .35s var(--ease-out), filter .35s var(--ease-out); }
.opening-line.is-leaving { opacity: 0; filter: blur(4px); }
.opening-word { display: inline-block; animation: opening-word .9s var(--ease-out) backwards; }
@keyframes opening-word { from { opacity: 0; transform: translateY(5px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* the Cartographer, about to speak */
.opening-dots { display: inline-flex; gap: 7px; height: 30px; align-items: center; }
.opening-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--realm-glow); box-shadow: 0 0 8px rgba(var(--realm-glow-rgb), .7); animation: opening-dot 1.6s ease-in-out infinite; }
.opening-dots i:nth-child(2) { animation-delay: .2s; }
.opening-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes opening-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* the steps */
.opening-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; transition: opacity .5s; }
.opening-step { display: flex; align-items: center; gap: 12px; min-height: 20px; color: rgba(243, 235, 221, .5); transition: color .5s; }
.opening-step[data-mode="active"] { color: var(--parchment); }
.opening-step[data-mode="done"] { color: rgba(243, 235, 221, .9); }
.opening-icon { display: flex; width: 20px; height: 20px; flex: none; color: var(--realm-glow); }
.opening-label { font-variant-numeric: tabular-nums; }
.opening-check { animation: opening-pop .5s var(--ease-spring) backwards; }
.opening-check-mark { stroke-dasharray: 14; stroke-dashoffset: 14; animation: opening-draw .45s var(--ease-out) .12s forwards; }
@keyframes opening-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes opening-draw { to { stroke-dashoffset: 0; } }
.opening-note { margin: -10px 0 0; font-size: 12px; color: var(--faint); }
.opening-note:empty { display: none; }

/* real progress */
.opening-bar { height: 2px; border-radius: 1px; background: rgba(243, 235, 221, .12); overflow: hidden; transition: opacity .5s; }
.opening-bar-fill { height: 2px; border-radius: 1px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--realm-glow-lo), var(--realm-glow) 60%, var(--realm-glow-hi)); box-shadow: 0 0 12px rgba(var(--realm-glow-rgb), .7); }

/* Step through: a gold thread of a button until the level is playable, then gold, breathing */
.opening-cta { position: relative; isolation: isolate; height: 52px; border: 1px solid rgba(233, 196, 106, .6); border-radius: 26px; background: transparent; color: var(--parchment); font-size: 15px; font-weight: 600; letter-spacing: .02em; transition: transform .2s var(--ease-out), color .6s var(--ease-out), border-color .6s; }
.opening-cta svg { flex: none; stroke: var(--gold); transition: stroke .6s; }
.opening-cta[aria-disabled="true"] { cursor: default; }
.opening-cta[aria-disabled="true"]:active { transform: none; }
.opening-cta::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 40%, #C9973F 76%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 14px 34px rgba(233, 196, 106, .3); opacity: 0; transition: opacity .7s var(--ease-out); }
.opening-cta::after { content: ''; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; opacity: 0; pointer-events: none; }
.opening-cta.is-ready { color: #1A1305; border-color: transparent; font-weight: 650; animation: opening-breathe 2.4s ease-in-out .9s infinite; }
.opening-cta.is-ready svg { stroke: #1A1305; }
.opening-cta.is-ready::before { opacity: 1; }
.opening-cta.is-ready::after { animation: opening-ring 2.4s ease-out .9s infinite; }
@keyframes opening-breathe { 0%, 100% { transform: none; } 45% { transform: scale(1.018); } }
@keyframes opening-ring { 0% { opacity: .85; box-shadow: 0 0 0 0 rgba(233, 196, 106, .55), 0 0 22px 2px rgba(233, 196, 106, .35); } 75% { opacity: 0; box-shadow: 0 0 0 13px rgba(233, 196, 106, 0), 0 0 34px 6px rgba(233, 196, 106, 0); } 100% { opacity: 0; } }
.opening-cta.is-ready:active { animation: none; transform: scale(.97); }
.opening-cta.is-retry { animation: none; }
.opening-cta.is-retry::after { animation: none; }
/* the moment it lights: one sweep of light across the gold */
.opening-cta-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.opening-cta-shine::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 252, 238, .75) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%) skewX(-18deg); opacity: 0; }
.opening-cta.is-ready .opening-cta-shine::before { animation: opening-shine 1.1s var(--ease-out) .15s both; }
@keyframes opening-shine { 0% { opacity: 1; transform: translateX(0) skewX(-18deg); } 100% { opacity: 1; transform: translateX(360%) skewX(-18deg); } }
/* a nudge when it is tapped too early */
.opening-cta.is-nudge { animation: opening-nudge .42s ease-in-out; }
@keyframes opening-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

.opening-leave { align-self: center; margin-top: -12px; }
.opening-leave[hidden] { display: none; }

/* a seam that would not open */
.opening[data-phase="error"] .opening-steps, .opening[data-phase="error"] .opening-bar { display: none; }

/* ---------- realms: the world the seam opens onto ---------- */
/* a breath of the realm's own light and night over the developing photo (the Lantern City keeps the board's) */
.opening-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease-out);
  background: radial-gradient(34% 52% at 50% 44%, rgba(var(--realm-accent-rgb), .13) 0%, rgba(var(--realm-accent-rgb), 0) 100%), linear-gradient(180deg, rgba(var(--realm-ink-rgb), .42) 0%, rgba(var(--realm-ink-rgb), 0) 34%); }
.screen:not([data-realm="lantern"]) > .opening.has-realm .opening-wash { opacity: 1; }

/* "The seam opens onto" / The Drowned Garden: it grows into the panel and lights up */
.opening-realm { display: block; max-height: 0; margin-top: -10px; opacity: 0; transform: translateY(6px); filter: blur(5px); font: 400 31px/1.1 var(--serif); letter-spacing: .004em; color: var(--parchment);
  text-shadow: 0 0 22px rgba(var(--realm-glow-rgb), .55), 0 0 2px rgba(5, 7, 14, .8), 0 1px 14px rgba(5, 7, 14, .7);
  transition: max-height .75s var(--ease-out), margin-top .75s var(--ease-out), opacity 1s var(--ease-out) .12s, transform 1s var(--ease-out) .12s, filter 1s var(--ease-out) .12s; }
.opening-realm.is-in { max-height: 90px; margin-top: -2px; opacity: 1; transform: none; filter: none; }
.opening[data-phase="error"] .opening-realm { display: none; }

/* a rare seam: a badge under the place's name, with a short sparkle */
.opening-badge-slot { position: absolute; left: 0; right: 0; top: calc(60px + var(--safe-top)); display: flex; justify-content: center; pointer-events: none; }
.opening-badge { position: relative; animation: opening-badge 1s var(--ease-spring) backwards; }
.opening-badge-in { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 12px; border-radius: 15px; overflow: hidden; font: 650 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--realm-accent);
  background: rgba(7, 9, 18, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .55), 0 0 24px rgba(var(--realm-accent-rgb), .3); }
.opening-badge-in svg { flex: none; filter: drop-shadow(0 0 5px rgba(var(--realm-accent-rgb), .95)); }
.opening-badge-in::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(var(--realm-accent-rgb), .45) 50%, rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: opening-badge-glint 1.3s var(--ease-out) .35s both; }
.opening-badge .rl-sparkle { z-index: -1; }
@keyframes opening-badge { from { opacity: 0; transform: translateY(-6px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes opening-badge-glint { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
.opening-badge.is-mythic .opening-badge-in { color: var(--realm-accent); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .7), 0 0 26px rgba(var(--realm-glow-rgb), .45); }
/* the rare seam's light runs once down the seam */
.opening.is-rare .opening-wash::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 160px; margin-left: -80px; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--realm-glow-mid-rgb), .55), rgba(var(--realm-glow-mid-rgb), 0)); background-size: 100% 40%; background-repeat: no-repeat; animation: opening-run 1.4s var(--ease-out) .3s both; mix-blend-mode: screen; }
@keyframes opening-run { from { background-position: 50% -60%; opacity: 1; } to { background-position: 50% 160%; opacity: .2; } }

/* the Starwell: stars stay above the photo once its moment has passed */
.opening-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; animation: sh-fade 2.4s var(--ease-out) 1s forwards; }
.opening-star, .om-dot { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #F4F6FF; box-shadow: 0 0 calc(var(--s) * 2.4) rgba(var(--realm-glow-rgb), .85); animation: om-twinkle 3.4s ease-in-out var(--d) infinite; }
.opening-star.is-bright, .om-dot.is-bright { background: #FFFBEA; box-shadow: 0 0 6px 1px rgba(var(--realm-accent-rgb), .9), 0 0 18px rgba(var(--realm-glow-rgb), .6); }
@keyframes om-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: none; } }

/* the mythic moment: the night sky falls in (the seam's own words wait behind it, then return as it settles) */
.opening-top, .opening-panel, .opening-badge-slot { transition: filter 1.1s var(--ease-out); }
.opening.is-mythic:not(.is-mythic-settled) .opening-top, .opening.is-mythic:not(.is-mythic-settled) .opening-panel, .opening.is-mythic:not(.is-mythic-settled) .opening-badge-slot { filter: opacity(0); transition-duration: .4s; }
.opening-mythic { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) 30px calc(24px + var(--safe-bottom)); box-sizing: border-box; text-align: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse 85% 58% at 50% 44%, rgba(28, 38, 92, .62) 0%, rgba(8, 11, 26, .94) 60%, rgba(3, 5, 12, .985) 100%); opacity: 0; transition: opacity 1.1s var(--ease-out); }
.opening-mythic.is-on { opacity: 1; }
.opening-mythic.is-settled { opacity: 0; transition-duration: 1.25s; pointer-events: none; }
.om-sky { position: absolute; inset: -6%; }
.opening-mythic.is-on .om-sky { animation: om-fall-in 3.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes om-fall-in { from { transform: translateY(-14%) scale(1.25); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.om-falls { position: absolute; inset: 0; }
.om-fall { position: absolute; width: 130px; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(var(--realm-glow-mid-rgb), .5) 60%, #FFFFFF); box-shadow: 0 0 8px rgba(var(--realm-glow-rgb), .8); transform-origin: 100% 50%; opacity: 0; }
.opening-mythic.is-on .om-fall { animation: om-shoot 1.5s cubic-bezier(.3, 0, .7, 1) var(--d) both; }
@keyframes om-shoot { 0% { opacity: 0; transform: rotate(32deg) translateX(0) scaleX(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(32deg) translateX(260px) scaleX(1); } }
.om-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
.om-core > * { opacity: 0; }
.opening-mythic.is-on .om-core > * { animation: om-in 1.2s var(--ease-out) forwards; }
.opening-mythic.is-on .om-eyebrow { animation-delay: 1s; }
.opening-mythic.is-on .om-title { animation: om-title 1.9s var(--ease-out) 1.25s forwards; }
.opening-mythic.is-on .om-line { animation-delay: 2.1s; }
.opening-mythic.is-on .om-odds { animation-delay: 2.9s; }
@keyframes om-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes om-title { from { opacity: 0; letter-spacing: .3em; filter: blur(8px); } to { opacity: 1; letter-spacing: .01em; filter: blur(0); } }
.om-glyph { position: relative; display: flex; margin-bottom: 8px; color: var(--realm-accent); filter: drop-shadow(0 0 6px rgba(255, 251, 234, .95)) drop-shadow(0 0 22px rgba(var(--realm-glow-rgb), .9)) drop-shadow(0 0 44px rgba(var(--realm-glow-rgb), .5)); }
.opening-mythic.is-on .om-glyph { animation: om-glyph 1.6s var(--ease-spring) .25s both; }
.om-glyph svg { display: block; animation: om-turn 14s linear infinite; }
@keyframes om-glyph { from { opacity: 0; transform: scale(.15) rotate(-60deg); } to { opacity: 1; transform: none; } }
@keyframes om-turn { to { transform: rotate(360deg); } }
.om-eyebrow { color: var(--realm-accent); letter-spacing: .3em; }
.om-title { margin: 0; font: 380 46px/1.04 var(--serif); color: #FFF6DA; text-shadow: 0 0 24px rgba(var(--realm-glow-rgb), .75), 0 0 2px rgba(255, 246, 218, .6); white-space: nowrap; }
.om-line { margin: 2px 0 0; font-size: 19px; color: rgba(243, 235, 221, .9); text-wrap: balance; }
.om-odds { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--realm-glow-mid-rgb), .75); }

/* short screens */
@media (max-height: 740px) {
  .opening-panel { gap: 18px; bottom: calc(28px + var(--safe-bottom)); }
  .opening-line { font-size: 20px; }
  .opening-top { top: calc(22px + var(--safe-top)); }
  .opening-badge-slot { top: calc(50px + var(--safe-top)); }
  .opening-realm { font-size: 27px; }
  .om-title { font-size: 40px; }
  .om-line { font-size: 17px; }
}
@media (max-height: 640px) {
  .opening-panel { gap: 14px; bottom: calc(20px + var(--safe-bottom)); }
  .opening-steps { gap: 9px; }
  .opening-line { font-size: 18px; }
  .opening-realm { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-word { animation-duration: .01s; animation-delay: 0s !important; }
  .opening-cta.is-ready, .opening-cta.is-ready::after, .opening-dots i { animation: none; }
  .opening-star, .om-dot, .om-glyph svg, .opening-badge-in::after, .opening.is-rare .opening-wash::after { animation: none; }
  .opening-mythic.is-on .om-sky, .opening-mythic.is-on .om-fall { animation: none; }
  .opening-mythic.is-on .om-core > *, .opening-mythic.is-on .om-glyph { animation-duration: .01s; animation-delay: 0s !important; }
  .opening-realm { transition-duration: .01s; transition-delay: 0s; }
}

/* settings.css */
/* Settings (src/ui/settings.js) and the Stray odds strip (also in the Strays tab). */
.set .sheet-body { padding-bottom: 18px; }
.set-head { padding-bottom: 14px; }

/* the odds: three cells, the gems lit by rarity */
.odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.odds-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 6px 14px; color: var(--aether); }
.odds-cell + .odds-cell::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: rgba(243, 235, 221, .08); }
.odds-cell.is-mythic { color: var(--gold-hi); }
.odds-gems { display: flex; gap: 3px; height: 10px; }
.odds-gems svg { display: block; filter: drop-shadow(0 0 4px currentColor); }
.odds-pct { font: 380 26px/1 var(--serif); color: var(--parchment); }
.odds-name { font: 650 10px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.set-odds-note { margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.45; color: rgba(243, 235, 221, .62); text-align: center; }

/* deleting the account: quiet until asked */
.set-delete { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 8px 0 4px; padding: 0 12px; border: 0; background: none; color: rgba(255, 138, 91, .92); font: 600 15px var(--sans); cursor: pointer; transition: opacity .2s; }
.set-delete:active { opacity: .6; }
.set-delete svg { flex: none; }
.set-foot { display: flex; justify-content: center; gap: 14px; padding: 6px 0 2px; font-size: 12px; letter-spacing: .04em; color: rgba(243, 235, 221, .45); font-variant-numeric: tabular-nums; }

.set-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 6px; text-align: center; }
.set-confirm-mark { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(255, 138, 91, .45); background: radial-gradient(circle at 50% 40%, rgba(255, 138, 91, .16), rgba(255, 138, 91, 0) 70%); }
.set-confirm-title { font-size: 28px; }
.set-confirm-body { margin: 0 0 8px; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.set-confirm .btn { width: 100%; max-width: 320px; }
.set-danger { height: 54px; color: #1A0B05; background: linear-gradient(180deg, #FFB08F 0%, #FF8A5B 50%, #D9653A 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(80, 20, 0, .35), 0 12px 30px rgba(255, 138, 91, .28); }
.set-danger[disabled] { opacity: .7; }
.set-gone { padding: 34px 8px 28px; }
.set-gone-glyph { margin-bottom: 10px; }

/* the language: two words on a dark track, the chosen one lit in gold (the switch's material) */
.set-lang-row { gap: 12px; }
.set-lang-row .sheet-row-text { flex: 1 1 auto; }
.set-langs { position: relative; flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 18px; background: rgba(243, 235, 221, .07); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .1); }
.set-lang { position: relative; flex: none; min-width: 76px; height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 15px; background: none; color: rgba(243, 235, 221, .72); font: 600 13.5px/1 var(--sans); letter-spacing: .01em; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s; }
.set-lang::after { content: ''; position: absolute; inset: -6px -2px; }
.set-lang.is-on { color: #1A1305; background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 45%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px rgba(233, 196, 106, .35); }
.set-lang:not(.is-on):active { color: var(--parchment); background: rgba(243, 235, 221, .06); }
.set-lang:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 2px; }
@media (max-width: 360px) { .set-lang { min-width: 66px; padding: 0 9px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .set-lang { transition: none; } }

/* sound off silences the music too: its row rests (its own switch still keeps the choice) */
.set-music { transition: opacity .35s var(--ease-out); }
.set-music.is-resting { opacity: .45; }

/* share.css */
/* Share (docs/GAMEPLAY.md, "1. The sharing kit"; design/board/Share.dc.html): the studio around the pictures, which
   share.js draws on canvases. They swipe side by side (scroll snap), the current one centred and its neighbours peeking;
   under them the dots, the format picker and the actions.
   Realms (src/css/realms.css): the sky and the cards' glow take the colours of the realm being shared. */
.share .share-sky { background: radial-gradient(ellipse 90% 60% at 50% 45%, rgba(var(--realm-deep-rgb), .55) 0%, rgba(20, 25, 54, .35) 45%, rgba(10, 13, 24, 0) 80%); }
.share { display: flex; flex-direction: column; background: var(--ink); color: var(--parchment); }

.share-top { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(14px + var(--safe-top)) 12px 0; animation: sh-drop .7s var(--ease-spring) .05s backwards; }
.share-eyebrow { text-align: center; }
.share-top-spacer { width: 44px; height: 44px; flex: none; }

/* the pictures, as large as the screen allows */
.share-stage { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 14px; animation: share-in 1s var(--ease-spring) .12s backwards; }
@keyframes share-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.share-track { position: relative; display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0 var(--pad, 24px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.share-track::-webkit-scrollbar { display: none; }
.share-slide { flex: none; width: var(--card-w, 0); height: var(--card-h, 0); margin: 0 calc(var(--gap, 0px) / 2); scroll-snap-align: center; scroll-snap-stop: always; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.share-slide:not(.is-current) { opacity: .5; transform: scale(.94); }
.share-card { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background-color: #121733; box-shadow: 0 0 0 1px rgba(var(--realm-glow-rgb), .38), 0 24px 60px rgba(0, 0, 0, .6), 0 0 54px rgba(var(--realm-glow-rgb), .13); }
/* the Card format is a card already: its own frame, its corners clear */
.share[data-format="card"] .share-card.is-drawn { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.share[data-format="card"] .share-card.is-drawn .share-canvas { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(var(--realm-glow-rgb), .14)); }
.share-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease-out); }
.share-card.is-drawn .share-canvas { opacity: 1; }
.share-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; transition: opacity .6s var(--ease-out); }
.share-card.is-drawn .share-wait { opacity: 0; pointer-events: none; }
.share-wait-text { max-width: 220px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.4; color: var(--muted); }
.share-card.is-empty { box-shadow: 0 0 0 1px rgba(233, 196, 106, .25), 0 24px 60px rgba(0, 0, 0, .5); }

/* which picture: a dot each, the current one a gold dash */
.share-dots { flex: none; display: flex; justify-content: center; height: 30px; margin-top: 6px; }
.share-dot { position: relative; width: 34px; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.share-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 3px; background: rgba(243, 235, 221, .3); transition: width .35s var(--ease-out), margin .35s var(--ease-out), background .35s, box-shadow .35s; }
.share-dot[aria-selected="true"]::after { width: 18px; margin-left: -9px; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .55); }

/* the format: Story, Post, Card, each drawn as its own shape */
.share-formats { flex: none; display: flex; justify-content: center; gap: 6px; margin: 4px 16px 12px; animation: sh-rise .8s var(--ease-spring) .18s backwards; }
.share-format { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; min-width: 0; max-width: 92px; height: 58px; margin: 0; padding: 0 4px; border: 0; border-radius: 16px; background: transparent; color: rgba(243, 235, 221, .62); font: 600 12.5px/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: color .3s, background .3s, box-shadow .3s, transform .2s var(--ease-out); }
.share-format svg { flex: none; transition: filter .3s; }
.share-format:active { transform: scale(.96); }
.share-format[aria-checked="true"] { color: var(--gold-hi); background: rgba(233, 196, 106, .09); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 0 20px rgba(233, 196, 106, .12); }
.share-format[aria-checked="true"] svg { filter: drop-shadow(0 0 4px rgba(233, 196, 106, .65)); }

/* Share; Save and Copy link */
.share-actions { position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0 24px calc(18px + var(--safe-bottom)); animation: sh-rise .8s var(--ease-spring) .22s backwards; }
.share-actions .btn svg { flex: none; }
.share-more { display: flex; justify-content: center; gap: 6px; }
.share-save[aria-busy="true"] svg { animation: share-drop 1s var(--ease-out) infinite; }
@keyframes share-drop { 0% { transform: translateY(-3px); opacity: .4; } 60% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
.share-copy-icon { animation: share-swap .35s var(--ease-spring) backwards; }
@keyframes share-swap { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-height: 700px) {
  .share-stage { margin-top: 8px; }
  .share-dots { margin-top: 2px; height: 26px; }
  .share-formats { margin-bottom: 8px; }
  .share-format { height: 50px; }
  .share-actions { gap: 2px; padding-bottom: calc(10px + var(--safe-bottom)); }
}

/* Share with everyone: the owner's switch, above the actions */
.share-public { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px 10px 14px; border-radius: 18px; background: rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2); transition: box-shadow .4s var(--ease-out), background .4s; animation: sh-rise .7s var(--ease-spring) backwards; }
.share-public[hidden] { display: none; }
.share-public.is-on { background: radial-gradient(120% 120% at 0% 50%, rgba(233, 196, 106, .1), rgba(233, 196, 106, 0) 60%), rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5), 0 0 22px rgba(233, 196, 106, .12); }
.share-public.is-blocked { box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .12); }
.share-public-icon { display: flex; flex: none; color: var(--gold); }
.share-public.is-blocked .share-public-icon { color: rgba(243, 235, 221, .55); }
.share-public-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.share-public-title { font-size: 15px; font-weight: 600; }
.share-public-sub { font-size: 12.5px; line-height: 1.35; color: rgba(243, 235, 221, .62); }
.share-public .switch[disabled] { opacity: .4; cursor: default; }
@media (max-height: 700px) { .share-public { padding-top: 8px; padding-bottom: 8px; margin-bottom: 6px; } }

@media (prefers-reduced-motion: reduce) {
  .share-slide { transition: none; }
  .share-save[aria-busy="true"] svg { animation: none; }
}

/* The reel (1.1 wave 2: the Video format, src/share/video.js): while the server films it, the photo it starts from with
   a play mark whose gold ring fills as the frames are drawn, and honest words about what is being filmed; then the clip
   plays there, muted, and a tap (or the button in its corner) turns the sound on. */
.share-reel { background-color: #0E1229; }
.share-reel-poster, .share-reel-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.share-reel-poster { filter: saturate(.84) brightness(.74); transform: scale(1.015); transition: opacity .9s var(--ease-out); }
.share-reel-poster:not([src]) { opacity: 0; }
.share-reel-clip { opacity: 0; background: transparent; transition: opacity .9s var(--ease-out); }
.share-reel.is-playing .share-reel-clip { opacity: 1; }
.share-reel.is-playing .share-reel-poster { opacity: 0; }
.share-reel-veil { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s var(--ease-out);
  background: radial-gradient(ellipse 75% 42% at 50% 50%, rgba(10, 13, 24, .6), rgba(10, 13, 24, 0) 72%), linear-gradient(180deg, rgba(10, 13, 24, .4), rgba(10, 13, 24, 0) 28%, rgba(10, 13, 24, 0) 62%, rgba(10, 13, 24, .66)); }
.share-reel.is-playing .share-reel-veil { opacity: 0; }
.share-reel-mark { position: absolute; left: 50%; top: 44%; width: 108px; height: 108px; margin: -54px 0 0 -54px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: opacity .6s var(--ease-out), transform .6s var(--ease-spring); }
.share-reel-mark:disabled { cursor: default; }
.share-reel-mark:active:not(:disabled) { transform: scale(.95); }
.share-reel.is-playing .share-reel-mark { opacity: 0; transform: scale(.86); pointer-events: none; }
.share-reel-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.share-reel-disc { fill: rgba(10, 13, 24, .52); stroke: rgba(233, 196, 106, .2); stroke-width: 1; }
.share-reel-track { fill: none; stroke: rgba(233, 196, 106, .18); stroke-width: 3; }
.share-reel-ring { fill: none; stroke: url(#share-reel-gold); stroke-width: 3.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(233, 196, 106, .65)); transition: stroke-dashoffset 1.1s var(--ease-out); }
.share-reel-play { fill: var(--parchment); opacity: .42; transition: opacity .5s var(--ease-out); }
.share-reel[data-phase="ready"] .share-reel-play { opacity: 1; filter: drop-shadow(0 0 8px rgba(233, 196, 106, .6)); }
.share-reel-again { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s; }
.share-reel:is([data-phase="failed"], [data-phase="limit"], [data-phase="unavailable"], [data-phase="gone"]) .share-reel-play { opacity: 0; }
.share-reel:is([data-phase="limit"], [data-phase="unavailable"], [data-phase="gone"]) .share-reel-ring { opacity: 0; }
.share-reel[data-phase="failed"] .share-reel-again { opacity: 1; }
.share-reel[data-phase="failed"] .share-reel-ring { stroke: rgba(255, 138, 91, .7); filter: none; }
.share-reel-words { position: absolute; left: 22px; right: 22px; top: calc(44% + 70px); margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.4; color: var(--parchment); text-shadow: 0 1px 14px rgba(10, 13, 24, .95); transition: opacity .6s var(--ease-out); }
.share-reel.is-playing .share-reel-words { opacity: 0; }
.share-reel-sound { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 22px; background: rgba(10, 13, 24, .55); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .6s var(--ease-out) .5s; }
.share-reel.is-playing .share-reel-sound { opacity: 1; }
.share-reel-sound[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .7), 0 0 14px rgba(233, 196, 106, .25); }
.share[data-format="video"] .share-dots { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .share-reel:is([data-phase="asking"], [data-phase="waiting"], [data-phase="rendering"], [data-phase="fetching"], [data-phase="painting"]) .share-reel-track { animation: share-reel-breathe 2.4s ease-in-out infinite; }
  @keyframes share-reel-breathe { 50% { stroke: rgba(233, 196, 106, .38); } }
}
@media (prefers-reduced-motion: reduce) {
  .share-reel-ring { transition: none; }
}

/* sheet.css */
/* Sheets (src/ui/sheet.js): settings and the ⋯ menu rise over the screen that opened them. Night blue, a gold hairline
   along the top edge, a teal glow behind the title, and the screen behind dimmed and softly blurred. Also here: the
   rows and the gold switch that sheets and the share screen use. */

.sheet-wrap { position: absolute; inset: 0; z-index: 40; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 14, .64); -webkit-backdrop-filter: blur(6px) saturate(.85); backdrop-filter: blur(6px) saturate(.85); opacity: 0; transition: opacity .42s var(--ease-out); }
.sheet-wrap.is-open .sheet-backdrop { opacity: 1; }
.sheet-wrap.is-closing .sheet-backdrop { transition-duration: .3s; }

.sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: calc(100% - var(--safe-top) - 28px); box-sizing: border-box; padding-bottom: var(--safe-bottom); border-radius: 28px 28px 0 0; outline: none; color: var(--parchment);
  background: radial-gradient(130% 70% at 50% -8%, rgba(15, 45, 49, .7) 0%, rgba(15, 45, 49, 0) 62%), linear-gradient(180deg, #171C3D 0%, #10142B 46%, #0B0F1F 100%);
  box-shadow: 0 -1px 0 rgba(233, 196, 106, .28), 0 -30px 70px rgba(0, 0, 0, .6);
  transform: translate3d(0, 104%, 0); transition: transform .56s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.sheet::before { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(233, 196, 106, 0), rgba(255, 236, 190, .95) 50%, rgba(233, 196, 106, 0)); box-shadow: 0 0 14px rgba(233, 196, 106, .55); }
.sheet-wrap.is-open .sheet { transform: none; }
.sheet-wrap.is-closing .sheet { transition: transform .34s cubic-bezier(.5, 0, .9, .5); }
.sheet.is-dragging { transition: none; }
.sheet-grab { flex: none; display: flex; justify-content: center; padding: 10px 0 4px; cursor: grab; }
.sheet-grab i { display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(243, 235, 221, .24); }
/* a locked sheet (only the game puts it away: the update an app must have) has nothing to grab */
.sheet-wrap.is-locked .sheet-grab { cursor: default; }
.sheet-wrap.is-locked .sheet-grab i { visibility: hidden; }
.sheet-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 20px 22px; transition: opacity .17s var(--ease-out), transform .17s var(--ease-out); }
.sheet-body.is-swapping { opacity: 0; transform: translateY(8px); }
.sheet-body > * { animation: sheet-in .55s var(--ease-out) backwards; }
.sheet-body > :nth-child(2) { animation-delay: .05s; }
.sheet-body > :nth-child(3) { animation-delay: .09s; }
.sheet-body > :nth-child(4) { animation-delay: .13s; }
.sheet-body > :nth-child(5) { animation-delay: .17s; }
.sheet-body > :nth-child(n+6) { animation-delay: .2s; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sheet button:focus-visible, .sheet a:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 2px; }

/* a sheet's title block */
.sheet-head { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 18px; }
.sheet-title { margin: 0; font: 380 30px/1.05 var(--serif); color: var(--parchment); }
.sheet-sub { margin: 0; font: italic 300 16px/1.4 var(--serif); color: var(--muted); }

/* grouped rows on a faintly lit card */
.sheet-group { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: rgba(243, 235, 221, .035); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.sheet-label { display: block; margin: 18px 6px 8px; font: 600 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sheet-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; box-sizing: border-box; margin: 0; padding: 8px 16px; border: 0; background: none; color: var(--parchment); font: 500 16px/1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .25s; }
.sheet-row + .sheet-row::before { content: ''; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: rgba(243, 235, 221, .08); }
button.sheet-row:active, a.sheet-row:active { background: rgba(233, 196, 106, .07); }
.sheet-row-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; color: var(--gold); }
.sheet-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sheet-row-sub { font-size: 13px; font-weight: 400; color: rgba(243, 235, 221, .62); }
.sheet-row-aside { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(243, 235, 221, .6); }
.sheet-row[aria-busy="true"] .sheet-row-aside { animation: sheet-breathe 1.2s ease-in-out infinite; }
@keyframes sheet-breathe { 50% { opacity: .35; } }

/* the gold switch */
.switch { position: relative; flex: none; width: 52px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 16px; cursor: pointer; background: rgba(243, 235, 221, .14); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .1); transition: background .35s var(--ease-out), box-shadow .35s; -webkit-appearance: none; appearance: none; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 13px; background: radial-gradient(circle at 50% 35%, #FFFDF6 0%, #F3EBDD 60%, #D9CDB6 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .45s var(--ease-spring); }
.switch[aria-checked="true"] { background: linear-gradient(180deg, #F7E2A6 0%, #E9C46A 45%, #A97A35 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 16px rgba(233, 196, 106, .4); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[aria-busy="true"] { opacity: .6; pointer-events: none; }
.switch:active::after { width: 30px; }
.switch[aria-checked="true"]:active::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid rgba(233, 196, 106, .75); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop, .sheet-body { transition-duration: .01s !important; }
  .sheet-body > * { animation: none; }
}

/* social.css */
/* The social loop (docs/BUILD-1.1-wave2.md C; src/social.js): Home's news strip, Today's Seam's number and rank, the
   quests' rare-realm line; the reveal's challenge line and Today's Seam's result; the ranking's and the news' sheets.
   The house style: glass over the painting, gold hairlines, Fraunces for what is said, figures in tabular Instrument Sans,
   the aether's glow for what came from Elsewhere. Nothing pops: things rise and settle. */

/* ---------- Home: the news strip ---------- */
.home-news { position: relative; display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 7px 16px 7px 8px; box-sizing: border-box; border-radius: 23px; color: var(--parchment); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22), 0 10px 28px rgba(0, 0, 0, .28); transition: transform .22s var(--ease-out), box-shadow .3s; animation: sh-rise .8s var(--ease-spring) var(--t-today) backwards; }
.home-news[hidden] { display: none; }
.home-news.is-arriving { animation: sh-rise .8s var(--ease-spring) backwards; }
.home-news:active { transform: scale(.98); }
.home-news.is-fresh { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .42), 0 10px 28px rgba(0, 0, 0, .3), 0 0 22px rgba(233, 196, 106, .12); }
.home-news-mark { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; color: var(--gold);
  background: radial-gradient(circle at 40% 35%, rgba(233, 196, 106, .26), rgba(233, 196, 106, .04) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .4), 0 0 14px rgba(233, 196, 106, .22); }
.home-news-mark svg { display: block; filter: drop-shadow(0 0 4px rgba(233, 196, 106, .8)); }
.home-news.is-invite .home-news-mark { color: var(--aether); background: radial-gradient(circle at 40% 35%, rgba(166, 244, 230, .22), rgba(166, 244, 230, .03) 70%); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .38), 0 0 14px rgba(166, 244, 230, .2); }
.home-news.is-invite .home-news-mark svg { filter: drop-shadow(0 0 4px rgba(166, 244, 230, .85)); }
.home-news-text { flex: 1 1 auto; min-width: 0; font: 500 13px/1.32 var(--sans); color: rgba(243, 235, 221, .84); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-wrap: pretty; }
.home-news-text .so-name { font: italic 400 15px/1 var(--serif); color: var(--parchment); }
.home-news-text .num { font-weight: 650; color: var(--gold-hi); }
.home-news-new { flex: none; width: 7px; height: 7px; border-radius: 4px; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .9); animation: so-pulse 2.6s ease-in-out infinite; }
.home-news-new[hidden] { display: none; }
@keyframes so-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: none; } }

/* ---------- Home: Today's Seam's number, and the player's rank once played ---------- */
.home-today-no { margin-left: .5em; color: var(--gold-hi); letter-spacing: .08em; }
.home-today-eyebrow.is-tight .home-today-left { display: none; }
.home-today-rank { flex: none; color: var(--gold-hi); font-weight: 650; letter-spacing: .01em; }

/* ---------- Home: the quests' rare realm ---------- */
.home-quests-rare { display: flex; align-items: center; gap: 8px; min-width: 0; font: italic 400 14px/1.2 var(--serif); color: var(--aether); text-shadow: 0 0 12px rgba(166, 244, 230, .35); white-space: nowrap; }
.home-quests-rare[hidden] { display: none; }
.home-quests-rare-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.home-quests-rare-mark { display: inline-block; margin: 0 8px 0 0; vertical-align: -1px; filter: drop-shadow(0 0 5px rgba(166, 244, 230, .9)); animation: so-twinkle 3.2s ease-in-out infinite; }
@keyframes so-twinkle { 0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.06) rotate(45deg); } }
/* while the rare realm waits and the week's quests still do too: a second line under the strip */
.home-quests.has-rare:not(.is-rare-only) { flex-wrap: wrap; align-content: flex-start; height: auto; row-gap: 0; padding: 0 0 11px 14px; }
.home-quests.has-rare:not(.is-rare-only) .home-quests-eyebrow { height: 40px; align-items: center; }
.home-quests.has-rare:not(.is-rare-only) .home-quests-list { flex: 1 1 0; height: 40px; }
.home-quests.has-rare:not(.is-rare-only) .home-quests-rare { flex: 1 0 100%; padding-right: 14px; margin-top: -3px; font-size: 13.5px; }
/* the week's three done: the line takes the strip (the quests are ticked; the reward is what is left to say), on two
   lines when one is too short */
.home-quests.is-rare-only { justify-content: center; height: auto; min-height: 40px; padding: 7px 18px; }
.home-quests.is-rare-only .home-quests-list, .home-quests.is-rare-only .home-quests-eyebrow { display: none; }
.home-quests.is-rare-only .home-quests-rare { flex: 0 1 auto; white-space: normal; line-height: 1.25; }
.home-quests.is-rare-only .home-quests-rare-text { overflow: visible; text-wrap: balance; text-align: center; }
.home-quests.has-rare { box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .26), 0 0 22px rgba(166, 244, 230, .08); }

/* narrow phones: a little smaller, so the sentence fits its two lines */
@media (max-width: 370px) {
  .home-news-text { font-size: 12.5px; }
  .home-news-text .so-name { font-size: 14.5px; }
}
/* short screens (an iPhone SE): one banner above Today's Seam, the news before an event's; the strip a little slimmer, and
   on one line when the quests' strip takes two */
@media (max-height: 700px) {
  .home.has-news .home-event { display: none; }
  .home-news { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .home-news-mark { width: 26px; height: 26px; }
  .home.has-rare-row .home-news-text { -webkit-line-clamp: 1; line-clamp: 1; }
}
/* the smallest phones: the story's prompt and the news take turns (the news first), on one line */
@media (max-height: 640px) {
  .home.has-news .home-story { display: none; }
  .home-news-text { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ---------- the reveal: the challenge's line, Today's Seam's result ---------- */
/* Today's Seam's name and number may run over the empty space above the stars rather than lose the number */
.rv.is-daily .rv-eyebrow { width: max-content; max-width: calc(100vw - 48px); }
.rv-social { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rv-social[hidden] { display: none; }
.rv-social.is-arriving { animation: rv-rise .7s var(--ease-out) backwards; }
.rv.is-compare .rv-actions > :nth-child(3) { animation-delay: .2s; }

/* "You 0:42 · Federico 1:05": two sides of a seam, the faster lit */
.rv-versus { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 4px; min-height: 40px; }
.rv-vs-side { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.rv-vs-side.is-you { align-items: flex-end; text-align: right; }
.rv-vs-side:not(.is-you) { align-items: flex-start; text-align: left; }
.rv-vs-who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 235, 221, .6); }
.rv-vs-time { font: 380 22px/1 var(--serif); font-variant-numeric: tabular-nums; color: rgba(243, 235, 221, .86); }
.rv-vs-side.is-faster .rv-vs-who { color: var(--gold); }
.rv-vs-side.is-faster .rv-vs-time { color: var(--gold-hi); text-shadow: 0 0 14px rgba(233, 196, 106, .55); }
.rv-vs-side.is-waiting { max-width: 170px; font: italic 300 15px/1.3 var(--serif); color: rgba(243, 235, 221, .72); text-wrap: balance; }
.rv-vs-mark { flex: none; width: 2px; height: 30px; border-radius: 1px; background: linear-gradient(180deg, rgba(var(--realm-glow-rgb), 0), var(--realm-glow) 50%, rgba(var(--realm-glow-rgb), 0)); box-shadow: 0 0 8px rgba(var(--realm-glow-rgb), .8); }

/* Today's Seam: the result as it is shared, then Share and the ranking */
.rv-result { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; min-height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: 18px; color: var(--parchment); background: rgba(243, 235, 221, .04); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2); cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease-out), box-shadow .3s; }
.rv-result:active { transform: scale(.98); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); }
.rv-res-brand { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.rv-res-gems { font-size: 12px; letter-spacing: .14em; color: var(--aether); text-shadow: 0 0 8px rgba(166, 244, 230, .6); }
.rv-res-time { font: 650 14px/1 var(--sans); color: var(--parchment); }
.rv-res-stars { font-size: 13px; letter-spacing: .1em; color: var(--gold); text-shadow: 0 0 8px rgba(233, 196, 106, .55); }
.rv-res-dot { font-style: normal; color: rgba(243, 235, 221, .35); }
.rv-daily-row { display: flex; justify-content: center; gap: 4px; }
.rv-pill { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; background: transparent; color: rgba(243, 235, 221, .85); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-out), color .3s; }
.rv-pill:active { transform: scale(.97); }
.rv-pill svg { flex: none; }
.rv-pill-rank.is-ranked { color: var(--gold-hi); }
.rv-pill:focus-visible, .rv-result:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }
@media (max-height: 720px) {
  .rv-vs-time { font-size: 19px; }
  .rv-versus { min-height: 34px; gap: 14px; }
  .rv-result { min-height: 32px; }
  .rv-pill { min-height: 40px; }
}
@media (max-width: 370px) {
  .rv-result { gap: 5px; padding: 0 12px; }
  .rv-res-gems { letter-spacing: .08em; }
}

/* ---------- the sheets: the ranking, the news ---------- */
.so-sheet .sheet-body { padding-left: 16px; padding-right: 16px; }
.so-head { padding: 4px 8px 16px; }
.so-sub { font-size: 15.5px; }
.so-sub b { font: italic 400 16px/1.3 var(--serif); color: var(--gold-hi); }
.so-dot { color: rgba(243, 235, 221, .4); }
.so-loading { display: flex; justify-content: center; padding: 28px 0 40px; }
.so-wait { display: flex; gap: 7px; }
.so-wait i { width: 6px; height: 6px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 106, .7); animation: so-wait 1.3s ease-in-out infinite; }
.so-wait i:nth-child(2) { animation-delay: .18s; }
.so-wait i:nth-child(3) { animation-delay: .36s; }
@keyframes so-wait { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.so-empty { margin: 4px 8px 22px; font: italic 300 17px/1.45 var(--serif); color: rgba(243, 235, 221, .78); }
.so-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 8px 4px; font-size: 12.5px; line-height: 1.4; color: rgba(243, 235, 221, .52); text-align: center; text-wrap: balance; }
.so-invite-line { color: rgba(166, 244, 230, .78); }
.so-invite-line svg { flex: none; filter: drop-shadow(0 0 4px rgba(166, 244, 230, .8)); }
.so-more { margin: 6px auto 0; }
.so-more[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* stars, small: the hunt's three, the seal's fourth a little apart */
.so-stars { display: inline-flex; align-items: center; gap: 2px; }
.so-stars i { display: flex; color: rgba(243, 235, 221, .2); }
.so-stars i svg { display: block; fill: currentColor; }
.so-stars i.is-on { color: var(--gold); filter: drop-shadow(0 0 3px rgba(233, 196, 106, .6)); }
.so-stars i.is-seal { margin-left: 3px; color: var(--gold-hi); }
.so-stars.is-small i svg { width: 9px; height: 9px; }

/* the ranking */
.so-rank-list { margin: 0; padding: 0; list-style: none; border-radius: 18px; overflow: hidden; background: rgba(243, 235, 221, .03); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.so-rank-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 60px 48px; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px; animation: so-row .5s var(--ease-out) backwards; }
.so-rank-row:nth-child(2) { animation-delay: .03s; } .so-rank-row:nth-child(3) { animation-delay: .06s; } .so-rank-row:nth-child(4) { animation-delay: .09s; }
.so-rank-row:nth-child(5) { animation-delay: .12s; } .so-rank-row:nth-child(n+6) { animation-delay: .15s; }
@keyframes so-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.so-rank-row + .so-rank-row::before, .so-rank-gap + .so-rank-row::before { content: ''; position: absolute; left: 60px; right: 0; top: 0; height: 1px; background: rgba(243, 235, 221, .07); }
.so-rank-n { font: 380 19px/1 var(--serif); font-variant-numeric: tabular-nums; text-align: center; color: rgba(243, 235, 221, .6); }
.so-rank-row.is-top .so-rank-n { color: var(--gold); text-shadow: 0 0 12px rgba(233, 196, 106, .5); }
.so-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.2 var(--sans); color: rgba(243, 235, 221, .9); }
.so-rank-row .so-stars { justify-self: start; }
.so-rank-time { font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; color: rgba(243, 235, 221, .8); }
.so-rank-row.is-you { background: linear-gradient(90deg, rgba(233, 196, 106, .16), rgba(233, 196, 106, .04)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); border-radius: 14px; }
.so-rank-row.is-you + .so-rank-row::before, .so-rank-row.is-you::before { display: none; }
.so-rank-row.is-you .so-rank-name { font: italic 400 17px/1.1 var(--serif); color: var(--parchment); }
.so-rank-row.is-you .so-rank-n, .so-rank-row.is-you .so-rank-time { color: var(--gold-hi); }
.so-rank-gap { padding: 2px 0 6px; text-align: center; letter-spacing: .3em; color: rgba(243, 235, 221, .35); }

/* the news */
.so-news-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.so-news-item { display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 12px 12px 8px; border: 0; border-radius: 16px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background .25s; }
button.so-news-item:active { background: rgba(233, 196, 106, .07); }
.so-news-item.is-quiet { cursor: default; }
.so-news-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; color: rgba(233, 196, 106, .8); background: rgba(233, 196, 106, .07); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .28); }
.so-news-mark.is-beat { color: var(--gold-hi); background: radial-gradient(circle at 40% 35%, rgba(233, 196, 106, .3), rgba(233, 196, 106, .05) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 0 14px rgba(233, 196, 106, .25); }
.so-news-mark.is-invite { color: var(--aether); background: rgba(166, 244, 230, .07); box-shadow: inset 0 0 0 1px rgba(166, 244, 230, .35), 0 0 12px rgba(166, 244, 230, .15); }
.so-news-words { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.so-news-text { font: 400 15px/1.38 var(--sans); color: rgba(243, 235, 221, .86); text-wrap: pretty; }
.so-news-text .so-name { font: italic 400 16.5px/1.2 var(--serif); color: var(--parchment); }
.so-news-text .num { font-weight: 650; color: var(--gold-hi); }
.so-news-when { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(243, 235, 221, .5); }
.so-news-go { flex: none; display: flex; color: rgba(233, 196, 106, .7); }

@media (prefers-reduced-motion: reduce) {
  .home-news, .home-news.is-arriving, .home-news-new, .home-quests-rare-mark, .rv-social.is-arriving, .so-rank-row, .so-wait i { animation: none; }
}

/* story.css */
/* The Cartographer's story (src/screens/story.js): the Journal (the Atlas's tab: jr-*), the page reader, the keystone
   intro and the choice (sy-*). Every tale wears its realm's colours ([data-realm], src/css/realms.css). story.css loads
   after base.css. */

/* ---------- a legendary Stray's card: gold foil, its painting under glass ---------- */
.sy-card { position: relative; display: block; flex: none; width: 74px; }
.sy-card.is-big { width: 104px; }
.sy-card-foil { display: block; padding: 3px; border-radius: 12px; background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(233, 196, 106, .25); }
.sy-card.is-big .sy-card-foil { padding: 4px; border-radius: 14px; }
.sy-card-art { position: relative; display: block; height: 0; padding-top: 150%; overflow: hidden; border-radius: 9px; background-color: var(--ink); }
.sy-card-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sy-card-sheen { position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: color-dodge; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 22%, rgba(var(--realm-accent-rgb), .5) 38%, rgba(255, 241, 201, .75) 48%, rgba(255, 138, 91, .3) 58%, rgba(255, 255, 255, 0) 74%); background-size: 260% 260%; animation: sy-sheen 7s ease-in-out infinite alternate; }
@keyframes sy-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.sy-stars { flex: none; font-size: 12px; letter-spacing: .04em; color: var(--gold); text-shadow: 0 0 8px rgba(233, 196, 106, .45); }
.sy-stars-off { color: rgba(243, 235, 221, .24); text-shadow: none; }
.sy-keystone { display: block; flex: none; }

/* ======================================================================================================================
   The Journal
   ==================================================================================================================== */
.jr-title { font-size: 33px; line-height: 1.04; }
.jr-preface { position: relative; margin: 20px 24px 0; padding-left: 16px; font: italic 300 15.5px/1.5 var(--serif); color: rgba(243, 235, 221, .76); }
.jr-preface.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.jr-preface-more { display: block; margin: 8px 24px 0 40px; min-height: 32px; font: 650 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.jr-preface-more:active { opacity: .7; }
.jr-preface::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(233, 196, 106, 0), rgba(233, 196, 106, .7) 30%, rgba(233, 196, 106, .7) 70%, rgba(233, 196, 106, 0)); }
.jr-chapters { display: flex; flex-direction: column; gap: 14px; padding: 24px 16px 6px; }

/* a chapter: its painting as a header, which opens and closes it */
.jr-ch { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--realm-ink) 0%, #0B0E1B 100%); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); animation-fill-mode: backwards; }
.jr-ch::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .2); transition: box-shadow .4s; }
.jr-ch.is-new::after { box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 0 0 1px rgba(233, 196, 106, .12); }
.jr-ch-head { position: relative; display: block; width: 100%; height: 156px; color: var(--parchment); text-align: left; }
.jr-ch-head:active .jr-ch-art img { transform: scale(1.04); }
.jr-ch-art { position: absolute; inset: 0; overflow: hidden; background-color: var(--realm-ink); }
.jr-ch-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.02); transition: opacity .8s var(--ease-out), transform .6s var(--ease-out); }
.jr-ch-fade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--realm-ink) 0%, rgba(var(--realm-ink-rgb), .78) 34%, rgba(var(--realm-ink-rgb), .12) 72%, rgba(var(--realm-ink-rgb), .3) 100%), radial-gradient(90% 70% at 50% 120%, rgba(var(--realm-accent-rgb), .14), rgba(var(--realm-accent-rgb), 0) 70%); }
.jr-ch.is-locked .jr-ch-art img.is-in { opacity: .5; filter: saturate(.35) brightness(.7); }
.jr-sky { position: absolute; inset: 0; }
.jr-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F4F6FF; box-shadow: 0 0 6px rgba(var(--realm-glow-rgb), .9); animation: rl-twinkle 3.4s ease-in-out var(--d, 0s) infinite; }
.jr-ch-titles { position: absolute; left: 18px; right: 46px; bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.jr-ch-eyebrow { color: var(--realm-accent); text-shadow: 0 0 2px rgba(0, 0, 0, .6), 0 1px 10px rgba(0, 0, 0, .5); }
.jr-ch-name { font: 380 26px/1.08 var(--serif); color: var(--parchment); text-shadow: 0 2px 16px rgba(0, 0, 0, .55); text-wrap: balance; }
.jr-ch-state { display: flex; align-items: center; gap: 10px; min-height: 18px; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: rgba(243, 235, 221, .8); }
.jr-ch-status { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jr-ch-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-ch-status svg { flex: none; color: rgba(243, 235, 221, .6); }
.jr-ch.is-new .jr-ch-status { color: var(--gold-hi); }
.jr-ch.is-done .jr-ch-status { color: var(--realm-accent); }
.jr-pips { display: flex; align-items: center; gap: 6px; flex: none; }
.jr-pip { display: block; width: 7px; height: 7px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .32); }
.jr-pip.is-key { width: 9px; height: 9px; }
.jr-pip.is-open { box-shadow: inset 0 0 0 1px var(--realm-accent), 0 0 8px rgba(var(--realm-accent-rgb), .7); }
.jr-pip.is-sealed { background: linear-gradient(135deg, #FFF1C9, #E9C46A 50%, #A97A35); box-shadow: 0 0 8px rgba(233, 196, 106, .7); }
.jr-ch-chev { position: absolute; right: 16px; bottom: 20px; display: flex; color: rgba(243, 235, 221, .7); transition: transform .4s var(--ease-out); }
.jr-ch.is-open .jr-ch-chev { transform: rotate(90deg); color: var(--gold); }
.jr-new-dot { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(233, 196, 106, .9); animation: atlas-new-dot 2.6s ease-in-out infinite; }

/* its body, opening in place */
.jr-ch-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.jr-ch.is-open .jr-ch-body { grid-template-rows: 1fr; }
.jr-ch-inner { min-height: 0; overflow: hidden; padding: 0 18px; }
.jr-ch-inner > :first-child { margin-top: 4px; }
.jr-ch-inner > :last-child { margin-bottom: 20px; }
.jr-ch.is-open .jr-ch-inner > * { animation: jr-in .6s var(--ease-out) backwards; }
.jr-ch.is-open .jr-ch-inner > :nth-child(2), .jr-ch.is-open .jr-ch-inner > :nth-child(3) { animation-delay: .06s; }
.jr-ch.is-open .jr-ch-inner > :nth-child(4), .jr-ch.is-open .jr-ch-inner > :nth-child(5) { animation-delay: .12s; }
.jr-ch.is-open .jr-ch-inner > :nth-child(n+6) { animation-delay: .18s; }
@keyframes jr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jr-premise { margin: 0; padding-top: 6px; font: italic 300 15.5px/1.5 var(--serif); color: rgba(243, 235, 221, .82); }
.jr-label { display: block; margin-top: 20px; margin-bottom: 10px; font-size: 10.5px; color: var(--gold); }

/* the pages: small plates of the painting, the new ones lit */
.jr-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jr-page { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--parchment); text-align: center; transition: transform .25s var(--ease-out); }
button.jr-page:active { transform: scale(.95); }
.jr-page-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; background-color: #121733; box-shadow: 0 0 0 1px rgba(233, 196, 106, .45), 0 10px 22px rgba(0, 0, 0, .45); }
@supports not (aspect-ratio: 1) { .jr-page-art { height: 0; padding-top: 150%; } }
.jr-page-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.jr-page-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 9.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 235, 221, .72); text-wrap: balance; }
.jr-page.is-new .jr-page-art { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(233, 196, 106, .14), 0 10px 22px rgba(0, 0, 0, .45), 0 0 22px rgba(233, 196, 106, .4); }
.jr-page.is-new .jr-page-cap { color: var(--gold-hi); }
.jr-page .jr-new-dot { position: absolute; top: -3px; right: -3px; }
.jr-page.is-locked .jr-page-art { background: radial-gradient(80% 60% at 50% 40%, rgba(var(--realm-accent-rgb), .07), rgba(var(--realm-accent-rgb), 0) 70%), rgba(243, 235, 221, .02); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22); color: rgba(243, 235, 221, .42); }
.jr-page.is-locked .jr-page-art::before { content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(233, 196, 106, .2); border-radius: 6px; }
.jr-page-need { font: 600 9.5px/1.2 var(--sans); letter-spacing: .06em; color: rgba(243, 235, 221, .55); text-align: center; padding: 0 4px; }
.jr-page.is-locked .jr-page-cap { color: rgba(243, 235, 221, .42); }
.jr-page.is-end .jr-page-art { color: rgba(233, 196, 106, .45); }

/* the story seams */
.jr-seams { display: flex; flex-direction: column; gap: 8px; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.jr-seam { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 10px 8px 8px; box-sizing: border-box; border-radius: 16px; background: rgba(243, 235, 221, .035); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.jr-seam.is-key { background: linear-gradient(100deg, rgba(233, 196, 106, .1), rgba(233, 196, 106, .02) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .26); }
.jr-seam.is-open { box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .35), 0 0 22px rgba(var(--realm-accent-rgb), .08); }
.jr-seam-thumb { position: relative; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 12px; background-color: #121733; box-shadow: 0 0 0 1px rgba(233, 196, 106, .35); }
.jr-seam-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.jr-seam.is-locked .jr-seam-thumb img.is-in { opacity: .4; filter: saturate(.2) blur(1.5px); }
.jr-seam-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.jr-seam-act { display: flex; align-items: center; gap: 5px; font: 650 9.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--realm-accent); }
.jr-seam.is-key .jr-seam-act { color: var(--gold); }
.jr-seam-act .sy-keystone { width: 13px; height: 13px; }
.jr-seam-title { font: 400 17px/1.2 var(--serif); color: var(--parchment); }
.jr-seam-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; line-height: 1.35; color: rgba(243, 235, 221, .66); }
.jr-seam-sealed { color: rgba(243, 235, 221, .6); }
.jr-seam-open { color: var(--realm-accent); }
.jr-seam-lock { display: inline; color: rgba(243, 235, 221, .62); }
.jr-seam-lock svg { display: inline-block; margin-right: 5px; vertical-align: -1px; color: rgba(243, 235, 221, .5); }
.jr-seam-lock b { margin-left: 6px; font-weight: 650; color: var(--gold-hi); white-space: nowrap; }
.jr-seam-go { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--gold-hi); transition: transform .2s var(--ease-out), background .3s; }
.jr-seam-go::after { content: ''; position: absolute; inset: -6px; }
.jr-seam-go:active { transform: scale(.94); }
.jr-seam-go.is-play { height: 36px; padding: 0 14px 0 12px; border-radius: 18px; font: 650 13px/1 var(--sans); background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .62), 0 0 16px rgba(233, 196, 106, .14); }
.jr-seam-go.is-again { width: 38px; height: 38px; border-radius: 19px; color: rgba(233, 196, 106, .85); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .28); }

/* the clue, kept like a slip of paper in the Journal */
.jr-clue { position: relative; margin-top: 18px; padding: 2px 16px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(243, 235, 221, .06), rgba(243, 235, 221, .025)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .2); }
.jr-clue .jr-label { margin-top: 12px; margin-bottom: 6px; }
.jr-clue-name { display: block; font: 400 19px/1.2 var(--serif); color: var(--gold-hi); }
.jr-clue-text { margin: 6px 0 0; font: italic 300 15px/1.46 var(--serif); color: rgba(243, 235, 221, .86); }
.jr-clue.is-locked { background: none; box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .07); }
.jr-clue-wait { display: flex; align-items: center; gap: 8px; margin: 0; font: italic 300 14.5px/1.4 var(--serif); color: rgba(243, 235, 221, .58); }
.jr-clue-wait svg { flex: none; }

/* the tale's legendary Stray */
.jr-stray { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.jr-stray-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-stray-text .jr-label { margin: 0 0 2px; }
.jr-stray-name { font: 400 19px/1.15 var(--serif); color: var(--parchment); }
.jr-stray-lore { font: italic 300 14.5px/1.42 var(--serif); color: rgba(243, 235, 221, .78); }
.jr-stray.is-locked .jr-stray-ghost { display: flex; flex: none; align-items: center; justify-content: center; width: 74px; height: 111px; box-sizing: border-box; border-radius: 12px; color: rgba(233, 196, 106, .4); background: radial-gradient(80% 60% at 50% 45%, rgba(var(--realm-accent-rgb), .1), rgba(var(--realm-accent-rgb), 0) 70%); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .24); }
.jr-stray.is-locked .jr-stray-ghost .sy-keystone { width: 26px; height: 26px; }
.jr-stray-wait { font: italic 300 14.5px/1.42 var(--serif); color: rgba(243, 235, 221, .62); }

/* the finale's choice, waiting */
.jr-choice { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
.jr-choice-line { margin: 0; text-align: center; font: italic 300 16px/1.45 var(--serif); color: rgba(243, 235, 221, .86); }
.jr-choice-go svg { flex: none; color: #1A1305; }

/* the ending, once chosen: the last of the Journal */
.jr-ending { margin: 26px 16px 0; }
.jr-ending-eyebrow { display: block; margin: 0 6px 10px; text-align: center; }
.jr-ending-card { position: relative; display: block; width: 100%; height: 240px; overflow: hidden; border-radius: 22px; color: var(--parchment); text-align: left; box-shadow: 0 0 0 1px rgba(233, 196, 106, .45), 0 22px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(var(--realm-glow-rgb), .18); transition: transform .3s var(--ease-out); }
.jr-ending-card:active { transform: scale(.98); }
.jr-ending-art { position: absolute; inset: 0; background-color: var(--realm-ink); }
.jr-ending-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.jr-ending-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--realm-ink-rgb), .97) 0%, rgba(var(--realm-ink-rgb), .55) 45%, rgba(var(--realm-ink-rgb), 0) 75%); }
.jr-ending-text { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 5px; }
.jr-ending-label { font: 380 27px/1.08 var(--serif); }
.jr-ending-sub { font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .82); }
.jr-ending-read { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 650 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ======================================================================================================================
   The screen: the page reader
   ==================================================================================================================== */
.sy { background: var(--realm-ink); color: var(--parchment); }
.sy-stage { position: absolute; inset: 0; }
.sy-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: calc(14px + var(--safe-top)) 14px 0; pointer-events: none; }
.sy-top > * { pointer-events: auto; }
.sy .sy-back { background: rgba(5, 7, 14, .48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .1); }
.sy-chapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--realm-accent); text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 1px 12px rgba(0, 0, 0, .7); pointer-events: none; }
.sy-top-spacer { width: 44px; }

/* the pages, side by side; each scrolls on its own */
.sy-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.sy-track::-webkit-scrollbar { display: none; }
.sy-page { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.sy-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(46px + var(--safe-bottom)); box-sizing: border-box; scrollbar-width: none; }
.sy-scroll::-webkit-scrollbar { display: none; }
.sy-art { position: relative; margin: 0; height: min(58vh, 150vw); overflow: hidden; background-color: var(--realm-ink); }
.sy-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.sy-art::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: calc(110px + var(--safe-top)); pointer-events: none; background: linear-gradient(180deg, rgba(var(--realm-ink-rgb), .72), rgba(var(--realm-ink-rgb), 0)); }
.sy-art-fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 48%; background: linear-gradient(0deg, var(--realm-ink) 0%, rgba(var(--realm-ink-rgb), .78) 34%, rgba(var(--realm-ink-rgb), 0) 100%); }
.sy-tearline { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.sy-tearline::before, .sy-tearline::after { content: ''; position: absolute; top: -2%; bottom: -2%; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(255, 241, 201, 0), #FFF1C9 14%, #E9C46A 50%, #FFF1C9 86%, rgba(255, 241, 201, 0)); box-shadow: 0 0 6px 1px rgba(255, 214, 140, .9), 0 0 22px 4px rgba(var(--realm-glow-rgb), .4); }
.sy-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; margin-top: -92px; padding: 0 26px; }
.sy-eyebrow { color: var(--realm-accent); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.sy-title { margin: 10px 0 0; font: 380 32px/1.06 var(--serif); color: var(--parchment); text-shadow: 0 2px 18px rgba(0, 0, 0, .5); text-wrap: balance; }
/* the Cartographer speaks in italic; his page opens on a gold initial */
.sy-body { margin: 16px 0 0; font: italic 300 19px/1.56 var(--serif); color: rgba(243, 235, 221, .93); text-wrap: pretty; }
.sy-body::first-letter { float: left; margin: .07em .1em 0 0; font: normal 400 3.15em/.84 var(--serif); color: var(--gold); text-shadow: 0 0 18px rgba(233, 196, 106, .45); }
.sy-sign { align-self: flex-end; margin-top: 14px; font: 650 10px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(233, 196, 106, .85); }
.sy-after { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-top: 28px; }
.sy-go svg, .sy-again svg { flex: none; }
.sy-go .sy-keystone { width: 20px; height: 20px; color: #1A1305; }
.sy-sealed { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: rgba(243, 235, 221, .7); }
.sy-sealed .sy-stars { font-size: 15px; }
.sy-again { align-self: center; }
/* a sealed act's next step when that act is still locked: what opens it, and how far along */
.sy-next-lock { padding: 0 8px; }
.sy-next-lock .num { color: var(--gold-hi); white-space: nowrap; }
.sy-next-n { white-space: nowrap; }   /* " · 1 of 3" wraps as one: no line starts with the dot */
.sy-other { margin: 4px 0 0; text-align: center; font: italic 300 14.5px/1.45 var(--serif); color: rgba(243, 235, 221, .6); }
/* the page's dots, under the chapter */
.sy-dots { position: absolute; z-index: 6; left: 0; right: 0; top: calc(50px + var(--safe-top)); display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.sy-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(243, 235, 221, .32); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); transition: width .4s var(--ease-out), background .4s; }
.sy-dots i.is-on { width: 20px; background: var(--gold); box-shadow: 0 0 10px rgba(233, 196, 106, .6); }

/* the clue the tale gave, and its legendary Stray */
.sy-clue { position: relative; padding: 14px 16px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(243, 235, 221, .07), rgba(243, 235, 221, .025)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .28); }
.sy-clue-eyebrow { display: block; margin-bottom: 8px; font-size: 10.5px; }
.sy-clue-name { display: block; font: 400 21px/1.15 var(--serif); color: var(--gold-hi); }
.sy-clue-text { margin: 6px 0 0; font: italic 300 16px/1.48 var(--serif); color: rgba(243, 235, 221, .88); }
.sy-stray { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 20px; background: radial-gradient(90% 120% at 0% 50%, rgba(var(--realm-glow-rgb), .12), rgba(var(--realm-glow-rgb), 0) 70%), rgba(243, 235, 221, .03); box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .24); }
.sy-stray-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sy-stray-eyebrow { font-size: 10px; color: var(--realm-accent); }
.sy-stray-name { font: 400 21px/1.12 var(--serif); color: var(--parchment); }
.sy-stray-lore { font: italic 300 15px/1.42 var(--serif); color: rgba(243, 235, 221, .8); }

/* the unlock ceremony: a thread of gold down the dark painting, the seam tearing open across it, then the words */
.sy-page.is-unveiling .sy-img { animation: sy-open 2.3s cubic-bezier(.6, .05, .25, 1) .25s backwards; }
@keyframes sy-open {
  from { -webkit-clip-path: inset(0 49.8% 0 49.8%); clip-path: inset(0 49.8% 0 49.8%); filter: brightness(.6) saturate(.6); }
  70% { filter: brightness(1.18) saturate(1.1); }
  to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); filter: none; }
}
.sy-page.is-unveiling .sy-tearline { animation: sy-tear 2.6s linear backwards; }
@keyframes sy-tear { 0% { opacity: 0; } 6% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.sy-page.is-unveiling .sy-tearline::before { animation: sy-edge-l 2.3s cubic-bezier(.6, .05, .25, 1) .25s backwards; }
.sy-page.is-unveiling .sy-tearline::after { animation: sy-edge-r 2.3s cubic-bezier(.6, .05, .25, 1) .25s backwards; }
@keyframes sy-edge-l { from { left: 50%; } to { left: -3%; } }
@keyframes sy-edge-r { from { left: 50%; } to { left: 103%; } }
.sy-page.is-unveiling .sy-art-fade { animation: sh-fade 1.2s var(--ease-out) 1.4s backwards; }
.sy-page.is-unveiling .sy-in { animation: sy-in 1s var(--ease-out) calc(1.35s + var(--k) * .3s) backwards; }
@keyframes sy-in { from { opacity: 0; transform: translateY(14px); -webkit-filter: blur(4px); filter: blur(4px); } to { opacity: 1; transform: none; -webkit-filter: none; filter: none; } }
.sy-page.is-unveiling .sy-stray .sy-card { animation: sy-card 1.2s var(--ease-spring) calc(1.35s + 4.6 * .3s) backwards; }
@keyframes sy-card { from { opacity: 0; transform: translateY(18px) rotate(-4deg) scale(.86); } to { opacity: 1; transform: none; } }

/* nothing of this tale is open yet: its own stacking context, so its painting (z-index -1) lies behind its words, not
   behind the screen's own background */
.sy-locked { position: absolute; left: 0; right: 0; bottom: 0; top: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 30px calc(48px + var(--safe-bottom)); text-align: center; }
.sy-locked-art { position: absolute; inset: 0; z-index: -1; }
.sy-locked-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sy-locked-art img.is-in { opacity: .35; filter: saturate(.3); }
.sy-locked-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--realm-ink) 0%, rgba(var(--realm-ink-rgb), .82) 45%, rgba(var(--realm-ink-rgb), .35) 100%); }
.sy-locked .eyebrow { color: var(--realm-accent); }
.sy-locked-title { margin: 0; font: 380 34px/1.06 var(--serif); }
.sy-locked-body { margin: 4px 0 0; max-width: 330px; font: italic 300 17px/1.5 var(--serif); color: rgba(243, 235, 221, .85); }
.sy-locked-lock { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 235, 221, .7); }

/* ======================================================================================================================
   The keystone intro, and the choice (they share the painted scene behind them)
   ==================================================================================================================== */
.sy-key-scene { position: absolute; inset: 0; overflow: hidden; }
.sy-key-art { position: absolute; inset: 0; background-color: var(--realm-ink); }
.sy-key-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 35%; }
.sy-key-art img.is-in { animation: sy-drift 28s ease-in-out infinite alternate; }
@keyframes sy-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate3d(0, -1.2%, 0); } }
.sy-key-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--realm-ink-rgb), .62) 0%, rgba(var(--realm-ink-rgb), .08) 24%, rgba(var(--realm-ink-rgb), .2) 42%, rgba(var(--realm-ink-rgb), .88) 64%, var(--realm-ink) 84%); }
.sy-key-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 28px calc(22px + var(--safe-bottom)); text-align: center; }
.sy-key-body > * { animation: sh-rise .9s var(--ease-spring) backwards; }
.sy-key-body > :nth-child(1) { animation-delay: .25s; }
.sy-key-body > :nth-child(2) { animation-delay: .35s; }
.sy-key-body > :nth-child(3) { animation-delay: .45s; }
.sy-key-body > :nth-child(4) { animation-delay: .6s; }
.sy-key-body > :nth-child(5) { animation-delay: .72s; }
.sy-key-body > :nth-child(n+6) { animation-delay: .85s; }
.sy-key-emblem { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 214, 140, .9)) drop-shadow(0 0 20px rgba(233, 196, 106, .55)); }
.sy-key-emblem .sy-keystone { width: 46px; height: 46px; animation: sh-breathe 5.4s ease-in-out infinite; }
.sy-key-eyebrow { margin-top: 8px; }
.sy-key-title { margin: 10px 0 0; font: 380 38px/1.04 var(--serif); color: var(--parchment); text-shadow: 0 2px 22px rgba(0, 0, 0, .6); text-wrap: balance; }
.sy-key-line { margin: 12px 0 0; max-width: 330px; font: italic 300 18px/1.48 var(--serif); color: rgba(243, 235, 221, .88); }
.sy-key-facts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.35; color: rgba(243, 235, 221, .8); }
.sy-key-facts li { display: flex; align-items: center; gap: 8px; }
.sy-key-facts svg { flex: none; width: 15px; height: 15px; color: var(--realm-accent); }
.sy-key-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 340px; margin-top: 24px; }
.sy-key-go svg { flex: none; }
.sy-key-lock { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(243, 235, 221, .8); text-wrap: balance; }
.sy-key-lock svg { flex: none; margin-top: 2px; }
.sy-key-count { margin: 6px 0 8px; font: 650 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }

/* the choice: his last words, slowly; then the two endings, and a long press */
.sy-choice-scene .sy-key-art img.is-in { filter: brightness(.62) saturate(.85); }
.sy-choice-veil { background: radial-gradient(120% 70% at 50% 18%, rgba(var(--realm-ink-rgb), .1), rgba(var(--realm-ink-rgb), .7) 70%), linear-gradient(180deg, rgba(var(--realm-ink-rgb), .55) 0%, rgba(var(--realm-ink-rgb), .2) 22%, rgba(var(--realm-ink-rgb), .82) 46%, rgba(var(--realm-ink-rgb), .96) 66%); }
.sy-choice-motes i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFF6DD; box-shadow: 0 0 8px rgba(var(--realm-glow-rgb), 1); opacity: .2; animation: rl-twinkle 4.2s ease-in-out var(--d, 0s) infinite; }
.sy-choice-body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(92px + var(--safe-top)) 24px calc(18px + var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; scrollbar-width: none; }
.sy-choice-body::-webkit-scrollbar { display: none; }
.sy-choice-words { margin: auto 0 0; font: italic 300 18px/1.55 var(--serif); color: rgba(243, 235, 221, .94); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); cursor: default; }
.sy-choice-s { opacity: 0; -webkit-filter: blur(5px); filter: blur(5px); transition: opacity 1.6s var(--ease-out), filter 1.6s var(--ease-out); }
.sy-choice-sign { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.sy-options, .sy-hold-wrap { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.is-told .sy-choice-s, .is-told .sy-choice-sign { opacity: 1; -webkit-filter: none; filter: none; transition-delay: calc(.3s + var(--k) * 1.15s); }
.is-told .sy-options, .is-told .sy-hold-wrap { opacity: 1; transform: none; transition-delay: calc(.6s + var(--k) * 1.15s); }
.is-told.is-hurried .sy-choice-s, .is-told.is-hurried .sy-choice-sign, .is-told.is-hurried .sy-options, .is-told.is-hurried .sy-hold-wrap { transition-delay: 0s; transition-duration: .5s; }
.sy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.sy-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; border-radius: 20px; color: var(--parchment); text-align: left; background: rgba(10, 13, 24, .58); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .16), 0 16px 36px rgba(0, 0, 0, .4); transition: box-shadow .45s var(--ease-out), opacity .45s var(--ease-out), transform .3s var(--ease-out), background .45s; }
.sy-option:active { transform: scale(.98); }
.sy-option-icon { display: flex; color: rgba(247, 226, 166, .85); filter: drop-shadow(0 0 8px rgba(233, 196, 106, .45)); }
.sy-option-icon svg { width: 40px; height: 40px; }
.sy-option-text { display: flex; flex-direction: column; gap: 6px; }
.sy-option-label { font: 400 19px/1.15 var(--serif); }
.sy-option-sub { font-size: 13px; line-height: 1.42; color: rgba(243, 235, 221, .72); }
.sy-option[aria-checked="true"] { background: linear-gradient(180deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .05) 60%), rgba(10, 13, 24, .6); box-shadow: inset 0 0 0 1.5px rgba(233, 196, 106, .9), 0 0 34px rgba(233, 196, 106, .28), 0 16px 36px rgba(0, 0, 0, .4); }
.sy-option[aria-checked="true"] .sy-option-icon { color: #FFF1C9; }
.has-pick .sy-option:not(.is-picked) { opacity: .5; }
.sy-hold-wrap { margin-top: 16px; }
.sy .sy-hold { position: relative; width: 100%; overflow: hidden; isolation: isolate; -webkit-touch-callout: none; touch-action: none; }
.sy-hold[disabled] { opacity: .4; }
.sy-hold-text { position: relative; z-index: 1; }
.sy-hold-fill { position: absolute; inset: 0; z-index: 0; transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); background: linear-gradient(90deg, rgba(255, 250, 235, .1), rgba(255, 250, 235, .7)); mix-blend-mode: soft-light; }
.sy-hold.is-holding { transform: scale(.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 40, 10, .35), 0 0 46px rgba(233, 196, 106, .55); }
.sy-hold.is-chosen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 60px rgba(255, 222, 150, .75); }
.sy-hold-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: rgba(243, 235, 221, .56); }
.is-choosing .sy-choice-words, .is-choosing .sy-choice-sign, .is-choosing .sy-hold-hint { opacity: .25; transition: opacity 1s var(--ease-out); }
.is-choosing .sy-option:not(.is-picked) { opacity: 0; }

@media (max-height: 740px) {
  .sy-art { height: min(52vh, 150vw); }
  .sy-title { font-size: 29px; }
  .sy-body { font-size: 18px; }
  .sy-key-title { font-size: 33px; }
  .sy-key-line { font-size: 17px; }
  .sy-choice-words { font-size: 16.5px; }
  .sy-option { padding: 14px 12px; }
  .sy-option-icon svg { width: 34px; height: 34px; }
}
@media (max-width: 370px) {
  .sy-text { padding: 0 22px; }
  .sy-body { font-size: 18px; }
  .sy-option-label { font-size: 17.5px; }
  .jr-ch-name { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sy-card-sheen, .jr-sky i, .jr-new-dot, .sy-key-art img.is-in, .sy-key-emblem .sy-keystone, .sy-choice-motes i { animation: none; }
  .sy-page.is-unveiling .sy-img, .sy-page.is-unveiling .sy-art-fade, .sy-page.is-unveiling .sy-stray .sy-card { animation: none; }
  .sy-tearline { display: none; }
  .sy-page.is-unveiling .sy-in { animation: sh-fade .35s ease-out backwards; }
  .jr-ch-body { transition: none; }
  .jr-ch.is-open .jr-ch-inner > * { animation: none; }
  .sy-choice-s, .sy-choice-sign, .sy-options, .sy-hold-wrap { transition-duration: .3s; transform: none; -webkit-filter: none; filter: none; }
  .is-told .sy-choice-s, .is-told .sy-choice-sign, .is-told .sy-options, .is-told .sy-hold-wrap { transition-delay: 0s; }
}

/* stray.css */
/* A Stray follows you home: the foil card. Ported from design/board/Stray.dc.html (390×844: the card 300×450 at y 104,
   the lore at y 578, the actions 30 from the bottom). The card is built at the board's 300×450 and scaled to fit.
   Realms (src/css/realms.css): the halo is the realm's light, a hairline of its accent is inlaid inside the gold foil and
   runs through the sheen, the card says "of the Drowned Garden", and the gems shine in the accent. */

.st { display: flex; flex-direction: column; }
.st-halo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(var(--realm-glow-rgb), .22) 0%, rgba(var(--realm-deep-rgb), .42) 32%, rgba(10, 13, 24, 0) 68%); animation: st-fade 1.4s var(--ease-out) both; }
.st .mote { animation-duration: 9s; }
/* a Stray of the Starwell: the night sky behind its card */
.st.is-realm-mythic .st-halo::after { content: ''; position: absolute; inset: 0; opacity: .75; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #F4F6FF 50%, transparent 52%), radial-gradient(1.4px 1.4px at 84% 12%, #FFFBEA 50%, transparent 52%), radial-gradient(1px 1px at 72% 34%, #F4F6FF 50%, transparent 52%), radial-gradient(1.6px 1.6px at 18% 58%, #FFF0B8 50%, transparent 52%), radial-gradient(1px 1px at 90% 66%, #F4F6FF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 8% 84%, #F4F6FF 50%, transparent 52%), radial-gradient(1.4px 1.4px at 62% 88%, #FFFBEA 50%, transparent 52%), radial-gradient(1px 1px at 40% 8%, #F4F6FF 50%, transparent 52%); animation: st-breathe 4.6s ease-in-out infinite; }

/* ── header ── */
.st-head { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: calc(max(var(--safe-top), 10px) + 20px) 24px 0; text-align: center; animation: st-rise-in .8s var(--ease-out) .35s backwards; }
.st-born { display: block; min-height: 21px; font: italic 300 17px/21px var(--serif); color: rgba(243, 235, 221, .85); }
.st.is-waiting:not(.is-strayless) .st-born { animation: st-breathe 2.6s ease-in-out infinite; }

/* ── the card ── */
.st-stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; padding-top: 34px; }
.st-box { position: relative; flex: none; width: 300px; height: 450px; transition: transform .5s var(--ease-out), opacity .45s var(--ease-out); }
.st-fit { position: absolute; left: 0; top: 0; width: 300px; height: 450px; transform-origin: 0 0; }
.st-persp { position: relative; width: 300px; height: 450px; perspective: 1000px; }
.st-rise, .st-flip, .st-card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.st-rise { transform: translate3d(0, 78vh, 0) rotateZ(-4deg) scale(.9); }
.st.is-rising .st-rise { transform: none; transition: transform 1.2s cubic-bezier(.16, 1.1, .3, 1); }
.st-flip { transform: rotateY(180deg); }
.st.is-face .st-flip { transform: rotateY(0deg); transition: transform 1.15s cubic-bezier(.3, 1.28, .5, 1); }
.st-card { will-change: transform; }
.st-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 7px; border-radius: 22px; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.st-foil { background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 46px rgba(var(--realm-glow-rgb), .28), 0 0 90px rgba(var(--realm-accent-rgb), .08); }
/* a glint running along the gold frame as it turns (under the painting, so only the frame catches it) */
.st-foil::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(var(--realm-accent-rgb), .5) 46%, rgba(255, 255, 255, .85) 50%, rgba(var(--realm-accent-rgb), .5) 54%, rgba(255, 255, 255, 0) 60%); background-size: 300% 300%; background-position: var(--glint, 50% 50%); mix-blend-mode: overlay; }
.st-back { transform: rotateY(180deg); }
.st-inner { position: relative; width: 286px; height: 436px; border-radius: 16px; overflow: hidden; isolation: isolate; background: var(--ink); }
/* the realm's accent, inlaid as a hairline between the gold and the painting */
.st-inner::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .55), inset 0 0 14px rgba(var(--realm-accent-rgb), .22); }
.st-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); }
.st-sheen { position: absolute; left: 0; top: 0; width: 260%; height: 260%; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 22%, rgba(var(--realm-accent-rgb), .55) 38%, rgba(255, 241, 201, .75) 48%, rgba(255, 138, 91, .35) 58%, rgba(255, 255, 255, 0) 74%); mix-blend-mode: color-dodge; opacity: .55; transform: translate3d(-30.77%, -30.77%, 0); will-change: transform; }
.st.is-mythic .st-sheen { opacity: .7; }
.st-spec { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; background: radial-gradient(ellipse 22% 16% at 42% 36%, rgba(255, 252, 240, .5) 0%, rgba(255, 252, 240, .16) 45%, rgba(255, 252, 240, 0) 100%); mix-blend-mode: soft-light; will-change: transform; }
.st-no { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 12px; background: rgba(10, 13, 24, .55); font-size: 10px; font-weight: 650; line-height: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.st-no:empty { display: none; }
.st-plate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 66px 18px 16px; background: linear-gradient(0deg, rgba(10, 13, 24, .96) 0%, rgba(10, 13, 24, .82) 55%, rgba(10, 13, 24, 0) 100%); }
.st-name { font: 400 28px/1 var(--serif); text-wrap: balance; }
/* "of the Drowned Garden": the realm the Stray came from, in its accent */
.st-realm { display: flex; align-items: center; gap: 8px; margin: -3px 0 1px; font: italic 300 15px/1.2 var(--serif); color: var(--realm-accent); text-shadow: 0 0 12px rgba(var(--realm-accent-rgb), .35); }
.st-realm-name:empty { display: none; }
.st-realm-rule { flex: none; width: 16px; height: 1px; background: linear-gradient(90deg, rgba(var(--realm-accent-rgb), 0), rgba(var(--realm-accent-rgb), .9)); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-rarity { display: flex; flex: none; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; line-height: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--realm-accent); }
.st-gem { display: block; flex: none; filter: drop-shadow(0 0 5px rgba(var(--realm-accent-rgb), .85)); }
.st-gem.is-off { filter: none; opacity: .5; }
.st.is-mythic .st-rarity { color: var(--gold-hi); }
.st.is-mythic .st-gem { filter: drop-shadow(0 0 5px rgba(247, 226, 166, .9)); }
.st.is-mythic .st-gem.is-off { filter: none; }
.st-from { min-width: 0; font-size: 12px; line-height: 1.3; color: rgba(243, 235, 221, .7); text-align: right; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* the back: ink and gold, the seam glyph and the wordmark */
.st-back-inner { position: relative; width: 286px; height: 436px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse 72% 56% at 50% 46%, rgba(var(--realm-deep-rgb), .95) 0%, rgba(20, 25, 54, .62) 46%, #0A0D18 82%); }
.st-back-inner::before { content: ''; position: absolute; left: 14px; top: 14px; right: 14px; bottom: 14px; border-radius: 10px; border: 1px solid rgba(233, 196, 106, .3); box-shadow: inset 0 0 0 4px rgba(10, 13, 24, .4), inset 0 0 0 5px rgba(233, 196, 106, .12); }
.st-back-inner::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: repeating-radial-gradient(circle at 50% 46%, rgba(233, 196, 106, .075) 0 1px, rgba(233, 196, 106, 0) 1px 15px); -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%); }
.st-back-glow { position: absolute; left: 50%; top: 46%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 196, 106, .3), rgba(233, 196, 106, 0) 68%); animation: st-pulse 3.4s ease-in-out infinite; }
.st-back-seam { position: relative; z-index: 1; display: block; filter: drop-shadow(0 0 2px #FFF1C9) drop-shadow(0 0 10px rgba(255, 214, 140, .95)) drop-shadow(0 0 26px rgba(233, 196, 106, .55)); }
.st-back-word { position: relative; z-index: 1; font-size: 15px; color: var(--gold-hi); }

/* ── the lore and the actions arrive once the card has turned ── */
.st-lore { position: relative; flex: none; margin: 24px 40px 0; max-width: 360px; text-align: center; font: italic 300 18px/1.42 var(--serif); color: rgba(243, 235, 221, .9); text-wrap: balance; }
.st-actions { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 8px; margin: 0 24px max(30px, calc(var(--safe-bottom) + 12px)); }
.st-lore, .st-actions { opacity: 0; visibility: hidden; }
.st.is-face .st-lore, .st.is-face .st-actions, .st.is-strayless .st-lore, .st.is-strayless .st-actions { opacity: 1; visibility: visible; animation: st-rise-in .75s var(--ease-out) .55s backwards; }
.st.is-face .st-actions, .st.is-strayless .st-actions { animation-delay: .75s; }
.st-keep { height: 56px; border-radius: 28px; }
.st-keep[aria-disabled='true'] { filter: saturate(.7) brightness(.92); }
/* Share and Save (the card as a picture, src/share/kit.js), and "See it in your room" (a row when they fit, two when not) */
.st-more { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 2px; margin-top: -2px; }
.st.is-strayless .st-more { display: none; }
.st-share, .st-save { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 12px; border: 0; background: transparent; color: rgba(243, 235, 221, .85); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-out), color .2s; }
.st-share:active, .st-save:active { transform: scale(.97); }
.st-share[hidden], .st-save[hidden] { display: none; }
.st-share svg, .st-save svg { flex: none; }
.st-save[aria-busy="true"] { color: rgba(243, 235, 221, .6); cursor: default; }
.st-save[aria-busy="true"] svg { animation: st-drop 1s var(--ease-out) infinite; }
.st-keep:focus-visible, .st-share:focus-visible, .st-save:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }

/* kept: the card slips away into the Atlas */
.st.is-kept .st-box { transform: translateY(-34px) scale(.84); opacity: 0; }
.st.is-kept .st-head, .st.is-kept .st-lore, .st.is-kept .st-actions { opacity: 0; transition: opacity .35s var(--ease-out); }

.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes st-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes st-drop { 0% { transform: translateY(-3px); opacity: .4; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes st-pulse { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }

/* short screens: less air, so the card stays as large as it can */
@media (max-height: 720px) {
  .st-head { margin-top: calc(max(var(--safe-top), 10px) + 12px); }
  .st-stage { padding-top: 18px; }
  .st-lore { margin-top: 16px; font-size: 16px; }
  .st-actions { margin-bottom: max(18px, calc(var(--safe-bottom) + 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  .st-rise, .st.is-rising .st-rise { transform: none; transition: none; }
  .st.is-face .st-flip { transition-duration: .01s; }
  .st-back-glow, .st.is-waiting .st-born, .st.is-realm-mythic .st-halo::after, .st-save[aria-busy="true"] svg { animation: none; }
}

/* ── Unique Strays (docs/EXCHANGE.md): the number, "1 of 1", the day found, the keepers line, and the card's actions
   once it is yours (src/screens/stray.js, also worn by the gift screen) ── */
.st [hidden] { display: none !important; }
/* the way back and the Exchange's door, above the eyebrow (a Stray of the collection) */
.st-bar { align-self: stretch; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 4px; }
.st-xbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; margin: 0; padding: 0 14px 0 12px; border: 0; border-radius: 20px; color: var(--gold-hi); font: 600 13px/1 var(--sans); letter-spacing: .02em; cursor: pointer; -webkit-appearance: none; appearance: none; background: rgba(10, 13, 24, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .55), 0 0 18px rgba(233, 196, 106, .14); transition: transform .2s var(--ease-out); }
.st-xbtn::after { content: ''; position: absolute; left: -3px; right: -3px; top: -4px; bottom: -4px; }
.st-xbtn:active { transform: scale(.95); }
.st-xbtn svg { flex: none; color: var(--gold); }
.st-xbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--aether); color: #06231F; font: 700 11px/1 var(--sans); box-shadow: 0 0 10px rgba(166, 244, 230, .6); }
.st-xbtn:focus-visible, .st-return:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }
.st.is-collection .st-head { margin-top: calc(max(var(--safe-top), 10px) + 6px); gap: 4px; }

/* "1 of 1": a small gilded seal in the corner opposite the number */
.st-one { position: absolute; right: 12px; top: 12px; padding: 5px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; line-height: normal; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #1A1305; background: linear-gradient(180deg, #FFF1C9 0%, #E9C46A 50%, #B88A3E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 10px rgba(0, 0, 0, .4), 0 0 14px rgba(233, 196, 106, .35); }
.st-no { font-variant-numeric: tabular-nums; }
.st-no.is-legend { color: var(--gold-hi); }
.st-no.is-legend svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 4px rgba(233, 196, 106, .9)); }

/* the keepers line: who found it, then each gift or swap */
.st-keepers { position: relative; flex: none; margin: 12px 28px 0; max-width: 380px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: rgba(243, 235, 221, .66); opacity: 0; visibility: hidden; }
.st.is-face .st-keepers, .st.is-strayless .st-keepers { opacity: 1; visibility: visible; animation: st-rise-in .75s var(--ease-out) .65s backwards; }
.st-keepers-k { font-size: 10px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.st-kdot { margin: 0 6px; color: rgba(233, 196, 106, .55); }
.st-keepers .st-kdot:first-of-type { margin-left: 8px; }
.st-keeper { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; }
.st-keeper b { font-weight: 600; color: var(--parchment); }
button.st-keeper { cursor: pointer; }
button.st-keeper b { text-decoration: underline dotted rgba(233, 196, 106, .55); text-underline-offset: 3px; }
button.st-keeper:active { opacity: .7; }
.st-keeper.is-you { color: var(--realm-accent); }
.st-keeper.is-more { color: var(--gold); font-weight: 600; }

/* the actions of a Stray of yours: what holds it, then Give it and the Exchange */
.st-trade { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.st-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; max-width: 340px; font-size: 13.5px; line-height: 1.4; text-align: center; color: rgba(243, 235, 221, .84); }
.st-status-icon { display: flex; flex: none; color: var(--gold); }
.st-status.is-listed, .st-status.is-listed .st-status-icon { color: var(--realm-accent); }
.st-status.is-quiet { color: rgba(243, 235, 221, .7); }
.st-status.is-quiet .st-status-icon { color: rgba(243, 235, 221, .6); }
.st-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; margin: 0; padding: 0 13px; border: 0; border-radius: 16px; color: #06231F; font: 650 12.5px/1 var(--sans); cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--aether); box-shadow: 0 0 16px rgba(166, 244, 230, .45); }
.st-chip::after { content: ''; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.st-chip:active { transform: scale(.96); }
.st-trade-btns { display: flex; gap: 10px; width: 100%; }
.st-trade-btns .btn { flex: 1 1 0; min-width: 0; gap: 8px; padding: 0 12px; }
.st-trade-btns .btn svg { flex: none; }
.st-trade-btns .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-trade-btns .st-main { height: 56px; border-radius: 28px; }
.st-trade-btns .st-second { height: 56px; border-radius: 28px; font-size: 14px; }
.st-trade-btns .is-wide { flex: 1 1 auto; }
.st-trade-btns.is-locked .btn { filter: saturate(.35) brightness(.78); }
.st-hint { display: block; margin: 0; max-width: 330px; font-size: 12.5px; line-height: 1.4; text-align: center; text-wrap: balance; color: rgba(243, 235, 221, .62); }
.st-hint svg { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--gold); }
/* a story Stray: a small gilded plaque instead of the trade buttons */
.st-plaque { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 22px; font: italic 400 16px/1.2 var(--serif); color: var(--gold-hi); background: rgba(233, 196, 106, .06); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45), 0 0 22px rgba(233, 196, 106, .12); }
.st-plaque svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 4px rgba(233, 196, 106, .9)); }
.st.is-collection .st-lore { margin-top: 18px; font-size: 17px; }
.st.is-collection .st-more { margin-top: 0; }

/* the bond: a Stray that came along ten seams wears a gold edge, and a glint runs round it */
.st-edge { position: absolute; inset: -4px; border-radius: 26px; pointer-events: none; opacity: 0; }
.st.is-bonded .st-edge { opacity: 1; padding: 3px; background: conic-gradient(from var(--edge, 0deg), #A97A35, #FFF1C9 10%, #E9C46A 18%, #8A6428 30%, #F7E2A6 45%, #A97A35 60%, #FFF6DB 72%, #C9973F 86%, #A97A35); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); box-shadow: 0 0 26px rgba(255, 228, 170, .7), 0 0 60px rgba(233, 196, 106, .3); animation: st-edge 6s linear infinite; }
.st.is-bonded .st-foil { box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(10, 13, 24, .9), 0 0 56px rgba(255, 228, 170, .42), 0 0 100px rgba(var(--realm-accent-rgb), .1); }
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes st-edge { to { --edge: 360deg; } }

/* a story Stray: the legendary foil, brighter */
.st.is-story .st-front.st-foil { background: linear-gradient(135deg, #FFFBEA 0%, #F7E2A6 14%, #C9973F 30%, #FFF1C9 46%, #E9C46A 60%, #8A6428 76%, #FFF1C9 100%); }
/* a Stray that returned to the Starwell: what the Atlas keeps of it, greyed; or its back, when nothing is left */
.st.is-lost .st-art { filter: grayscale(.85) brightness(.7); }
.st.is-lost .st-sheen { opacity: .15; }
.st.is-collection.is-strayless .st-more { display: none; }

@media (max-height: 720px) {
  .st.is-collection .st-head { margin-top: calc(max(var(--safe-top), 10px) + 2px); }
  .st.is-collection .st-lore { margin-top: 12px; font-size: 15.5px; }
  .st-keepers { margin-top: 8px; font-size: 12px; }
  .st-trade-btns .st-main, .st-trade-btns .st-second { height: 50px; }
}
@media (max-width: 374px) {
  .st-trade-btns { gap: 8px; }
  .st-trade-btns .st-second { font-size: 13.5px; padding: 0 10px; }
  .st-xbtn span:not(.st-xbadge) { display: none; }
  .st-xbtn { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .st.is-bonded .st-edge { animation: none; }
}

/* ── 1.1 wave 2, track O: card frames from quests (src/frames.js; docs/BUILD-1.1-wave2.md O). The frame is an SVG laid
   over the whole card (300×450): a band of its quest's enamel inside the gold foil, gilt pinstripes, a rosette at each
   corner and the crest at the top. Just chosen, it arrives with a glint. The same frame dresses the small cards of the
   Exchange (src/screens/exchange.js cardHtml) and the Atlas, inside their painting; the picker shows each one on this
   very Stray, and the frames still to find as their crests. ── */
.st-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.st-frame .fr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.2px rgba(5, 7, 14, .5)); }
.st-frame.is-new .fr { animation: st-frame-in 1.15s var(--ease-out) both; }
.st-frame.is-new::after { content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 241, 201, 0) 35%, rgba(255, 241, 201, .55) 48%, rgba(233, 196, 106, .25) 54%, rgba(255, 241, 201, 0) 66%); background-size: 260% 100%; mix-blend-mode: screen; animation: st-frame-sweep 1.3s var(--ease-out) .15s both; }
@keyframes st-frame-in { 0% { opacity: 0; transform: scale(1.035); filter: brightness(2.4) drop-shadow(0 0 10px rgba(255, 228, 170, .9)); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 1.2px rgba(5, 7, 14, .5)); } }
@keyframes st-frame-sweep { 0% { opacity: 0; background-position: 110% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }
/* framed: the number, "1 of 1" and the plate step in from the band */
.st.is-framed .st-no { left: 16px; top: 16px; }
.st.is-framed .st-one { right: 16px; top: 16px; }
.st.is-framed .st-plate { padding-left: 24px; padding-right: 24px; padding-bottom: 21px; }
/* Frame, beside Share and Save on a Stray of yours */
.st-frame-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 12px; border: 0; background: transparent; color: rgba(243, 235, 221, .85); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-out), color .2s; }
.st-frame-btn:active { transform: scale(.97); }
.st-frame-btn svg { flex: none; }
.st-frame-btn:focus-visible { outline: 2px solid var(--realm-accent); outline-offset: 3px; }

/* the picker */
.fp-sheet .sheet-body { padding-bottom: 28px; }
.fp { gap: 10px; }
.fp .xs-body { max-width: 310px; }
.fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; width: 100%; margin-top: 10px; }
.fp-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; animation: sheet-in .55s var(--ease-out) var(--d, 0s) backwards; transition: transform .22s var(--ease-out); }
.fp-opt:active { transform: scale(.96); }
.fp-card { position: relative; display: block; width: 100%; max-width: 104px; aspect-ratio: 2 / 3; box-sizing: border-box; padding: 3px; border-radius: 9px; background: linear-gradient(135deg, #FFF1C9 0%, #E9C46A 18%, #8A6428 34%, #F7E2A6 50%, #A97A35 66%, #FFF1C9 82%, #C9973F 100%); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); transition: box-shadow .3s var(--ease-out); }
.fp-face { position: relative; display: block; width: 100%; height: 100%; border-radius: 5.6% / 3.7%; overflow: hidden; background: var(--ink); }
.fp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); }
.fp-back { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(ellipse 70% 55% at 50% 46%, rgba(var(--realm-deep-rgb), .9), #0A0D18 80%); }
.fp-card .fr { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); overflow: hidden; border-radius: 5.6% / 3.7%; }
.fp-card.is-bare .fp-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--realm-accent-rgb), .45); }
.fp-opt.is-on .fp-card { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px #F0CF85, 0 0 24px rgba(233, 196, 106, .55), 0 10px 22px rgba(0, 0, 0, .5); }
.fp-check { position: absolute; right: -7px; top: -7px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #FFF1C9, #E9C46A 55%, #B88A3E); box-shadow: 0 0 0 2px #10142B, 0 2px 8px rgba(0, 0, 0, .5); }
.fp-name { max-width: 100%; font: italic 300 14px/1.2 var(--serif); color: var(--parchment); text-align: center; text-wrap: balance; }
.fp-opt.is-on .fp-name { color: var(--gold-hi); }
.fp-opt:focus-visible { outline: none; }
.fp-opt:focus-visible .fp-card { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px rgba(233, 196, 106, .8); }
.fp-first { margin: 6px 0 0; max-width: 300px; font: italic 300 15px/1.4 var(--serif); color: rgba(243, 235, 221, .78); text-wrap: balance; }
.fp-label { align-self: stretch; margin: 24px 0 4px; text-align: left; }
.fp-locked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; }
.fp-lock { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.fp-crest { position: relative; display: block; width: 46px; height: 46px; margin-bottom: 3px; }
.fp-crest svg { display: block; filter: saturate(.5) brightness(.72); opacity: .82; }
.fp-lock.is-week .fp-crest svg { filter: drop-shadow(0 0 8px rgba(233, 196, 106, .35)); opacity: 1; }
.fp-lockmark { position: absolute; right: -4px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; color: var(--gold); background: #10142B; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5); }
.fp-lock-name { max-width: 100%; font: italic 300 13.5px/1.2 var(--serif); color: rgba(243, 235, 221, .9); text-wrap: balance; }
.fp-lock-how { max-width: 100%; font: 500 11px/1.32 var(--sans); color: rgba(243, 235, 221, .58); text-wrap: balance; }
.fp-lock-how b { font-weight: 650; color: var(--aether); }
@media (max-width: 374px) {
  .fp-grid { gap: 14px 9px; }
  .fp-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-frame.is-new .fr, .st-frame.is-new::after, .fp-opt { animation: none; }
}
/* the Exchange's small cards wear it inside their painting (src/screens/exchange.js cardHtml) */
.xc-frame { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 .5px 1px rgba(5, 7, 14, .5)); }
.xc-face:has(.xc-frame) .xc-no { left: 8%; top: 6.5%; }
/* the Atlas's Strays tab (src/screens/atlas.js): the server's Strays, each in its frame; a story Stray in its brighter foil */
.atlas-stray-frame { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 .5px 1px rgba(5, 7, 14, .5)); }
.atlas-stray.is-framed .atlas-stray-no { left: 12px; top: 12px; }
.atlas-stray.is-framed .atlas-stray-plate { padding-left: 14px; padding-right: 14px; padding-bottom: 14px; }
.atlas-stray-no { font-variant-numeric: tabular-nums; }
.atlas-stray-no.is-legend { display: inline-flex; align-items: center; gap: 5px; }
.atlas-stray-no.is-legend svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 3px rgba(233, 196, 106, .9)); }
.atlas-stray-foil.is-story { background: linear-gradient(135deg, #FFFBEA 0%, #F7E2A6 14%, #C9973F 30%, #FFF1C9 46%, #E9C46A 60%, #8A6428 76%, #FFF1C9 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(247, 226, 166, .3); }
.fp-week { margin-top: -1px; font: 650 9.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--aether); }
.fp-lock.is-week .fp-crest::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(166, 244, 230, .55), 0 0 16px rgba(166, 244, 230, .3); }

/* update.css */
/* The app's own updates (src/update.js): the sheet that asks for the new build. It lives on the body, above every screen
   and the screens' own sheets (and under the toast), so it stays when the screen behind it changes. The seam breathing,
   the Cartographer's word, the gold Update and a quiet Later; the must (an app too old to play) is the same sheet,
   locked, with Update alone. */
.sheet-wrap.up-sheet { position: fixed; z-index: 45; }
.up-sheet .sheet-body { padding: 2px 22px 18px; }
.up { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 4px 4px; text-align: center; }
.up-glyph { margin-bottom: 8px; }
.up-title { font-size: 29px; line-height: 1.08; text-wrap: balance; }
.up-body { margin: 0 0 12px; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.up .btn { width: 100%; max-width: 320px; }
.up-go[aria-busy="true"] { filter: saturate(.8) brightness(.95); pointer-events: none; }
.up.is-force { padding-bottom: 12px; }

/* wordmark.css */
/* ELSEWHERE's wordmark (docs/DESIGN.md: gold leaf, the seam's light). One treatment for the game's Home and the landing
   page: scripts/wordmark.mjs makes the markup (src/ui/wordmark.js; the landing's hero, inline) and copies this file into
   landing/landing.css between its wordmark comments. Edit it here, then run the script.

   The word is Fraunces drawn as SVG outlines (no font to wait for, the same in Safari, Chrome and both web views, crisp
   at any size). The gilt is one picture, static, rasterized once: leaf with a soft emboss (a rim of light up-left,
   shade down-right), a fine dark edge, ink under it and a warm bloom (an SVG data: URL, generated below; one picture is
   one thing to compose, where the same drawing inline was dozens). Everything that moves is a layer above it that moves
   by transform and opacity only, so the compositor runs it and the page's main thread never wakes for it:
     the entrance   the letters wait unlit; a thread of the seam's light crosses them (--wm-dur, from --wm-delay) and
                    leaves them gilded (the gilt is revealed by a soft edge riding with the light)
     the motes      a few motes drift off the letters, each first as the light passes it
     the sweep      every 11 s a slow specular band glides across the letters (masked to them: the letters as a picture)
     the star       where the markup has one (the landing): a glint on the L as the sweep crosses it
   With reduced motion it is the finished gilt, still. Each page sets --wm-delay, --wm-dur and the font size. */
.wm {
  position: relative; display: block; height: 1em; margin: 0; padding: 0;
  font-family: var(--serif); font-weight: 440; line-height: 1; letter-spacing: 0; text-shadow: none; white-space: nowrap;
  --wm-delay: .1s; --wm-dur: 1.5s;
}
/* the word itself, for screen readers, search, find and copy: transparent, over the art */
.wm-word { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; color: transparent; letter-spacing: .34em; }
.wm-art { position: absolute; inset: 0; pointer-events: none; }
.wm-art > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

/* the letters before the light: the same gilt, unlit (a dark bronze) */
.wm-dim { filter: brightness(.3) saturate(.6); opacity: 0; animation: wm-unlit var(--wm-dur) ease-out var(--wm-delay) both; }
@keyframes wm-unlit { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* the gilt, revealed by the light: a window 1em wider than the word on the left and 2em on the right (the glow is never
   cut), with a soft right edge; it slides across while what it shows slides back, so the letters stay where they are */
.wm-lit { left: -1em; right: -2em; -webkit-mask: linear-gradient(90deg, #000 calc(100% - .8em), transparent); mask: linear-gradient(90deg, #000 calc(100% - .8em), transparent); transform: translateX(-100%); animation: wm-pass var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-lit > span { position: absolute; top: 0; bottom: 0; left: 1em; right: 2em; transform: translateX(calc(100% + 3em)); animation: wm-hold var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-lit i { position: absolute; }
@keyframes wm-pass { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes wm-hold { from { transform: translateX(calc(100% + 3em)); } to { transform: translateX(0); } }

/* the light: a thread of the seam with its halo, riding the window's soft edge (same box, same motion) */
.wm-light { left: -1em; right: -2em; transform: translateX(-100%); animation: wm-pass var(--wm-dur) var(--wm-ease) var(--wm-delay) both; }
.wm-light::before, .wm-light::after { content: ''; position: absolute; opacity: 0; animation: wm-glow var(--wm-dur) linear var(--wm-delay) both; }
.wm-light::before {
  right: .4em; top: -.2em; bottom: -.14em; width: .06em; margin-right: -.03em; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 246, 222, 0), #FFF6DE 26%, #FFFFFF 50%, #FFF6DE 74%, rgba(255, 246, 222, 0));
  box-shadow: 0 0 .08em .02em rgba(255, 244, 214, .95), 0 0 .36em .08em rgba(255, 210, 130, .6);
}
.wm-light::after { right: -.8em; top: -.25em; bottom: -.25em; width: 2.4em; background: radial-gradient(closest-side, rgba(255, 232, 180, .42), rgba(233, 196, 106, .12) 58%, rgba(233, 196, 106, 0)); }
/* it shows only near the letters: out of nothing at the first E, gone past the last */
@keyframes wm-glow { 0%, 12% { opacity: 0; } 24% { opacity: 1; } 58% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* the sweep: a band of specular light, masked to the letters */
.wm-sheen { overflow: hidden; }
.wm-sheen i { position: absolute; top: -10%; bottom: -10%; background: linear-gradient(100deg, rgba(255, 246, 222, 0) 18%, rgba(255, 248, 230, .45) 42%, rgba(255, 252, 242, .8) 50%, rgba(255, 248, 230, .45) 58%, rgba(255, 246, 222, 0) 82%); transform: translateX(0); }
@supports not ((mask-size: 100%) or (-webkit-mask-size: 100%)) { .wm-sheen { display: none; } }

/* the motes: each rises for half its cycle, then rests */
.wm-motes i { position: absolute; width: .065em; height: .065em; margin: -.0325em; border-radius: 50%; background: #FFE6AE; box-shadow: 0 0 .16em .04em rgba(255, 214, 140, .75); opacity: 0; animation: wm-mote-a 9s linear 0s infinite backwards; }
@keyframes wm-mote-a { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 7% { opacity: .95; transform: translate(.02em, -.12em) scale(1); } 50%, 100% { opacity: 0; transform: translate(.22em, -1.35em) scale(.55); } }
@keyframes wm-mote-b { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 7% { opacity: .9; transform: translate(-.02em, -.12em) scale(1); } 54%, 100% { opacity: 0; transform: translate(-.2em, -1.5em) scale(.5); } }
@keyframes wm-mote-c { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 9% { opacity: .85; transform: translate(0, -.14em) scale(.9); } 46%, 100% { opacity: 0; transform: translate(.06em, -1.2em) scale(.6); } }

/* the star: a four-pointed glint */
.wm-star { position: absolute; right: auto; bottom: auto; width: .44em; height: .44em; margin: -.22em; opacity: 0; }
.wm-star::before, .wm-star::after { content: ''; position: absolute; inset: 0; }
.wm-star::before { background: radial-gradient(circle, #FFFFFF 0, #FFF6DC 26%, rgba(255, 232, 180, 0) 62%); clip-path: polygon(50% 0, 55.5% 44.5%, 100% 50%, 55.5% 55.5%, 50% 100%, 44.5% 55.5%, 0 50%, 44.5% 44.5%); }
.wm-star::after { inset: 40%; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 .06em .04em rgba(255, 244, 214, .95), 0 0 .26em .06em rgba(255, 210, 130, .55); }

/* generated by scripts/wordmark.mjs from the letters: the pictures and the metrics (do not edit by hand) */
.wm { width: 8.9135em; --wm-ease: cubic-bezier(0.42, 0.04, 0.22, 1); }
.wm-dim, .wm-lit i { left: -0.5em; right: -0.5em; top: -0.5em; bottom: -0.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-896 -2723 19827 4000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='g-E' d='M412-739H747Q811-739 838-765Q864-791 873-864Q877-882 886-891Q894-900 908-902Q937-905 946-869L1025-574Q1030-555 1025-543Q1020-532 1005-527Q990-523 977-528Q965-533 956-547Q928-596 904-622Q880-647 851-657Q823-666 779-666H412ZM104-1367Q104-1383 115-1391Q126-1400 148-1400H919Q950-1400 970-1410Q991-1420 1008-1430Q1025-1440 1045-1440Q1067-1440 1078-1428Q1089-1416 1097-1387L1176-1098Q1182-1079 1176-1067Q1170-1055 1154-1050Q1136-1045 1121-1051Q1106-1058 1097-1077Q1058-1157 1026-1206Q993-1255 961-1281Q929-1308 892-1317Q855-1326 807-1326H498V-156Q498-115 523-94Q548-74 599-74H833Q897-74 944-96Q991-119 1036-186Q1082-252 1139-383Q1147-400 1159-407Q1171-413 1186-411Q1204-408 1212-395Q1220-382 1214-361L1129-18Q1121 10 1109 23Q1097 36 1074 36Q1055 36 1038 27Q1021 18 999 9Q978 0 947 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Z'/%3E%3Cpath id='g-L' d='M613-1331 544-1318Q522-1313 509-1301Q497-1288 497-1269V-139Q497-104 518-89Q539-74 584-74H792Q848-74 888-89Q928-105 961-144Q993-183 1025-256L1087-399Q1096-417 1108-424Q1120-431 1137-427Q1155-423 1162-411Q1169-399 1163-377L1076-17Q1068 11 1056 24Q1044 36 1022 36Q1004 36 987 27Q970 18 949 9Q927 0 894 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-99Q253-112 253-131V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H603Q626-1400 637-1391Q647-1383 647-1367Q647-1340 613-1331Z'/%3E%3Cpath id='g-S' d='M644 30Q556 30 494 7Q431-15 393-37Q355-59 339-59Q324-59 313-46Q302-32 293-14Q283 4 272 17Q261 31 245 31Q229 31 219 21Q209 12 205-10L131-342Q128-359 134-371Q141-383 157-389Q174-395 187-388Q201-381 210-362Q267-245 335-176Q403-106 478-76Q553-45 630-45Q741-45 804-105Q867-165 868-265Q868-327 840-380Q812-433 735-481Q659-530 513-580Q363-632 272-696Q181-760 141-843Q100-926 100-1032Q100-1150 156-1239Q211-1327 311-1376Q411-1425 542-1425Q635-1425 694-1405Q754-1384 790-1363Q826-1342 847-1342Q868-1342 878-1363Q889-1384 901-1406Q912-1427 935-1427Q951-1427 961-1417Q972-1407 980-1380L1077-1040Q1083-1021 1076-1006Q1070-991 1054-985Q1036-979 1023-986Q1010-993 1000-1011Q937-1138 867-1213Q796-1287 719-1319Q643-1351 562-1351Q450-1351 382-1285Q314-1220 314-1112Q314-1048 342-993Q371-938 445-887Q520-836 658-785Q815-728 906-664Q997-600 1036-522Q1075-444 1074-346Q1074-242 1024-157Q973-72 878-21Q782 30 644 30Z'/%3E%3Cpath id='g-W' d='M998-1129 1075-1103 775-150Q769-132 765-116Q762-100 762-78V-39Q762-20 752-10Q742 0 725 0H538Q520 0 510-10Q499-20 499-39V-78Q499-95 496-107Q494-119 486-143L147-1268Q140-1293 129-1304Q118-1315 99-1321L50-1334Q33-1340 26-1349Q20-1357 20-1369Q20-1383 30-1392Q41-1400 64-1400H491Q514-1400 525-1391Q536-1383 536-1368Q536-1343 505-1336L427-1324Q403-1319 399-1303Q395-1287 405-1253L738-133L663-73ZM1624-1367Q1624-1383 1635-1391Q1647-1400 1669-1400H1974Q1997-1400 2008-1391Q2018-1382 2018-1368Q2018-1356 2011-1349Q2004-1342 1984-1334L1944-1321Q1914-1309 1894-1283Q1873-1258 1858-1206L1553-150Q1547-127 1543-112Q1540-97 1540-78V-39Q1540-20 1530-10Q1520 0 1503 0H1308Q1291 0 1280-10Q1270-20 1270-39V-78Q1270-93 1269-107Q1268-121 1260-146L935-1268Q926-1298 917-1308Q908-1318 892-1323L844-1336Q826-1342 819-1349Q812-1356 812-1367Q812-1383 824-1391Q835-1400 857-1400H1275Q1298-1400 1309-1391Q1319-1383 1319-1367Q1319-1355 1311-1347Q1303-1339 1286-1334L1211-1323Q1189-1318 1184-1304Q1179-1290 1190-1253L1511-133L1446-81L1774-1213Q1787-1260 1776-1286Q1765-1312 1716-1324L1655-1336Q1638-1340 1631-1348Q1624-1356 1624-1367Z'/%3E%3Cpath id='g-H' d='M361-701H1222V-625H361ZM498-131Q498-112 510-99Q522-87 545-82L614-69Q648-60 648-33Q648-18 637-9Q627 0 604 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Q104-1383 115-1391Q126-1400 148-1400H604Q627-1400 637-1391Q648-1383 648-1367Q648-1340 614-1331L545-1318Q522-1313 510-1301Q498-1288 498-1269ZM1379-131Q1379-112 1391-99Q1404-87 1426-82L1495-69Q1529-60 1529-33Q1529-18 1519-9Q1508 0 1485 0H1029Q1007 0 996-9Q986-18 986-33Q986-60 1019-69L1088-82Q1111-87 1123-99Q1135-112 1135-131V-1269Q1135-1288 1123-1301Q1111-1313 1088-1318L1019-1331Q986-1340 986-1367Q986-1383 996-1391Q1007-1400 1029-1400H1485Q1508-1400 1519-1391Q1529-1383 1529-1367Q1529-1340 1495-1331L1426-1318Q1404-1313 1391-1301Q1379-1288 1379-1269Z'/%3E%3Cpath id='g-R' d='M1278-922Q1278-824 1235-745Q1192-665 1113-613Q1034-561 926-541Q894-535 865-529Q835-523 806-519Q776-515 741-515Q677-515 619-524Q560-533 511-550Q463-567 427-591L435-658Q465-636 507-621Q549-606 598-598Q647-591 699-591Q852-591 939-675Q1026-759 1026-919Q1026-1039 974-1132Q922-1225 827-1278Q732-1331 604-1331H497V-133Q497-112 508-100Q519-87 541-82L627-69Q646-63 653-55Q660-46 660-33Q660 0 616 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-100Q253-112 253-133V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H611Q825-1400 974-1339Q1123-1278 1200-1170Q1278-1062 1278-922ZM750-547 989-576 1265-140Q1285-110 1307-94Q1330-79 1366-70Q1395-63 1405-55Q1414-46 1414-33Q1414-18 1403-9Q1392 0 1369 0H968Q925 0 925-33Q925-43 931-49Q938-56 951-61L990-68Q1012-76 1016-90Q1019-105 1003-130Z'/%3E%3Cg id='g-w'%3E%3Cuse href='%23g-E'/%3E%3Cuse href='%23g-L' x='1954'/%3E%3Cuse href='%23g-S' x='3845'/%3E%3Cuse href='%23g-E' x='5700'/%3E%3Cuse href='%23g-W' x='7645'/%3E%3Cuse href='%23g-H' x='10352'/%3E%3Cuse href='%23g-E' x='12665'/%3E%3Cuse href='%23g-R' x='14619'/%3E%3Cuse href='%23g-E' x='16715'/%3E%3C/g%3E%3ClinearGradient id='g-g' gradientUnits='userSpaceOnUse' x1='0' y1='-1440' x2='0' y2='40'%3E%3Cstop offset='0' stop-color='%23FFFBEA'/%3E%3Cstop offset='0.14' stop-color='%23FAE8B0'/%3E%3Cstop offset='0.34' stop-color='%23EFCB6C'/%3E%3Cstop offset='0.5' stop-color='%23DDAE4C'/%3E%3Cstop offset='0.6' stop-color='%23B98432'/%3E%3Cstop offset='0.68' stop-color='%239A6A2C'/%3E%3Cstop offset='0.78' stop-color='%23C08B3A'/%3E%3Cstop offset='0.9' stop-color='%23EAC775'/%3E%3Cstop offset='1' stop-color='%23F6DDA0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g-s' gradientUnits='userSpaceOnUse' x1='104' y1='-1400' x2='17931' y2='0'%3E%3Cstop offset='0' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%23FFF8E0' stop-opacity='0.2'/%3E%3Cstop offset='.36' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%233B2408' stop-opacity='0'/%3E%3Cstop offset='.72' stop-color='%233B2408' stop-opacity='0.14'/%3E%3Cstop offset='.86' stop-color='%23FFF8E0' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='g-r' maskUnits='userSpaceOnUse' x='-96' y='-1723' width='18227' height='2000'%3E%3Cuse href='%23g-w' fill='%23fff'/%3E%3Cuse href='%23g-w' fill='%23000' transform='translate(-14 34)'/%3E%3C/mask%3E%3Cmask id='g-d' maskUnits='userSpaceOnUse' x='-96' y='-1723' width='18227' height='2000'%3E%3Cuse href='%23g-w' fill='%23fff'/%3E%3Cuse href='%23g-w' fill='%23000' transform='translate(10 -30)'/%3E%3C/mask%3E%3Cfilter id='g-h' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='480'/%3E%3C/filter%3E%3Cfilter id='g-b' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='120'/%3E%3C/filter%3E%3Cfilter id='g-k' filterUnits='userSpaceOnUse' x='-1496' y='-3323' width='21027' height='5200'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3C/defs%3E%3Cuse href='%23g-w' fill='%23E9C46A' opacity='0.2' filter='url(%23g-h)'/%3E%3Cuse href='%23g-w' fill='%23FFD58A' opacity='0.3' filter='url(%23g-b)'/%3E%3Cuse href='%23g-w' fill='%2305040A' opacity='0.75' transform='translate(0 46)' filter='url(%23g-k)'/%3E%3Cuse href='%23g-w' fill='none' stroke='%2324170A' stroke-width='56' stroke-linejoin='round'/%3E%3Cuse href='%23g-w' fill='url(%23g-g)'/%3E%3Cuse href='%23g-w' fill='url(%23g-s)'/%3E%3Cuse href='%23g-w' fill='%23FFF7DC' opacity='0.85' mask='url(%23g-r)'/%3E%3Cuse href='%23g-w' fill='%235A3A10' opacity='0.55' mask='url(%23g-d)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.wm-sheen { --wm-letters: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 -1723 17827 2000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='E' d='M412-739H747Q811-739 838-765Q864-791 873-864Q877-882 886-891Q894-900 908-902Q937-905 946-869L1025-574Q1030-555 1025-543Q1020-532 1005-527Q990-523 977-528Q965-533 956-547Q928-596 904-622Q880-647 851-657Q823-666 779-666H412ZM104-1367Q104-1383 115-1391Q126-1400 148-1400H919Q950-1400 970-1410Q991-1420 1008-1430Q1025-1440 1045-1440Q1067-1440 1078-1428Q1089-1416 1097-1387L1176-1098Q1182-1079 1176-1067Q1170-1055 1154-1050Q1136-1045 1121-1051Q1106-1058 1097-1077Q1058-1157 1026-1206Q993-1255 961-1281Q929-1308 892-1317Q855-1326 807-1326H498V-156Q498-115 523-94Q548-74 599-74H833Q897-74 944-96Q991-119 1036-186Q1082-252 1139-383Q1147-400 1159-407Q1171-413 1186-411Q1204-408 1212-395Q1220-382 1214-361L1129-18Q1121 10 1109 23Q1097 36 1074 36Q1055 36 1038 27Q1021 18 999 9Q978 0 947 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Z'/%3E%3Cpath id='L' d='M613-1331 544-1318Q522-1313 509-1301Q497-1288 497-1269V-139Q497-104 518-89Q539-74 584-74H792Q848-74 888-89Q928-105 961-144Q993-183 1025-256L1087-399Q1096-417 1108-424Q1120-431 1137-427Q1155-423 1162-411Q1169-399 1163-377L1076-17Q1068 11 1056 24Q1044 36 1022 36Q1004 36 987 27Q970 18 949 9Q927 0 894 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-99Q253-112 253-131V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H603Q626-1400 637-1391Q647-1383 647-1367Q647-1340 613-1331Z'/%3E%3Cpath id='S' d='M644 30Q556 30 494 7Q431-15 393-37Q355-59 339-59Q324-59 313-46Q302-32 293-14Q283 4 272 17Q261 31 245 31Q229 31 219 21Q209 12 205-10L131-342Q128-359 134-371Q141-383 157-389Q174-395 187-388Q201-381 210-362Q267-245 335-176Q403-106 478-76Q553-45 630-45Q741-45 804-105Q867-165 868-265Q868-327 840-380Q812-433 735-481Q659-530 513-580Q363-632 272-696Q181-760 141-843Q100-926 100-1032Q100-1150 156-1239Q211-1327 311-1376Q411-1425 542-1425Q635-1425 694-1405Q754-1384 790-1363Q826-1342 847-1342Q868-1342 878-1363Q889-1384 901-1406Q912-1427 935-1427Q951-1427 961-1417Q972-1407 980-1380L1077-1040Q1083-1021 1076-1006Q1070-991 1054-985Q1036-979 1023-986Q1010-993 1000-1011Q937-1138 867-1213Q796-1287 719-1319Q643-1351 562-1351Q450-1351 382-1285Q314-1220 314-1112Q314-1048 342-993Q371-938 445-887Q520-836 658-785Q815-728 906-664Q997-600 1036-522Q1075-444 1074-346Q1074-242 1024-157Q973-72 878-21Q782 30 644 30Z'/%3E%3Cpath id='W' d='M998-1129 1075-1103 775-150Q769-132 765-116Q762-100 762-78V-39Q762-20 752-10Q742 0 725 0H538Q520 0 510-10Q499-20 499-39V-78Q499-95 496-107Q494-119 486-143L147-1268Q140-1293 129-1304Q118-1315 99-1321L50-1334Q33-1340 26-1349Q20-1357 20-1369Q20-1383 30-1392Q41-1400 64-1400H491Q514-1400 525-1391Q536-1383 536-1368Q536-1343 505-1336L427-1324Q403-1319 399-1303Q395-1287 405-1253L738-133L663-73ZM1624-1367Q1624-1383 1635-1391Q1647-1400 1669-1400H1974Q1997-1400 2008-1391Q2018-1382 2018-1368Q2018-1356 2011-1349Q2004-1342 1984-1334L1944-1321Q1914-1309 1894-1283Q1873-1258 1858-1206L1553-150Q1547-127 1543-112Q1540-97 1540-78V-39Q1540-20 1530-10Q1520 0 1503 0H1308Q1291 0 1280-10Q1270-20 1270-39V-78Q1270-93 1269-107Q1268-121 1260-146L935-1268Q926-1298 917-1308Q908-1318 892-1323L844-1336Q826-1342 819-1349Q812-1356 812-1367Q812-1383 824-1391Q835-1400 857-1400H1275Q1298-1400 1309-1391Q1319-1383 1319-1367Q1319-1355 1311-1347Q1303-1339 1286-1334L1211-1323Q1189-1318 1184-1304Q1179-1290 1190-1253L1511-133L1446-81L1774-1213Q1787-1260 1776-1286Q1765-1312 1716-1324L1655-1336Q1638-1340 1631-1348Q1624-1356 1624-1367Z'/%3E%3Cpath id='H' d='M361-701H1222V-625H361ZM498-131Q498-112 510-99Q522-87 545-82L614-69Q648-60 648-33Q648-18 637-9Q627 0 604 0H148Q126 0 115-9Q104-18 104-33Q104-60 138-69L207-82Q230-87 242-99Q254-112 254-131V-1269Q254-1288 242-1301Q230-1313 207-1318L138-1331Q104-1340 104-1367Q104-1383 115-1391Q126-1400 148-1400H604Q627-1400 637-1391Q648-1383 648-1367Q648-1340 614-1331L545-1318Q522-1313 510-1301Q498-1288 498-1269ZM1379-131Q1379-112 1391-99Q1404-87 1426-82L1495-69Q1529-60 1529-33Q1529-18 1519-9Q1508 0 1485 0H1029Q1007 0 996-9Q986-18 986-33Q986-60 1019-69L1088-82Q1111-87 1123-99Q1135-112 1135-131V-1269Q1135-1288 1123-1301Q1111-1313 1088-1318L1019-1331Q986-1340 986-1367Q986-1383 996-1391Q1007-1400 1029-1400H1485Q1508-1400 1519-1391Q1529-1383 1529-1367Q1529-1340 1495-1331L1426-1318Q1404-1313 1391-1301Q1379-1288 1379-1269Z'/%3E%3Cpath id='R' d='M1278-922Q1278-824 1235-745Q1192-665 1113-613Q1034-561 926-541Q894-535 865-529Q835-523 806-519Q776-515 741-515Q677-515 619-524Q560-533 511-550Q463-567 427-591L435-658Q465-636 507-621Q549-606 598-598Q647-591 699-591Q852-591 939-675Q1026-759 1026-919Q1026-1039 974-1132Q922-1225 827-1278Q732-1331 604-1331H497V-133Q497-112 508-100Q519-87 541-82L627-69Q646-63 653-55Q660-46 660-33Q660 0 616 0H147Q125 0 114-9Q103-18 103-33Q103-60 137-69L206-82Q229-87 241-100Q253-112 253-133V-1269Q253-1288 241-1301Q229-1313 206-1318L137-1331Q103-1340 103-1367Q103-1383 114-1391Q125-1400 147-1400H611Q825-1400 974-1339Q1123-1278 1200-1170Q1278-1062 1278-922ZM750-547 989-576 1265-140Q1285-110 1307-94Q1330-79 1366-70Q1395-63 1405-55Q1414-46 1414-33Q1414-18 1403-9Q1392 0 1369 0H968Q925 0 925-33Q925-43 931-49Q938-56 951-61L990-68Q1012-76 1016-90Q1019-105 1003-130Z'/%3E%3C/defs%3E%3Cuse href='%23E'/%3E%3Cuse href='%23L' x='1954'/%3E%3Cuse href='%23S' x='3845'/%3E%3Cuse href='%23E' x='5700'/%3E%3Cuse href='%23W' x='7645'/%3E%3Cuse href='%23H' x='10352'/%3E%3Cuse href='%23E' x='12665'/%3E%3Cuse href='%23R' x='14619'/%3E%3Cuse href='%23E' x='16715'/%3E%3C/svg%3E"); -webkit-mask: var(--wm-letters) 0 0 / 100% 100% no-repeat; mask: var(--wm-letters) 0 0 / 100% 100% no-repeat; }
.wm-sheen i { left: -24%; width: 24%; animation: wm-sheen 11s cubic-bezier(0.4, 0, 0.25, 1) calc(var(--wm-delay) + var(--wm-dur) + 1.6s) infinite; }
@keyframes wm-sheen { 0% { transform: translateX(0); } 17%, 100% { transform: translateX(516.67%); } }
.wm-motes i:nth-child(1) { left: 31.0%; top: 30.0%; animation-name: wm-mote-b; animation-duration: 9.4s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.313); }
.wm-motes i:nth-child(2) { left: 79.0%; top: 36.0%; animation-name: wm-mote-a; animation-duration: 10.4s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.505); }
.wm-motes i:nth-child(3) { left: 6.0%; top: 42.0%; animation-name: wm-mote-a; animation-duration: 7.6s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.226); }
.wm-motes i:nth-child(4) { left: 55.0%; top: 52.0%; animation-name: wm-mote-c; animation-duration: 8.2s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.392); }
.wm-motes i:nth-child(5) { left: 96.0%; top: 48.0%; animation-name: wm-mote-b; animation-duration: 8.8s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.656); }
.wm-motes i:nth-child(6) { left: 18.0%; top: 60.0%; animation-name: wm-mote-c; animation-duration: 11.2s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.272); }
.wm-motes i:nth-child(7) { left: 68.0%; top: 28.0%; animation-name: wm-mote-b; animation-duration: 9.8s; animation-delay: calc(var(--wm-delay) + var(--wm-dur) * 0.445); }
.wm-star { left: 11.84%; top: 17.15%; animation: wm-star 11s linear calc(var(--wm-delay) + var(--wm-dur) + 1.6s) infinite; }
@keyframes wm-star { 0%, 2.86% { opacity: 0; transform: scale(0) rotate(-35deg); } 4.66% { opacity: 1; transform: scale(1) rotate(0deg); } 9.06%, 100% { opacity: 0; transform: scale(.15) rotate(50deg); } }
/* /generated */

@media (prefers-reduced-motion: reduce) {
  .wm-dim, .wm-light, .wm-sheen, .wm-motes, .wm-star { display: none; }
  .wm-lit, .wm-lit > span { transform: none; animation: none; }
}