/* ==========================================================================
   The Beholder — full-screen relic viewer. Every relic becomes a holy icon.
   Never transform/filter the <dialog>; all motion lives on inner wrappers.
   ========================================================================== */

:root:has(.beholder[open]) { overflow: hidden; }

.beholder {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: contain;
}
.beholder::backdrop { background: rgba(3, 2, 1, .96); }
.beholder[open]::backdrop { animation: beholder-fade .45s ease-out; }
.beholder[open] .beholder-stage { animation: beholder-fade .35s ease-out; }

/* --------------------------------------------------------------------------
   Stage layout
   -------------------------------------------------------------------------- */
.beholder-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'top  top  top'
    'prev fig  next'
    'cap  cap  cap'
    'ctl  ctl  ctl';
  column-gap: clamp(10px, 2.2vw, 36px);
  padding:
    max(10px, env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 45% at 50% 44%, rgba(150, 92, 18, .42), transparent 72%),
    radial-gradient(ellipse 40% 32% at 8% 10%, rgba(70, 58, 44, .38), transparent 70%),
    radial-gradient(ellipse 46% 36% at 94% 14%, rgba(64, 52, 40, .34), transparent 70%),
    radial-gradient(ellipse 34% 30% at 22% 34%, rgba(46, 36, 26, .3), transparent 70%),
    radial-gradient(ellipse 34% 30% at 80% 40%, rgba(46, 36, 26, .26), transparent 70%),
    radial-gradient(ellipse 80% 38% at 50% 108%, rgba(120, 64, 10, .5), transparent 72%),
    radial-gradient(circle at 50% 46%, #1a0f04 0%, #070402 62%, #020101 100%);
  user-select: none;
  -webkit-user-select: none;
}
/* Vignette over the heavens, under the relic. */
.beholder-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, .75) 100%);
}

.beholder-top,
.beholder-nav,
.beholder-caption,
.beholder-controls { position: relative; z-index: 3; }
.beholder-figure { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.beholder-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
.beholder-sigil {
  margin: 0;
  color: var(--gold-2);
  font: 700 .78rem/1 var(--font-head);
  letter-spacing: .42em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255, 176, 56, .5);
}
.beholder-sigil span { color: var(--gold-1); letter-spacing: 0; }
.beholder-keys {
  margin: 0 auto 0 0;
  padding-left: 1.4rem;
  color: var(--text-dim);
  font: 600 .72rem/1 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}
.beholder-keys kbd { font-size: .95em; }

