/* The Million Dollar Button. Motion only animates transform and opacity (the GPU runs those off the main thread);
   the stone's tilt, pull and glare are written by app.js to two elements per frame, and stop when the cursor rests. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --s: clamp(240px, min(62vmin, 78vw), 540px);
  --bg: #040406;
  --gold: #f5c76a;
  --gold-pale: #fff3cf;
  --gold-deep: #a8792c;
  --ember: 255 176 72;
  --spring: cubic-bezier(0.2, 1.6, 0.4, 1);
  --sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #ece9e2; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }

/* ---- the stage ------------------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: manipulation;
  background:
    radial-gradient(60vmax 60vmax at 50% 46%, rgb(var(--ember) / 0.07), transparent 60%),
    radial-gradient(120vmax 80vmax at 50% 120%, rgb(40 30 18 / 0.55), transparent 60%),
    var(--bg);
}
.stage::after { /* vignette */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgb(0 0 0 / 0.78));
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.floor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--s) * 0.44);
  width: calc(var(--s) * 2.6);
  height: calc(var(--s) * 0.62);
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--ember) / 0.16), rgb(var(--ember) / 0.04) 55%, transparent);
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 2.1);
  height: calc(var(--s) * 2.1);
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--ember) / 0.34), rgb(var(--ember) / 0.08) 52%, transparent 72%);
  opacity: 0.55;
  animation: breathe 4.8s ease-in-out infinite;
  transition: opacity 500ms ease;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.06); }
}
.stage[data-hot] .halo { opacity: 0.95; }
.stage[data-press] .halo { opacity: 1; animation-duration: 1.2s; }

.wave {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--s) * 0.44);
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 0.32);
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px solid rgb(255 228 160 / 0.9);
  box-shadow: 0 0 40px rgb(var(--ember) / 0.7), inset 0 0 30px rgb(var(--ember) / 0.4);
  opacity: 0;
  pointer-events: none;
}
.stage[data-burst] .wave { animation: wave 1100ms cubic-bezier(0.15, 0.7, 0.3, 1) both; }
@keyframes wave {
  0% { opacity: 0.95; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* hover tension: a ring of light that brightens the longer a cursor stays (public/tension.js sets opacity/scale) */
.tension { /* an aura hugging the stone's own shape: inside the stone, so it tilts and moves with it */
  position: absolute;
  inset: 0 0 -7% 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 calc(var(--s) * 0.08) calc(var(--s) * 0.02) rgb(255 214 140 / 0.85),
    0 0 calc(var(--s) * 0.26) calc(var(--s) * 0.06) rgb(var(--ember) / 0.55),
    0 0 calc(var(--s) * 0.6) calc(var(--s) * 0.12) rgb(var(--ember) / 0.22);
  will-change: opacity, transform;
}
.stage[data-tense] .stone-body { will-change: translate; }

/* ---- the stone ----------------------------------------------------------------------------------- */
.stone {
  position: relative;
  width: var(--s);
  height: var(--s);
  margin-top: calc(var(--s) * -0.06);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 21%;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.stone:focus-visible { outline: 3px solid rgb(255 228 160 / 0.8); outline-offset: 10px; }
.stage[data-sold] .stone { cursor: default; }

.stone-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -14%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.4) 55%, transparent);
  transition: transform 380ms var(--spring), opacity 380ms ease;
  pointer-events: none;
}
.stage[data-press] .stone-shadow { transform: scale(0.9, 0.8); opacity: 0.9; }

.stone-body {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* the block's thickness: copies of its outline stepping down, darker as they go (static: pressing slides the top
   down over it instead of animating these shadows, which would repaint the stone every frame) */
.stone-depth {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #141118;
  box-shadow:
    0 calc(var(--s) * 0.012) 0 #2b2733,
    0 calc(var(--s) * 0.024) 0 #25212d,
    0 calc(var(--s) * 0.036) 0 #1f1b26,
    0 calc(var(--s) * 0.048) 0 #19161f,
    0 calc(var(--s) * 0.06) 0 #141118,
    0 calc(var(--s) * 0.072) 0 #0f0d13,
    0 calc(var(--s) * 0.1) calc(var(--s) * 0.12) calc(var(--s) * -0.03) rgb(var(--ember) / 0.32);
}
.stone-pressglow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 calc(var(--s) * 0.04) calc(var(--s) * 0.18) calc(var(--s) * 0.01) rgb(var(--ember) / 0.8);
  opacity: 0;
  transition: opacity 420ms ease;
  will-change: opacity;
}
.stone-top {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: transform 520ms var(--spring);
  will-change: transform;
}
.stage[data-press] .stone-top { transform: translateY(calc(var(--s) * 0.058)) scale(0.982); transition-duration: 110ms; }
.stage[data-press] .stone-pressglow { opacity: 1; transition-duration: 110ms; }

/* a gold light that runs around the edge (the rotating part is one composited layer) */
.stone-rim {
  position: absolute;
  inset: -3px;
  border-radius: calc(21% + 1px);
  overflow: hidden;
  pointer-events: none;
}
.stone-rim::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, rgb(245 199 106 / 0.12), rgb(255 243 207 / 0.95) 8%, rgb(245 199 106 / 0.12) 22%, rgb(245 199 106 / 0.12) 50%, rgb(255 228 160 / 0.7) 58%, rgb(245 199 106 / 0.12) 72%);
  animation: spin 7s linear infinite;
}
.stage[data-hot] .stone-rim::before { animation-duration: 2.6s; }
@keyframes spin { to { rotate: 360deg; } }

