:root {
  --gold: #e8c26a;
  --gold2: #f7dd9c;
  --ink: #f3e6c8;
  --panel: rgba(28, 10, 5, .74);
  --line: rgba(232, 194, 106, .45);
  --serif: 'Noto Serif', Georgia, serif;
}

* { box-sizing: border-box; }

/* 1rem = 10% of the widest 9:16 column that fits the screen, so the HUD keeps phone proportions everywhere;
   capped so tablets and large monitors don't get an oversized HUD. On short landscape screens (phones held
   sideways, short desktop windows) that rule would shrink text to ~7px, so the second term sizes from the
   short side instead; taking the larger of the two keeps the size continuous as the window is resized. */
html {
  font-size: max(min(10vw, 5.625vh, 46px), min(5vw, 9vh, 36px));
  font-size: max(min(10vw, 5.625dvh, 46px), min(5vw, 9dvh, 36px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  height: 100%;
  background: #070302;
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

button, select, label { touch-action: manipulation; }

body { font-size: .34rem; }

/* Shows wherever the scene's crop leaves the screen uncovered. */
body::before {
  content: '';
  position: fixed;
  inset: -60px;
  z-index: 0;
  background: url(assets/hall.webp) center / cover no-repeat;
  filter: blur(30px) brightness(.38) saturate(1.15);
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
  cursor: pointer;
}

/* ---------- HUD ---------- */
.hud.top {
  position: absolute;
  top: calc(.25rem + env(safe-area-inset-top));
  left: calc(.25rem + env(safe-area-inset-left));
  right: calc(.25rem + env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  gap: .2rem;
  pointer-events: none;
}

.pill {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .16rem .34rem;
  font-size: .34rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.pill b { color: var(--gold); font-weight: 600; }
#me { max-width: 6.4rem; }
#me span { color: #d9c9a3; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .3rem;
  backdrop-filter: blur(4px);
}

#boards {
  position: absolute;
  top: calc(1.3rem + env(safe-area-inset-top));
  right: calc(.25rem + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: .15rem;
  pointer-events: none;
}
.board {
  min-width: 4rem;
  padding: .24rem .34rem;
}
.board h2 {
  margin: 0 0 .14rem;
  font-family: var(--serif);
  font-size: .35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
}
.board ol { margin: 0; padding-left: .5rem; font-size: .34rem; line-height: 1.55; }
.board li span { display: inline-block; }
.board li { position: relative; padding-right: 1.1rem; }
.board .pts { position: absolute; right: 0; color: #d9c9a3; }
.board li.me { color: var(--gold2); }
.board ol:empty::after { content: '—'; display: block; margin-left: -.5rem; text-align: center; color: #bfae8a; }
/* Narrow portrait screens: the quick buttons fill the second row, so the board drops below them. */
@media (orientation: portrait) and (max-width: 640px) {
  #boards { top: calc(2.05rem + env(safe-area-inset-top)); }
}

/* --hud-h (the gift bar and controls) and --sheet-h (the Niệm Phật dock) are measured by app.js, which also
   hides the oldest lines that don't fit, so the feed never runs into the hall or the Niệm Phật card. */
#feed {
  position: absolute;
  left: calc(.25rem + env(safe-area-inset-left));
  bottom: calc(.45rem + var(--hud-h, 2.85rem) + env(safe-area-inset-bottom));
  width: 4.8rem;
  display: flex;
  flex-direction: column;
  gap: .14rem;
  pointer-events: none;
}
.msg {
  background: rgba(40, 12, 5, .5);
  border: 1px solid rgba(232, 194, 106, .18);
  border-radius: .24rem;
  padding: .12rem .24rem;
  font-size: .31rem;
  line-height: 1.38;
  animation: msg-in .35s ease-out;
  transition: opacity .4s;
  overflow-wrap: anywhere;
}
.msg[hidden] { display: none; }
.msg b { color: var(--gold); font-weight: 600; }
.msg.msg-gift { background: rgba(110, 26, 12, .58); }
.msg:nth-last-child(n+3) { opacity: .7; }
.msg:nth-last-child(n+4) { opacity: .4; }

@keyframes msg-in {
  from { opacity: 0; transform: translateX(-.4rem); }
  to { opacity: 1; transform: none; }
}

/* Wide enough that the feed fits beside the centred gift bar: drop it to the bottom-left corner. */
@media (min-aspect-ratio: 9/8) {
  #feed { bottom: calc(.25rem + env(safe-area-inset-bottom)); }
}

#banner {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, calc(4.1rem + env(safe-area-inset-top)));
  width: min(8rem, 92vw);
  aspect-ratio: 323 / 159;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.2rem;
  text-align: center;
  background: url(assets/fx_banner.png) center / 100% 100% no-repeat;
  filter: drop-shadow(0 .15rem .4rem rgba(0, 0, 0, .6));
  opacity: 0;
  transform: translateX(-50%) scale(.9);
  transform-origin: center top;
  transition: opacity .35s, transform .35s;
  pointer-events: none;
  z-index: 5;
}
#banner.show { opacity: 1; transform: translateX(-50%) scale(1); }
.b-title { font-family: var(--serif); font-weight: 700; font-size: .52rem; color: var(--gold2); text-shadow: 0 .03rem .08rem rgba(0, 0, 0, .6); }
.b-sub { font-size: .34rem; margin-top: .04rem; }
.b-line { font-size: .28rem; margin-top: .1rem; font-style: italic; color: #f3dfb8; }
@media (orientation: landscape) and (max-height: 500px) {
  #banner { width: 6.4rem; padding: 0 1rem; }
  .msg:nth-last-child(n+3) { display: none; }
}

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(3.6rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .16rem .4rem;
  font-size: .32rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
#hint.show { opacity: 1; }

.hud.bottom {
  position: absolute;
  left: 50%;
  bottom: calc(.25rem + env(safe-area-inset-bottom));
  width: min(calc(100vw - .5rem), 9.5rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

#gifts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; }

.gift {
  appearance: none;
  font: inherit;
  cursor: pointer;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: .3rem;
  background: linear-gradient(180deg, rgba(72, 22, 10, .84), rgba(34, 10, 4, .84));
  padding: .22rem .1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  transition: transform .12s, box-shadow .2s;
}
.gift .g-name { font-family: var(--serif); font-weight: 700; font-size: .39rem; line-height: 1.2; text-align: center; }
@media (hover: hover) {
  .gift:hover { box-shadow: 0 0 .3rem rgba(232, 194, 106, .25); }
}
.gift:active, .gift.pop { transform: scale(.93); }

.controls { display: flex; gap: .2rem; }
.controls button, .controls .contact {
  appearance: none;
  font: inherit;
  font-size: .34rem;
  cursor: pointer;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .22rem .36rem;
  white-space: nowrap;
  flex: none;
}
.controls #trackBtn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.controls .contact { margin-left: auto; padding: .22rem .3rem; display: inline-flex; align-items: center; touch-action: manipulation; }
.controls #fsBtn { padding: .22rem .3rem; display: inline-flex; align-items: center; }
.controls #fsBtn[hidden] { display: none; }
.controls button[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); }

/* Technology partner: one quiet line under the controls (and at the foot of the welcome card),
   brightening on hover or focus; the logo rests a little dimmed and breathes a faint light.
   Where the line is too narrow the tagline drops onto a clipped second line, never half-shown. */
.credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: center;
  gap: .1rem;
  width: fit-content;
  max-width: 100%;
  height: calc(1.3em + .04rem);
  margin: 0 auto;
  padding: .02rem .2rem;
  overflow: hidden;
  font-size: max(9px, .24rem);
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(217, 201, 163, .55);
  text-decoration: none;
  border-radius: 999px;
  transition: color .3s;
  touch-action: manipulation;
}
.credit b { font-weight: 600; color: rgba(232, 194, 106, .8); transition: color .3s; }
.credit img {
  flex: none;
  width: auto;
  height: 1.15em;
  opacity: .85;
  transition: opacity .3s;
  animation: credit-glow 8s ease-in-out infinite;
}
.credit:hover, .credit:focus-visible, .credit:hover b, .credit:focus-visible b { color: var(--gold2); }
.credit:hover img, .credit:focus-visible img { opacity: 1; }
.credit:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
#join .credit { margin-top: .3rem; }
/* Landscape and desktop: the gift bar stands on the hall's floor, and making it taller would push seats
   out of the front rows. So the line moves to the bottom-right corner, level with the controls; nobody
   is seated under it (app.js). */
#stage:not(.band) .hud.bottom .credit {
  position: absolute;
  right: calc((100% - 100vw) / 2 + .25rem + env(safe-area-inset-right));
  bottom: .25rem;
  justify-content: flex-end;
  max-width: calc((100vw - 100%) / 2 - .55rem - env(safe-area-inset-right));
  margin: 0;
  text-shadow: 0 0 .12rem rgba(0, 0, 0, .9);
}
@keyframes credit-glow {
  50% { filter: drop-shadow(0 0 .05rem rgba(255, 228, 170, .75)); }
}
@media (prefers-reduced-motion: reduce) {
  .credit img { animation: none; }
}

#stage:not(.joined) .hud.bottom,
#stage:not(.joined) .quick,
#stage:not(.joined) #niemDock,
#stage:not(.joined) #me { visibility: hidden; }

.quick {
  position: absolute;
  top: calc(1.1rem + env(safe-area-inset-top));
  left: calc(.25rem + env(safe-area-inset-left));
  display: flex;
  gap: .15rem;
}
.quick button {
  font: inherit;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .32rem;
  color: #2a0e04;
  background: linear-gradient(180deg, #f7dd9c, #d6a443);
  border: 0;
  border-radius: 999px;
  padding: .2rem .4rem;
  cursor: pointer;
  box-shadow: 0 0 .3rem rgba(232, 194, 106, .35);
}
.quick button:disabled { cursor: not-allowed; color: #6b5233; background: linear-gradient(180deg, #cbb994, #a08a62); box-shadow: none; opacity: .8; }
.quick #niemBtn[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff1c4, 0 0 .4rem rgba(255, 220, 140, .7); }

/* ---------- Niệm Phật ---------- */
/* Landscape: a card in the top-left corner. Portrait: a bottom sheet stacked on the gift bar (see below). */
#niemDock {
  position: absolute;
  top: calc(2.05rem + env(safe-area-inset-top));
  left: calc(.25rem + env(safe-area-inset-left));
  z-index: 6;
  width: min(9.4rem, calc(100vw - .5rem));
}
/* The formula picker gets the full width so even the longest formula shows in full. */
#niemPanel {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  grid-template-areas: "head head" "form form" "mala ctrl";
  column-gap: .25rem;
  padding: .14rem .22rem .22rem;
  font-size: .28rem;
}
#niemPanel[hidden] { display: none; }
#niemPanel header { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: .12rem; margin-bottom: .08rem; }
.niem-title { min-width: 0; }
#niemPanel h2 { margin: 0; font-family: var(--serif); font-size: .34rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.niem-src { margin: .02rem 0 0; font-size: .24rem; line-height: 1.3; color: #bfae8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niem-src[hidden] { display: none; }
.niem-tools { display: flex; flex: none; gap: .12rem; }
.icon-btn {
  display: grid;
  place-items: center;
  width: .86rem;
  height: .86rem;
  padding: 0;
  font: inherit;
  font-size: .38rem;
  line-height: 1;
  color: #bfae8a;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.icon-btn svg { width: .4rem; height: .4rem; }
.icon-btn[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); box-shadow: 0 0 .2rem rgba(255, 215, 130, .45); }
.icon-btn[hidden] { display: none; }
#niemClose { color: var(--ink); }
.mala {
  grid-area: mala;
  align-self: center;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  background: radial-gradient(circle, rgba(255, 200, 110, .14), transparent 62%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mala:active { transform: scale(.98); }
.mala svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mala circle { fill: rgba(150, 95, 45, .7); stroke: rgba(40, 14, 4, .6); stroke-width: .6; transition: fill .2s; }
.mala circle.done { fill: #e9bd5c; }
.mala circle.cur { fill: #fff1c4; filter: drop-shadow(0 0 3px #ffd77a); }
.mala circle.guru { fill: #c0392b; }
.mala-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold2); pointer-events: none; }
.mala-center b { font-family: var(--serif); font-size: .9rem; line-height: 1; }
.mala-center small { font-size: .24rem; color: #d9c9a3; margin-top: .04rem; }
.niem-controls { grid-area: ctrl; display: flex; flex-direction: column; justify-content: center; gap: .12rem; min-width: 0; }
.niem-row { display: flex; gap: .1rem; align-items: center; justify-content: space-between; }
.niem-row button, .niem-select {
  min-height: .86rem;
  font: inherit;
  font-size: .28rem;
  color: var(--ink);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .08rem .18rem;
  cursor: pointer;
}
.niem-select { width: 100%; min-width: 0; border-radius: .16rem; }
.niem-select option, .niem-formula option { color: #000; }
/* The chosen formula in full, wrapping if need be, over an invisible native picker. A visible select
   would cut the longest formulas short, worst on iPhones where fields are kept at 16px or more. */
.niem-formula {
  grid-area: form;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: .86rem;
  margin-bottom: .14rem;
  padding: .08rem .6rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .32rem;
  line-height: 1.25;
  text-align: center;
  color: var(--gold2);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: .16rem;
}
.niem-formula svg {
  position: absolute;
  top: 50%;
  right: .2rem;
  width: .3rem;
  height: .3rem;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.niem-formula select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.niem-formula:has(select:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
#niemAuto { flex: 1; white-space: nowrap; }
#niemAuto[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); }
.tempo { display: flex; align-items: center; gap: .08rem; font-size: .26rem; white-space: nowrap; }
.tempo button { width: .86rem; padding: 0; text-align: center; font-size: .34rem; }
.niem-stats { margin: 0; font-size: .26rem; line-height: 1.45; color: #d9c9a3; }
/* Wrap between the figures, never inside one. */
.niem-stats span { white-space: nowrap; }

/* Portrait (.band, set by app.js with the hall shown as a band): a bottom sheet stacked on the gift bar,
   so the gifts and controls stay usable while reciting. app.js moves the hall up to make room, hiding
   the leaderboard (.tight) when the screen is too short. */
#stage.band #niemDock {
  top: auto;
  left: 50%;
  bottom: calc(.45rem + var(--hud-h, 2.85rem) + env(safe-area-inset-bottom));
  width: min(calc(100vw - .5rem), 9.5rem);
  transform: translateX(-50%);
}
#stage.band #niemPanel { grid-template-columns: 3.2rem minmax(0, 1fr); }
/* The feed has its own strip under the hall here, so it can be wider. */
#stage.band #feed { width: min(7.6rem, calc(100vw - .5rem)); }
#stage.band.niem-open #feed { bottom: calc(.65rem + var(--hud-h, 2.85rem) + var(--sheet-h, 0px) + env(safe-area-inset-bottom)); }
#stage.tight #boards { display: none; }
/* The tap hint would sit under the Niệm Phật card or crowd the feed; reciting has its own mala to tap. */
#stage.niem-open #hint { display: none; }

.hh { max-width: 7.5rem; text-align: center; }
.verse { margin: .2rem 0 .1rem; font-family: var(--serif); font-size: .38rem; line-height: 1.6; color: var(--gold2); }

/* ---------- Dialogs ---------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: .4rem;
  background: rgba(8, 3, 2, .72);
  backdrop-filter: blur(2px);
}
.modal[hidden] { display: none; }
.modal .card { max-height: calc(100% - .2rem); overflow: auto; }
.modal h2 { margin: 0 0 .1rem; font-family: var(--serif); font-size: .5rem; color: var(--gold); text-align: center; }

.prayers { display: flex; flex-direction: column; gap: .1rem; }
.prayers label { cursor: pointer; }
.prayers input { position: absolute; opacity: 0; pointer-events: none; }
.prayers span {
  display: block;
  font-size: .31rem;
  padding: .12rem .26rem;
  border: 1px solid var(--line);
  border-radius: .2rem;
  background: rgba(0, 0, 0, .3);
}
.prayers input:checked + span { background: rgba(232, 194, 106, .2); border-color: var(--gold); color: var(--gold2); }
.prayers input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.actions { display: flex; gap: .2rem; margin-top: .25rem; }
.actions .primary { margin: 0; flex: 1; }
.actions .primary:disabled { opacity: .5; cursor: not-allowed; }
.ghost {
  font: inherit;
  font-size: .34rem;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: .26rem;
  padding: 0 .4rem;
}

/* Short landscape screens: name and buttons on the left, the wishes on the right, so nothing needs scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  #donate { padding: .3rem; }
  #donateForm {
    max-width: 17rem;
    padding: .35rem .6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "title wishes" "sub wishes" "name wishes" "note wishes" "actions wishes";
    column-gap: .5rem;
  }
  #donateForm h2 { grid-area: title; }
  #donateForm .sub { grid-area: sub; margin-bottom: .25rem; }
  #donateForm label.field { grid-area: name; margin-bottom: 0; }
  #donateForm fieldset.field { grid-area: wishes; min-width: 0; margin: 0; }
  #donateForm .note { grid-area: note; margin-top: .15rem; }
  #donateForm .actions { grid-area: actions; }
}

/* Relief viewer: relief at the upper centre with a slow golden aura, the donor's name right below. */
.relief-modal {
  place-items: start center;
  /* Clear the close button on narrow phones. */
  padding-top: calc(max(5dvh, 56px) + env(safe-area-inset-top));
  background: radial-gradient(ellipse at 50% 35%, rgba(95, 42, 10, .6), rgba(6, 2, 1, .94) 70%);
  backdrop-filter: blur(4px);
}
.relief-show {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4dvh;
  text-align: center;
}
.relief-frame {
  position: relative;
  width: min(56dvh, 84vw);
  aspect-ratio: 540 / 550;
  animation: relief-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.relief-frame::before {
  content: '';
  position: absolute;
  inset: -28%;
  background: repeating-conic-gradient(rgba(255, 215, 130, .16) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%);
  mask: radial-gradient(circle, #000 28%, transparent 68%);
  animation: aura-spin 40s linear infinite;
}
.relief-frame::after {
  content: '';
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle, rgba(255, 200, 110, .5), transparent 65%);
  animation: aura-pulse 4s ease-in-out infinite;
}
.relief-frame canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: .6dvh;
  box-shadow: 0 0 5dvh rgba(255, 190, 90, .35), 0 1.5dvh 4dvh rgba(0, 0, 0, .6);
}
.relief-show figcaption { display: flex; flex-direction: column; align-items: center; gap: .9dvh; max-width: 90vw; }
.relief-show figcaption > * { animation: caption-in .8s ease-out both; }
.relief-kicker {
  font-size: min(1.9dvh, 3.4vw);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  animation-delay: .6s !important;
}
#reliefName {
  font-family: var(--serif);
  font-weight: 700;
  font-size: min(5.6dvh, 9vw);
  line-height: 1.15;
  color: var(--gold2);
  text-shadow: 0 0 2.4dvh rgba(255, 200, 110, .55);
  overflow-wrap: anywhere;
  animation-delay: .9s !important;
}
#reliefPrayer { font-size: min(2.5dvh, 4.2vw); font-style: italic; color: var(--ink); animation-delay: 1.2s !important; }
#reliefDate { font-size: min(1.8dvh, 3.2vw); color: #bfae8a; animation-delay: 1.4s !important; }

@keyframes relief-in {
  from { opacity: 0; transform: translateY(2dvh) scale(.88); filter: brightness(1.8); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes caption-in {
  from { opacity: 0; transform: translateY(1dvh); }
  to { opacity: 1; transform: none; }
}
@keyframes aura-spin { to { transform: rotate(1turn); } }
@keyframes aura-pulse { 50% { opacity: .55; transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .relief-frame, .relief-frame::before, .relief-frame::after, .relief-show figcaption > * { animation: none; }
}

.close {
  position: absolute;
  top: calc(2dvh + env(safe-area-inset-top)); right: calc(2dvh + env(safe-area-inset-right));
  width: max(5dvh, 36px); height: max(5dvh, 36px);
  font-size: max(3.4dvh, 24px);
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* ---------- Join ---------- */
#join {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: .6rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 6, 3, .45), rgba(8, 3, 2, .9));
  backdrop-filter: blur(1.5px);
}
#stage.joined #join { display: none; }
#join .card { max-height: 100%; overflow: auto; overscroll-behavior: contain; }
@media (orientation: landscape) and (max-height: 500px) {
  #join { padding: .3rem; }
  #join .card { max-width: 15rem; padding: .35rem .6rem; }
  #join .sub { margin-bottom: .25rem; }
  #join .field { margin-bottom: .25rem; }
  #join .note { margin-top: .15rem; }
}

.card {
  width: 100%;
  max-width: 9rem;
  background: rgba(32, 11, 5, .9);
  border: 1px solid var(--line);
  border-radius: .4rem;
  padding: .6rem;
  box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .6);
}
.card h1 {
  margin: 0 0 .15rem;
  font-family: var(--serif);
  font-size: .72rem;
  color: var(--gold);
  text-align: center;
}
.card .sub { margin: 0 0 .5rem; text-align: center; font-size: .35rem; color: #d9c9a3; }

.field { display: block; margin: 0 0 .4rem; padding: 0; border: 0; }
.field > span, .field legend {
  display: block;
  padding: 0;
  margin-bottom: .16rem;
  font-size: .3rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.field input:not([type]) , #nameInput {
  width: 100%;
  font: inherit;
  font-size: .4rem;
  color: var(--ink);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: .24rem;
  padding: .26rem .3rem;
  outline: none;
}
#nameInput:focus { border-color: var(--gold); }
#nameInput[aria-invalid="true"] { border-color: #e0785a; }
.field-error { margin: -.28rem 0 .3rem; font-size: .3rem; line-height: 1.35; color: #ffb49c; }
.field-error[hidden] { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: .2rem; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block;
  font-size: .34rem;
  padding: .18rem .34rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
}
.chips input:checked + span { background: rgba(232, 194, 106, .2); border-color: var(--gold); color: var(--gold2); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.primary {
  width: 100%;
  font: inherit;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .44rem;
  cursor: pointer;
  color: #2a0e04;
  background: linear-gradient(180deg, #f7dd9c, #d6a443);
  border: 0;
  border-radius: .26rem;
  padding: .3rem;
  margin-top: .1rem;
}
.note { margin: .3rem 0 0; font-size: .3rem; color: #bfae8a; text-align: center; }
.note a { color: var(--gold); }

/* iOS Safari zooms the page into any focused field under 16px. */
@supports (-webkit-touch-callout: none) {
  input, select { font-size: max(16px, .4rem) !important; }
}