/* Pyramidiom v1 — "the Rise". Night desert, full bleed: the world is the whole screen and the UI floats over it in
   stepped ziggurat frames (1px old-gold rule, dark translucent fill). Palette from the sprites (Paul 2026-11-09):
   sand, burnt sienna, lapis, jade, old gold, bone white, ink. Self-hosted OFL faces in web/fonts/: Cinzel (inscription),
   Silkscreen (labels, buttons), VT323 (body), Press Start 2P (a few caps). Nothing fetched from a CDN. */

@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Variable.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("../fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --ink: #0e0b08; --ink-2: #1a1410; --stone: #2a2118; --stone-lt: #3b2f22;
  --sand: #e9d3a3; --sand-dim: #a08f6c; --bone: #f3ead6;
  --sienna: #b3542a; --sienna-lt: #e8763f; --lapis: #1f3a93; --jade: #2f8f7a; --jade-lt: #4fc3a8;
  --gold: #d4a73a; --gold-lt: #f6e2a0; --gold-dk: #8a6a1e;
  --sky-top: #04050c; --sky-mid: #0d1538; --horizon: #1f3a93; --ground: #2a1d14;
  --t-foundation: #b8955e; --t-tooclever: #cfb27d; --t-common: #d9b56a; --t-rare: #efe6d2; --t-buried: #d2695a; --t-capstone: #f2c23f; --t-none: #8a9099;
  --title: "Cinzel", Georgia, "Times New Roman", serif;
  --lab: "Silkscreen", "Press Start 2P", ui-monospace, Menlo, monospace;
  --mono: "VT323", ui-monospace, Menlo, monospace;
  --px8: "Press Start 2P", ui-monospace, Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --col: 40rem; --ground-h: clamp(44px, 8vh, 96px); --rise: 0;
  /* the ziggurat frame: three 3px steps at every corner */
  --zig: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
    calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 3px 6px, 3px 3px, 6px 3px);
}

/* ---------- fixed app shell (ios-pwa-shell §3): body is a fixed flex column, only #app scrolls ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--sky-top); overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; touch-action: manipulation; }
@media (display-mode: standalone) { html { height: 100vh; height: 100lvh; min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); } }
html[data-standalone="true"] { height: 100vh; height: 100lvh; }
body {
  margin: 0; position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%;
  height: 100vh; height: 100dvh; height: var(--vh-px, 100dvh);
  display: flex; flex-direction: column; overscroll-behavior: none;
  background: var(--sky-top); color: var(--sand);
  font-family: var(--mono); font-size: 20px; line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
}
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); background: rgba(4,5,12,.6); z-index: 40; }
.topbar { flex: none; position: relative; z-index: 3; }
body > #app { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; width: 100%; position: relative; z-index: 2; padding-bottom: calc(var(--safe-b) + 1rem); }
/* the screenshot tool un-fixes the shell to take a full-length picture of a long state */
body[data-shot="tall"] { position: static; height: auto !important; overflow: visible; }
body[data-shot="tall"] > #app { overflow: visible; }
body[data-shot="tall"] > .world { position: fixed; }
html:has(body[data-shot="tall"]) { height: auto; overflow: visible; }