.stone-face {
  position: absolute;
  inset: 3px;
  border-radius: 20%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 28% 12%, #2d2a37 0%, transparent 55%),
    radial-gradient(90% 70% at 80% 100%, rgb(var(--ember) / 0.1), transparent 60%),
    linear-gradient(158deg, #1a1820 0%, #0c0b10 58%, #131018 100%);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.09),
    inset 0 -14px 40px rgb(0 0 0 / 0.65),
    inset 0 0 0 1px rgb(255 255 255 / 0.04);
}
.stone-veins {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23f5c76a' stroke-linecap='round'%3E%3Cpath d='M-10 120 C 60 100, 90 160, 150 150 S 260 90, 310 130 S 380 200, 420 180' stroke-width='1.2'/%3E%3Cpath d='M40 420 C 70 330, 140 330, 170 270 S 250 210, 300 250' stroke-width='.8'/%3E%3Cpath d='M300 -10 C 290 60, 340 80, 330 140' stroke-width='.7'/%3E%3Cpath d='M150 150 C 160 190, 130 220, 150 260' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  mix-blend-mode: screen;
}
.stone-glare {
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(closest-side, rgb(255 246 220 / 0.18), rgb(255 246 220 / 0.05) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  will-change: transform, opacity; /* its own layer: following the cursor never repaints the face */
}
.stage[data-hot] .stone-glare { opacity: 1; }

.engraving {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s) * 0.024);
  padding: 0 8%;
  text-align: center;
  pointer-events: none;
}
.eyebrow {
  font-family: var(--mono);
  font-size: calc(var(--s) * 0.031);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgb(245 199 106 / 0.72);
  padding-left: 0.42em;
}
.price {
  font-size: calc(var(--s) * 0.15); /* "$1,000,000" is ten characters: this keeps it inside the face */
  font-weight: 820;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.7)) drop-shadow(0 0 22px rgb(var(--ember) / 0.28));
}
.tagline {
  font-family: var(--mono);
  font-size: calc(var(--s) * 0.027);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
  padding-left: 0.3em;
}
.stage[data-sold] .price { font-size: calc(var(--s) * 0.11); letter-spacing: -0.03em; }
.tagline a { color: rgb(255 228 160 / 0.85); text-decoration: none; pointer-events: auto; border-bottom: 1px solid rgb(255 228 160 / 0.35); }

.whisper {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--s) * 0.62);
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
  min-height: 1.4em;
  pointer-events: none;
}

/* a white-gold flash when the button comes back up */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgb(255 240 200 / 0.55), transparent 55%);
  opacity: 0;
  z-index: 1;
}
.stage[data-burst]::before { animation: flash 700ms ease-out both; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* ---- the confirmation sheet ------------------------------------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(4 4 6 / 0.82);
  animation: fade-in 260ms ease both;
}
.sheet[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-card {
  width: min(460px, 100%);
  padding: 30px 28px 22px;
  border-radius: 22px;
  border: 1px solid rgb(245 199 106 / 0.28);
  background: linear-gradient(180deg, #17151d, #0d0c11);
  box-shadow: 0 30px 90px -20px rgb(0 0 0 / 0.9), 0 0 80px -30px rgb(var(--ember) / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.06);
  text-align: center;
  animation: rise 420ms var(--spring) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.sheet-eyebrow { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: rgb(245 199 106 / 0.75); }
.sheet-title { margin: 12px 0 6px; font-size: 30px; font-weight: 750; letter-spacing: -0.03em; }
.sheet-price { margin: 0 0 14px; }
.sheet-price span { font-size: 40px; font-weight: 820; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--gold-pale), var(--gold) 50%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sheet-price small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: rgb(255 255 255 / 0.45); text-transform: uppercase; }
.sheet-copy { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / 0.68); }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.sheet-go, .sheet-back { font: inherit; border-radius: 14px; cursor: pointer; padding: 15px 18px; font-size: 16px; font-weight: 650; }
.sheet-go { border: 0; color: #1a1205; background: linear-gradient(180deg, #ffe7a8, var(--gold) 55%, #d9a347); box-shadow: 0 10px 30px -8px rgb(var(--ember) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.6); }
.sheet-go:disabled { opacity: 0.6; cursor: progress; }
.sheet-back { border: 1px solid rgb(255 255 255 / 0.12); background: transparent; color: rgb(255 255 255 / 0.7); }
.sheet-go:focus-visible, .sheet-back:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
.sheet-legal { margin: 16px 0 0; font-size: 12px; color: rgb(255 255 255 / 0.4); }
.sheet-legal a { color: rgb(255 255 255 / 0.6); }
.sheet-error { margin: 10px 0 0; min-height: 1em; font-size: 13px; color: #ffb4a8; }

@media (prefers-reduced-motion: reduce) {
  .halo, .stone-rim::before { animation: none; }
  .stone-top, .stone-pressglow, .stone-shadow, .sheet-card, .sheet { transition: none; animation: none; }
  .stage[data-burst] .wave, .stage[data-burst]::before { animation: none; }
}

/* ---- once bought: what the stone shows (the same rules draw the live preview in the checkout sheet) ----------- */
.content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * 0.035);
  padding: 9%;
  text-align: center;
  pointer-events: none;
}
.content[hidden], .engraving[hidden] { display: none; }
.content svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stage[data-sold] .stone { cursor: pointer; }

.c-empty { font-family: var(--mono); font-size: calc(var(--s) * 0.045); letter-spacing: 0.08em; color: rgb(255 255 255 / 0.38); }
.c-caption, .c-hint, .c-size {
  font-family: var(--mono);
  font-size: calc(var(--s) * 0.034);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(245 199 106 / 0.85);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-hint { display: inline-flex; align-items: center; gap: 0.5em; color: rgb(255 255 255 / 0.55); }
.c-hint svg { width: 1.3em; height: 1.3em; }
.c-size { color: rgb(255 255 255 / 0.5); }

/* QR code */
.c-qr {
  width: calc(var(--s) * 0.66);
  height: calc(var(--s) * 0.66);
  border-radius: calc(var(--s) * 0.04);
  box-shadow: 0 0 0 calc(var(--s) * 0.012) rgb(245 199 106 / 0.55), 0 0 calc(var(--s) * 0.12) rgb(var(--ember) / 0.35);
  image-rendering: pixelated;
}

/* link */
.c-link { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 0.04); max-width: 100%; }
.c-arrow {
  display: grid;
  place-items: center;
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.26);
  border-radius: 50%;
  color: #1a1205;
  background: radial-gradient(circle at 35% 30%, var(--gold-pale), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 calc(var(--s) * 0.1) rgb(var(--ember) / 0.55), inset 0 2px 0 rgb(255 255 255 / 0.5);
}
.c-arrow svg { width: 52%; height: 52%; stroke-width: 2.4; }
.c-host {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--s) * 0.085);
  font-weight: 780;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* text */
