/* Two skins on one engine. Each space sets its own display face and palette; the UI face stays the same. */
:root {
  --ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  --display: "Shippori Mincho", "Iowan Old Style", Georgia, serif;
  --ink: #ece7f3;
  --muted: #a7a2b8;
  --glow: #f2a65a;
  --glow-ink: #2a1607;
  --panel: rgba(13, 15, 28, 0.72);
  --line: rgba(236, 231, 243, 0.14);
  --veil: #05060c;
  --live: #9fe0b0;
  color-scheme: dark;
}
body[data-space="chapel"] {
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --ink: #f2e7d6;
  --muted: #b9a78f;
  --glow: #ffc46a;
  --glow-ink: #2b1a05;
  --panel: rgba(22, 16, 11, 0.76);
  --line: rgba(242, 231, 214, 0.14);
  --veil: #0a0705;
}

html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--veil);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
p { margin: 0; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
#scene.dragging { cursor: grabbing; }
#scene.pointing { cursor: pointer; }
.veil { position: fixed; inset: 0; background: var(--veil); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 3; }
.veil.on { opacity: 1; }

/* The 3D world (index.html): the canvas, and words floating over it. The 2D version (2d.html) uses #scene. */
.world canvas { position: fixed; inset: 0; display: block; touch-action: none; }
.world canvas.pointing { cursor: pointer; }
.labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.labels span { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
/* The way to another place: a lit tag that can be tapped, so a doorway or a signpost is hard to miss. */
.labels .place { pointer-events: auto; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: #fff3dc; padding: 6px 14px; border-radius: 999px; background: rgba(28, 16, 8, 0.72); border: 1px solid color-mix(in srgb, var(--glow) 75%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 35%, transparent); text-shadow: none; }
.labels .place:hover { background: rgba(60, 34, 14, 0.85); }
.labels .name { font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); padding: 2px 8px; border-radius: 999px; background: rgba(10, 12, 20, 0.45); }
.labels .you { padding: 2px 9px; border-radius: 999px; background: rgba(255, 210, 140, 0.18); color: #fff3dc; }
/* Icon buttons in the top corner: offerings, sound, settings. */
.pill { display: flex; gap: 2px; padding: 4px; margin-bottom: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.icon { appearance: none; border: 0; background: transparent; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon:hover { background: rgba(255, 255, 255, 0.1); }
.icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon .slash { display: none; }
.icon[aria-pressed="false"] .wave { display: none; }
.icon[aria-pressed="false"] .slash { display: inline; }
#offer svg { stroke: var(--glow); }
/* Settings open as a panel on the right; offerings as a sheet. */
dialog.side { margin: 12px 12px 12px auto; max-height: calc(100% - 24px); }
.panel { display: grid; gap: 18px; padding: 22px 22px calc(env(safe-area-inset-bottom, 0px) + 22px); overflow-y: auto; }
.panel h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.panel section { display: grid; gap: 10px; }
.mix { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.mix span, .switch span { display: grid; gap: 2px; }
.mix b, .switch b { font-weight: 500; font-size: 0.92rem; }
.mix em, .switch em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.mix input { width: 100%; accent-color: var(--glow); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets button {
  appearance: none;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.presets button[aria-pressed="true"] { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 14%, transparent); }
.sounds { display: grid; border: 1px solid var(--line); border-radius: 14px; }
.sound { display: grid; grid-template-columns: 1fr 44%; align-items: center; gap: 12px; padding: 10px 14px; }
.sound + .sound { border-top: 1px solid var(--line); }
.sound span { display: grid; gap: 1px; }
.sound b { font-weight: 500; font-size: 0.9rem; }
.sound em { font-style: normal; font-size: 0.76rem; color: var(--muted); }
.sound input { width: 100%; accent-color: var(--glow); }
.sound.off b { color: var(--muted); }
.switch { display: flex; gap: 12px; align-items: start; padding: 4px 2px; cursor: pointer; }
.switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--glow); }
.name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--display); font-size: 1.2rem; }
.panel details { border-top: 1px solid var(--line); padding-top: 12px; }
.panel summary { cursor: pointer; font-weight: 500; }
.panel ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.offer-list { display: grid; gap: 10px; }
.offer { appearance: none; display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.offer:hover { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 8%, transparent); }
.offer canvas { width: 60px; height: 60px; border-radius: 12px; }
.offer span { display: grid; gap: 3px; }
.offer b { font-weight: 500; font-size: 0.95rem; }
.offer em { font-style: normal; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.offer i { font-style: normal; font-weight: 600; font-size: 0.86rem; color: var(--glow); white-space: nowrap; }
.offer.free { grid-template-columns: 1fr auto; padding-left: 14px; }
.offer.free i { color: var(--muted); font-weight: 500; }
/* The hour bell: hours to choose from, a day to a row. */
.hours { display: grid; gap: 8px; }
.hour-days { display: grid; gap: 10px; max-height: 236px; overflow-y: auto; padding-right: 4px; }
.hour-day { display: grid; gap: 6px; }
.hour-day > span { font-size: 0.78rem; color: var(--muted); }
.hour-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hour-pick { position: relative; }
.hour-pick input { position: absolute; opacity: 0; pointer-events: none; }
.hour-pick span { display: inline-block; min-width: 66px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.82rem; text-align: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.hour-pick input:checked + span { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 16%, transparent); }
.hour-pick input:disabled + span { opacity: 0.35; cursor: default; text-decoration: line-through; }
.hour-pick input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }
.mine { color: var(--glow); }
#next-bell b { color: var(--glow); font-weight: 600; }
/* The action bar: an icon over a word, like a set of small tools. */
.tray .act { display: grid; justify-items: center; gap: 3px; padding: 8px 12px; }
.tray .act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tray .act span { font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.tray .act[aria-pressed="true"] { background: color-mix(in srgb, var(--glow) 20%, transparent); }
.tray .act.pulse-once { animation: tap 0.35s ease; }
@keyframes tap { 50% { transform: scale(0.92); } }
@media (max-width: 560px) { .tray .act { padding: 6px 2px; } .tray .act span { font-size: 0.68rem; } }
/* The header line is also the way to choose a room. */
button.hall { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.hall:hover { color: var(--ink); }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.room { appearance: none; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); text-align: left; cursor: pointer; }
.room b { font-weight: 500; }
.room em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.room[aria-current="true"] { border-color: var(--glow); }
.room:disabled { opacity: 0.45; cursor: default; }
/* Waiting in line at the incense burner. */
/* What you can do for a stranger: a small menu by them. */
.menu { position: fixed; z-index: 6; left: 0; top: 0; min-width: 210px; max-width: 260px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translate(-50%, calc(-100% - 14px)); display: grid; gap: 6px; animation: rise 0.25s ease; }
.menu-who { font-family: var(--display); font-size: 1rem; padding: 2px 6px; }
.menu-actions { display: grid; gap: 4px; }
.menu-actions button { appearance: none; border: 0; background: rgba(255, 255, 255, 0.05); padding: 9px 12px; border-radius: 10px; text-align: left; font-size: 0.86rem; cursor: pointer; }
.menu-actions button:hover { background: color-mix(in srgb, var(--glow) 16%, transparent); }
/* Kind words over a speaker's head. */
.labels .bubble { max-width: 220px; white-space: normal; text-align: center; font-family: var(--display); font-size: 0.86rem; color: #2b2218; background: #f6efe2; padding: 6px 11px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); transition: opacity 0.6s ease; }
/* The camera keeps you a little below the middle, so captions sit above you in every place. */
body.three[data-area] .caption { top: 20%; }
@media (max-width: 640px) { body.three[data-area] .caption { top: 27%; } }

/* header */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.top > * { pointer-events: auto; }
/* By day the sky is bright: a soft shade behind the header keeps it readable. */
.top::before {
  content: "";
  position: absolute;
  inset: 0 0 -56px 0;
  z-index: -1;
  background: linear-gradient(rgba(8, 10, 20, 0.62), rgba(8, 10, 20, 0.4) 60%, rgba(8, 10, 20, 0));
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
body[data-light="day"] .top::before, body.three .top::before { opacity: 1; }
body[data-light="day"] .top, body.three .top { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.brand { display: grid; gap: 4px; }
.wordmark { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.02em; }
.hall { font-size: 0.78rem; color: var(--muted); }
.center { display: grid; justify-items: center; gap: 8px; }
.places { display: flex; gap: 14px; }
.places:empty { display: none; }
.places button {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  text-underline-offset: 5px;
}
.places button:hover { color: var(--ink); }
.places button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--glow); }
.spaces {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.spaces button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.spaces button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.status { justify-self: end; display: grid; justify-items: end; gap: 4px; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.here b { color: var(--ink); font-weight: 600; }
.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--live); vertical-align: 1px; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(159, 224, 176, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(159, 224, 176, 0); }
  100% { box-shadow: 0 0 0 0 rgba(159, 224, 176, 0); }
}
.sound { appearance: none; border: 0; background: none; padding: 2px 0; font-size: 0.78rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.sound:hover { color: var(--ink); }


@media (max-width: 640px) {
  .top { grid-template-columns: 1fr auto; row-gap: 14px; }
  .center { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .status { grid-column: 2; grid-row: 1; }
}
/* In 3D the header holds the name of the place (which opens the rooms), one row of every place, and the icons. */
.place-row { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.place-row button { appearance: none; border: 0; background: transparent; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 0.85rem; color: var(--ink); opacity: 0.8; cursor: pointer; white-space: nowrap; transition: background 0.2s, opacity 0.2s; }
.place-row button:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.place-row button[aria-current="true"] { opacity: 1; background: color-mix(in srgb, var(--glow) 22%, transparent); }
.place-row .sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
@media (max-width: 640px) {
  .place-row button { padding: 6px 9px; font-size: 0.8rem; }
  .place-row .sep { margin: 0 2px; }
}

/* caption */
.caption {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 2;
  width: min(560px, calc(100% - 40px));
  transform: translate(-50%, 8px);
  display: grid;
  gap: 6px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.caption.on { opacity: 1; transform: translate(-50%, 0); }
.caption { padding: 18px 28px; box-sizing: border-box; background: radial-gradient(closest-side, rgba(5, 6, 12, 0.55), rgba(5, 6, 12, 0)); }
/* At the gate the doorway is the focus, so captions sit on the steps below it. */
body[data-area="gate"] .caption { top: 64%; }
/* In the main hall they sit over the cushions, clear of the altar and the candle stands. */
body.three[data-area="hall"] .caption { top: 57%; }
.caption .sub { font-family: var(--ui); font-size: 0.84rem; color: var(--muted); }
@media (max-width: 640px) { .caption { top: 19%; } }

/* stillness */
/* At the bottom, where the tray was, so it never covers the altar or the water. */
.stillness {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 4px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
}
.still-label { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; }
.still-time { font-family: var(--display); font-size: clamp(2rem, 6vw, 2.8rem); font-variant-numeric: tabular-nums; line-height: 1.2; }
.still-hint { font-size: 0.82rem; color: var(--muted); }
.still-help { pointer-events: auto; margin-top: 10px; appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.help-lines { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.86rem; }
.help-lines b { display: inline-block; min-width: 9.5em; font-weight: 500; }
.help-lines a, .fine a { color: var(--ink); text-underline-offset: 3px; }
#lit-today { color: var(--muted); }
body.sitting .top, body.sitting .tray { opacity: 0; pointer-events: none; }
body.sitting .top > * { pointer-events: none; }
body.hour .top, body.hour .tray { opacity: 0.25; }

/* tooltip */
.tip {
  position: fixed;
  z-index: 5;
  max-width: 250px;
  padding: 10px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
  display: grid;
  gap: 3px;
}
.tip-for { font-family: var(--display); font-size: 1.04rem; line-height: 1.3; }
.tip-acts { display: flex; gap: 8px; margin-top: 6px; pointer-events: auto; }
.tip-acts button { appearance: none; border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 0.76rem; cursor: pointer; }
.tip-acts #tip-send { border-color: var(--glow); color: var(--glow); }
.tip-acts #tip-report { color: var(--muted); }
.tip-acts[hidden], .tip-acts button[hidden] { display: none; }
.tip-meta { font-size: 0.76rem; color: var(--muted); }

/* a stranger's greeting, waiting for a bow back */
.greet {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
  animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.greet p { font-family: var(--display); font-size: 0.98rem; }
.greet .ghost { padding: 8px 14px; }
@media (max-width: 560px) {
  .greet { bottom: calc(env(safe-area-inset-bottom, 0px) + 140px); max-width: calc(100% - 24px); white-space: normal; }
}

/* tray */
.tray {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.9s ease;
}
.quiet {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.quiet:hover { background: rgba(255, 255, 255, 0.07); }
.leave {
  appearance: none;
  border: 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--glow);
  color: var(--glow-ink);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 28px color-mix(in srgb, var(--glow) 45%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.leave:hover { transform: translateY(-1px); box-shadow: 0 0 36px color-mix(in srgb, var(--glow) 60%, transparent); }
.leave.wide { width: 100%; padding: 15px 22px; font-size: 1rem; }
.leave.second { background: none; color: var(--ink); border: 1px solid color-mix(in srgb, var(--glow) 70%, transparent); box-shadow: none; }

/* The one question about Meta's cookie: asked once, in the main hall, with both answers equal. */
.ads-ask { position: fixed; z-index: 5; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); transform: translateX(-50%); width: min(420px, calc(100% - 24px)); display: grid; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 0.86rem; line-height: 1.45; animation: rise 0.4s ease; }
.ads-ask[hidden] { display: none; }
.ads-ask p { margin: 0; }
.ads-ask a { color: var(--ink); text-underline-offset: 3px; }
.ads-ask .row { display: flex; gap: 8px; justify-content: flex-end; }
.switch[hidden] { display: none; }
@media (max-width: 640px) { .ads-ask { top: calc(env(safe-area-inset-top, 0px) + 132px); } }

/* What is near you: one button just above the bar, when you stop beside something you can use. */
.nearby { position: fixed; left: 50%; z-index: 4; transform: translateX(-50%); padding: 11px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--glow) 70%, transparent); background: var(--panel); color: var(--ink); font: 600 0.95rem var(--ui); white-space: nowrap; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 30%, transparent); animation: appear 0.35s ease; }
.nearby:hover { background: color-mix(in srgb, var(--glow) 16%, var(--panel)); }
.nearby[hidden], body.sitting .nearby, body.releasing .nearby, body.at-door .nearby { display: none; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* The small practices, opened from More, just above the bar. */
.practices {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: rise 0.25s ease;
}
.practices[hidden] { display: none; }
.practices .act { display: grid; justify-items: center; gap: 3px; padding: 8px 12px; }
.practices .act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.practices .act span { font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.practices .act[aria-pressed="true"] { background: color-mix(in srgb, var(--glow) 20%, transparent); }
#more[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); }
body.sitting .practices { display: none; }
@media (max-width: 560px) {
  .practices { left: 12px; right: 12px; transform: none; justify-content: space-around; }
  .practices .act { padding: 8px 4px; }
}

/* Where to go: every place in both spaces, then the rooms. */
.where { display: grid; gap: 14px; margin: 4px 0 18px; }
.where-group h3 { margin-bottom: 8px; }
.where-row { display: flex; flex-wrap: wrap; gap: 8px; }
.where-row button { appearance: none; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; }
.where-row button:hover { border-color: var(--glow); }
.where-row button[aria-current="true"] { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 14%, transparent); }
button.hall::after { content: " ›"; color: var(--muted); }

/* At the gate: the gate itself, one line and one button. Everything else waits inside. */
.threshold {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 72px 16px calc(env(safe-area-inset-bottom, 0px) + 26px);
  text-align: center;
  background: linear-gradient(rgba(5, 6, 12, 0), rgba(5, 6, 12, 0.5) 55%, rgba(5, 6, 12, 0.7));
  transition: opacity 0.7s ease;
  animation: rise 1.2s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.threshold[hidden] { display: none; }
.threshold-line { font-family: var(--display); font-size: clamp(1.3rem, 4.8vw, 1.7rem); line-height: 1.3; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8); }
.threshold .leave { width: min(340px, 100%); }
.threshold-walk { appearance: none; border: 0; background: none; padding: 6px 12px; font: inherit; font-size: 0.92rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer; }
.threshold-walk:hover { color: var(--ink); }
body.at-door .tray,
body.at-door .brand,
body.at-door .center,
body.at-door .status > :not(.pill),
body.at-door #offer,
body.at-door #settings-open { display: none; }
body.at-door .top::before { opacity: 0; }
/* While the world loads, the gate is a dusk sky with the warm light of a doorway; the 3D gate covers it when ready. */
body[data-area="gate"] { background: radial-gradient(ellipse 14% 20% at 50% 40%, rgba(255, 200, 130, 0.5), rgba(255, 160, 80, 0) 70%), linear-gradient(#161c42 0%, #46396c 34%, #ad6178 56%, #3a2418 57%, #120b07 100%); }
body.at-door .top { grid-template-columns: 1fr; }
body.passing .threshold, body.passing .top { opacity: 0; pointer-events: none; }
/* Setting a lantern on the water: nothing on the screen but the water, the lantern and one button. */
body.releasing .top, body.releasing .tray, body.releasing .practices { opacity: 0; pointer-events: none; }
.chip[hidden] { display: none; }
.veil.warm { background: radial-gradient(circle at 50% 58%, #f4c088, #b8692e 48%, #1c0e06); }

@media (max-width: 560px) {
  .tray {
    left: 12px;
    right: 12px;
    transform: none;
    flex-wrap: wrap;
    border-radius: 24px;
    padding: 8px;
  }
  .tray .leave { order: -1; flex: 1 1 100%; padding: 14px; }
  .tray .quiet { flex: 1 1 0; padding: 10px 6px; font-size: 0.9rem; }
}

/* sheets */
dialog.sheet {
  width: min(460px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--veil) 90%, transparent);
  color: var(--ink);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog.sheet[open] { animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  dialog.sheet { width: 100%; max-width: 100%; margin: auto auto 0; border-radius: 22px 22px 0 0; border-bottom: 0; max-height: 92%; }
}
.sheet form, .shared-body {
  display: grid;
  gap: 18px;
  padding: 22px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
}
.sheet-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.sheet h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.25; text-wrap: balance; }
.sheet-sub { margin-top: 4px; font-size: 0.88rem; color: var(--muted); }
.close { appearance: none; border: 0; background: none; color: var(--muted); font-size: 0.85rem; padding: 4px 0; cursor: pointer; }
.close:hover { color: var(--ink); }

.field { display: grid; gap: 8px; }
.field-label { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em; padding: 0; }
.field input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: 400 1rem var(--ui);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font: 400 1rem/1.45 var(--ui); resize: vertical; min-height: 84px; }
/* Sending a light to someone: the form, then their page's link to send. */
#gift-form { display: grid; gap: 16px; }
.gift-fields, .gift-done { display: grid; gap: 14px; }
.gift-fields[hidden], .gift-done[hidden] { display: none; }
#gift-open { margin-top: 4px; }
.field-error { font-size: 0.8rem; color: #f0a08c; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { margin-bottom: 8px; }
.chip { position: relative; }
.chip input, .tier input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.chip input:checked + span { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 14%, transparent); }
.chip input:focus-visible + span, .tier input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }

.tiers { display: grid; gap: 8px; }
.tiers legend { margin-bottom: 8px; }
.tier span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.tier b { font-weight: 500; font-size: 0.95rem; }
.tier em { grid-column: 1; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.tier i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tier input:checked + span { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 12%, transparent); }
.tier.used span { opacity: 0.55; cursor: default; }

.preview {
  padding: 16px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.35;
}
#pv-intent { color: var(--muted); }
.fine { font-size: 0.76rem; color: var(--muted); text-align: center; }
.sheet-foot { display: grid; gap: 18px; }
.tier strong, .tier-note { display: none; }

/* The light sheet on a phone takes the lower part of the screen, and the place stays in sight above it (the picture
   moves up with the sheet, see world3d.js). The name comes first, the lengths sit side by side, and the button stays
   at the bottom while the rest scrolls. */
@media (max-width: 560px) {
  dialog.light-sheet { max-height: 64%; max-height: 64dvh; scroll-padding-bottom: 130px; }
  dialog.light-sheet::backdrop { background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.4)); }
  body:has(.light-sheet[open]) .top { opacity: 0; pointer-events: none; transition-duration: 0.3s; }
  .light-sheet form { gap: 14px; padding-top: 18px; }
  .light-sheet h2 { font-size: 1.2rem; }
  .light-sheet .sheet-sub { font-size: 0.8rem; }
  .light-sheet .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .light-sheet .chips::-webkit-scrollbar { display: none; }
  .light-sheet .chip { flex: none; }
  .light-sheet .tiers { grid-template-columns: repeat(3, 1fr); }
  .light-sheet .tier.free { grid-column: 1 / -1; }
  .light-sheet .tier span { padding: 10px 12px; }
  .light-sheet .tier:not(.free) span { grid-template-columns: 1fr; justify-items: center; padding: 10px 6px; text-align: center; }
  .light-sheet .tier:not(.free) b, .light-sheet .tier:not(.free) em { display: none; }
  .light-sheet .tier:not(.free) strong { display: block; font-weight: 500; font-size: 0.92rem; }
  .light-sheet .tier:not(.free) i { grid-column: 1; grid-row: auto; }
  .light-sheet .tier-note { display: block; margin-top: -6px; font-size: 0.8rem; color: var(--muted); text-align: center; }
  .light-sheet .tier-note:empty { display: none; }
  .light-sheet .sheet-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    gap: 10px;
    margin: 0 -22px;
    padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 14px);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--veil) 95%, transparent);
  }
  .light-sheet .preview { padding: 0; border: 0; font-size: 1.08rem; }
}
/* A short screen (a small phone, or the browser inside Instagram) keeps every length in sight: the sheet is a little
   taller and closer set, and the line under the title goes. */
@media (max-width: 560px) and (max-height: 760px) {
  dialog.light-sheet { max-height: 72%; max-height: 72dvh; }
  .light-sheet form { gap: 10px; padding-top: 14px; }
  .light-sheet .sheet-sub { display: none; }
  .light-sheet .field { gap: 6px; }
  .light-sheet .field input { padding: 11px 14px; }
  .light-sheet .chips legend, .light-sheet .tiers legend { margin-bottom: 6px; }
  .light-sheet .tier span { padding: 8px 12px; }
  .light-sheet .tier:not(.free) span { padding: 8px 6px; }
  .light-sheet .sheet-foot { gap: 8px; padding-top: 10px; }
  .light-sheet .preview { font-size: 1rem; }
}

.card-img { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid var(--line); background: #000; object-fit: cover; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
.ghost {
  appearance: none;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.ghost:hover { background: rgba(255, 255, 255, 0.09); }
.keep { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }
.keep[hidden] { display: none; }
button.link { appearance: none; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#path-offer[hidden], #path-section button[hidden] { display: none; }
.keep-title { font-family: var(--display); font-size: 1.08rem; }
.keep-text { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  dialog.sheet[open] { animation: none; }
  .caption, .veil { transition-duration: 0.01s; }
}