button, input, textarea { font: inherit; color: inherit; }
button, .btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.15; }
p { margin: 0 0 .6em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- type helpers ---------- */
.lab { font-family: var(--lab); font-weight: 400; font-size: 10px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--sand-dim); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.note { font-size: 17px; color: var(--sand-dim); text-align: center; }
.empty { color: var(--sand-dim); text-align: center; padding: 1.2rem 0; }
.head { font-family: var(--title); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 .55rem; display: flex; align-items: baseline; gap: .6rem; }
.head small { font-size: 8px; letter-spacing: .14em; }
.head::after { content: ""; flex: 1; border-top: 1px dashed var(--gold-dk); transform: translateY(-3px); }

/* ---------- the ziggurat frame: ::before is the gold rule, ::after the dark fill one pixel inside ---------- */
.frame { position: relative; isolation: isolate; padding: .9rem 1rem; color: var(--sand); }
.frame::before, .frame::after { content: ""; position: absolute; z-index: -1; clip-path: var(--zig); pointer-events: none; }
.frame::before { inset: 0; background: var(--gold); opacity: .85; }
.frame::after { inset: 1px; background: rgba(14,11,8,.84); }
.frame--sm { padding: .4rem .7rem; }
.frame--stone::after { background: linear-gradient(135deg, rgba(59,47,34,.96), rgba(42,33,24,.96)); }

/* ---------- buttons: the same frame, Silkscreen caps ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; position: relative; isolation: isolate;
  background: transparent; border: 0; padding: .7rem 1rem; min-height: 2.9rem; cursor: pointer; text-decoration: none;
  font-family: var(--lab); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; clip-path: var(--zig); pointer-events: none; }
.btn::before { inset: 0; background: var(--sand-dim); opacity: .75; }
.btn::after { inset: 1px; background: rgba(14,11,8,.84); }
.btn--primary { color: var(--gold-lt); }
.btn--primary::before { background: var(--gold); opacity: 1; }
.btn--primary::after { background: linear-gradient(180deg, rgba(59,47,34,.96), rgba(26,20,16,.96)); }
.btn:active::after { background: rgba(138,106,30,.5); }
.btn--big { width: 100%; min-height: 3.4rem; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-col { display: grid; gap: .6rem; }

/* ---------- states: one document, one visible at a time ---------- */
.state { display: none; }
body[data-state="door"] .state--door, body[data-state="play"] .state--play,
body[data-state="done"] .state--done, body[data-state="reveal"] .state--reveal { display: block; }

/* ---------- the world: fixed full-bleed night desert ---------- */
.world { position: absolute; inset: 0; overflow: hidden; z-index: 0; --scroll: 0; }
.world__sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, #080c22 30%, var(--sky-mid) 55%, var(--horizon) 84%, #43325c 94%, #6b3a2a 100%); }
.world__dark { position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,0) 100%); opacity: calc(var(--rise) * .65); transition: opacity 1.2s; }
.world__starfield { position: absolute; inset: 0; opacity: calc(.6 + var(--rise) * .4); transition: opacity 1.2s; }
.world__stars { position: absolute; left: 0; top: 0; display: block; }                 /* v1e: canvases painted once, no per-star elements */
.world__stars--tw { animation: twinkle 3.5s ease-in-out infinite; }
.world__stars--tw2 { animation-delay: -1.7s; animation-duration: 4.1s; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.world__moon { position: absolute; top: 48%; left: 8%; width: 60px; height: 60px; transform: rotate(-24deg); }
.world__moon svg { width: 100%; height: 100%; display: block; }
.ufo { position: absolute; left: 0; top: 0; width: 45px; height: 18px; z-index: 1;
  transform: translate(calc(100vw - 48px), calc(var(--safe-t) + 79px)); transition: transform 1.2s ease-in-out; }   /* v1f: the top-right corner under the HUD, beside the card's seal, never over the outline */
.ufo__drift { width: 100%; height: 100%; animation: ufo-drift 40s ease-in-out infinite alternate; }
.ufo__drift svg { width: 100%; height: 100%; display: block; }
.ufo__light { animation: ufo-light 1.2s steps(2) infinite; }
.ufo--hover .ufo__drift { animation: ufo-bob 1.6s ease-in-out infinite alternate; }
body[data-state="door"] .ufo { transform: translate(28px, 60vh); }
body[data-state="done"] .ufo, body[data-state="reveal"] .ufo { transform: translate(calc(100vw - 140px), calc(var(--safe-t) + 58px)); }
body[data-state="done"] .ufo__drift, body[data-state="reveal"] .ufo__drift { animation: ufo-bob 2.6s ease-in-out infinite alternate; }
@keyframes ufo-drift { 0% { transform: translate(0, 0); } 30% { transform: translate(-3px, -4px); } 55% { transform: translate(2px, -2px); } 80% { transform: translate(-2px, -1px); } 100% { transform: translate(0, 0); } }
@keyframes ufo-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes ufo-light { 0% { opacity: 1; } 50% { opacity: .3; } }
.dune { position: absolute; left: -2%; right: -2%; bottom: var(--ground-h); will-change: transform; }
.dune svg { width: 100%; height: 100%; display: block; }
.dune--far { height: 34vh; transform: translateY(calc(var(--scroll) * -.05px)); }
.dune--mid { height: 25vh; transform: translateY(calc(var(--scroll) * -.11px)); }
.dune--near { height: 16vh; transform: translateY(calc(var(--scroll) * -.2px)); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground-h); background: var(--ground); border-top: 2px solid #6b5436;
  background-image: repeating-linear-gradient(35deg, rgba(243,234,214,.045) 0 1px, transparent 1px 7px); }
.world__site { position: absolute; left: 0; right: 0; bottom: var(--ground-h); display: flex; justify-content: center; }

/* ---------- the site: the pyramid svg, the workers on the ground line, the height gauge ---------- */
.site { position: relative; z-index: 1; width: 100%; max-width: 600px; aspect-ratio: 480 / 300; margin: 0 auto; }   /* the svgs overflow the box upward: the maximum shape is 32 rows */
.site > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; z-index: 1; }   /* explicit stacking: WebKit painted the built svg over the animated crew */
/* v1e layers: ghost / built / laying svgs; the sweep overlay (clip-path = the silhouette, one gradient band moved by transform); the Eye */
.site__sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }   /* hidden: the band ends past the box and would widen #app */
.site__sweep-band { position: absolute; top: -10%; height: 120%; background: linear-gradient(90deg, rgba(243,234,214,0), rgba(243,234,214,.5) 50%, rgba(243,234,214,0)); will-change: transform; }
.site__eye { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.eye-wrap { position: absolute; }
.eye-wrap > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.eye__glow { filter: blur(3px); }                                   /* a static layer: painted once, never re-rendered by the rays' motion */
.eye__raysvg { animation: rays 90s linear infinite; }               /* the rays turn as one composited element, not an svg group */
.eye__plumb { position: absolute; width: 0; border-left: 1px dashed rgba(246,226,160,.8); transform: translateX(-.5px); }
.eye__loz { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #f6e2a0; transform: rotate(45deg); animation: breathe 3s ease-in-out infinite; }
.course__glow { filter: blur(3px); }                                /* on the built layer, redrawn only when a course lands */
.site__actors { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.actor { position: absolute; bottom: 0; height: 28%; }
.actor img { height: 100%; width: auto; display: block; position: relative; transform-origin: 50% 100%; image-rendering: pixelated; }
html[data-px="0"] .actor img { image-rendering: auto; }
.actor .sprite--idle  { animation: sprite-idle 3s ease-in-out infinite; }
.actor .sprite--cheer { animation: sprite-cheer 1.1s ease-in-out infinite; }
.actor .sprite--slump { animation: sprite-slump 2.6s ease-in-out infinite; }
.actor .sprite--haul  { animation: sprite-haul .55s ease-in-out infinite; }
.actor:nth-child(2) img { animation-delay: -1s; }
.actor:nth-child(3) img { animation-delay: -2s; }
@keyframes sprite-idle  { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
@keyframes sprite-cheer { 0%, 100% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(-14%) scaleY(1.04); } 55% { transform: translateY(0) scaleY(.96); } }
@keyframes sprite-slump { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(5deg) translateY(4%); } }
@keyframes sprite-haul  { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4%) rotate(1.5deg); } }
/* haul poses are drawn facing left; the walk-in travels left-to-right, so mirror them */
.actor--haul img { transform: scaleX(-1); animation: none; }