.beholder-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2b1b08, #090502) padding-box, var(--gold-frame) border-box;
  color: var(--gold-1);
  cursor: pointer;
  box-shadow: 0 0 0 1px #000, 0 6px 20px rgba(0, 0, 0, .6), inset 0 0 14px rgba(255, 190, 80, .12);
  transition: transform .35s var(--ease-divine), box-shadow .3s, color .3s;
}
.beholder-close svg { width: 24px; height: 24px; }
.beholder-close:hover { transform: rotate(90deg); color: var(--gold-hi); box-shadow: 0 0 0 1px #000, var(--glow-strong); }

/* --------------------------------------------------------------------------
   Prev / next
   -------------------------------------------------------------------------- */
.beholder-nav {
  align-self: center;
  display: grid;
  place-items: center;
  width: clamp(54px, 5vw, 74px);
  height: clamp(54px, 5vw, 74px);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3a250b, #0b0603 70%) padding-box, var(--gold-frame) border-box;
  color: var(--gold-1);
  cursor: pointer;
  box-shadow: 0 0 0 1px #000, 0 0 26px rgba(255, 176, 56, .28), 0 10px 30px rgba(0, 0, 0, .7), inset 0 0 18px rgba(255, 200, 100, .14);
  transition: transform .3s var(--ease-divine), box-shadow .3s, color .3s;
}
.beholder-nav svg { width: 44%; height: 44%; }
.beholder-nav:hover { transform: scale(1.08); color: var(--gold-hi); box-shadow: 0 0 0 1px #000, var(--glow-strong); }
.beholder-nav:active { transform: scale(.96); }
.beholder-prev { grid-area: prev; }
.beholder-next { grid-area: next; }
.beholder[data-single] .beholder-nav { visibility: hidden; }

/* --------------------------------------------------------------------------
   The figure: glory behind, relic in front
   -------------------------------------------------------------------------- */
.beholder-figure {
  grid-area: fig;
  min-width: 0;
  min-height: 0;
  margin: clamp(18px, 3.6vh, 42px) 0 clamp(12px, 2.4vh, 26px);
  container-type: size;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.beholder[data-single] .beholder-figure { cursor: default; }
.beholder-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .45s var(--ease-slam);
}
.beholder-track.is-dragging { transition: none; cursor: grabbing; }

.beholder-slide {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.beholder-slide.is-leaving { z-index: -1; }

.beholder-frame {
  --pad: clamp(5px, .65vw, 9px);
  --ar: 1;
  position: relative;
  width: min(100cqw, calc((100cqh - 2 * var(--pad)) * var(--ar) + 2 * var(--pad)));
  padding: var(--pad);
  background: var(--gold-frame);
  box-shadow:
    0 0 0 1px #000,
    0 0 18px rgba(255, 214, 130, .55),
    0 0 60px rgba(255, 180, 70, .5),
    0 0 160px rgba(255, 140, 30, .35),
    0 40px 90px rgba(0, 0, 0, .8);
  pointer-events: auto;
  transition: box-shadow .6s;
}
.beholder-frame::after {
  content: '';
  position: absolute;
  inset: calc(var(--pad) - 2px);
  z-index: 2;
  border: 1px solid rgba(40, 22, 2, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, .18), inset 0 0 28px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.beholder-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: var(--ar);
  object-fit: contain;
  background: #0b0703;
  -webkit-user-drag: none;
  user-select: none;
}
.beholder-img[hidden] { display: none; }

/* Gilded corner fleurons. */
.beholder-corner {
  position: absolute;
  z-index: 3;
  width: clamp(16px, 2.2vmin, 26px);
  height: clamp(16px, 2.2vmin, 26px);
  background: var(--gold-frame);
  border: 1px solid #000;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(255, 200, 100, .7);
}
.beholder-corner::after {
  content: '';
  position: absolute;
  inset: 28%;
  background: radial-gradient(circle, #fffbe6, #e0ad45 60%, #6b440e);
  border-radius: 50%;
}
.beholder-corner-tl { top: 0; left: 0; translate: -50% -50%; }
.beholder-corner-tr { top: 0; right: 0; translate: 50% -50%; }
.beholder-corner-bl { bottom: 0; left: 0; translate: -50% 50%; }
.beholder-corner-br { bottom: 0; right: 0; translate: 50% 50%; }

.beholder-sheen {
  position: absolute;
  inset: var(--pad);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.beholder-glint {
  position: absolute;
  inset: -10% -30%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 246, 214, .12) 44%, rgba(255, 250, 230, .6) 50%, rgba(255, 246, 214, .12) 56%, transparent 62%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
}

/* The crown seal that appears over anointed relics. */
.beholder-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(54px, 7.5vmin, 80px);
  height: clamp(54px, 7.5vmin, 80px);
  translate: -50% -50%;
  border: 2px solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #4a300d, #0b0603 72%) padding-box, var(--gold-frame) border-box;
  color: var(--gold-1);
  box-shadow: 0 0 0 1px #000, 0 0 24px rgba(255, 210, 120, .85), 0 0 70px rgba(255, 160, 50, .55);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.beholder-badge svg {
  width: 62%;
  height: 62%;
  fill: url(#beholderGold);
  filter: drop-shadow(0 1px 0 #2a1703) drop-shadow(0 0 6px rgba(255, 210, 120, .9));
}
.is-anointed .beholder-badge { opacity: 1; }
.is-anointed .beholder-frame {
  box-shadow:
    0 0 0 1px #000,
    0 0 24px rgba(255, 230, 160, .8),
    0 0 80px rgba(255, 190, 80, .65),
    0 0 200px rgba(255, 150, 40, .45),
    0 40px 90px rgba(0, 0, 0, .8);
}

.beholder-lost {
  display: grid;
  place-content: center;
  gap: .6rem;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  background: radial-gradient(circle at 50% 40%, #2a1a08, #0b0703 70%);
  color: var(--text-dim);
  font: italic 600 clamp(1rem, 2.4vmin, 1.4rem)/1.3 var(--font-body);
  text-align: center;
}
.beholder-lost-crown { font-size: 3em; line-height: 1; color: var(--gold-4); transform: rotate(-14deg); }

/* Loading: the halo breathes faster while a relic is summoned from the vault. */
.is-loading .glory-halo { animation-duration: 1.2s; }

/* --------------------------------------------------------------------------
   Glory: sunburst, halo, inscribed ring, summoning flare
   -------------------------------------------------------------------------- */
.beholder-glory {
  --rays: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.beholder-glory > * { position: absolute; }

.glory-burst { top: 0; left: 0; width: 0; height: 0; }
.glory-rays {
  position: absolute;
  top: -80vmax;
  left: -80vmax;
  width: 160vmax;
  height: 160vmax;
  border-radius: 50%;
  opacity: var(--rays);
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 214, 120, 0) 0deg,
    rgba(255, 220, 140, .5) 2.2deg,
    rgba(255, 214, 120, 0) 4.4deg,
    rgba(255, 214, 120, 0) 11.25deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .7) 26%, rgba(0, 0, 0, .25) 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .7) 26%, rgba(0, 0, 0, .25) 58%, transparent 100%);
  animation: glory-spin 150s linear infinite;
  will-change: transform;
}
.glory-rays-broad {
  background: repeating-conic-gradient(from 4deg,
    rgba(255, 170, 60, 0) 0deg,
    rgba(255, 186, 80, .32) 7deg,
    rgba(255, 170, 60, 0) 14deg,
    rgba(255, 170, 60, 0) 24deg);
  animation-duration: 240s;
  animation-direction: reverse;
}
.glory-rays-fine {
  background: repeating-conic-gradient(from 2deg,
    rgba(255, 246, 214, 0) 0deg,
    rgba(255, 246, 214, .5) .6deg,
    rgba(255, 246, 214, 0) 1.2deg,
    rgba(255, 246, 214, 0) 7.2deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .5) 22%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .5) 22%, transparent 70%);
  animation-duration: 90s;
}

.glory-halo {
  top: -75cqmin;
  left: -75cqmin;
  width: 150cqmin;
  height: 150cqmin;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 248, 222, .95) 0%,
    rgba(255, 222, 140, .7) 22%,
    rgba(255, 176, 64, .32) 48%,
    rgba(255, 140, 30, .1) 72%,
    transparent 100%);
  animation: glory-breathe 6s ease-in-out infinite;
}