.c-text {
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.6));
}
.c-text--xl { font-size: calc(var(--s) * 0.16); }
.c-text--l { font-size: calc(var(--s) * 0.1); }
.c-text--m { font-size: calc(var(--s) * 0.072); }
.c-text--s { font-size: calc(var(--s) * 0.056); }
.c-faint { opacity: 0.45; }

/* photo and video fill the stone's face */
.c-photo, .c-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-badge {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * 0.06);
  translate: -50% 0;
  max-width: 80%;
  padding: calc(var(--s) * 0.014) calc(var(--s) * 0.04);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: calc(var(--s) * 0.03);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: rgb(8 7 10 / 0.72);
  border: 1px solid rgb(245 199 106 / 0.45);
}

/* file */
.c-file { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 0.022); max-width: 100%; }
.c-file-icon { width: calc(var(--s) * 0.24); height: calc(var(--s) * 0.24); color: var(--gold); filter: drop-shadow(0 0 calc(var(--s) * 0.04) rgb(var(--ember) / 0.5)); }
.c-file-icon svg { width: 100%; height: 100%; stroke-width: 1.2; }
.c-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 90%; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; font-size: calc(var(--s) * 0.06); font-weight: 700; color: #fff; }

/* ---- the checkout sheet: choices on one side, a live mini stone on the other -------------------------------- */
.sheet { overflow-y: auto; }
.sheet-card {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 34px;
  align-items: center;
  text-align: left;
  padding: 30px;
}
.sheet-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mini-stone { --s: min(280px, 72vw); position: relative; width: var(--s); height: var(--s); border-radius: 21%; margin-bottom: calc(var(--s) * 0.07); }
.preview-note { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); text-align: center; }
.sheet-form .sheet-eyebrow, .sheet-form .sheet-title, .sheet-form .sheet-price { text-align: left; }
.sheet-title { margin-top: 8px; }
.sheet-price small { display: inline; margin-left: 8px; }
.sheet-label { margin: 6px 0 10px; font-size: 14px; color: rgb(255 255 255 / 0.75); }

.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.kinds button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
  color: rgb(255 255 255 / 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--spring);
}
.kinds button:hover { border-color: rgb(245 199 106 / 0.4); color: #fff; }
.kinds button:active { transform: scale(0.96); }
.kinds button[aria-checked="true"] { border-color: rgb(245 199 106 / 0.85); background: rgb(245 199 106 / 0.1); color: var(--gold-pale); box-shadow: 0 0 24px -8px rgb(var(--ember) / 0.6); }
.kinds button:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }
.kinds svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.kinds[hidden], .fields[hidden] { display: none; }
.field { display: block; }
.field[hidden] { display: none; }
.field > span:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; color: rgb(255 255 255 / 0.7); }
.field em { font-style: normal; color: rgb(255 255 255 / 0.4); }
.field input[type="url"], .field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.04);
  color: #fff;
  font: inherit;
  font-size: 16px;
  resize: none;
}
.field input:focus, .field textarea:focus { outline: none; border-color: rgb(245 199 106 / 0.7); box-shadow: 0 0 0 3px rgb(245 199 106 / 0.18); }
.file-field { position: relative; }
.file-field input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgb(245 199 106 / 0.45);
  background: rgb(245 199 106 / 0.04);
}
.file-pick b { font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick i { font-style: normal; font-size: 12px; color: rgb(255 255 255 / 0.45); }
.file-field:focus-within .file-pick { border-color: var(--gold-pale); }
.sheet-legal { text-align: left; }
.sheet-legal[hidden], .sheet-soon[hidden] { display: none; }
.sheet-soon { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--gold-pale); }
.sheet-go:disabled { cursor: default; filter: saturate(0.4) brightness(0.8); }

@media (max-width: 760px) {
  .sheet { place-items: start center; }
  .sheet-card { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  /* the preview stays in view while the buyer types (the keyboard takes half a phone screen) */
  .sheet-preview {
    position: sticky;
    top: -20px;
    z-index: 2;
    gap: 8px;
    margin: -22px -18px 0;
    padding: 16px 18px 12px;
    border-radius: 22px 22px 0 0;
    background: #17151d;
    box-shadow: 0 12px 14px -4px #17151d;
  }
  .mini-stone { --s: min(150px, 40vw); }
  .preview-note { font-size: 10px; letter-spacing: 0.14em; }
  .sheet-price small { display: block; margin: 6px 0 0; letter-spacing: 0.12em; }
}

/* ---- the room: counters, ticker, the Wall of Mockery, spectator buttons, props (public/spectators.js) ---------- */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 8px #ff4d4d;
  vertical-align: middle;
  animation: live-dot 1.6s ease-in-out infinite;
}
@keyframes live-dot { 50% { opacity: 0.35; } }