/* the height gauge: an old-gold rule up the right edge, milestones with dry captions, YOU in sienna rising as stones land */
.gauge { position: absolute; right: 10px; bottom: 0; width: 0; height: 100%; pointer-events: none; --gh: 100%; z-index: 5; }   /* height set by SCENE.layoutGauge: 146.6 m = the full build's apex */
.gauge__line { position: absolute; left: -1px; bottom: 0; top: 0; width: 2px; background: var(--gold); opacity: .8; }
.gauge__tick { position: absolute; left: -5px; bottom: calc(var(--f) * 100%); width: 6px; height: 1px; background: var(--gold); opacity: .55; }
.gauge__mark { position: absolute; right: 0; bottom: calc(var(--f) * 100%); width: 0; height: 0; }
.gauge__mark::before { content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 2px; background: var(--gold); }
.gauge__mark::after { content: ""; position: absolute; right: 14px; bottom: 0; width: 22vw; max-width: 180px; border-top: 1px dashed rgba(212,167,58,.28); }
.gauge__cap { position: absolute; right: 6px; bottom: 3px; white-space: nowrap; font: 400 13px/1 var(--mono); color: var(--sand-dim);
  background: rgba(14,11,8,.72); padding: 1px 4px 2px; }
.gauge__cap b { font-weight: 400; color: var(--gold); }
.gauge__cap-t, .gauge__cap-s { margin-left: .35em; }
.gauge__cap-s { display: none; }
.gauge__mark--short .gauge__cap-t, .gauge__mark--short .gauge__cap-s { display: none; }
/* v1f: phones get the short captions, at most 38% of the width, right-aligned on the gauge (the room rule drops to the metres if one would cross the outline) */
@media (max-width: 480px) { .gauge__cap-t { display: none; } .gauge__cap-s { display: inline; } .gauge__cap { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; } }
.gauge__mark--hide .gauge__cap { display: none; }
.gauge__youlab--hide { display: none; }
.gauge__you { position: absolute; right: 0; bottom: 0; width: 0; height: 0; transform: translateY(calc(var(--f) * -1 * var(--gh))); transition: transform 1.2s ease-in-out; }
.gauge__you::before { content: ""; position: absolute; right: -5px; bottom: -5px; width: 9px; height: 9px; background: var(--sienna-lt); transform: rotate(45deg); box-shadow: 0 0 6px rgba(232,118,63,.9); }
.gauge__youlab { position: absolute; right: 8px; bottom: -22px; font: 700 8px/1 var(--lab); letter-spacing: .18em; color: var(--sienna-lt);
  background: rgba(14,11,8,.92); padding: 3px 5px 3px 6px; white-space: nowrap; }
.gauge__m { font: 400 14px/1 var(--mono); letter-spacing: 0; font-weight: 400; }