.glory-ring {
  top: -60cqmin;
  left: -60cqmin;
  width: 120cqmin;
  height: 120cqmin;
}
.glory-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: glory-spin 120s linear infinite reverse;
}
.glory-ring .ring-line {
  fill: none;
  stroke: rgba(255, 214, 120, .55);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(255, 190, 80, .9));
}
.glory-ring .ring-line-thin { stroke-width: 1; stroke-dasharray: 2 6; stroke: rgba(255, 226, 150, .6); }
.glory-ring text {
  fill: rgba(255, 220, 140, .78);
  font: 700 15px var(--font-head);
  letter-spacing: 3px;
}

.glory-point {
  top: -14px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, rgba(255, 244, 210, .95) 46%, rgba(255, 200, 100, 0) 72%);
  box-shadow: 0 0 30px 14px rgba(255, 236, 190, .9), 0 0 90px 50px rgba(255, 180, 70, .55);
  opacity: 0;
}
.glory-bloom {
  top: -90vmax;
  left: -90vmax;
  width: 180vmax;
  height: 180vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 240, 1) 0%, rgba(255, 236, 180, .85) 18%, rgba(255, 190, 90, .4) 40%, transparent 70%);
  opacity: 0;
}
.glory-shock {
  top: -25cqmin;
  left: -25cqmin;
  width: 50cqmin;
  height: 50cqmin;
  border-radius: 50%;
  border: 3px solid rgba(255, 240, 200, .95);
  box-shadow: 0 0 30px rgba(255, 210, 120, .9), inset 0 0 30px rgba(255, 210, 120, .7);
  opacity: 0;
}
.glory-flare { top: 0; left: 0; width: 0; height: 0; }
.glory-flare span {
  position: absolute;
  top: -3px;
  left: -110vmax;
  width: 220vmax;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 120, .2) 20%, rgba(255, 240, 200, .9) 47%, #fff 50%, rgba(255, 240, 200, .9) 53%, rgba(255, 210, 120, .2) 80%, transparent);
  box-shadow: 0 0 24px 6px rgba(255, 210, 120, .55);
  opacity: 0;
}
.glory-flare span + span { top: -40px; height: 80px; background: radial-gradient(closest-side, rgba(255, 220, 150, .5), transparent); box-shadow: none; }

