/* The Scholar's Ascent: Spooky Virtual Escape Room */

:where(.ser-game, .ser-root, .ser-shell, [class^="ser-"][role="dialog"], [class*=" ser-"][role="dialog"]) {
  --ser-ink: #f8f1df;
  --ser-ink-muted: #c9c1d5;
  --ser-night: #0b0a12;
  --ser-night-raised: #12101d;
  --ser-night-soft: #1a1728;
  --ser-parchment: #f1e3c3;
  --ser-parchment-deep: #d5bd8f;
  --ser-parchment-ink: #251d1b;
  --ser-accent: #78e2c4;
  --ser-accent-dim: #24594f;
  --ser-danger: #ff6f75;
  --ser-success: #8ff0b0;
  --ser-shadow: 0 28px 80px rgb(0 0 0 / 72%);
  --ser-border: rgb(255 255 255 / 14%);
  color-scheme: dark;
  font-family: Outfit, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:where(.ser-game, .ser-game *, .ser-root, .ser-root *, .ser-shell, .ser-shell *, [class^="ser-modal"], [class^="ser-modal"] *, [class^="ser-q-"], [class^="ser-q-"] *, [class^="ser-inspection"], [class^="ser-inspection"] *, [class^="ser-lock"], [class^="ser-lock"] *) {
  box-sizing: border-box;
}

.ser-inspect-backdrop,
.ser-inspect-backdrop * {
  box-sizing: border-box;
}

:where(.ser-game, .ser-root, .ser-shell) {
  position: relative;
  min-block-size: 100%;
  overflow: hidden;
  color: var(--ser-ink);
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--ser-accent) 13%, transparent), transparent 34rem),
    linear-gradient(155deg, #151226 0%, var(--ser-night) 48%, #07060c 100%);
  isolation: isolate;
}

:where(.ser-game button, .ser-root button, .ser-shell button, [class^="ser-"] button, [class*=" ser-"] button, .ser-button) {
  min-block-size: 44px;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #ffffff 8%);
  border-radius: 0.65rem;
  padding: 0.62rem 0.95rem;
  color: var(--ser-ink);
  font: 700 0.95rem/1.15 Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.025em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ser-accent-dim) 72%, #252139), #13111d);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 5px 15px rgb(0 0 0 / 28%);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