/* ---------- top bar ---------- */
.topbar { display: none; padding: calc(.45rem + var(--safe-t)) .7rem .35rem; }
body[data-state="play"] .topbar, body[data-state="done"] .topbar, body[data-state="reveal"] .topbar { display: block; }
body[data-state="done"] .topbar, body[data-state="reveal"] .topbar { background: linear-gradient(180deg, rgba(4,5,12,.97), rgba(4,5,12,.86)); }
.inscription--sm { animation: none; }                                 /* v1e: no shimmer on the masthead (the filtered text re-rendered every frame on the result) */
.topbar__play, .topbar__done, .topbar__reveal { display: none; }
body[data-state="play"] .topbar__play { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
body[data-state="done"] .topbar__done { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: 0 .2rem; max-width: var(--col); margin: 0 auto; }
body[data-state="reveal"] .topbar__reveal { display: flex; justify-content: space-between; align-items: center; gap: .8rem; max-width: var(--col); margin: 0 auto; }
.hud { text-align: center; min-width: 5.6rem; }
.topbar__play > .hud:first-child { justify-self: start; } .topbar__play > .hud:last-child { justify-self: end; }
.hud .lab { display: block; font-size: 8px; }
.hud__val { display: block; font: 400 26px/1 var(--mono); color: var(--gold); margin-top: 2px; }
.hud__val--score { color: var(--sienna-lt); }
.dots-wrap { text-align: center; }
.dots { display: flex; gap: 4px; justify-content: center; }
.dots i { width: 11px; height: 11px; background: var(--stone-lt); box-shadow: inset 0 0 0 1px rgba(14,11,8,.7); }
.dots i.cur { background: var(--stone); box-shadow: 0 0 0 1px var(--gold); animation: blink 1s steps(2) infinite; }
.dots i[data-t="foundation"] { background: var(--t-foundation); } .dots i[data-t="tooclever"] { background: var(--t-tooclever); }
.dots i[data-t="common"] { background: var(--t-common); } .dots i[data-t="rare"] { background: var(--t-rare); }
.dots i[data-t="buried"] { background: var(--t-buried); } .dots i[data-t="capstone"] { background: var(--t-capstone); }
.dots i[data-t="none"] { background: var(--t-none); }
.dots__lab { display: block; font-size: 8px; margin-top: 5px; }
.topbar__cap { color: var(--gold); white-space: nowrap; }
.topbar__back { background: transparent; border: 0; padding: .3rem 0; cursor: pointer; color: var(--gold); }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- door ---------- */
.door { max-width: var(--col); margin: 0 auto; padding: calc(var(--safe-t) + 1.6rem) 1rem 0; text-align: center; }
/* the inscription: Cinzel carved into a stone tablet, gold inlay with a slow sand-drift shimmer */
.tablet { position: relative; isolation: isolate; padding: 1.1rem 1rem .9rem; margin: 0 auto .6rem; max-width: 30rem; }
.tablet::before, .tablet::after { content: ""; position: absolute; z-index: -1; clip-path: var(--zig); }
.tablet::before { inset: 0; background: var(--gold-dk); opacity: .9; }
.tablet::after { inset: 1px; background: linear-gradient(160deg, #3b2f22 0%, #2a2118 55%, #1f1813 100%);
  background-image: repeating-linear-gradient(35deg, rgba(243,234,214,.035) 0 1px, transparent 1px 6px), linear-gradient(160deg, #3b2f22 0%, #2a2118 55%, #1f1813 100%); }
.inscription { display: block; font-family: var(--title); font-weight: 800; font-size: clamp(27px, 7.6vw, 52px); line-height: 1.1; letter-spacing: .13em; text-transform: uppercase;
  padding-left: .13em; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--gold-dk) 0%, var(--gold) 32%, var(--gold-lt) 50%, var(--gold) 68%, var(--gold-dk) 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(246,226,160,.28)) drop-shadow(0 -1px 0 rgba(0,0,0,.75));
  animation: shimmer 9s linear infinite; }
.inscription--sm { font-size: 17px; letter-spacing: .18em; font-weight: 700; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.tablet__sub { margin: .5rem 0 0; color: var(--gold); font-size: 11px; letter-spacing: .34em; padding-left: .34em; }
.tagline { color: var(--sand); font-size: 19px; margin: .4rem 0 .9rem; line-height: 1.3; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(4,5,12,.9); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .9rem; }
.stats > div { display: grid; justify-items: center; }
.stats b { font-weight: 400; font-size: 30px; line-height: 1; color: var(--bone); }
.stats .lab { font-size: 8px; margin-top: 3px; }
.door__day { margin: .8rem 0 .3rem; color: var(--sand); text-shadow: 0 1px 0 var(--ink); }
.door__howto { background: transparent; border: 0; cursor: pointer; padding: .3rem .5rem; color: var(--gold); text-shadow: 0 1px 0 var(--ink); }

/* ---------- play ---------- */
.play { max-width: var(--col); margin: 0 auto; padding: .6rem .9rem 0; }
.countdown { display: grid; justify-items: center; padding: 1rem 1rem .9rem; text-align: center; margin: 1.4rem auto 0; max-width: 20rem; }
.countdown b { font-weight: 400; font-size: 64px; line-height: 1; color: var(--gold-lt); margin: .2rem 0; }
.countdown__kind { color: var(--gold); }
/* the prompt sign: a dark stone slab, a hair off level, hanging in the scene */
.sign { position: relative; margin: .9rem auto 1.1rem; max-width: 30rem; padding: .8rem 1rem .9rem; transform: rotate(-2deg);
  background: linear-gradient(160deg, #3b2f22 0%, #241c14 60%, #1a1410 100%); border: 1px solid var(--gold-dk); box-shadow: 4px 6px 0 rgba(4,5,12,.6), inset 0 0 0 1px rgba(243,234,214,.06);
  background-image: repeating-linear-gradient(35deg, rgba(243,234,214,.035) 0 1px, transparent 1px 6px), linear-gradient(160deg, #3b2f22 0%, #241c14 60%, #1a1410 100%); }
.sign::before, .sign::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; background: var(--gold); box-shadow: 0 1px 0 var(--ink); }
.sign::before { left: 5px; } .sign::after { right: 5px; }
.sign__kind { color: var(--gold); display: block; text-align: center; }
.sign__text { font-size: clamp(27px, 7vw, 36px); line-height: 1.08; color: var(--bone); margin: .35rem 0 0; text-align: center; text-wrap: balance; }
.sign__text::before { content: "\201C"; color: var(--gold); } .sign__text::after { content: "\201D"; color: var(--gold); }
.sign__text .blank { color: var(--gold-lt); letter-spacing: .04em; }
.sign.shake { animation: shake .4s linear; }
@keyframes shake { 0%, 100% { transform: rotate(-2deg) translateX(0); } 20% { transform: rotate(-2deg) translateX(-2px); } 40% { transform: rotate(-2deg) translateX(2px); } 60% { transform: rotate(-2deg) translateX(-2px); } 80% { transform: rotate(-2deg) translateX(2px); } }
.answer { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: stretch; }
.answer__box { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem; min-width: 0; }
.answer__caret { width: 9px; height: 20px; background: var(--gold); flex: none; animation: blink 1s steps(2) infinite; }
.answer__field { min-width: 0; width: 100%; background: transparent; border: 0; padding: .2rem 0; font-size: 25px; line-height: 1.2; color: var(--bone); caret-color: var(--gold); -webkit-appearance: none; appearance: none; }
.answer__field:focus { outline: 0; }
.answer__field::placeholder { color: var(--sand-dim); opacity: .8; }
.answer__go { padding: .5rem .9rem; min-height: 0; }
.timer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; margin: .7rem 0 .1rem; }
.timer__cells { display: flex; gap: 2px; }
.timer__cells i { flex: 1; height: 10px; background: var(--gold); box-shadow: inset 0 -2px 0 rgba(14,11,8,.35); }
.timer__cells i.off { background: var(--stone-lt); box-shadow: inset 0 0 0 1px rgba(14,11,8,.6); }
.timer.low .timer__cells i:not(.off) { background: var(--sienna-lt); }
.timer__num { font-size: 28px; line-height: 1; color: var(--gold); min-width: 1.4em; text-align: right; }
.timer.low .timer__num { color: var(--sienna-lt); }
.timer.stopped .timer__cells i { opacity: .5; }
.answer__msg { font-family: var(--lab); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--sienna-lt);
  min-height: 1.6em; margin: .5rem 0 0; text-align: center; text-shadow: 0 1px 0 var(--ink), 0 0 6px rgba(4,5,12,.9); }
.answer__msg.flash { animation: flash .9s steps(2) 2; }
@keyframes flash { 0% { opacity: 1; } 50% { opacity: .15; } }
.play--accepted .answer, .play--accepted .timer, .play--accepted .answer__msg { display: none; }
/* the tier badge slides out from under the sign */
.badge-wrap { text-align: center; margin-top: -.3rem; animation: slideout .5s ease-out; }
@keyframes slideout { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.badge { display: inline-block; font-family: var(--lab); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); padding: .55rem 1rem; }
.badge b { font-weight: 400; font-family: var(--mono); font-size: 22px; letter-spacing: 0; vertical-align: -1px; }
.badge-wrap--none .badge { color: var(--t-none); }
.badge__answer { font-size: 26px; line-height: 1.1; color: var(--bone); margin: .7rem 0 0; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(4,5,12,.95); }
.badge__read, .badge__quip { font-size: 19px; color: var(--sand); margin: .15rem 0 0; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(4,5,12,.95); }
.badge__quip { color: var(--sand-dim); margin-bottom: .9rem; }
.t-foundation { color: var(--t-foundation); } .t-tooclever { color: var(--t-tooclever); } .t-common { color: var(--t-common); }
.t-rare { color: var(--t-rare); } .t-buried { color: var(--t-buried); } .t-capstone { color: var(--t-capstone); } .t-none { color: var(--t-none); }

/* ---------- done ---------- */
.result { max-width: var(--col); margin: 0 auto; padding: 0 .9rem 1rem; display: grid; gap: .7rem; }
.result__score { text-align: center; }
.result__big { display: flex; align-items: baseline; justify-content: center; gap: .7rem; }
#done-score { font-weight: 400; font-size: 66px; line-height: 1; color: var(--sienna-lt); text-shadow: 0 0 12px rgba(232,118,63,.35); }
.result__m { font-size: 26px; color: var(--jade-lt); }
.result__better { color: var(--sand); margin: .35rem 0 .2rem; }
.curve svg { display: block; width: 100%; height: auto; }
.curve .axis { font-size: 11px; fill: var(--sand-dim); font-family: var(--mono); }
.curve .you { font-size: 9px; fill: var(--sienna-lt); font-family: var(--lab); letter-spacing: .16em; }
.log { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; }
.log__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.log__icon { font-size: 15px; line-height: 1; }
.log__bar { width: 68%; height: calc(var(--h) * 1%); min-height: 3px; background: var(--c); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(14,11,8,.4); }
.log__col--none .log__bar { background: repeating-linear-gradient(135deg, var(--t-none) 0 3px, #5c6168 3px 6px); min-height: 8px; }
.log__n { font-size: 8px; }
/* the Guild's record: the day's tidbit, caption in small caps, title in Cinzel, the text at reading size, a thin gold rule, "some say" */
.fact { text-align: center; padding: 1rem 1.1rem .8rem; }
.fact__cap { display: block; color: var(--gold); margin-bottom: .45rem; }
.fact__title { font-family: var(--title); font-weight: 700; font-size: clamp(19px, 5.4vw, 26px); letter-spacing: .06em; color: var(--gold-lt); margin: 0 0 .5rem; }
.fact__text { font-size: 20px; line-height: 1.3; color: var(--sand); margin: 0 0 .7rem; text-wrap: pretty; }
.fact__rule { border: 0; border-top: 1px solid var(--gold-dk); width: 42%; margin: 0 auto .5rem; }
.fact__foot { color: var(--sand-dim); margin: 0; }
.survey { width: 100%; border-collapse: collapse; font-size: 19px; line-height: 1.2; color: var(--sand); }
.survey td { padding: .3rem .3rem; border-top: 1px solid rgba(212,167,58,.22); vertical-align: baseline; }
.survey tr:first-child td { border-top: 0; }
.survey .range { font-family: var(--lab); font-size: 9px; letter-spacing: .12em; color: var(--gold); white-space: nowrap; width: 1%; }
.survey .name { color: var(--bone); white-space: nowrap; }
.survey tr.me td { background: rgba(179,84,42,.26); }
.survey tr.me .range::before { content: "▶ "; color: var(--sienna-lt); }
.site-strip { position: relative; margin: 0 calc(50% - 50vw); width: 100vw; padding-top: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end; }
/* the hero strip: the build at the play scene's scale, the Eye's room above the apex, no sand to spare */
.site-strip--hero { padding-top: calc(.42 * min(100vw, 600px) + 1rem); margin-top: .2rem; }   /* room for the 32-row outline above the site box and the Eye over its apex */
.site-strip::after { content: ""; display: block; height: 36px; background: var(--ground); border-top: 2px solid #6b5436;
  background-image: repeating-linear-gradient(35deg, rgba(243,234,214,.045) 0 1px, transparent 1px 7px); }
.share-fallback textarea { width: 100%; border: 1px solid var(--gold-dk); background: rgba(4,5,12,.6); color: var(--sand); padding: .4rem .5rem; font-size: 17px; resize: none; }
.next { text-align: center; margin: .2rem 0 0; }
.next .num { font-family: var(--mono); font-size: 22px; letter-spacing: 0; color: var(--gold); margin-left: .3em; }

/* ---------- reveal ---------- */
.reveal { max-width: var(--col); margin: 0 auto; padding: .5rem .9rem 1rem; }
.quarry { margin: 0 0 .8rem; }
.quarry__kind { color: var(--gold); display: block; }
.quarry__text { font-size: 24px; line-height: 1.12; color: var(--bone); margin: .2rem 0 .3rem; }
.quarry__mine { font-size: 18px; color: var(--sand-dim); margin: 0 0 .3rem; }
.quarry__mine b { font-weight: 400; color: var(--bone); }
.quarry ul { list-style: none; margin: .2rem 0 0; padding: 0; border-top: 1px dashed var(--gold-dk); }
.quarry li > button { display: flex; align-items: baseline; gap: .45rem; width: 100%; text-align: left; background: transparent; border: 0; padding: .28rem .2rem; cursor: pointer;
  font-family: var(--mono); font-size: 19px; line-height: 1.2; color: var(--sand); }
.quarry li.mine > button { background: rgba(179,84,42,.26); }
.quarry .q-sym { flex: none; width: 1.1em; }
.quarry .q-a { flex: 0 1 auto; min-width: 0; }
.quarry .q-dots { flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--sand-dim); transform: translateY(-5px); opacity: .7; }
.quarry .q-n { flex: none; white-space: nowrap; color: var(--sand-dim); font-size: 17px; }
.quarry .q-origin { margin: 0 0 .4rem 1.55em; font-size: 17px; line-height: 1.25; color: var(--sand-dim); }
.quarry .q-origin[hidden] { display: none; }
#btn-back { margin: .4rem 0 1rem; }

/* ---------- how to play, chips, toast, opt-in scanlines ---------- */
.howto { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(4,5,12,.72); }
.howto__panel { max-width: 30rem; width: 100%; }
.howto__list { margin: 0 0 .9rem; padding-left: 1.1em; font-size: 19px; line-height: 1.3; }
.howto__list li { margin-bottom: .35em; }
.chip { display: inline-block; padding: .35rem .9rem; color: var(--ink); background: var(--gold); white-space: nowrap; }
.chip--copied { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 1.4rem); transform: translateX(-50%); z-index: 50; clip-path: var(--zig); }
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 1.4rem); transform: translateX(-50%); z-index: 50; background: var(--sienna); color: var(--bone); padding: .3rem .9rem; font-size: 17px; max-width: 90%; }
html[data-crt="1"] body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.4) 100%); }