/* Intensity, as set by the altar. */
body[data-intensity='mild'] .beholder-glory { --rays: .55; }
body[data-intensity='biblical'] .glory-rays { animation-duration: 60s; }
body[data-intensity='biblical'] .glory-rays-broad { animation-duration: 90s; }
body[data-intensity='biblical'] .glory-rays-fine { animation-duration: 36s; }

/* Rising motes of gold. */
.beholder-motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.beholder-motes span {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffe7a8;
  box-shadow: 0 0 8px 2px rgba(255, 170, 60, .8);
  opacity: 0;
  animation: beholder-mote var(--d) linear var(--delay) infinite;
}

/* --------------------------------------------------------------------------
   Caption & controls
   -------------------------------------------------------------------------- */
.beholder-caption {
  grid-area: cap;
  min-width: 0;
  text-align: center;
}
/* A pool of shadow so the inscription stays legible over the blaze. */
.beholder-caption::before {
  content: '';
  position: absolute;
  inset: -10% -4% -30%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(5, 3, 1, .78), rgba(5, 3, 1, .4) 55%, transparent 80%);
  pointer-events: none;
}
.beholder-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: min(32em, 100%);
  margin: 0 auto;
  padding: .06em .2em .12em;
  font: 900 clamp(1.25rem, 3.1vw, 2.6rem)/1.14 var(--font-display);
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.beholder-meta {
  margin: .3em 0 0;
  color: var(--text-dim);
  font: 600 clamp(.68rem, 1.3vw, .84rem)/1.4 var(--font-head);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.beholder-sep { margin: 0 .8em; color: var(--gold-2); }
.beholder-count { color: var(--gold-1); }

.beholder-controls {
  grid-area: ctl;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding-top: clamp(10px, 2vh, 20px);
}
.beholder-controls .btn { min-height: 50px; }
.beholder-icon { display: inline-grid; }
.beholder-icon svg { width: 1.15em; height: 1.15em; }
.beholder-anoint-crown { font-size: 1.35em; line-height: 0; transition: transform .4s var(--ease-slam), text-shadow .4s; }
.beholder-anoint[aria-pressed='true'] {
  background: linear-gradient(180deg, #ffeeb0 0%, #e2b04c 42%, #9a6418 56%, #f0c35a 100%) padding-box, linear-gradient(#fff6d0, #5c3a0c) border-box;
  color: #2a1703;
  text-shadow: 0 1px 0 rgba(255, 244, 210, .6);
  box-shadow: 0 0 0 1px #000, var(--glow-strong);
}
.beholder-anoint[aria-pressed='true'] .beholder-anoint-crown { transform: scale(1.15) rotate(-8deg); }

.beholder-banish {
  min-height: 44px;
  margin-left: .4rem;
  padding: .3em .6em;
  border: 0;
  background: none;
  color: rgba(185, 162, 117, .62);
  font: 600 .74rem/1.2 var(--font-head);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(107, 68, 14, .8);
  text-underline-offset: .35em;
  cursor: pointer;
  transition: color .3s, text-shadow .3s;
}
.beholder-banish:hover { color: var(--danger); text-decoration-color: var(--danger); text-shadow: 0 0 14px rgba(255, 106, 69, .6); }
.beholder-banish[aria-disabled='true'] { opacity: .45; cursor: progress; }

/* --------------------------------------------------------------------------
   Banishment
   -------------------------------------------------------------------------- */
.beholder-verdict {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: -.6em 0 0;
  font: 900 clamp(2.4rem, 9vw, 6.5rem)/1.2 var(--font-display);
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  color: #ffd9b8;
  text-shadow: 0 0 10px #ff6a45, 0 0 40px rgba(255, 90, 30, .9), 0 0 90px rgba(255, 60, 10, .7), 0 4px 0 #2a0a02;
  opacity: 0;
  pointer-events: none;
}
.beholder-burn {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(0deg, transparent 0%, rgba(150, 26, 4, .5) 22%, rgba(255, 104, 26, .85) 40%, rgba(255, 238, 190, 1) 50%, rgba(255, 170, 70, .55) 57%, transparent 68%);
  mix-blend-mode: hard-light;
  transform: translateY(100%);
}
.beholder-ash {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes beholder-fade { from { opacity: 0; } }
@keyframes glory-spin { to { transform: rotate(1turn); } }
@keyframes glory-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes beholder-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .9; }
  70% { opacity: .6; }
  100% { transform: translate(40px, -105vh); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .beholder-stage {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'top  top  top'
      'fig  fig  fig'
      'cap  cap  cap'
      'prev ctl  next';
    column-gap: 8px;
  }
  .beholder-top { min-height: 52px; }
  .beholder-keys { display: none; }
  .beholder-close { width: 48px; height: 48px; }
  .beholder-nav {
    align-self: start;
    width: 52px;
    height: 52px;
    margin-top: clamp(10px, 2vh, 20px);
  }
  .beholder-controls { gap: .5rem; }
  .beholder-controls .btn {
    min-height: 52px;
    padding: .9em 1.05em;
    font-size: .72rem;
    letter-spacing: .12em;
  }
  .beholder-open {
    order: 3;
    min-height: 44px !important;
    padding: .3em .6em !important;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--text-dim);
    text-decoration: underline;
    text-decoration-color: var(--gold-4);
    text-underline-offset: .35em;
  }
  .beholder-open::after { display: none; }
  .beholder-open .beholder-icon { display: none; }
  .beholder-banish { order: 4; margin-left: 0; }
  .beholder-title { -webkit-line-clamp: 2; line-clamp: 2; font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
}

/* Phones on their side: everything in one tight band. */
@media (max-height: 520px) {
  .beholder-stage { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .beholder-top { min-height: 44px; }
  .beholder-sigil, .beholder-keys { display: none; }
  .beholder-close { width: 44px; height: 44px; }
  .beholder-figure { margin: 6px 0 4px; }
  .beholder-title { -webkit-line-clamp: 1; line-clamp: 1; font-size: 1.1rem; }
  .beholder-controls { padding-top: 6px; }
  .beholder-controls .btn { min-height: 44px; padding: .7em 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .glory-rays,
  .glory-ring svg,
  .glory-halo { animation: none; }
  .beholder-motes { display: none; }
  .beholder-track { transition: none; }
}