.counters {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  display: grid;
  gap: 12px;
  pointer-events: none;
  z-index: 3;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-pale);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgb(var(--ember) / 0.35);
}
.stat b span, .stat b i { display: inline-block; }
.stat b .bump, .stat b.bump { animation: bump 700ms var(--spring); }
@keyframes bump { 30% { transform: scale(1.18); color: #fff; } }
.stat > span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }

.ticker {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(820px, calc(100% - 32px));
  height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgb(10 9 13 / 0.72);
  border: 1px solid rgb(245 199 106 / 0.18);
  backdrop-filter: blur(8px);
  overflow: hidden;
  z-index: 3;
}
.ticker-live { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #ff8080; }
.ticker-lines { position: relative; flex: 1; height: 100%; overflow: hidden; }
.tick {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  color: rgb(255 255 255 / 0.82);
  animation: tick-in 500ms var(--spring) both;
}
.tick--strong { color: var(--gold-pale); }
.tick--out { animation: tick-out 450ms ease both; }
@keyframes tick-in { from { opacity: 0; transform: translateY(70%); } }
@keyframes tick-out { to { opacity: 0; transform: translateY(-70%); } }

.whisper { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); }

.wall-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 1.5);
  margin: calc(var(--s) * -0.78) 0 0 calc(var(--s) * -0.75);
  overflow: visible;
  pointer-events: none;
  animation: ring-spin 140s linear infinite;
  z-index: 1;
}
.wall-ring:hover { animation-play-state: paused; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.wall-text { font-family: var(--mono); font-size: 19px; letter-spacing: 0.06em; fill: rgb(255 255 255 / 0.5); }
.wall-text .w-name { fill: var(--gold); font-weight: 700; }
.wall-text a { pointer-events: auto; cursor: pointer; }
.wall-text a:hover .w-name { fill: var(--gold-pale); text-decoration: underline; }
.wall-text .w-faint { fill: rgb(255 255 255 / 0.28); }
.wall-ring.wall-new .wall-text { animation: wall-new 1.6s ease; }
@keyframes wall-new { 20% { fill: #fff; filter: drop-shadow(0 0 8px rgb(var(--ember))); } }
.wall-band { display: none; }

.dock {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 3;
}
.dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgb(245 199 106 / 0.28);
  background: rgb(14 12 18 / 0.7);
  color: rgb(255 255 255 / 0.85);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 160ms ease, transform 160ms var(--spring), background-color 160ms ease;
}
.dock-btn:hover { border-color: rgb(245 199 106 / 0.75); background: rgb(245 199 106 / 0.1); }
.dock-btn:active { transform: scale(0.96); }
.dock-btn:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }
.dock-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.dock-btn em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold-pale); }
.stage[data-spectate-closed] .dock-btn em::after { content: " · soon"; color: rgb(255 255 255 / 0.4); }

/* the small checkout card for a polish or a wall post */
.mini { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgb(4 4 6 / 0.78); backdrop-filter: blur(6px); }
.mini[hidden] { display: none; }
.mini-card {
  width: min(440px, 100%);
  padding: 26px 24px 18px;
  border-radius: 22px;
  border: 1px solid rgb(245 199 106 / 0.28);
  background: linear-gradient(180deg, #17151d, #0d0c11);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
  animation: tick-in 380ms var(--spring) both;
}
.mini-title { margin: 6px 0 8px; font-size: 24px; font-weight: 760; letter-spacing: -0.02em; }
.mini-copy { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / 0.66); }
.mini .field { margin-bottom: 12px; }
.mini .field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 16px; }
.mini .field input:focus { outline: none; border-color: rgb(245 199 106 / 0.7); box-shadow: 0 0 0 3px rgb(245 199 106 / 0.18); }
.mini-preview { margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgb(245 199 106 / 0.06); font-family: var(--mono); font-size: 12px; color: var(--gold-pale); overflow-wrap: anywhere; }
.mini-preview[hidden], .mini .field[hidden] { display: none; }

/* Polish the Button: a sheen sweeps the face; a polished button keeps a little more gloss */
.stone-sheen {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 38%, rgb(255 246 214 / 0) 42%, rgb(255 246 214 / 0.55) 50%, rgb(255 246 214 / 0) 58%, transparent 62%);
  transform: translateX(-70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.stage[data-polish] .stone-sheen { animation: sheen 1.3s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
@keyframes sheen { 0% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 1; transform: translateX(70%); } }
.stone-glare { opacity: calc(0.55 + var(--shine, 0) * 0.45); }

/* community props: positioned around the button with its size, --s */
.props { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
body.aiming .props { z-index: 5; } /* carrying the duck or drawing the bow: in front of the ticker */
.prop { position: absolute; }
.prop-ropes { left: 50%; top: calc(50% + var(--s) * 0.3); width: calc(var(--s) * 1.7); translate: -50% 0; }
.prop-ropes svg { display: block; width: 100%; height: auto; }
.prop-ropes .rope-grab { pointer-events: stroke; cursor: grab; touch-action: none; }
.prop-ropes .rope-grab:active { cursor: grabbing; }
/* the bow's aim line and arrows in flight (a full-screen layer drawn in stage pixels) */
.prop-aim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.aim-dot { fill: rgb(255 231 176 / 0.85); filter: drop-shadow(0 0 3px rgb(var(--ember) / 0.8)); }
.aim-mark { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; }
.aim-mark circle:last-of-type { fill: rgb(255 255 255 / 0.45); stroke: none; }
.aim-mark.on { stroke: var(--gold-pale); filter: drop-shadow(0 0 6px rgb(var(--ember))); }
.aim-mark.on circle:last-of-type { fill: var(--gold-pale); }
.prop-aim g.spent { opacity: 0; transition: opacity 1.2s ease 0.2s; }
/* an arrow in the stone: pinned to it (it rocks with the stone), quivering, then fading */
.stuck-arrow { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; transform: rotate(var(--a)); animation: quiver 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); }
.stuck-arrow svg { position: absolute; right: -6px; top: -14px; overflow: visible; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.5)); }
.stuck-arrow.fade { opacity: 0; transition: opacity 1.1s ease; }
@keyframes quiver { 0% { rotate: 9deg; } 15% { rotate: -7deg; } 30% { rotate: 5deg; } 45% { rotate: -3deg; } 60% { rotate: 2deg; } 100% { rotate: 0deg; } }
/* the duck: the physics places it (transform), so its box starts at the stage's corner */
.prop-duck { left: 0; top: 0; width: calc(var(--s) * 0.15); pointer-events: auto; cursor: grab; touch-action: none; transform-origin: 50% 50%; will-change: transform; }
.prop-duck:active { cursor: grabbing; }
.prop-duck svg { display: block; width: 100%; height: auto; pointer-events: none; }
.prop-paparazzi { inset: 0; }
.prop-camera { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: 70px; pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.18); background: rgb(14 12 18 / 0.7); color: rgb(255 255 255 / 0.7); cursor: pointer; }
.prop-camera svg { width: 20px; height: 20px; }
.prop-camera:hover { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.flash { position: absolute; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgb(255 255 255 / 0.5) 30%, transparent); animation: flash 650ms ease-out both; pointer-events: none; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .wall-ring { animation: none; }
  .tick, .tick--out, .stat b.bump, .stat b .bump, .stuck-arrow { animation: none; }
}