/* ---------- desktop: a centred column, the scene wider ---------- */
@media (min-width: 900px) {
  :root { --col: 46rem; }
  .lab { font-size: 11px; }
  .btn { font-size: 12px; }
  .door { padding-top: calc(var(--safe-t) + 3rem); }
  .tablet { max-width: 36rem; padding: 1.4rem 1.6rem 1.2rem; }
  .tagline { font-size: 22px; }
  .stats { max-width: 28rem; margin-left: auto; margin-right: auto; }
  #btn-start, #btn-lay, #btn-back { max-width: 26rem; margin-left: auto; margin-right: auto; display: flex; }
  .play { padding-top: 1rem; }
  .sign { max-width: 36rem; }
  .sign__text { font-size: 38px; }
  .answer { max-width: 36rem; margin: 0 auto; }
  .timer { max-width: 36rem; margin-left: auto; margin-right: auto; }
  .hud { min-width: 7rem; }
  .btn-col { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; min-width: 0; }
  .btn-col .btn { min-width: 13rem; }
  .btn-col .seal-toggle { flex-basis: 100%; }
  .log { height: 140px; }
}

/* ====================================================================================================================
   v1b — deco accents + the post-answer cinematic (Paul 2026-11-09: keep v1, add the conspiratorial art-deco pieces and the
   slow Krillion-style movement after an answer). Everything below layers onto v1; nothing above was restyled.
   ==================================================================================================================== */