:where(.ser-game button, .ser-root button, .ser-shell button, [class^="ser-"] button, [class*=" ser-"] button):hover:not(:disabled) {
  border-color: var(--ser-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 0 18px color-mix(in srgb, var(--ser-accent) 32%, transparent);
}

:where(.ser-game button, .ser-root button, .ser-shell button, [class^="ser-"] button, [class*=" ser-"] button):active:not(:disabled) {
  transform: translateY(1px);
}

:where(.ser-game button, .ser-game input, .ser-game [tabindex], .ser-root button, .ser-root input, .ser-root [tabindex], [class^="ser-"] button, [class^="ser-"] input, [class^="ser-"][tabindex], [class*=" ser-"] button, [class*=" ser-"] input, [class*=" ser-"][tabindex]):focus-visible {
  outline: 3px solid #fff2a8;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ser-accent) 45%, transparent);
}

:where(.ser-game button, .ser-root button, .ser-shell button, [class^="ser-"] button, [class*=" ser-"] button):disabled {
  color: #aaa4b5;
  border-color: rgb(255 255 255 / 10%);
  background: #252231;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

.ser-visually-hidden,
.ser-sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header and room progress */

.ser-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  min-block-size: 4.5rem;
  padding: 0.75rem clamp(0.8rem, 2.4vw, 2rem);
  border-block-end: 1px solid var(--ser-border);
  background: linear-gradient(180deg, rgb(18 16 30 / 97%), rgb(9 8 16 / 93%));
  box-shadow: 0 10px 30px rgb(0 0 0 / 38%);
  backdrop-filter: blur(16px);
}

:where(.ser-header-brand, .ser-brand, .ser-title-group) {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.75rem;
}

:where(.ser-header-copy, .ser-title-copy) {
  min-inline-size: 0;
}

:where(.ser-kicker, .ser-eyebrow, .ser-presented-by) {
  margin: 0 0 0.15rem;
  color: var(--ser-accent);
  font-size: clamp(0.67rem, 1.3vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

:where(.ser-game-title, .ser-header-title) {
  margin: 0;
  overflow: hidden;
  color: #fff8e8;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.ser-room-name, .ser-room-title) {
  color: var(--ser-ink-muted);
  font-size: 0.88rem;
  font-weight: 650;
}

:where(.ser-logo-chip, .ser-brand-chip) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-block-size: 2.6rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #c7ab70;
  border-radius: 0.6rem;
  color: #281d16;
  background: #fff8e8;
  box-shadow: 0 0 18px rgb(242 213 143 / 17%);
}

:where(.ser-logo-chip img, .ser-brand-chip img) {
  display: block;
  inline-size: auto;
  max-inline-size: 7.25rem;
  block-size: 2rem;
  object-fit: contain;
}

:where(.ser-header-actions, .ser-header-controls, .ser-hud) {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

:where(.ser-header-action, .ser-icon-button, .ser-hud-button) {
  display: inline-grid;
  min-inline-size: 44px;
  place-items: center;
  padding-inline: 0.7rem;
}

:where(.ser-progress, .ser-room-progress, .ser-hud-stat) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--ser-border);
  border-radius: 999px;
  color: #ece5f4;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgb(255 255 255 / 5%);
}

/* Objective tracker — the "what do I do next" line under the room name. */
.ser-objective {
  margin: 0.2rem 0 0;
  color: color-mix(in srgb, var(--ser-accent) 55%, #cfc6d6 45%);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
}

/* Discovered-clue panel inside every lock modal. */
.ser-lock-clues {
  padding: 0.9rem clamp(1.1rem, 4vw, 2rem);
  border-block-end: 1px solid var(--ser-border);
  background: color-mix(in srgb, var(--ser-accent) 6%, transparent);
}

.ser-lock-clues-empty {
  margin: 0.4rem 0 0;
  color: #b8aec6;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
}

.ser-lock-clue-list {
  margin: 0.4rem 0 0;
  padding-inline-start: 1.1rem;
}

.ser-lock-clue {
  margin: 0.35rem 0;
  color: #e8dff2;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ser-lock-clue::marker {
  content: "◆ ";
  color: var(--ser-accent);
}

/* First-run tutorial — three steps, one card. */
.ser-tutorial-backdrop {
  z-index: 70;
}

.ser-tutorial {
  inline-size: min(38rem, 100%);
  padding: clamp(1.4rem, 5vw, 2.2rem);
}

.ser-tutorial-title {
  margin: 0 0 1rem;
  color: #2b201d;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 850;
}

.ser-tutorial-steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ser-tutorial-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.ser-tutorial-icon {
  display: grid;
  flex: 0 0 auto;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  place-items: center;
  border: 1.5px solid #a8874d;
  border-radius: 0.7rem;
  color: #6d4f22;
  font-size: 1.25rem;
  background: #fdf6e4;
}

.ser-tutorial-step-title {
  margin: 0 0 0.2rem;
  color: #2b201d;
  font-size: 1.02rem;
  font-weight: 800;
}

.ser-tutorial-step-body {
  margin: 0;
  color: #4c3f38;
  font-size: 0.94rem;
  line-height: 1.55;
}

.ser-tutorial-begin {
  display: block;
  inline-size: 100%;
  margin-block-start: 1.3rem;
  padding: 0.85rem 1.2rem;
  border: 0;
  border-radius: 0.7rem;
  color: #1a1024;
  font: 800 1.02rem/1 inherit;
  font-family: inherit;
  background: #f2bb67;
  cursor: pointer;
}

.ser-tutorial-begin:focus-visible {
  outline: 3px solid #6d4f22;
  outline-offset: 3px;
}

/* Mobile pan hint (visible only in the narrow-screen media query). */
.ser-pan-hint {
  display: none;
}

/* Haunt meter — the chamber clock. Calm, then uneasy, then haunted. */
.ser-haunt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--ser-border);
  border-radius: 999px;
  color: #cfc6d6;
  font: 700 0.85rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  background: rgb(255 255 255 / 5%);
  transition: color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.ser-haunt::before {
  content: "🕯";
  font-size: 0.95rem;
}

.ser-haunt--uneasy {
  border-color: color-mix(in srgb, #e0a33c 55%, transparent);
  color: #f2cf8d;
  box-shadow: 0 0 12px rgb(224 163 60 / 22%);
}

.ser-haunt--uneasy::before {
  content: "👁";
}

.ser-haunt--haunted {
  border-color: color-mix(in srgb, #ff5d6c 62%, transparent);
  color: #ffb1b9;
  box-shadow: 0 0 16px rgb(255 93 108 / 30%);
  animation: ser-haunt-throb 1.6s ease-in-out infinite;
}

.ser-haunt--haunted::before {
  content: "💀";
}

@keyframes ser-haunt-throb {
  0%, 100% { box-shadow: 0 0 10px rgb(255 93 108 / 22%); }
  50% { box-shadow: 0 0 22px rgb(255 93 108 / 44%); }
}

/* Immersive, letterboxed 16:9 scene */

:where(.ser-main, .ser-play-area, .ser-stage-shell) {
  position: relative;
  display: grid;
  min-block-size: calc(100dvh - 4.5rem);
  place-items: center;
  padding: clamp(0.65rem, 2.2vw, 2rem);
  background:
    radial-gradient(ellipse at center, rgb(47 39 74 / 34%), transparent 62%),
    #06050b;
}

:where(.ser-stage-wrap, .ser-stage-frame) {
  position: relative;
  inline-size: min(100%, calc((100dvh - 8.5rem) * 16 / 9));
  max-inline-size: 1600px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 36%, #fff 6%);
  border-radius: clamp(0.65rem, 1.4vw, 1.15rem);
  background: #040309;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 75%), 0 0 48px color-mix(in srgb, var(--ser-accent) 14%, transparent), var(--ser-shadow);
}

.ser-stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #06050b;
}

:where(.ser-stage > svg, .ser-room-svg, .ser-stage-svg) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

:where(.ser-hotspot-layer, .ser-hotspots) {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Hit area is generous but visually silent — the object itself carries the
   cue via a small anchored sigil marker plus a soft reveal on hover/focus. */
.ser-hotspot {
  --ser-hotspot-color: var(--ser-accent);
  pointer-events: auto;
  cursor: pointer;
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 200ms ease, stroke 200ms ease;
}

.ser-hotspot-group:hover .ser-hotspot,
.ser-hotspot-group:focus-visible .ser-hotspot {
  fill: color-mix(in srgb, var(--ser-hotspot-color) 8%, transparent);
  stroke: color-mix(in srgb, var(--ser-hotspot-color) 55%, #fff 12%);
  stroke-dasharray: 3 6;
}

.ser-hotspot-group:focus-visible {
  outline: none;
}

.ser-hotspot-group[aria-disabled="true"] .ser-hotspot,
.ser-hotspot.is-locked,
.ser-hotspot.ser-locked {
  cursor: not-allowed;
}

.ser-hotspot-marker {
  pointer-events: none;
}

.ser-marker-halo {
  fill: transparent;
  stroke: color-mix(in srgb, var(--ser-accent) 55%, #fff 10%);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: ser-marker-breathe 2.8s ease-in-out infinite;
}

.ser-marker-gem {
  fill: color-mix(in srgb, var(--ser-accent) 30%, #0c0a14 55%);
  stroke: color-mix(in srgb, var(--ser-accent) 85%, #fff 20%);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ser-accent) 65%, transparent));
}

.ser-marker-spark {
  fill: #fff6dc;
  opacity: 0.95;
}

.ser-hotspot-marker--inspect .ser-marker-gem {
  fill: color-mix(in srgb, #d8cfbe 22%, #0c0a14 60%);
  stroke: color-mix(in srgb, #e8ddc4 75%, var(--ser-accent) 25%);
}

.ser-hotspot-marker--exit .ser-marker-gem {
  fill: color-mix(in srgb, #7ee2a8 26%, #0c0a14 55%);
  stroke: #9af0c0;
}

.ser-hotspot-group--locked .ser-hotspot-marker {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.ser-hotspot-group--solved .ser-hotspot-marker {
  opacity: 0.3;
}

.ser-hotspot-group:hover .ser-marker-halo,
.ser-hotspot-group:focus-visible .ser-marker-halo {
  opacity: 1;
  stroke: #fff2a8;
}

@keyframes ser-marker-breathe {
  0%, 100% { transform: scale(0.82); opacity: 0.4; }
  50% { transform: scale(1.12); opacity: 0.85; }
}

/* Journal drawer and hint panel */

:where(.ser-journal, .ser-hint-panel, .ser-hints) {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 45;
  display: flex;
  inline-size: min(25rem, 92vw);
  flex-direction: column;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #fff 6%);
  color: var(--ser-ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ser-accent-dim) 17%, transparent), transparent 18rem),
    rgb(12 10 20 / 98%);
  box-shadow: -24px 0 70px rgb(0 0 0 / 62%);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(103%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 260ms linear;
}

:where(.ser-journal.is-open, .ser-journal.ser-open, .ser-journal[data-open="true"], .ser-hint-panel.is-open, .ser-hint-panel.ser-open, .ser-hint-panel[data-open="true"], .ser-hints.is-open) {
  transform: translateX(0);
  visibility: visible;
}

:where(.ser-journal-header, .ser-hint-header, .ser-panel-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--ser-border);
}

:where(.ser-journal-title, .ser-hint-title, .ser-panel-title) {
  margin: 0;
  color: #fff3d3;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  letter-spacing: 0.02em;
}

:where(.ser-journal-list, .ser-clue-list, .ser-hint-list, .ser-fragment-list) {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

:where(.ser-journal-item, .ser-clue-item, .ser-hint-item, .ser-fragment-item) {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-inline-start: 3px solid var(--ser-accent);
  border-radius: 0.55rem;
  color: #e8e0ed;
  line-height: 1.52;
  background: rgb(255 255 255 / 4%);
}

:where(.ser-journal-empty, .ser-hint-empty, .ser-empty-state) {
  margin: auto 0;
  padding: 2rem 1rem;
  color: var(--ser-ink-muted);
  line-height: 1.55;
  text-align: center;
}

/* Toasts, loading, room interstitials, and victory */

.ser-toast {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  z-index: 80;
  max-inline-size: min(36rem, calc(100vw - 2rem));
  padding: 0.8rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 55%, #fff 8%);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  background: rgb(15 13 24 / 96%);
  box-shadow: 0 8px 35px rgb(0 0 0 / 55%), 0 0 18px color-mix(in srgb, var(--ser-accent) 22%, transparent);
  transform: translateX(-50%);
  animation: ser-toast-in 220ms ease-out both;
}

:where(.ser-toast-success, .ser-toast.is-success) { border-color: var(--ser-success); }
:where(.ser-toast-error, .ser-toast.is-error) { border-color: var(--ser-danger); }

@keyframes ser-toast-in {
  from { opacity: 0; transform: translate(-50%, 0.65rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

:where(.ser-loading, .ser-loading-splash, .ser-intro, .ser-room-intro, .ser-epilogue, .ser-room-epilogue, .ser-victory) {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  min-block-size: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  color: var(--ser-ink);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ser-accent) 19%, transparent), transparent 28rem),
    rgb(6 5 11 / 97%);
  backdrop-filter: blur(10px);
}

:where(.ser-loading-card, .ser-splash-card, .ser-intro-card, .ser-room-card, .ser-epilogue-card, .ser-victory-card, .ser-certificate) {
  position: relative;
  inline-size: min(42rem, 100%);
  padding: clamp(1.4rem, 5vw, 3rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #ecd8aa 20%);
  border-radius: 1rem;
  color: var(--ser-parchment-ink);
  text-align: center;
  background:
    linear-gradient(rgb(255 255 255 / 23%) 1px, transparent 1px),
    radial-gradient(circle at 48% 20%, #fff8e6, transparent 58%),
    var(--ser-parchment);
  background-size: 100% 9px, auto, auto;
  box-shadow: inset 0 0 0 4px rgb(79 51 31 / 13%), var(--ser-shadow);
}

:where(.ser-loading-title, .ser-splash-title) {
  color: #fff4d2;
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 850;
  letter-spacing: 0.035em;
  line-height: 0.98;
  text-align: center;
  text-shadow: 0 0 14px var(--ser-accent), 0 4px 0 #05040a;
  animation: ser-title-flicker 2.8s steps(1, end) infinite;
}

@keyframes ser-title-flicker {
  0%, 18%, 22%, 58%, 63%, 100% { opacity: 1; }
  20%, 60% { opacity: 0.67; }
  61% { opacity: 0.34; }
}

:where(.ser-intro-card h1, .ser-intro-card h2, .ser-epilogue-card h1, .ser-epilogue-card h2, .ser-victory-card h1, .ser-certificate h1, .ser-room-card h1, .ser-room-card h2) {
  margin: 0 0 0.75rem;
  color: #2d2019;
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.05;
}

:where(.ser-intro-card p, .ser-epilogue-card p, .ser-victory-card p, .ser-certificate p, .ser-room-card p) {
  color: #46352e;
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  line-height: 1.62;
}

:where(.ser-victory-stats, .ser-certificate-stats) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.5rem 0;
}

:where(.ser-victory-stat, .ser-certificate-stat) {
  padding: 0.8rem 0.45rem;
  border: 1px solid rgb(62 44 31 / 22%);
  border-radius: 0.65rem;
  color: #30221c;
  background: rgb(255 255 255 / 34%);
}

:where(.ser-victory-logo, .ser-certificate-logo) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.55rem;
  background: #fffaf0;
}

:where(.ser-victory-logo img, .ser-certificate-logo img) {
  max-inline-size: 10rem;
  max-block-size: 3.25rem;
}

/* Shared modal chrome */

:where(.ser-modal-backdrop, .ser-modal-overlay, .ser-q-backdrop, .ser-q-overlay, .ser-inspection-backdrop, .ser-inspection-overlay, .ser-lock-backdrop, .ser-lock-overlay) {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  min-block-size: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgb(3 2 8 / 83%);
  backdrop-filter: blur(10px) saturate(0.75);
  animation: ser-fade-in 180ms ease-out both;
}

:where(.ser-modal, .ser-modal-card, .ser-dialog, .ser-q-modal, .ser-q-card, .ser-q-dialog, .ser-inspection-modal, .ser-inspection-card, .ser-inspection-dialog, .ser-lock-modal, .ser-lock-card, .ser-lock-dialog) {
  position: relative;
  inline-size: min(47rem, 100%);
  max-block-size: min(55rem, calc(100dvh - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 38%, #ead5a5 24%);
  border-radius: 1rem;
  color: var(--ser-parchment-ink);
  background:
    radial-gradient(circle at 50% -25%, rgb(255 255 255 / 65%), transparent 50%),
    linear-gradient(102deg, transparent 0 48%, rgb(99 69 43 / 5%) 49% 51%, transparent 52%),
    var(--ser-parchment);
  box-shadow: inset 0 0 0 4px rgb(67 44 27 / 14%), var(--ser-shadow);
  animation: ser-modal-rise 210ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

:where(.ser-modal-close, .ser-q-close, .ser-inspection-close, .ser-lock-close) {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 3;
  display: grid;
  min-inline-size: 44px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #2a2230;
}

:where(.ser-modal-header, .ser-q-header, .ser-inspection-header, .ser-lock-header) {
  padding: clamp(1.25rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem) 1rem;
  border-block-end: 1px solid rgb(63 43 30 / 19%);
}

:where(.ser-modal-title, .ser-q-title, .ser-inspection-title, .ser-lock-title) {
  margin: 0;
  padding-inline-end: 3rem;
  color: #2b201d;
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 850;
  line-height: 1.12;
}

:where(.ser-modal-body, .ser-q-body, .ser-inspection-body, .ser-lock-body) {
  padding: clamp(1.1rem, 4vw, 2rem);
}

:where(.ser-modal-actions, .ser-q-actions, .ser-inspection-actions, .ser-lock-actions, .ser-lock-controls) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem clamp(1.1rem, 4vw, 2rem) clamp(1.1rem, 4vw, 1.5rem);
  border-block-start: 1px solid rgb(63 43 30 / 19%);
}

:where(.ser-modal button, .ser-modal-card button, .ser-dialog button, .ser-q-modal button, .ser-q-card button, .ser-inspection-modal button, .ser-inspection-card button, .ser-lock-modal button, .ser-lock-card button) {
  color: #fff;
}

@keyframes ser-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ser-modal-rise {
  from { opacity: 0; transform: translateY(1rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scholar question overlay */

:where(.ser-q-modal, .ser-q-card, .ser-q-dialog) {
  inline-size: min(46rem, 100%);
  opacity: 1;
  background:
    radial-gradient(circle at 50% -25%, rgb(255 255 255 / 72%), transparent 52%),
    #f1e3c3;
  isolation: isolate;
}

.ser-q-header {
  padding-inline-end: 4rem;
  color: #392b23;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

:where(.ser-q-diagram, .ser-q-diagram-wrap) {
  display: grid;
  margin-block-end: 1.15rem;
  padding: 0.75rem;
  place-items: center;
  overflow: auto;
  border: 1px solid rgb(62 43 30 / 20%);
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 38%);
}

:where(.ser-q-diagram svg, .ser-q-diagram-wrap svg) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

:where(.ser-q-prompt, .ser-q-question) {
  margin: 0 0 1.1rem;
  color: #281e1a;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight: 650;
  line-height: 1.62;
}

:where(.ser-q-prompt .katex-display, .ser-q-question .katex-display, .ser-q-choice .katex-display) {
  max-inline-size: 100%;
  margin: 0.75rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}

:where(.ser-q-choices, .ser-q-options) {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(.ser-q-choice, .ser-q-option) {
  display: flex;
  inline-size: 100%;
  min-block-size: 3.25rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  color: #fff;
  line-height: 1.4;
  text-align: start;
}

:where(.ser-q-choice[aria-pressed="true"], .ser-q-choice.is-selected, .ser-q-option[aria-selected="true"]) {
  border-color: #fff2a8;
  background: color-mix(in srgb, var(--ser-accent-dim) 86%, #2b1f35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ser-accent) 34%, transparent);
}

:where(.ser-q-field, .ser-q-input-wrap) {
  display: grid;
  gap: 0.45rem;
}

:where(.ser-q-label, .ser-field-label) {
  color: #3a2c26;
  font-size: 0.9rem;
  font-weight: 800;
}

:where(.ser-q-input, .ser-q-field input) {
  inline-size: 100%;
  min-block-size: 3rem;
  border: 2px solid #725d4a;
  border-radius: 0.55rem;
  padding: 0.65rem 0.8rem;
  color: #171118;
  font: 700 1.05rem/1.2 Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  background: #fffdf7;
}

:where(.ser-q-hint-button, .ser-q-hint-link) {
  min-block-size: 44px;
  padding-inline: 0.25rem;
  border-color: transparent;
  color: #4b245e !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: transparent;
  box-shadow: none;
}

:where(.ser-q-hint, .ser-q-hint-text) {
  margin-block-start: 0.9rem;
  padding: 0.8rem 0.9rem;
  border-inline-start: 4px solid var(--ser-accent-dim);
  border-radius: 0.35rem;
  color: #34262e;
  font-style: italic;
  line-height: 1.5;
  background: rgb(255 255 255 / 36%);
}

:where(.ser-q-feedback, .ser-q-status) {
  min-block-size: 1.5rem;
  margin: 0.65rem 0 0;
  color: #3c2f29;
  font-weight: 800;
}

:where(.ser-q-correct, .ser-q-card.is-correct, .ser-q-dialog.is-correct) {
  animation: ser-correct-flash 420ms ease both;
}

:where(.ser-q-wrong, .ser-q-shake, .ser-q-card.is-wrong, .ser-q-dialog.is-wrong) {
  animation: ser-shake 340ms ease-in-out;
}

@keyframes ser-correct-flash {
  0%, 100% { box-shadow: inset 0 0 0 4px rgb(67 44 27 / 14%), var(--ser-shadow); }
  45% { box-shadow: inset 0 0 0 6px var(--ser-success), 0 0 45px rgb(91 255 149 / 55%), var(--ser-shadow); }
}

@keyframes ser-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-0.55rem); }
  40% { transform: translateX(0.48rem); }
  60% { transform: translateX(-0.32rem); }
  80% { transform: translateX(0.18rem); }
}

/* Zoomed inspection */

:where(.ser-inspection-modal, .ser-inspection-card, .ser-inspection-dialog) {
  inline-size: min(70rem, 100%);
  color: var(--ser-ink);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ser-accent) 11%, transparent), transparent 45%),
    #100e19;
}

:where(.ser-inspection-header, .ser-inspection-plaque, .ser-inspection-title-plaque) {
  color: #2b201a;
  background: linear-gradient(180deg, #f6e8c8, #d7bf91);
}

:where(.ser-inspection-title, .ser-inspection-plaque h2, .ser-inspection-title-plaque h2) {
  color: #2b201a;
}

:where(.ser-inspection-body, .ser-inspection-stage, .ser-inspection-art) {
  display: grid;
  gap: 1rem;
  place-items: center;
}

:where(.ser-inspection-stage, .ser-inspection-art, .ser-inspection-svg-wrap) {
  inline-size: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #fff 8%);
  border-radius: 0.7rem;
  background: #05040a;
  box-shadow: inset 0 0 34px rgb(0 0 0 / 62%);
}

:where(.ser-inspection-stage svg, .ser-inspection-art svg, .ser-inspection-svg, .ser-inspection-svg-wrap svg) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
}

:where(.ser-inspection-ribbon, .ser-clue-ribbon) {
  position: relative;
  display: grid;
  inline-size: min(35rem, 94%);
  min-block-size: 4rem;
  margin: 0.25rem auto 0;
  padding: 0.85rem 3.25rem 0.85rem 1rem;
  place-items: center;
  border: 1px solid #d3b46b;
  border-radius: 0.45rem;
  color: #fff6dc;
  line-height: 1.45;
  text-align: center;
  background: linear-gradient(90deg, #49273c, #723853 50%, #49273c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 8px 25px rgb(0 0 0 / 42%);
  transform-origin: center top;
}

:where(.ser-inspection-ribbon::after, .ser-clue-ribbon::after) {
  content: "✦";
  position: absolute;
  inset-inline-end: 0.75rem;
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  place-items: center;
  border: 2px solid #efce7a;
  border-radius: 50%;
  color: #ffdda0;
  background: #401722;
  box-shadow: 0 0 0 3px rgb(68 18 31 / 45%);
}

:where(.ser-inspection-ribbon.is-revealed, .ser-inspection-ribbon.ser-revealed, .ser-inspection-ribbon[data-revealed="true"], .ser-clue-ribbon.is-open, .ser-clue-ribbon[data-open="true"]) {
  min-block-size: 5.25rem;
  color: #291f1d;
  background: linear-gradient(90deg, #caa96f, #f4dfaa 50%, #caa96f);
  animation: ser-ribbon-unfurl 480ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

:where(.ser-inspection-clue, .ser-clue-text) {
  margin: 0;
  color: inherit;
  font-weight: 650;
}

@keyframes ser-ribbon-unfurl {
  from { opacity: 0.35; transform: scaleX(0.2) rotateX(-62deg); }
  to { opacity: 1; transform: scaleX(1) rotateX(0); }
}

/* Shared lock chrome and earned sigils */

:where(.ser-lock-modal, .ser-lock-card, .ser-lock-dialog) {
  inline-size: min(58rem, 100%);
  color: var(--ser-ink);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 35%),
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--ser-accent) 14%, transparent), transparent 42%),
    #11101a;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 4%), var(--ser-shadow);
}

.ser-lock-header {
  border-color: var(--ser-border);
}

.ser-lock-title {
  color: #fff3d4;
}

:where(.ser-lock-flavor, .ser-lock-subtitle) {
  max-inline-size: 46rem;
  margin: 0.55rem 0 0;
  color: #cfc6d6;
  font-size: 0.97rem;
  font-style: italic;
  line-height: 1.5;
}

:where(.ser-lock-instrument, .ser-instrument) {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--ser-accent) 30%, #fff 5%);
  border-radius: 0.85rem;
  background:
    repeating-linear-gradient(110deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 9px),
    #080711;
  box-shadow: inset 0 0 30px rgb(0 0 0 / 72%), 0 8px 22px rgb(0 0 0 / 35%);
}

:where(.ser-fragments, .ser-lock-fragments, .ser-sigils, .ser-earned-sigils) {
  display: grid;
  gap: 0.5rem;
}

:where(.ser-fragments-label, .ser-lock-fragments-label, .ser-sigils-label) {
  margin: 0;
  color: #d8cfdf;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

:where(.ser-fragment-slots, .ser-lock-slots, .ser-sigil-slots) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

:where(.ser-fragment-slot, .ser-lock-slot, .ser-sigil-slot) {
  display: grid;
  min-inline-size: 2.5rem;
  block-size: 3rem;
  padding: 0.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 30%, #fff 7%);
  border-radius: 0.45rem;
  color: #8d8797;
  font: 800 1.25rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #090810;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 72%);
}

:where(.ser-fragment-slot.is-revealed, .ser-fragment-slot.ser-revealed, .ser-fragment-slot[data-revealed="true"], .ser-lock-slot.is-revealed, .ser-sigil-slot.is-earned) {
  border-color: var(--ser-accent);
  color: #fff;
  background: color-mix(in srgb, var(--ser-accent-dim) 55%, #08070f);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--ser-accent) 18%, transparent), 0 0 13px color-mix(in srgb, var(--ser-accent) 45%, transparent);
  text-shadow: 0 0 10px var(--ser-accent);
}

:where(.ser-fragment-slot.is-hidden, .ser-fragment-slot.ser-masked, .ser-fragment-slot[data-revealed="false"], .ser-lock-slot.is-hidden, .ser-sigil-slot.is-hidden) {
  animation: ser-slot-flicker 2.2s steps(1, end) infinite;
}

@keyframes ser-slot-flicker {
  0%, 14%, 19%, 100% { opacity: 0.82; }
  16% { opacity: 0.42; }
}

:where(.ser-lock-consult, .ser-consult-button) {
  inline-size: 100%;
  color: #fff;
  border-color: color-mix(in srgb, var(--ser-accent) 68%, #fff 10%);
}

:where(.ser-lock-clear, .ser-clear-button) {
  color: #f3d9df;
  border-color: #8f4f5e;
  background: #321c28;
}

:where(.ser-lock-submit, .ser-submit-button) {
  color: #0c1712 !important;
  border-color: #d8ffe5;
  background: linear-gradient(180deg, var(--ser-success), #62c987);
}

:where(.ser-lock-success, .ser-lock-card.is-solved, .ser-lock-dialog.is-solved) {
  animation: ser-lock-power 700ms ease-out both;
}

:where(.ser-lock-error, .ser-lock-card.is-error, .ser-lock-dialog.is-error) {
  animation: ser-lock-error 380ms ease-in-out both;
}

@keyframes ser-lock-power {
  0% { box-shadow: var(--ser-shadow); }
  45% { box-shadow: inset 0 0 55px rgb(82 255 143 / 38%), 0 0 65px rgb(82 255 143 / 52%), var(--ser-shadow); }
  100% { box-shadow: inset 0 0 28px rgb(82 255 143 / 18%), 0 0 30px rgb(82 255 143 / 24%), var(--ser-shadow); }
}

@keyframes ser-lock-error {
  0%, 100% { box-shadow: var(--ser-shadow); }
  45% { box-shadow: inset 0 0 45px rgb(255 62 75 / 37%), 0 0 42px rgb(255 62 75 / 42%), var(--ser-shadow); }
}

/* Keypad: rune-tech 3 by 4 grid */

:where(.ser-keypad, .ser-keypad-grid) {
  display: grid;
  inline-size: min(21rem, 100%);
  grid-template-columns: repeat(3, minmax(3.25rem, 1fr));
  gap: 0.65rem;
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid #514963;
  border-radius: 1rem;
  background: linear-gradient(145deg, #2a2634, #0a0910 64%);
  box-shadow: inset 0 0 22px #05040a, 0 10px 24px rgb(0 0 0 / 45%);
}

:where(.ser-keypad-display, .ser-keypad-readout) {
  grid-column: 1 / -1;
  min-block-size: 3.4rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ser-accent-dim);
  border-radius: 0.45rem;
  color: var(--ser-accent);
  font: 800 clamp(1.3rem, 4vw, 1.8rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  text-align: center;
  background: #030907;
  box-shadow: inset 0 0 14px #000, 0 0 12px color-mix(in srgb, var(--ser-accent) 24%, transparent);
  text-shadow: 0 0 10px currentColor;
}

:where(.ser-keypad-key, .ser-keypad-button) {
  min-inline-size: 0;
  min-block-size: clamp(3.25rem, 8vw, 4.15rem);
  padding: 0.45rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  text-shadow: 0 0 7px var(--ser-accent);
}

/* Brass concentric dials */

:where(.ser-dial-lock, .ser-dials, .ser-dial-bank) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 1.3rem);
}

:where(.ser-dial-unit, .ser-dial-control) {
  display: grid;
  min-inline-size: 8rem;
  gap: 0.5rem;
  place-items: center;
}

:where(.ser-dial, .ser-dial-wheel) {
  position: relative;
  display: grid;
  inline-size: clamp(6.8rem, 18vw, 9rem);
  aspect-ratio: 1;
  place-items: center;
  border: clamp(0.45rem, 1vw, 0.7rem) ridge #b99352;
  border-radius: 50%;
  color: #2d1c0d;
  font: 900 1.55rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:
    repeating-conic-gradient(from -2deg, #3d2815 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, #f0d184 0 27%, #a87435 28% 48%, #e0b96c 49% 64%, #5b3b1d 65%);
  box-shadow: inset 0 0 15px rgb(40 20 5 / 72%), 0 0 0 2px #362311, 0 9px 20px rgb(0 0 0 / 48%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

:where(.ser-dial, .ser-dial-wheel):active { cursor: grabbing; }

:where(.ser-dial-controls, .ser-dial-buttons) {
  display: flex;
  gap: 0.4rem;
}

:where(.ser-dial-minus, .ser-dial-plus) {
  min-inline-size: 44px;
  padding-inline: 0.65rem;
}

:where(.ser-dial-readout, .ser-dial-values) {
  color: var(--ser-accent);
  font: 800 1.15rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
  text-shadow: 0 0 9px currentColor;
}

/* Rune sequence grid */

:where(.ser-rune-grid, .ser-runes) {
  display: grid;
  inline-size: min(27rem, 100%);
  grid-template-columns: repeat(3, minmax(3.6rem, 1fr));
  gap: 0.65rem;
  margin-inline: auto;
}

:where(.ser-rune-grid.ser-rune-grid-4, .ser-rune-grid[data-columns="4"], .ser-runes[data-columns="4"]) {
  grid-template-columns: repeat(4, minmax(3.2rem, 1fr));
}

:where(.ser-rune, .ser-rune-button, .ser-rune-cell) {
  position: relative;
  display: grid;
  min-block-size: clamp(4rem, 10vw, 5.4rem);
  padding: 0.5rem;
  place-items: center;
  color: #d7cce5;
  background: radial-gradient(circle, #292236, #100d18 68%);
}

:where(.ser-rune svg, .ser-rune-button svg, .ser-rune-cell svg) {
  inline-size: min(3.4rem, 78%);
  block-size: min(3.4rem, 78%);
  overflow: visible;
  stroke: currentColor;
  filter: drop-shadow(0 0 3px currentColor);
}

:where(.ser-rune.is-selected, .ser-rune[data-selected="true"], .ser-rune-button.is-selected, .ser-rune-cell[aria-pressed="true"]) {
  border-color: var(--ser-accent);
  color: #fff;
  background: radial-gradient(circle, color-mix(in srgb, var(--ser-accent) 45%, #2a2035), #0c0913 72%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--ser-accent) 24%, transparent), 0 0 18px color-mix(in srgb, var(--ser-accent) 52%, transparent);
}

:where(.ser-rune-order, .ser-rune-index) {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.35rem;
  color: #fff7ba;
  font-size: 0.72rem;
  font-weight: 900;
}

/* Four reorderable vertical slider panels */

:where(.ser-slider-panel, .ser-slider-bank, .ser-sliders) {
  display: grid;
  min-block-size: 16rem;
  grid-template-columns: repeat(4, minmax(3.4rem, 1fr));
  gap: clamp(0.45rem, 2vw, 0.85rem);
  align-items: stretch;
}

:where(.ser-slider, .ser-slider-column, .ser-slider-tile) {
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.65rem 0.35rem;
  border: 1px solid #756684;
  border-radius: 0.65rem;
  color: #fff;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 6%), transparent 30% 70%, rgb(0 0 0 / 32%)),
    color-mix(in srgb, var(--ser-accent-dim) 30%, #181421);
  box-shadow: inset 0 0 14px #08060c;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

:where(.ser-slider, .ser-slider-column, .ser-slider-tile):active,
:where(.ser-slider.is-dragging, .ser-slider-column.is-dragging, .ser-slider-tile.is-dragging) {
  z-index: 2;
  border-color: var(--ser-accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ser-accent) 48%, transparent);
  cursor: grabbing;
}

:where(.ser-slider-glyph, .ser-slider-number) {
  display: grid;
  flex: 1;
  place-items: center;
  color: var(--ser-accent);
  font: 900 clamp(1.25rem, 4vw, 2rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 10px currentColor;
}

:where(.ser-slider-arrows, .ser-slider-controls) {
  display: flex;
  inline-size: 100%;
  justify-content: center;
  gap: 0.25rem;
}

:where(.ser-slider-left, .ser-slider-right, .ser-slider-arrow) {
  min-inline-size: 44px;
  padding-inline: 0.45rem;
}

/* Chunky five-lever switch bank */

:where(.ser-switch-bank, .ser-switches) {
  display: grid;
  grid-template-columns: repeat(5, minmax(3.3rem, 1fr));
  gap: clamp(0.45rem, 2vw, 0.8rem);
  align-items: end;
}

:where(.ser-switch, .ser-switch-control) {
  display: grid;
  min-block-size: 12rem;
  gap: 0.45rem;
  place-items: center;
  padding: 0.65rem 0.35rem;
  border: 1px solid #62596f;
  border-radius: 0.6rem;
  color: #d9d1df;
  background: linear-gradient(145deg, #302b3a, #100e17 68%);
  box-shadow: inset 0 0 13px #08060d;
}

:where(.ser-switch-track, .ser-switch-slot) {
  position: relative;
  inline-size: 1.45rem;
  block-size: 6.2rem;
  border: 1px solid #4b4454;
  border-radius: 999px;
  background: #06050a;
  box-shadow: inset 0 0 10px #000;
}

:where(.ser-switch-lever, .ser-switch-handle) {
  position: absolute;
  inset-block-end: 0.3rem;
  inset-inline-start: 50%;
  inline-size: 2.5rem;
  block-size: 3rem;
  min-block-size: 44px;
  padding: 0;
  border: 0.35rem ridge #a79ba4;
  border-radius: 0.55rem;
  background: linear-gradient(90deg, #504955, #d3c8c9 48%, #4a434e);
  box-shadow: 0 7px 12px rgb(0 0 0 / 52%);
  transform: translateX(-50%);
}

:where(.ser-switch.is-on .ser-switch-lever, .ser-switch[data-on="true"] .ser-switch-lever, .ser-switch-control[aria-pressed="true"] .ser-switch-lever, .ser-switch-handle.is-on) {
  inset-block-end: calc(100% - 3.3rem);
  border-color: var(--ser-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ser-accent) 62%, transparent);
}

:where(.ser-switch-light, .ser-switch-indicator) {
  inline-size: 0.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5f2530;
  box-shadow: inset 0 0 4px #150309;
}

:where(.ser-switch.is-on .ser-switch-light, .ser-switch[data-on="true"] .ser-switch-light, .ser-switch-control[aria-pressed="true"] .ser-switch-light, .ser-switch-indicator.is-on) {
  background: var(--ser-accent);
  box-shadow: 0 0 12px var(--ser-accent);
}

/* Exact hooks used by T4 modules. Keep after generic instrument rules. */

.ser-q-modal > :where(.ser-q-resource, .ser-q-diagram, .ser-q-prompt, .ser-q-choice-list, .ser-q-answer, .ser-q-feedback, .ser-q-explanation, .ser-q-hint-toggle, .ser-q-hint) {
  margin-inline: clamp(1.1rem, 4vw, 2rem);
}

.ser-q-resource {
  display: grid;
  gap: 0.35rem;
  margin-block: 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 48%, #5b4636 22%);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--ser-accent) 10%, #fff8e9);
}

.ser-q-resource-kicker,
.ser-q-resource-tip {
  margin: 0;
  color: #4d3b31;
  line-height: 1.45;
}

.ser-q-resource-kicker {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ser-q-resource-link {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid #2f2340;
  border-radius: 0.55rem;
  padding: 0.6rem 0.85rem;
  color: #fff !important;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ser-accent) 72%, #6f4c83), #37253f);
}

.ser-q-resource-link:focus-visible {
  outline: 3px solid #20152b;
  outline-offset: 3px;
}

.ser-q-resource-tip {
  font-size: 0.88rem;
}

.ser-q-explanation {
  margin-block: 0.8rem;
  padding: 0.85rem 0.95rem;
  border-inline-start: 4px solid var(--ser-success);
  border-radius: 0.35rem;
  color: #2e251f;
  line-height: 1.55;
  background: rgb(255 255 255 / 44%);
}

.ser-q-math-display {
  display: block;
  max-inline-size: 100%;
  margin-block: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

.ser-q-choice-list {
  display: grid;
  gap: 0.7rem;
  margin-block: 0;
}

.ser-q-choice-selected,
.ser-q-choice[aria-pressed="true"] {
  border-color: #fff2a8;
  background: color-mix(in srgb, var(--ser-accent-dim) 86%, #2b1f35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ser-accent) 34%, transparent);
}

.ser-q-answer {
  display: grid;
  gap: 0.45rem;
  color: #3a2c26;
  font-size: 0.9rem;
  font-weight: 800;
}

.ser-q-answer .ser-q-input {
  margin-block-start: 0.15rem;
}

.ser-q-hint-toggle {
  min-block-size: 44px;
  padding-inline: 0.25rem;
  border-color: transparent;
  color: #4b245e !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: transparent;
  box-shadow: none;
}

.ser-q-submit {
  min-inline-size: min(13rem, 100%);
  color: #0c1712 !important;
  border-color: #d8ffe5;
  background: linear-gradient(180deg, var(--ser-success), #62c987);
}

.ser-inspect-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  min-block-size: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgb(3 2 8 / 83%);
  backdrop-filter: blur(10px) saturate(0.75);
  animation: ser-fade-in 180ms ease-out both;
}

.ser-inspect-modal {
  position: relative;
  inline-size: min(70rem, 100%);
  max-block-size: min(55rem, calc(100dvh - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #fff 8%);
  border-radius: 1rem;
  color: var(--ser-ink);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ser-accent) 11%, transparent), transparent 45%),
    #100e19;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 4%), var(--ser-shadow);
  animation: ser-modal-rise 210ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.ser-inspect-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 1.5rem);
  color: #2b201a;
  background: linear-gradient(180deg, #f6e8c8, #d7bf91);
  box-shadow: 0 5px 16px rgb(0 0 0 / 28%);
}

.ser-inspect-title {
  margin: 0;
  color: #2b201a;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  line-height: 1.15;
}

.ser-inspect-close {
  display: grid;
  flex: 0 0 auto;
  min-inline-size: 44px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #2a2230;
}

.ser-inspect-canvas {
  inline-size: calc(100% - clamp(1.5rem, 5vw, 3rem));
  margin: clamp(0.75rem, 2vw, 1.5rem) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #fff 8%);
  border-radius: 0.7rem;
  background: #05040a;
  box-shadow: inset 0 0 34px rgb(0 0 0 / 62%);
}

.ser-inspect-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
}

.ser-inspect-clue-ribbon {
  position: relative;
  display: grid;
  inline-size: min(35rem, calc(100% - 2rem));
  min-block-size: 4rem;
  margin: 0.25rem auto 1rem;
  padding: 0.85rem 3.25rem 0.85rem 1rem;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid #d3b46b;
  border-radius: 0.45rem;
  color: #fff6dc;
  line-height: 1.45;
  text-align: center;
  background: linear-gradient(90deg, #49273c, #723853 50%, #49273c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 8px 25px rgb(0 0 0 / 42%);
  transform-origin: center top;
}

.ser-inspect-clue-seal {
  display: grid;
  inline-size: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #efce7a;
  border-radius: 50%;
  color: #ffdda0;
  background: #401722;
  box-shadow: 0 0 0 3px rgb(68 18 31 / 45%);
}

.ser-inspect-clue-label {
  font-weight: 800;
}

.ser-inspect-clue-ribbon.ser-inspect-clue-revealed {
  color: #291f1d;
  background: linear-gradient(90deg, #caa96f, #f4dfaa 50%, #caa96f);
  animation: ser-ribbon-unfurl 480ms cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

.ser-inspect-clue-ribbon.ser-inspect-clue-revealed .ser-inspect-clue-seal {
  color: #451926;
  border-color: #72364c;
  background: #e8c578;
}

.ser-inspect-clue-text {
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1rem;
  max-inline-size: min(42rem, calc(100% - 2rem));
  border-inline-start: 4px solid var(--ser-accent);
  border-radius: 0.4rem;
  color: #fff3d8;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.55;
  background: rgb(255 255 255 / 7%);
}

.ser-lock-eyebrow,
.ser-lock-section-title {
  margin: 0 0 0.35rem;
  color: var(--ser-accent);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ser-lock-fragments {
  display: grid;
  gap: 0.55rem;
  padding: 1rem clamp(1.1rem, 4vw, 2rem) 0;
}

.ser-fragment-slot-earned {
  border-color: var(--ser-accent);
  color: #fff;
  background: color-mix(in srgb, var(--ser-accent-dim) 55%, #08070f);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--ser-accent) 18%, transparent), 0 0 13px color-mix(in srgb, var(--ser-accent) 45%, transparent);
  text-shadow: 0 0 10px var(--ser-accent);
}

.ser-fragment-slot-hidden {
  animation: ser-slot-flicker 2.2s steps(1, end) infinite;
}

.ser-lock-body,
.ser-lock-modal > .ser-lock-instrument {
  margin: 1rem clamp(1.1rem, 4vw, 2rem);
}

.ser-lock-readout {
  display: block;
  inline-size: 100%;
  min-block-size: 3.4rem;
  padding: 0.65rem 0.8rem;
  overflow-x: auto;
  border: 1px solid var(--ser-accent-dim);
  border-radius: 0.45rem;
  color: var(--ser-accent);
  font: 800 clamp(1.15rem, 4vw, 1.65rem)/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  background: #030907;
  box-shadow: inset 0 0 14px #000, 0 0 12px color-mix(in srgb, var(--ser-accent) 24%, transparent);
  text-shadow: 0 0 10px currentColor;
}

.ser-lock-status {
  min-block-size: 1.5rem;
  margin: 0 clamp(1.1rem, 4vw, 2rem) 0.4rem;
  color: #d4cbdc;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.ser-lock-modal.ser-lock-error .ser-lock-status {
  color: #ffb8bd;
}

.ser-lock-modal.ser-lock-solved .ser-lock-status {
  color: #aaffe0;
}

.ser-lock-modal.ser-lock-solved {
  border-color: var(--ser-success);
  animation: ser-lock-power 700ms ease-out both;
}

.ser-lock-modal.ser-lock-error {
  border-color: var(--ser-danger);
  animation: ser-lock-error 380ms ease-in-out both, ser-shake 340ms ease-in-out;
}

.ser-keypad-grid {
  display: grid;
  inline-size: min(21rem, 100%);
  grid-template-columns: repeat(3, minmax(3.25rem, 1fr));
  gap: 0.65rem;
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid #514963;
  border-radius: 1rem;
  background: linear-gradient(145deg, #2a2634, #0a0910 64%);
  box-shadow: inset 0 0 22px #05040a, 0 10px 24px rgb(0 0 0 / 45%);
}

.ser-dial-shell {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.55fr);
  gap: clamp(1rem, 4vw, 2rem);
  align-items: center;
}

.ser-dial-svg {
  display: block;
  inline-size: min(25rem, 100%);
  block-size: auto;
  margin-inline: auto;
  overflow: visible;
  cursor: grab;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 48%));
  touch-action: none;
  user-select: none;
}

.ser-dial-svg:active {
  cursor: grabbing;
}

.ser-dial-ring {
  transform-box: view-box;
  transform-origin: 180px 180px;
  transition: transform 100ms ease-out;
}

.ser-dial-track {
  fill: none;
  stroke: #bd8f49;
  stroke-width: 24;
  filter: drop-shadow(0 0 3px #e2bd72);
}

.ser-dial-ring:nth-child(even) .ser-dial-track {
  stroke: #806031;
}

.ser-dial-tick-mark {
  stroke: #fff0b4;
  stroke-width: 3;
}

.ser-dial-pointer {
  fill: var(--ser-accent);
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px var(--ser-accent));
}

.ser-dial-center {
  fill: #332416;
  stroke: #ecc978;
  stroke-width: 6;
}

.ser-dial-adjusters {
  display: grid;
  gap: 0.65rem;
}

.ser-dial-adjuster {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  gap: 0.35rem;
  align-items: center;
}

.ser-dial-label {
  color: #ded4e4;
  font-weight: 750;
}

.ser-dial-step {
  min-inline-size: 44px;
  padding: 0;
}

.ser-rune-grid-wide {
  grid-template-columns: repeat(4, minmax(3.2rem, 1fr));
}

.ser-rune-button {
  overflow: hidden;
}

.ser-rune-glyph {
  display: block;
  inline-size: min(3.4rem, 78%);
  block-size: min(3.4rem, 78%);
  overflow: visible;
  stroke: currentColor;
  filter: drop-shadow(0 0 3px currentColor);
}

.ser-rune-number {
  position: absolute;
  inset-block-end: 0.2rem;
  inset-inline-end: 0.35rem;
  color: #bdb3ca;
  font-size: 0.68rem;
  font-weight: 800;
}

.ser-rune-selected,
.ser-rune-button[aria-pressed="true"] {
  border-color: var(--ser-accent);
  color: #fff;
  background: radial-gradient(circle, color-mix(in srgb, var(--ser-accent) 45%, #2a2035), #0c0913 72%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--ser-accent) 24%, transparent), 0 0 18px color-mix(in srgb, var(--ser-accent) 52%, transparent);
}

.ser-rune-selected::after {
  content: attr(data-order);
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.35rem;
  color: #fff7ba;
  font-size: 0.72rem;
  font-weight: 900;
}

.ser-slider-track {
  display: grid;
  min-block-size: 16rem;
  grid-template-columns: repeat(4, minmax(3.4rem, 1fr));
  gap: clamp(0.45rem, 2vw, 0.85rem);
  align-items: stretch;
}

.ser-slider-panel {
  position: relative;
  display: flex;
  min-inline-size: 0;
  min-block-size: 0;
  grid-template-columns: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 0.35rem;
  border: 1px solid #756684;
  border-radius: 0.65rem;
  color: #fff;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 6%), transparent 30% 70%, rgb(0 0 0 / 32%)),
    color-mix(in srgb, var(--ser-accent-dim) 30%, #181421);
  box-shadow: inset 0 0 14px #08060c;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ser-slider-panel.ser-slider-dragging {
  z-index: 2;
  border-color: var(--ser-accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ser-accent) 48%, transparent);
  cursor: grabbing;
  opacity: 0.72;
}

.ser-slider-crest {
  color: var(--ser-accent);
  font-size: clamp(1.8rem, 6vw, 3rem);
  text-shadow: 0 0 12px currentColor;
}

.ser-slider-value {
  display: grid;
  flex: 1;
  place-items: center;
  color: #fff;
  font: 900 clamp(1.25rem, 4vw, 2rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ser-switch-channel {
  position: relative;
  display: block;
  inline-size: 1.45rem;
  block-size: 6.2rem;
  border: 1px solid #4b4454;
  border-radius: 999px;
  background: #06050a;
  box-shadow: inset 0 0 10px #000;
}

.ser-switch.ser-switch-on .ser-switch-lever {
  inset-block-end: calc(100% - 3.3rem);
  border-color: var(--ser-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ser-accent) 62%, transparent);
}

.ser-switch-number {
  color: #d9d1df;
  font-size: 0.75rem;
  font-weight: 850;
}

.ser-switch-state {
  color: #c1b8ca;
  font: 850 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

.ser-switch.ser-switch-on .ser-switch-state {
  color: var(--ser-accent);
  text-shadow: 0 0 9px var(--ser-accent);
}

.ser-header-identity {
  min-inline-size: min(17rem, 34vw);
}

.ser-header-identity .ser-room-name {
  margin: 0.25rem 0 0;
}

.ser-wordmark {
  color: #eee5f3;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-align: end;
}

.ser-logo-image {
  display: block;
  inline-size: auto;
  max-inline-size: 7.25rem;
  block-size: 2rem;
  object-fit: contain;
}

:where(.ser-mute-toggle, .ser-hint-toggle, .ser-journal-toggle, .ser-reset-button) {
  min-inline-size: 5rem;
}

.ser-reset-button {
  border-color: #8f4f5e;
}

.ser-stage {
  inline-size: min(100%, calc((100dvh - 8.5rem) * 16 / 9));
  max-inline-size: 1600px;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 36%, #fff 6%);
  border-radius: clamp(0.65rem, 1.4vw, 1.15rem);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 75%), 0 0 48px color-mix(in srgb, var(--ser-accent) 14%, transparent), var(--ser-shadow);
}

.ser-main > .ser-journal:not([hidden]) {
  transform: translateX(0);
  visibility: visible;
}

.ser-journal:not([hidden]) {
  transform: translateX(0);
  visibility: visible;
}

.ser-journal-content {
  display: grid;
  gap: 1rem;
}

.ser-journal-room {
  padding: 0.85rem;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 4%);
}

.ser-journal-room-title {
  margin: 0;
  color: #fff2ce;
  font-size: 1.02rem;
}

.ser-journal-section-title {
  margin: 0.85rem 0 0.4rem;
  color: var(--ser-accent);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ser-journal-clues {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-inline-start: 1.2rem;
}

.ser-journal-clue {
  color: #ddd5e4;
  line-height: 1.45;
}

.ser-journal-fragment {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.35rem 0;
  color: #d8cfdf;
  line-height: 1.4;
}

.ser-journal-fragment-label {
  font-weight: 650;
}

.ser-journal-fragment-code {
  flex: 0 0 auto;
  padding: 0.22rem 0.42rem;
  border: 1px solid var(--ser-accent-dim);
  border-radius: 0.3rem;
  color: var(--ser-accent);
  background: #05090a;
  text-shadow: 0 0 7px currentColor;
}

.ser-whisper-toast {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  z-index: 80;
  max-inline-size: min(36rem, calc(100vw - 2rem));
  padding: 0.8rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 55%, #fff 8%);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  background: rgb(15 13 24 / 96%);
  box-shadow: 0 8px 35px rgb(0 0 0 / 55%), 0 0 18px color-mix(in srgb, var(--ser-accent) 22%, transparent);
  transform: translateX(-50%);
  animation: ser-toast-in 220ms ease-out both;
}

.ser-whisper-toast--whisper {
  color: #f7e4ff;
  border-color: #c387e2;
  font-style: italic;
  background: rgb(31 19 40 / 97%);
}

.ser-loading-splash {
  isolation: isolate;
  align-content: center;
  gap: 1rem;
  text-align: center;
}

.ser-loading-splash::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 14rem, rgb(3 3 8 / 18%) 38rem),
    linear-gradient(rgb(4 3 9 / 28%), rgb(4 3 9 / 66%));
  content: "";
  pointer-events: none;
}

.ser-loading-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@media (max-aspect-ratio: 4 / 3) {
  .ser-loading-art {
    object-fit: contain;
    background: #06050b;
  }
}

@media (min-width: 721px) and (max-aspect-ratio: 4 / 3) {
  .ser-loading-art {
    object-position: center bottom;
  }
}

.ser-loading-splash > :not(.ser-loading-art) {
  position: relative;
  z-index: 2;
}

.ser-loading-brand {
  margin: 0;
  color: #e5daec;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ser-loading-skip {
  min-inline-size: 10rem;
  margin-block-start: 0.5rem;
}

.ser-interstitial {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  min-block-size: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  color: var(--ser-ink);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ser-accent) 19%, transparent), transparent 28rem),
    rgb(6 5 11 / 97%);
  backdrop-filter: blur(10px);
}

.ser-interstitial-card {
  position: relative;
  inline-size: min(42rem, 100%);
  padding: clamp(1.4rem, 5vw, 3rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 42%, #ecd8aa 20%);
  border-radius: 1rem;
  color: var(--ser-parchment-ink);
  text-align: center;
  background: radial-gradient(circle at 48% 20%, #fff8e6, transparent 58%), var(--ser-parchment);
  box-shadow: inset 0 0 0 4px rgb(79 51 31 / 13%), var(--ser-shadow);
}

.ser-interstitial--epilogue .ser-interstitial-card {
  border-color: color-mix(in srgb, var(--ser-success) 55%, #ecd8aa 24%);
}

.ser-interstitial-title {
  margin: 0 0 0.75rem;
  color: #2d2019;
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.05;
}

.ser-interstitial-copy {
  color: #46352e;
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  line-height: 1.62;
}

.ser-interstitial-dismiss {
  min-inline-size: 11rem;
  margin-block-start: 0.75rem;
}

.ser-victory-certificate {
  inline-size: min(58rem, calc(100% - 1.5rem));
  max-block-size: calc(100% - 1.5rem);
  margin: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: auto;
  border: 1px solid #dfc27b;
  border-radius: 1rem;
  color: #2d211b;
  text-align: center;
  background: radial-gradient(circle at 50% 10%, #fffdf5, transparent 48%), var(--ser-parchment);
  box-shadow: inset 0 0 0 5px rgb(102 71 41 / 12%), var(--ser-shadow);
}

.ser-victory-eyebrow {
  margin: 0 0 0.45rem;
  color: #67491b;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ser-victory-title {
  margin: 0 0 1rem;
  color: #291e18;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.08;
}

.ser-victory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1rem 0 1.3rem;
}

.ser-victory-stat-label,
.ser-victory-stat-value {
  margin: 0;
  padding-inline: 0.35rem;
  background: rgb(255 255 255 / 32%);
}

.ser-victory-stat-label {
  padding-block-start: 0.65rem;
  color: #684f41;
  font-size: 0.72rem;
  font-weight: 750;
}

.ser-victory-stat-value {
  padding-block: 0.15rem 0.65rem;
  color: #2c201a;
  font-size: 1.15rem;
  font-weight: 900;
}

.ser-victory-rooms-title {
  margin: 1rem 0 0.5rem;
  color: #392a22;
}

.ser-victory-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.ser-victory-room {
  color: #3d3028;
  line-height: 1.4;
}

.ser-victory-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.ser-victory-wordmark {
  color: #4f3b31;
  font-weight: 800;
}

.ser-hint-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  min-block-size: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  place-items: center;
  overflow: auto;
  background: rgb(3 2 8 / 83%);
  backdrop-filter: blur(10px);
}

.ser-hint-backdrop > .ser-hint-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  inline-size: min(36rem, 100%);
  max-block-size: calc(100dvh - 2rem);
  padding: clamp(1.2rem, 4vw, 2rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ser-accent) 38%, #ead5a5 24%);
  border-radius: 1rem;
  color: var(--ser-parchment-ink);
  background: radial-gradient(circle at 50% -25%, rgb(255 255 255 / 65%), transparent 50%), var(--ser-parchment);
  box-shadow: inset 0 0 0 4px rgb(67 44 27 / 14%), var(--ser-shadow);
  transform: none;
  visibility: visible;
}

.ser-hint-intro,
.ser-hint-status {
  color: #493a32;
  line-height: 1.5;
}

.ser-hint-backdrop .ser-hint-list {
  padding-inline-start: 1.5rem;
}

.ser-hint-backdrop .ser-hint-item {
  color: #332720;
  background: rgb(255 255 255 / 40%);
}

.ser-hint-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-block-start: 1rem;
}

:where(.ser-hint-reveal, .ser-hint-close) {
  min-inline-size: 8rem;
}

.ser-hint-reveal {
  color: #0c1712 !important;
  border-color: #d8ffe5;
  background: linear-gradient(180deg, var(--ser-success), #62c987);
}

.ser-hint-close {
  color: #f3d9df;
  border-color: #8f4f5e;
  background: #321c28;
}

.ser-button-primary {
  color: #0c1712 !important;
  border-color: #d8ffe5;
  background: linear-gradient(180deg, var(--ser-success), #62c987);
}

.ser-button-secondary {
  color: #f3d9df;
  border-color: #8f4f5e;
  background: #321c28;
}

.ser-hotspot-group {
  cursor: pointer;
}

.ser-hotspot-group:focus-visible {
  outline: none;
}

.ser-hotspot-group:focus-visible .ser-hotspot {
  fill: color-mix(in srgb, var(--ser-accent) 20%, transparent);
  stroke: #fff2a8;
  stroke-width: 7;
  filter: drop-shadow(0 0 15px var(--ser-accent)) drop-shadow(0 0 4px #fff);
}

.ser-hotspot-group--locked {
  cursor: not-allowed;
}

:where(.ser-hotspot--locked, .ser-hotspot-group--locked .ser-hotspot) {
  opacity: 0.58;
  filter: grayscale(0.6) drop-shadow(0 0 5px rgb(255 255 255 / 18%));
}

:where(.ser-hotspot--solved, .ser-hotspot-group--solved .ser-hotspot) {
  opacity: 0.7;
  filter: drop-shadow(0 0 8px var(--ser-success));
  animation: none;
}

/* Responsive states */

@media (max-width: 820px) {
  .ser-header {
    flex-wrap: wrap;
  }

  :where(.ser-header-brand, .ser-brand, .ser-title-group) {
    flex: 1 1 18rem;
  }

  :where(.ser-header-actions, .ser-header-controls, .ser-hud) {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  :where(.ser-main, .ser-play-area, .ser-stage-shell) {
    min-block-size: calc(100dvh - 6.7rem);
    padding: 0.65rem;
  }

  :where(.ser-stage-wrap, .ser-stage-frame) {
    inline-size: 100%;
  }

  :where(.ser-victory-stats, .ser-certificate-stats) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  :where(.ser-main, .ser-play-area, .ser-stage-shell) {
    min-block-size: 0;
    padding-block-start: 0.25rem;
    place-items: start center;
  }

  /* Pan-to-explore: keep the scene large and let it scroll sideways so
     hotspots stay comfortably tappable on phones. */
  .ser-stage {
    aspect-ratio: auto;
    inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  :where(.ser-stage > svg, .ser-room-svg) {
    inline-size: 200vw;
    max-inline-size: none;
    block-size: auto;
  }

  /* Markers read small when the scene shrinks — grow them on touch screens. */
  .ser-marker-gem,
  .ser-marker-spark {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.55);
  }

  .ser-marker-halo {
    r: 26;
  }

  .ser-pan-hint {
    position: absolute;
    inset-block-end: 0.6rem;
    inset-inline-start: 50%;
    z-index: 6;
    display: block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: #f5edd8;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgb(10 8 18 / 82%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .ser-pan-hint[hidden] {
    display: none;
  }

  .ser-header {
    align-items: flex-start;
    padding: 0.65rem;
  }

  :where(.ser-logo-chip, .ser-brand-chip) {
    display: none;
  }

  :where(.ser-header-actions, .ser-header-controls, .ser-hud) {
    inline-size: 100%;
    justify-content: stretch;
  }

  :where(.ser-header-action, .ser-hud-button) {
    flex: 1 1 auto;
  }

  :where(.ser-modal-backdrop, .ser-modal-overlay, .ser-q-backdrop, .ser-q-overlay, .ser-inspection-backdrop, .ser-inspection-overlay, .ser-lock-backdrop, .ser-lock-overlay) {
    padding: 0;
    place-items: stretch;
  }

  :where(.ser-inspect-backdrop, .ser-hint-backdrop) {
    padding: 0;
    place-items: stretch;
  }

  :where(.ser-modal, .ser-modal-card, .ser-dialog, .ser-q-modal, .ser-q-card, .ser-q-dialog, .ser-inspection-modal, .ser-inspection-card, .ser-inspection-dialog, .ser-lock-modal, .ser-lock-card, .ser-lock-dialog) {
    inline-size: 100%;
    min-block-size: 100dvh;
    max-block-size: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .ser-inspect-modal,
  .ser-hint-backdrop > .ser-hint-panel {
    inline-size: 100%;
    min-block-size: 100dvh;
    max-block-size: 100dvh;
    border: 0;
    border-radius: 0;
  }

  :where(.ser-modal-header, .ser-q-header, .ser-inspection-header, .ser-lock-header) {
    padding-block-start: max(1.25rem, env(safe-area-inset-top));
  }

  :where(.ser-modal-actions, .ser-q-actions, .ser-inspection-actions, .ser-lock-actions, .ser-lock-controls) {
    position: sticky;
    inset-block-end: 0;
    z-index: 4;
    padding-block-end: max(1rem, env(safe-area-inset-bottom));
    background: rgb(15 13 23 / 97%);
    box-shadow: 0 -10px 24px rgb(0 0 0 / 30%);
  }

  :where(.ser-q-actions, .ser-modal-card:not(.ser-lock-card) .ser-modal-actions) {
    background: rgb(231 216 185 / 97%);
  }

  :where(.ser-lock-actions > button, .ser-lock-controls > button, .ser-q-actions > button) {
    flex: 1 1 8rem;
  }

  :where(.ser-rune-grid.ser-rune-grid-4, .ser-rune-grid[data-columns="4"], .ser-runes[data-columns="4"]) {
    grid-template-columns: repeat(3, minmax(3.2rem, 1fr));
  }

  .ser-rune-grid-wide {
    grid-template-columns: repeat(3, minmax(3.2rem, 1fr));
  }

  .ser-dial-shell {
    grid-template-columns: 1fr;
  }

  .ser-victory-summary,
  .ser-victory-rooms {
    grid-template-columns: 1fr 1fr;
  }

  :where(.ser-slider-panel, .ser-slider-bank, .ser-sliders) {
    min-block-size: 13.5rem;
  }

  :where(.ser-switch, .ser-switch-control) {
    min-block-size: 10.5rem;
  }
}

@media (max-width: 420px) {
  :where(.ser-game-title, .ser-header-title) {
    white-space: normal;
  }

  :where(.ser-progress, .ser-room-progress, .ser-hud-stat) {
    display: none;
  }

  :where(.ser-slider-panel, .ser-slider-bank, .ser-sliders),
  :where(.ser-switch-bank, .ser-switches) {
    gap: 0.3rem;
  }

  :where(.ser-slider, .ser-slider-column, .ser-slider-tile),
  :where(.ser-switch, .ser-switch-control) {
    padding-inline: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ser-game *, .ser-root *, .ser-shell *, [class^="ser-"] *, [class*=" ser-"] *) {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .ser-hotspot {
    animation: none;
  }

  :where(.ser-q-wrong, .ser-q-shake, .ser-q-card.is-wrong, .ser-q-dialog.is-wrong) {
    transform: none;
  }
}

@media (forced-colors: active) {
  :where(.ser-hotspot, .ser-fragment-slot, .ser-lock-slot, .ser-sigil-slot, .ser-keypad-key, .ser-rune, .ser-rune-button, .ser-slider, .ser-switch) {
    forced-color-adjust: none;
    border: 2px solid CanvasText;
  }

  :where(.ser-hotspot:focus-visible, [class^="ser-"] button:focus-visible, [class*=" ser-"] button:focus-visible) {
    outline-color: Highlight;
  }
}

@media print {
  :where(.ser-game, .ser-root, .ser-shell, .ser-modal-backdrop, .ser-modal-overlay, .ser-q-backdrop, .ser-q-overlay, .ser-inspection-backdrop, .ser-inspection-overlay, .ser-inspect-backdrop, .ser-hint-backdrop, .ser-lock-backdrop, .ser-lock-overlay, .ser-toast, .ser-loading, .ser-loading-splash, .ser-intro, .ser-room-intro, .ser-epilogue, .ser-room-epilogue, .ser-victory) {
    display: none !important;
  }
}

/* ── Learning Arcade overhaul (2026-09): certificate, review, confirm ── */

/* The chamber clock hides with its timer ([hidden] lost to display:inline-flex). */
.ser-haunt[hidden] {
  display: none;
}

/* The certificate grows to fit (no 16:9 letterbox, no scroll box inside it). */
.ser-stage.ser-stage--certificate {
  inline-size: min(100%, 1600px);
  block-size: auto;
  aspect-ratio: auto;
  overflow: visible;
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.ser-stage--certificate .ser-victory-certificate {
  inline-size: min(76rem, 100%);
  max-block-size: none;
  overflow: visible;
  /* Clear the fixed Arcade docks (game tools, report issue) at the page end. */
  margin-block-end: 5.5rem;
}

.ser-victory-run:empty {
  display: none;
}

.ser-victory-run {
  margin-block-start: 1.25rem;
  text-align: start;
}

/* The shared "Your run" card, set dark on the parchment so its text keeps contrast. */
.ser-victory-run .arp-mine {
  --arp-accent: #e4ac5b;
  --arp-muted: #d3c8e0;
  --arp-card: #1d1729;
  inline-size: 100%;
  margin: 0;
  color: #f8f1df;
}

.ser-victory-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.ser-victory-certificate .ser-victory-again {
  border-color: #b97f2e;
  color: #1a1024;
  background: #f2bb67;
}

.ser-victory-back {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.95rem;
  border: 1px solid #6d4f22;
  border-radius: 0.65rem;
  color: #3b2a1c;
  font-weight: 800;
  text-decoration: none;
  background: rgb(255 255 255 / 45%);
}

.ser-victory-actions :focus-visible {
  outline: 3px solid #4b245e;
  outline-offset: 3px;
}

/* Question overlay: a missed question's second look, and marked answers. */
.ser-q-retry-note {
  margin: 0 clamp(1.1rem, 4vw, 2rem) 0.8rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #8a5a1c;
  border-radius: 0.5rem;
  color: #5a3a10;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
  background: #fff3d6;
}

.ser-q-choice.ser-q-choice--right,
.ser-q-choice.ser-q-choice--right:disabled {
  border-color: #1f7a45;
  color: #0f3d22;
  background: #e2f6e9;
  box-shadow: 0 0 0 3px rgb(31 122 69 / 35%);
  opacity: 1;
}

.ser-q-choice.ser-q-choice--wrong,
.ser-q-choice.ser-q-choice--wrong:disabled {
  border-color: #a3263a;
  color: #5c1020;
  background: #fbe3e6;
  opacity: 1;
}

.ser-q-choice.ser-q-choice--right::after,
.ser-q-choice.ser-q-choice--wrong::after {
  margin-inline-start: auto;
  padding-inline-start: 0.6rem;
  font-size: 0.8rem;
  font-weight: 850;
  white-space: nowrap;
}

.ser-q-choice.ser-q-choice--right::after {
  content: "✓ Correct";
}

.ser-q-choice.ser-q-choice--wrong::after {
  content: "✗ Your answer";
}

.ser-q-answer-reveal {
  margin: 0.6rem clamp(1.1rem, 4vw, 2rem) 0;
  color: #3c2f29;
  font-weight: 800;
}

/* In-page confirmation (replaces native confirm()). */
.ser-confirm-backdrop {
  z-index: 130;
}

.ser-confirm {
  inline-size: min(31rem, 100%);
  padding: clamp(1.2rem, 4vw, 1.8rem);
}

.ser-confirm-title {
  margin: 0 0 0.5rem;
  color: #2b201d;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.2;
}

.ser-confirm-body {
  margin: 0 0 1.1rem;
  color: #4c3f38;
  line-height: 1.55;
}

.ser-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.ser-confirm-actions button {
  flex: 1 1 9rem;
}

.ser-confirm .ser-confirm-ok {
  border-color: #b97f2e;
  color: #1a1024;
  background: #f2bb67;
}

.ser-confirm .ser-confirm-ok--danger {
  border-color: #5c1020;
  color: #fff;
  background: #8f2f3f;
}

@media (max-width: 639px) {
  .ser-confirm-backdrop {
    padding: 1rem;
    place-items: center;
  }

  .ser-confirm {
    min-block-size: 0;
    max-block-size: none;
    border: 1px solid #d5bd8f;
    border-radius: 1rem;
  }

  .ser-victory-actions > * {
    flex: 1 1 100%;
  }
}