/* phones: the ring would leave the screen, so the wall becomes a scrolling band; counters go two by two */
@keyframes band { to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  .wall-ring { display: none; }
  .wall-band { display: block; position: absolute; left: 0; right: 0; top: calc(max(14px, env(safe-area-inset-top)) + 92px); height: 26px; overflow: hidden; z-index: 2; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .wall-band-track { display: inline-flex; gap: 28px; white-space: nowrap; animation: band 40s linear infinite; padding-left: 100%; }
  .w-chip { font-family: var(--mono); font-size: 12px; color: rgb(255 255 255 / 0.55); text-decoration: none; }
  .w-chip b { color: var(--gold); }
  .counters { grid-template-columns: repeat(2, auto); gap: 8px 18px; left: 16px; top: max(12px, env(safe-area-inset-top)); }
  .stat b { font-size: 14px; }
  .stat > span { font-size: 9px; }
  .dock { top: auto; right: 16px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 50px); flex-direction: row; }
  .dock-btn { padding: 8px 11px; font-size: 12px; }
  .ticker { height: 38px; }
  .tick { font-size: 12px; line-height: 38px; }
  .whisper { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 100px); }
  .prop-camera { bottom: 106px; }
}

/* ---- paying the $1,000,000: Escrow.com, wire, crypto (public/whale.js)  ------------------------------------ */
.pay-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pay-tabs button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
  color: rgb(255 255 255 / 0.8);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.pay-tabs button em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.42); font-weight: 500; }
.pay-tabs button:hover { border-color: rgb(245 199 106 / 0.4); }
.pay-tabs button[aria-selected="true"] { border-color: rgb(245 199 106 / 0.85); background: rgb(245 199 106 / 0.1); color: var(--gold-pale); }
.pay-tabs button:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 2px; }
.pay-panel { margin-bottom: 16px; }
.pay-panel[hidden] { display: none; }
.pay-note { margin: 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.6); }
.pay-note[hidden] { display: none; }
.pay-small { font-size: 12px; color: rgb(255 255 255 / 0.5); }
.pay-timer { color: var(--gold-pale); font-family: var(--mono); }

.assets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.assets button { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.03); color: #fff; font: inherit; cursor: pointer; }
.assets button b { font-size: 14px; }
.assets button i { font-style: normal; font-size: 10px; color: rgb(255 255 255 / 0.45); }
.assets button[aria-checked="true"] { border-color: rgb(245 199 106 / 0.85); background: rgb(245 199 106 / 0.1); }