/* the water-sign band: two pixel zigzags in v1's gold, under every masthead (topbar) and under the door tablet */
:root { --water: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' shape-rendering='crispEdges' fill='none' stroke='%23d4a73a'><path d='M0 4 L6 1 L12 4'/><path d='M0 9 L6 6 L12 9' stroke-opacity='.5'/></svg>");
  --fret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' shape-rendering='crispEdges' fill='none' stroke='%23d4a73a' stroke-opacity='.5'><path d='M0 6.5 H3.5 V.5 H8.5 V6.5 H12'/></svg>"); }
.water { height: 10px; background: var(--water) repeat-x center / 12px 10px; margin: .1rem 0 .5rem; }
.topbar::after { content: ""; display: block; height: 10px; margin: .35rem auto 0; max-width: var(--col); background: var(--water) repeat-x center / 12px 10px; }
body[data-state="play"] .topbar::after { max-width: none; }
/* the fret frieze along the scene frame: the ground line of the world and of the result strip */
.ground::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 7px; background: var(--fret) repeat-x left top / 12px 7px; opacity: .9; }
.site-strip { --frieze: 1; }
.site-strip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 36px; height: 7px; background: var(--fret) repeat-x left top / 12px 7px; z-index: 1; pointer-events: none; }
.loz { display: inline-block; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); margin: 0 .6em 1px; vertical-align: middle; }

