/* 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. */
.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"] { 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-bottom: calc(8px + var(--safe-bottom)); box-sizing: border-box; display: grid; grid-template-columns: repeat(5, 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 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: rgba(243, 235, 221, .6); text-align: center; transition: color .3s; }
.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; }
.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: 9.5px; letter-spacing: .05em; }
}
@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; }
}

/* 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; }

/* 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; }
}

/* 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; } }
.home-wordmark { margin: 0; font-size: 36px; line-height: 1; color: var(--parchment); white-space: nowrap; animation: home-mark 1.7s var(--ease-out) var(--t-mark) backwards; }
@keyframes home-mark { from { opacity: 0; letter-spacing: .6em; padding-left: .6em; filter: blur(6px); } to { opacity: 1; letter-spacing: .34em; padding-left: .34em; filter: blur(0); } }
.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 wordmark never flashes in a fallback face */
.home-title > * { animation-play-state: paused; }
.fonts-ready .home-title > * { 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; justify-content: center; gap: 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-wordmark { font-size: 32px; }
  .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; }

/* 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; }
.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; } }

/* 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; }
.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), the share ── */
.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-share { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; 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 { transform: scale(.97); }
.rv-share[hidden] { display: none; }
.rv-share svg { flex: none; }
.rv-stray:focus-visible, .rv-share: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 { 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; }
}

/* 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 (design/board/Share.dc.html): the card itself is drawn on a canvas by share.js; this is the screen around it.
   Realms (src/css/realms.css): the sky and the card's 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 card, as large as the screen allows */
.share-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 16px 0 18px; display: flex; align-items: center; justify-content: center; 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-card { position: relative; flex: none; width: 0; height: 0; overflow: hidden; border-radius: 18px; 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); }
.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); }

/* Share, Copy link */
.share-actions { position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0 24px calc(20px + var(--safe-bottom)); animation: sh-rise .8s var(--ease-spring) .22s backwards; }
.share-actions .btn svg { flex: none; }
.share-copy { align-self: center; }
.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: 10px 0 12px; }
  .share-actions { gap: 2px; padding-bottom: calc(12px + 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; } }

/* 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); }
.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; }
}

/* 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); }
.st-room { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 12px; border: 0; background: transparent; color: rgba(243, 235, 221, .85); font: 600 14px var(--sans); cursor: pointer; transition: transform .2s var(--ease-out); }
.st-room:active { transform: scale(.97); }
.st-room[hidden], .st.is-strayless .st-room { display: none; }
.st-room svg { flex: none; }
.st-keep:focus-visible, .st-room: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-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 { animation: none; }
}