.crypto-pay { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; align-items: start; }
.crypto-pay[hidden] { display: none; }
.crypto-qr { width: 150px; height: 150px; border-radius: 12px; background: #fff3cf; image-rendering: pixelated; }
.crypto-details { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crypto-pay .field, .crypto-pay .pay-status, .crypto-pay .pay-secondary { grid-column: 1 / -1; }
.copy {
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px dashed rgb(245 199 106 / 0.4);
  background: rgb(245 199 106 / 0.05);
  color: var(--gold-pale);
  font: inherit;
  font-size: 18px;
  font-weight: 750;
  text-align: left;
  cursor: copy;
  overflow-wrap: anywhere;
}
.copy--code { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #fff; }
.copy.copied { border-style: solid; border-color: #6fdc8c; }
.copy.copied::after { content: "  copied"; font-size: 11px; color: #6fdc8c; }
.crypto-pay .field input, .wire-form .field input, .escrow-form .field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 15px; }
.crypto-pay .field input:focus, .wire-form .field input:focus, .escrow-form .field input:focus { outline: none; border-color: rgb(245 199 106 / 0.7); box-shadow: 0 0 0 3px rgb(245 199 106 / 0.18); }
.pay-status { margin: 0; font-size: 13px; color: rgb(255 255 255 / 0.7); }
.pay-status[data-state="confirmed"] { color: #6fdc8c; }
.pay-status[data-state="rejected"] { color: #ff8a80; }
.pay-secondary {
  display: inline-flex;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgb(245 199 106 / 0.45);
  background: rgb(245 199 106 / 0.08);
  color: var(--gold-pale);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.pay-secondary[hidden] { display: none; }
.pay-secondary:hover { background: rgb(245 199 106 / 0.16); }

.wire-form, .escrow-form { display: flex; flex-direction: column; gap: 12px; }
.wire-form[hidden], .wire-status[hidden], .escrow-form[hidden] { display: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgb(255 255 255 / 0.7); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--gold); }
.check a { color: var(--gold-pale); }
.wire-id { margin: 0 0 8px; font-size: 14px; color: rgb(255 255 255 / 0.7); }
.wire-id b { font-family: var(--mono); color: var(--gold-pale); letter-spacing: 0.06em; }
.wire-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 8px; }
.wire-steps li { position: relative; padding-left: 32px; font-size: 14px; color: rgb(255 255 255 / 0.62); counter-increment: step; }
.wire-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgb(255 255 255 / 0.25);
}
.wire-steps li[data-done="true"] { color: #fff; }
.wire-steps li[data-done="true"]::before { content: "\2713"; border-color: #6fdc8c; color: #0b0b0d; background: #6fdc8c; }
.wire-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .pay-tabs button { padding: 10px; font-size: 13px; }
  .pay-tabs button em { display: none; }
  .crypto-pay { grid-template-columns: 1fr; }
  .crypto-qr { justify-self: center; }
}

/* a wire buyer holds the button: the engraving says so */
.stage[data-pending] .price { letter-spacing: 0.02em; animation: pending 2.4s ease-in-out infinite; }
@keyframes pending { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .stage[data-pending] .price { animation: none; } }

/* ---- staying longer: records, scores, world unlocks, golden minute, cursors, reactions, achievements -------- */

/* world progress, under the counters */
.world-progress { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; width: 210px; }
.wp-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
.wp-track { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.wp-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale)); transform-origin: left; transform: scaleX(0); transition: transform 600ms ease; }
.wp-next { font-size: 11px; line-height: 1.35; color: rgb(255 255 255 / 0.55); }

/* the dock's second row and the two panels */
.dock-row { display: flex; gap: 8px; }
.dock-icon span { font-size: 12px; }
.panel {
  position: absolute;
  top: calc(max(18px, env(safe-area-inset-top)) + 136px);
  right: max(20px, env(safe-area-inset-right));
  z-index: 7;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgb(245 199 106 / 0.24);
  background: rgb(14 12 18 / 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.55);
  animation: tick-in 300ms var(--spring) both;
}
.panel[hidden] { display: none; }
.panel-title { margin: 2px 4px 12px; font-size: 15px; display: flex; justify-content: space-between; }
.panel-title span { color: var(--gold-pale); font-family: var(--mono); font-size: 12px; }
.panel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.panel-tabs button { padding: 7px 6px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 0.1); background: transparent; color: rgb(255 255 255 / 0.7); font: inherit; font-size: 12px; cursor: pointer; }
.panel-tabs button[aria-selected="true"] { border-color: rgb(245 199 106 / 0.8); color: var(--gold-pale); background: rgb(245 199 106 / 0.08); }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.board li { display: grid; grid-template-columns: 22px auto 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.03); }
.board li.mine { background: rgb(245 199 106 / 0.1); }
.board .rank { font-family: var(--mono); font-size: 12px; color: var(--gold); }
.board b { font-size: 14px; white-space: nowrap; }
.board .who { font-size: 12px; color: rgb(255 255 255 / 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.board-foot { margin: 10px 4px 0; font-size: 12px; color: rgb(255 255 255 / 0.5); }
.name-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.name-form label { display: block; margin: 0 0 6px 2px; font-size: 12px; color: rgb(255 255 255 / 0.6); }
.name-form div { display: flex; gap: 6px; }
.name-form input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 15px; }
.name-form button { padding: 9px 13px; border-radius: 10px; border: 0; background: linear-gradient(180deg, var(--gold-pale), var(--gold)); color: #1a1205; font: inherit; font-weight: 700; cursor: pointer; }
.name-note { min-height: 1em; margin: 6px 2px 0; font-size: 12px; color: var(--gold-pale); }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ach-grid li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.06); text-align: center; opacity: 0.6; }
.ach-grid li.got { opacity: 1; border-color: rgb(245 199 106 / 0.45); background: rgb(245 199 106 / 0.07); }
.ach-icon { font-size: 22px; }
.ach-grid b { font-size: 12px; }
.ach-hint { font-size: 10px; line-height: 1.3; color: rgb(255 255 255 / 0.5); }

/* racing the record (above the stone), the guardian's plaque, the golden minute */
.record-bar, .plaque, .golden-banner { position: absolute; left: 50%; translate: -50% 0; z-index: 4; }
.record-bar { top: max(64px, calc(50% - var(--s) * 0.56 - 98px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px; background: rgb(8 7 10 / 0.72); backdrop-filter: blur(6px); pointer-events: none; transition: opacity 400ms ease; }
.record-bar[hidden] { display: none; }
.record-bar.done { opacity: 0; transition-delay: 900ms; }
.rb-track { position: relative; width: min(340px, 70vw); height: 6px; border-radius: 6px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.rb-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale)); transform-origin: left; transform: scaleX(0); }
.record-bar.record .rb-fill { background: linear-gradient(90deg, #ffd36b, #fff4d1, #ffd36b); }
.rb-text { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--gold-pale); white-space: nowrap; }
.record-bar.record .rb-text { color: #fff; text-shadow: 0 0 12px rgb(var(--ember)); }
.plaque { top: max(104px, calc(50% - var(--s) * 0.56 - 44px)); display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 6px 14px; border-radius: 8px; background: linear-gradient(180deg, #e7c77c, #a87b32); color: #2a1a05; box-shadow: 0 6px 18px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.5); white-space: nowrap; }
.plaque[hidden] { display: none; }
.plaque span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.plaque b { font-size: 13px; }
.plaque i { font-style: normal; font-size: 11px; opacity: 0.7; }
.golden-banner { top: 12px; display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 999px; overflow: hidden; color: #2a1a05; background: linear-gradient(90deg, #ffe08a, #f5c76a); box-shadow: 0 0 40px rgb(255 200 80 / 0.55); z-index: 8; }
.golden-banner[hidden] { display: none; }
.golden-banner::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0.5); transform-origin: left; transform: scaleX(var(--claim, 0)); transition: transform 200ms linear; }
.golden-banner > * { position: relative; }
.golden-banner b { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.golden-banner span { font-family: var(--mono); font-weight: 700; }
.golden-banner em { font-style: normal; font-size: 12px; }
.stage[data-golden] .halo { opacity: 1; background: radial-gradient(closest-side, rgb(255 210 110 / 0.6), rgb(255 190 80 / 0.15) 55%, transparent 72%); }
.stage[data-golden] .stone-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgb(255 222 140 / 0.45), rgb(255 180 60 / 0.12) 55%, rgb(255 230 160 / 0.35)); mix-blend-mode: overlay; animation: golden 1.4s ease-in-out infinite; }
@keyframes golden { 50% { opacity: 0.55; } }

/* the target on the stone: barely there, clearer while you aim */
.target { position: absolute; left: 0; top: -1%; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0.55; transition: opacity 300ms ease; }
.target circle { fill: none; stroke: rgb(245 199 106 / 0.1); stroke-width: 0.35; }
.target .bull { fill: rgb(245 199 106 / 0.06); }
body.aiming .target { opacity: 1; }
body.aiming .target circle { stroke: rgb(245 199 106 / 0.32); }
.stage[data-sold] .target { display: none; }

/* other visitors' cursors */
.cursors { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.peer { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity 500ms ease; }
.peer::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, rgb(255 226 160 / 0.85) 40%, rgb(245 199 106 / 0) 72%); box-shadow: 0 0 14px rgb(var(--ember) / 0.7); }
.peer i { position: absolute; left: 10px; top: 6px; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.55); white-space: nowrap; }
.peer.gone { opacity: 0; }

/* floating things: score pops, your score, reactions */
.float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.score-pop { position: absolute; translate: -50% -50%; font-size: 22px; font-weight: 800; color: var(--gold-pale); text-shadow: 0 2px 0 rgb(0 0 0 / 0.6), 0 0 18px rgb(var(--ember) / 0.8); animation: pop-up 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; white-space: nowrap; }
.score-pop.bull { font-size: 34px; color: #fff; }
.score-pop.miss { font-size: 15px; font-weight: 600; color: rgb(255 255 255 / 0.55); text-shadow: none; }
@keyframes pop-up { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-70px) scale(1); } }
.my-score { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: 118px; padding: 6px 11px; border-radius: 999px; background: rgb(14 12 18 / 0.75); border: 1px solid rgb(245 199 106 / 0.3); font-family: var(--mono); font-size: 12px; color: var(--gold-pale); }
.reactions { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); z-index: 4; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(14 12 18 / 0.6); border: 1px solid rgb(255 255 255 / 0.08); backdrop-filter: blur(6px); }
.reactions button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 18px; cursor: pointer; transition: transform 160ms var(--spring), background-color 160ms ease; }
.reactions button:hover { background: rgb(255 255 255 / 0.08); transform: scale(1.15); }
.reactions button:active { transform: scale(0.9); }
.react { position: absolute; bottom: 70px; font-size: 30px; animation: react-up 3s ease-out forwards; will-change: transform, opacity; }
@keyframes react-up { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 10% { opacity: 1; transform: translate(0, -20px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--sway), calc(-1 * var(--rise))) scale(0.9); } }