/* door: lodge line, the key, the plaque, the cipher */
.lodge-line { color: var(--gold); font-size: 9px; letter-spacing: .3em; margin: 0 0 .7rem; text-shadow: 0 1px 0 var(--ink); }
.key { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: .9rem .2rem .55rem; margin: 0 0 .7rem; position: relative; }
.key__cap { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: var(--ink-2); padding: 0 .6em; font-size: 8px; letter-spacing: .3em; color: var(--gold); }
.key > div { display: grid; justify-items: center; gap: 4px; padding: .15rem 0; border-left: 1px solid rgba(212,167,58,.18); }
.key > div:first-of-type { border-left: 0; }
.key .swatch { display: block; }
.key b { font-weight: 400; font-size: 22px; line-height: 1; color: var(--bone); }
.key .lab { font-size: 6.5px; letter-spacing: .08em; white-space: nowrap; }
.plaque { color: var(--gold); font-size: 9px; letter-spacing: .26em; margin: 0 0 .9rem; text-shadow: 0 1px 0 var(--ink); }
.plaque b { font-weight: 400; color: var(--bone); }
.plaque br + * { display: inline-block; margin-top: 4px; }
.cipher-line { display: flex; justify-content: center; margin: .5rem 0 0; }
.cipher-line svg { display: block; }
.door__motto { color: var(--gold-dk); font-size: 8px; letter-spacing: .34em; margin: .45rem 0 0; }
.stat-hidden { display: none; }
.quarry .q-kind { font-size: 7px; color: var(--gold); margin-left: .4em; vertical-align: 2px; }
/* the Eye on the door: rays turn once per 90 s, the plumb lozenge breathes */
.seal .eye__rays { transform-box: fill-box; transform-origin: center; animation: rays 90s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.25); } }
.ghost rect, .ghost path { pointer-events: none; }
.eye-wrap.eye--arrive { animation: seat 1.2s ease-out both; }
body[data-state="done"] .eye__raysvg { animation: rays 90s linear infinite, rays-breathe 3s ease-in-out infinite; }
@keyframes rays-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes seat { from { transform: translateY(-24px); opacity: 0; } }

/* result: the rank */
.result__rank { display: grid; justify-items: center; gap: .25rem; margin: .2rem 0 .5rem; }
.inscription--rank { font-size: clamp(16px, 4.6vw, 24px); letter-spacing: .08em; animation: none; }
.result__quip { font-size: 18px; color: var(--sand-dim); }
.survey tr.me .name { color: var(--gold-lt); }
.seal-toggle { background: transparent; border: 0; cursor: pointer; color: var(--gold); padding: .35rem .5rem; text-align: center; }
.seal-toggle small { display: block; font-size: 8px; letter-spacing: .1em; color: var(--sand-dim); text-transform: none; margin-top: 3px; }
.loz--toggle { width: 7px; height: 7px; border: 1px solid var(--gold); background: transparent; }
.seal-toggle[aria-pressed="true"] .loz--toggle { background: var(--gold); }
.share-fallback__card { width: 100%; height: auto; margin: 0 0 .6rem; border: 1px solid var(--gold-dk); }
.share-fallback__card:not([src]) { display: none; }