/* toasts */
.toasts { position: absolute; top: 60px; left: 50%; translate: -50% 0; z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; background: rgb(14 12 18 / 0.92); border: 1px solid rgb(245 199 106 / 0.4); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5); font-size: 14px; color: #fff; pointer-events: auto; animation: tick-in 380ms var(--spring) both; transition: opacity 500ms ease, transform 500ms ease; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast--unlock, .toast--golden { border-color: var(--gold); background: linear-gradient(180deg, rgb(60 44 16 / 0.95), rgb(20 16 10 / 0.95)); }
.toast button { padding: 6px 10px; border-radius: 9px; border: 0; background: var(--gold); color: #1a1205; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* ---- world unlocks (a class on the stage switches each on) ---------------------------------------------------- */
.unlock { display: none; position: absolute; pointer-events: none; }
.stage.unlocking::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgb(255 230 170 / 0.5), transparent 60%); animation: unlock-flash 2.4s ease-out forwards; }
@keyframes unlock-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
/* 1 spotlights */
.lv-spotlights .spots { display: block; inset: 0; overflow: hidden; z-index: 0; }
.spot { position: absolute; top: -12%; width: 46vmax; height: 130vh; background: linear-gradient(to bottom, rgb(255 240 205 / 0.16), rgb(255 240 205 / 0.02) 75%, transparent); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: spot 11s ease-in-out infinite alternate; }
.spot-l { left: -6vmax; rotate: -24deg; }
.spot-r { right: -6vmax; rotate: 24deg; animation-delay: -5s; }
@keyframes spot { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* 3 the red carpet */
.lv-carpet .carpet { display: block; left: 50%; top: calc(50% + var(--s) * 0.47); width: calc(var(--s) * 0.62); height: 60vh; translate: -50% 0; transform: perspective(420px) rotateX(58deg); transform-origin: 50% 0; background: linear-gradient(90deg, #6e0c19, #a8182e 18%, #b51d34 50%, #a8182e 82%, #6e0c19); box-shadow: inset 0 40px 60px rgb(0 0 0 / 0.5); z-index: 0; }
/* 4 + 7 cracks of light in the stone */
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; overflow: visible; }
.lv-crack .cracks { display: block; }
.crack { fill: none; stroke: #ffe3a3; stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #ffcf6e) drop-shadow(0 0 4px rgb(255 190 80 / 0.8)); animation: crack 3.6s ease-in-out infinite; vector-effect: non-scaling-stroke; }
.crack-2 { display: none; animation-delay: -1.8s; }
.lv-second-crack .crack-2 { display: inline; }
@keyframes crack { 50% { opacity: 0.55; } }
/* 5 lanterns */
.lv-lanterns .lanterns { display: block; inset: 0; overflow: hidden; z-index: 0; }
.lanterns i { position: absolute; bottom: -60px; width: 16px; height: 20px; border-radius: 6px 6px 8px 8px; background: radial-gradient(circle at 50% 40%, #ffe9b0, #ff9f3a 60%, #b85310); box-shadow: 0 0 22px rgb(255 160 60 / 0.75); opacity: 0.85; animation: lantern 24s linear infinite; }
.lanterns i:nth-child(1) { left: 8%; animation-delay: 0s; }
.lanterns i:nth-child(2) { left: 18%; animation-delay: -6s; scale: 0.7; }
.lanterns i:nth-child(3) { left: 29%; animation-delay: -15s; scale: 0.85; }
.lanterns i:nth-child(4) { left: 41%; animation-delay: -3s; scale: 0.6; }
.lanterns i:nth-child(5) { left: 58%; animation-delay: -11s; }
.lanterns i:nth-child(6) { left: 69%; animation-delay: -19s; scale: 0.75; }
.lanterns i:nth-child(7) { left: 79%; animation-delay: -8s; scale: 0.9; }
.lanterns i:nth-child(8) { left: 88%; animation-delay: -21s; scale: 0.65; }
.lanterns i:nth-child(9) { left: 95%; animation-delay: -13s; scale: 0.8; }
@keyframes lantern { from { transform: translate(0, 0); } 50% { transform: translate(18px, -60vh); } to { transform: translate(-10px, -125vh); } }
/* 6 aurora */
.lv-aurora .aurora { display: block; inset: 0; overflow: hidden; z-index: 0; }
.aurora i { position: absolute; top: -25%; left: -10%; width: 120%; height: 65%; background: radial-gradient(60% 40% at 30% 60%, rgb(60 220 160 / 0.13), transparent 70%), radial-gradient(50% 35% at 70% 50%, rgb(90 140 255 / 0.11), transparent 70%); animation: aurora 26s ease-in-out infinite alternate; }
.aurora i + i { animation-duration: 34s; animation-direction: alternate-reverse; opacity: 0.7; }
@keyframes aurora { from { transform: translate(-4%, 0) skewX(-6deg); } to { transform: translate(4%, 4%) skewX(6deg); } }
/* 8 solid gold */
.lv-solid-gold .stone-rim, .lv-solid-gold .stone-depth { filter: sepia(1) saturate(2.6) hue-rotate(-8deg) brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .spot, .lanterns i, .aurora i, .crack, .react, .score-pop, .stage.unlocking::before, .stage[data-golden] .stone-face::after { animation: none; }
}
@media (max-width: 760px) {
  .world-progress { grid-column: 1 / -1; width: auto; }
  .wp-next { font-size: 10px; }
  .dock-icon span { display: none; }
  .dock { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 32px); }
  .panel { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 140px); right: 16px; max-height: 55vh; }
  .reactions { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); right: 16px; }
  .reactions button { width: 30px; height: 30px; font-size: 16px; }
  .record-bar { top: calc(50% - var(--s) * 0.56 - 92px); }
  .plaque { top: calc(50% - var(--s) * 0.56 - 40px); }
  .my-score { bottom: 150px; }
}
/* toasts sit at the very top; during a golden minute the banner owns that spot (and shows the claim progress, so
   the record bar steps aside) */
.toasts { top: 12px; }
.stage[data-golden] .toasts { top: 64px; }
.stage[data-golden] .record-bar { display: none; }

/* ---- "Ask to buy it": the request form (request mode, public/request.js) ----------------------------------------- */
.pay-area[hidden], .request[hidden], .request-form[hidden], .request-done[hidden], .sheet-go[hidden], .sheet-label[hidden], .sheet-legal[hidden] { display: none; }
.request { margin-bottom: 16px; }
.request-form { display: flex; flex-direction: column; gap: 12px; }
.request-form .field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 16px; }
.request-form .field input:focus { outline: none; border-color: rgb(245 199 106 / 0.7); box-shadow: 0 0 0 3px rgb(245 199 106 / 0.18); }
.sheet-label--small { margin: 4px 0 -4px; font-size: 13px; color: rgb(255 255 255 / 0.7); }
.request-pay { margin-bottom: 0; }
.request-pay button { align-items: center; text-align: center; }
.request-pay button[aria-checked="true"] { border-color: rgb(245 199 106 / 0.85); background: rgb(245 199 106 / 0.1); color: var(--gold-pale); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.request-done { padding: 18px 18px 14px; border-radius: 16px; border: 1px solid rgb(111 220 140 / 0.35); background: rgb(111 220 140 / 0.06); font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / 0.78); }
.request-done p { margin: 0 0 10px; }
.request-done p:last-child { margin-bottom: 0; }
.request-done b { color: #fff; overflow-wrap: anywhere; }
.request-done-title { font-size: 17px; font-weight: 700; color: #fff; }
.link-button { padding: 0; border: 0; background: none; color: var(--gold-pale); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- features the owner hasn't revealed yet (public/features.js): hidden until <html> carries data-f-<id> ---- */
html:not([data-f-ticker]) #ticker,
html:not([data-f-counters]) #counters .stat,
html:not([data-f-unlocks]) #world-progress,
html:not([data-f-counters]):not([data-f-unlocks]) #counters,
html:not([data-f-polish]) #polish-btn,
html:not([data-f-wall]) #wall-btn,
html:not([data-f-wall]) #wall-ring,
html:not([data-f-wall]) #wall-band,
html:not([data-f-boards]) #boards-btn,
html:not([data-f-boards]) #boards,
html:not([data-f-boards]) #record-bar,
html:not([data-f-achievements]) #ach-btn,
html:not([data-f-achievements]) #achievements,
html:not([data-f-boards]):not([data-f-achievements]) .dock-row,
html:not([data-f-polish]):not([data-f-wall]):not([data-f-boards]):not([data-f-achievements]) .dock,
html:not([data-f-reactions]) #reactions,
html:not([data-f-cursors]) #cursors,
html:not([data-f-golden]) #golden-banner,
html:not([data-f-golden]) #plaque,
html:not([data-f-tension]) #tension { display: none !important; }
.feature-in { animation: feature-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes feature-in { from { opacity: 0; filter: blur(6px) brightness(1.8); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .feature-in { animation: none; } }