/* the answer card (now inside the cinematic): the seal stamped beside the tier badge */
.badge-row { display: flex; align-items: center; justify-content: center; gap: .8rem; padding-right: 22px; }   /* v1f: the widest badge + seal end 10 px left of the parked UFO */
.tc-seal { width: 58px; height: 58px; flex: none; transform: rotate(-11deg); }   /* v1f: 58 so the row ends left of the parked UFO on a 390 px phone */
.tc-seal:empty { display: none; }
.tc-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seal--bright .seal__glow { filter: blur(4px); }
.badge__gain { color: var(--gold-lt); font-size: 10px; margin: .5rem 0 0; text-shadow: 0 1px 0 var(--ink); }
.cine .badge__quip { font-size: 18px; color: var(--sand-dim); margin: .35rem 0 0; text-align: center; }
.rank-strip { color: var(--gold); font-size: 10px; margin: .8rem 0 0; text-align: center; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(4,5,12,.95); animation: slideout .3s ease-out; }
.rank-strip b { font-weight: 700; color: var(--gold-lt); }
/* the prompt panel and field fade down when an answer lands */
.play .sign, .play .answer, .play .timer, .play .answer__msg { transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s; }
.play--accepted .sign, .play--accepted .answer, .play--accepted .timer, .play--accepted .answer__msg { display: revert; opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; pointer-events: none; }
.play--accepted .sign { transform: rotate(-2deg) translateY(12px); }

/* ---------- the post-answer overlay: the card in the upper third, the slab at the bottom; the scene underneath is the stage ---------- */
.cine { position: fixed; inset: 0; z-index: 20; overflow: hidden; opacity: 1; transition: opacity .3s ease; cursor: pointer; }
.cine--out { opacity: 0; pointer-events: none; }
.world { transition: transform .6s cubic-bezier(.45, 0, .2, 1); }
body.cine-cut .world { transition: none; }
.cine__head { position: absolute; left: 50%; top: calc(var(--safe-t) + 5.4rem); width: min(100% - 2rem, 30rem); transform: translate(-50%, 0); text-align: center; z-index: 2; }
.cine .badge-wrap { animation: slideout .5s ease-out; margin: 0; padding: .6rem 1rem .4rem; background: radial-gradient(ellipse at center, rgba(4,5,12,.78) 30%, rgba(4,5,12,0) 72%); }
.cine--cut .badge-wrap { animation: none; }
.cine__slab { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 1.2rem); width: min(100% - 2rem, 30rem); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .5s ease; z-index: 2; text-align: center; }
.cine--landed .cine__slab { opacity: 1; pointer-events: auto; }
.cine--apex .cine__slab { opacity: 0; pointer-events: none; }
.cine__hint { margin: .5rem 0 0; font-size: 8px; color: var(--sand-dim); opacity: .7; }
.cine--landed .cine__hint { display: none; }
body[data-cine] .answer__field { pointer-events: none; }
/* v1e: while the overlay is up the ground rises so the slab sits on the sand, not on the base course (the build stands lower now that it
   keeps the Great Pyramid's proportions) */
body[data-cine] { --ground-h: max(clamp(44px, 8vh, 96px), calc(var(--safe-b) + 4.8rem)); }
.world__site, .ground, .dune { transition: bottom .35s ease, height .35s ease; }
/* laying: the hauler walks left along the course below; the last block nudges the screen 2 px */
.actor--haul.actor--left img { transform: none; }
body.nudge .world, body.nudge #app { animation: nudge .16s ease-out; }
@keyframes nudge { 0% { transform: translateY(0); } 40% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@media (min-width: 900px) {
  .key { max-width: 36rem; margin-left: auto; margin-right: auto; }
  .key b { font-size: 26px; } .key .lab { font-size: 8px; }
  .cine__head { width: 36rem; }
  .cine__slab { width: 26rem; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .actor img, .ufo__drift, .ufo__light, .world__stars .twinkle, .inscription, .answer__caret, .dots i.cur, .badge-wrap, .sign.shake, .answer__msg.flash,
  .eye__rays, .eye__raysvg, .eye__loz, .eye-wrap, .rank-strip, .world__stars--tw, body.nudge .world, body.nudge #app { animation: none !important; }
  .ufo, .gauge__you, .world__dark, .world__stars, .world__moon, .world, .cine, .cine__head, .cine__slab, .play .sign, .play .answer, .play .timer, .play .answer__msg { transition: none !important; }
  html[data-crt="1"] body::after { display: none; }
}

/* the quarry folds: summary + open button, tier groups with a caret, show-more */
.quarry__sum { margin: .2rem 0 .6rem; opacity: .85; }
.quarry__open { width: 100%; margin: .2rem 0 .6rem; }
.q-tier { margin: .5rem 0; }
.q-tier__head { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(212,167,58,.35); color: inherit; padding: .4rem 0; text-align: left; cursor: pointer; font: inherit; }
.q-tier__head .q-caret::before { content: "▾"; margin-left: auto; opacity: .7; }
.q-tier__head[aria-expanded="false"] .q-caret::before { content: "▸"; }
.q-more { width: 100%; margin: .3rem 0 .2rem; font-size: .85em; }
li.q-mine > button { outline: 1px solid rgba(212,167,58,.6); outline-offset: -1px; }