:root {
  color-scheme: dark;
  --ink: #f0e6d2;
  --muted: #b9ad99;
  --deep: #06090d;
  --blue: #071522;
  --glass: rgba(7, 12, 17, .86);
  --line: rgba(214, 170, 88, .25);
  --gold: #d5aa61;
  --gold-bright: #f2d695;
  --danger: #d49383;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--deep);
}

body {
  overflow-x: hidden;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.page-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(1, 4, 7, .36), rgba(2, 5, 8, .88)),
    image-set(
      url("/assets/backgrounds/aurora-v1/table-portrait.avif") type("image/avif"),
      url("/assets/backgrounds/aurora-v1/table-portrait.webp") type("image/webp")
    ) center / cover no-repeat;
  filter: blur(8px) saturate(.75);
  transform: scale(1.035);
}

.page-ambience::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(190, 130, 48, .12), transparent 34rem),
    rgba(0, 3, 6, .3);
}

.start-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: max(22px, var(--safe-top)) max(16px, var(--safe-right))
    max(32px, var(--safe-bottom)) max(16px, var(--safe-left));
  display: grid;
  place-items: center;
}

.welcome-card {
  width: min(720px, 100%);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid var(--line);
  border-radius: 2px;
  background:
    linear-gradient(140deg, rgba(15, 24, 31, .9), rgba(4, 9, 14, .94)),
    var(--glass);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .65),
    inset 0 1px rgba(255, 232, 184, .06);
  backdrop-filter: blur(18px);
}

.sigil {
  position: relative;
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  border: 1px solid rgba(224, 184, 105, .5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 30px rgba(200, 139, 45, .12);
}

.sigil::before,
.sigil::after,
.sigil span {
  content: "";
  position: absolute;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.sigil::before {
  transform: rotate(60deg);
}

.sigil::after {
  transform: rotate(-60deg);
}

.sigil span {
  transform: rotate(0);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .2em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

h1,
h2,
p {
  text-wrap: pretty;
}

h1 {
  margin: 0 auto 22px;
  max-width: 16ch;
  color: #f3ead8;
  font-size: clamp(34px, 7.5vw, 58px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  text-align: center;
}

.lead {
  max-width: 580px;
  margin: 0 auto 35px;
  color: var(--muted);
  font-size: clamp(16px, 2.5vw, 19px);
  line-height: 1.62;
  text-align: center;
}

.ritual-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 36px;
  border: 1px solid rgba(214, 170, 88, .14);
  background: rgba(214, 170, 88, .14);
}

.ritual-rules > div {
  padding: 21px 18px;
  background: rgba(5, 11, 16, .88);
}

.ritual-rules p {
  margin: 0;
  color: #aa9f8d;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.ritual-rules strong {
  display: block;
  margin-bottom: 7px;
  color: #ddd1bd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
}

.rule-number {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 21px;
  line-height: 1;
}

.mic-glyph {
  font-family: sans-serif;
  font-size: 28px;
}

.access-form,
.question-field {
  margin: 0 0 24px;
}

label {
  display: block;
  margin-bottom: 9px;
  color: #d7c9b3;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(214, 170, 88, .25);
  border-radius: 2px;
  outline: 0;
  background: rgba(1, 5, 8, .64);
  color: #f2eadb;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input {
  min-height: 48px;
  padding: 0 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

textarea {
  min-height: 96px;
  padding: 14px 15px;
  resize: vertical;
  font-size: 17px;
  line-height: 1.5;
}

input:focus,
textarea:focus {
  border-color: rgba(239, 199, 121, .7);
  box-shadow: 0 0 0 3px rgba(211, 163, 80, .08);
}

input::placeholder,
textarea::placeholder {
  color: #716b61;
}

.quiet-button,
.primary-button,
.hud-button,
.end-button {
  cursor: pointer;
  border: 0;
}

.quiet-button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(214, 170, 88, .3);
  border-radius: 2px;
  background: rgba(12, 20, 25, .7);
  color: #dbc9aa;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
}

.quiet-button:hover,
.quiet-button:focus-visible {
  border-color: rgba(237, 198, 121, .7);
  background: rgba(28, 31, 29, .8);
}

.coupon-status {
  min-height: 22px;
  padding-top: 8px;
  color: #918878;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

.coupon-status.valid {
  color: #b9cda9;
}

.coupon-status.invalid {
  color: var(--danger);
}

.field-hint {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  color: #746d61;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
}

.primary-button {
  width: 100%;
  min-height: 62px;
  padding: 13px 24px;
  border: 1px solid rgba(246, 211, 143, .55);
  border-radius: 2px;
  background:
    linear-gradient(120deg, rgba(117, 76, 26, .9), rgba(61, 43, 23, .96));
  color: #fff2d6;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .34),
    inset 0 1px rgba(255, 238, 200, .14);
  font-size: 18px;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.primary-button:disabled {
  cursor: not-allowed;
  filter: saturate(.3);
  opacity: .43;
}

.primary-button small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 239, 207, .67);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: .02em;
}

.start-error,
.recovery-card {
  margin-top: 20px;
  padding: 19px;
  border: 1px solid rgba(211, 142, 116, .3);
  background: rgba(50, 18, 16, .22);
}

.recovery-card {
  margin: 0 0 20px;
  border-color: rgba(214, 170, 88, .27);
  background: rgba(13, 25, 30, .7);
  text-align: center;
}

.start-error h2,
.recovery-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 400;
}

.start-error p,
.recovery-card p {
  margin: 0 0 16px;
  color: #c7b9a4;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.documents {
  margin-top: 34px;
}

.section-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 25px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.document-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(214, 170, 88, .1);
}

.document-item p {
  margin: 0;
  color: #d8ccb9;
  font-size: 14px;
  line-height: 1.35;
}

.document-item small {
  display: block;
  margin-top: 4px;
  color: #81796d;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
}

.network-notice {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(9px + var(--safe-top)) 16px 9px;
  background: #5f3d28;
  color: #fff1d5;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  text-align: center;
}

.transition-screen,
.completion-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  min-height: 100svh;
  padding: max(28px, var(--safe-top)) max(20px, var(--safe-right))
    max(28px, var(--safe-bottom)) max(20px, var(--safe-left));
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at center, rgba(47, 34, 19, .42), transparent 36rem),
    #05090d;
  text-align: center;
}

.transition-screen h2,
.completion-card h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 400;
  line-height: 1.05;
}

.transition-screen > p:not(.eyebrow),
.completion-card > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.transition-orbit {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 30px;
  border: 1px solid rgba(212, 170, 95, .22);
  border-radius: 50%;
  animation: orbit 8s linear infinite;
}

.transition-orbit::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(212, 170, 95, .35);
  border-radius: 50%;
}

.transition-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 15px #e3a943;
}

.transition-orbit i:nth-child(1) { transform: translateY(-42px); }
.transition-orbit i:nth-child(2) { transform: rotate(120deg) translateY(-42px); }
.transition-orbit i:nth-child(3) { transform: rotate(240deg) translateY(-42px); }

@keyframes orbit {
  to { transform: rotate(360deg); }
}

.mic-check {
  width: min(360px, 80vw);
  margin-bottom: 24px;
  color: #b7c8a7;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
}

.mic-meter {
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
}

.mic-meter i {
  display: block;
  width: 3%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #638a72, #e0c276);
  transition: width 70ms linear;
}

.connection-steps {
  display: flex;
  gap: 24px;
  margin: 4px 0 0;
  padding: 0;
  color: #766f64;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
  list-style: none;
}

.connection-steps li {
  display: grid;
  gap: 7px;
  justify-items: center;
}

.connection-steps span {
  width: 7px;
  height: 7px;
  border: 1px solid #6a6153;
  border-radius: 50%;
}

.connection-steps li.done {
  color: #b7c8a7;
}

.connection-steps li.done span {
  border-color: #9eb48e;
  background: #9eb48e;
  box-shadow: 0 0 12px rgba(158, 180, 142, .5);
}

.game-shell {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #020609;
}

.scene-host,
.scene-host canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-host canvas {
  display: block;
}

.game-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(0, 2, 5, .52) 100%);
}

.game-hud {
  position: absolute;
  z-index: 3;
  top: calc(12px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}

.voice-state,
.session-timer,
.hud-button {
  min-height: 34px;
  border: 1px solid rgba(230, 195, 129, .2);
  border-radius: 40px;
  background: rgba(3, 8, 12, .58);
  backdrop-filter: blur(12px);
  color: #d5c9b5;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: .03em;
}

.voice-state {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
}

.voice-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8d7961;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.voice-state.listening i {
  background: #9bb78a;
  box-shadow: 0 0 11px rgba(155, 183, 138, .8);
}

.voice-state.speaking i {
  background: #e7bd6e;
  box-shadow: 0 0 13px rgba(231, 189, 110, .9);
  animation: voice-pulse 1.1s ease-in-out infinite;
}

@keyframes voice-pulse {
  50% { transform: scale(1.6); }
}

.session-timer {
  min-width: 72px;
  padding: 8px 15px;
  text-align: center;
}

.session-timer.warning {
  color: #f0cd8c;
  border-color: rgba(230, 175, 94, .45);
}

.hud-button {
  pointer-events: auto;
  justify-self: end;
  padding: 0 13px;
}

.game-message {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(34px + var(--safe-bottom));
  max-width: min(80vw, 520px);
  padding: 10px 17px;
  border: 1px solid rgba(231, 192, 119, .15);
  border-radius: 30px;
  background: rgba(2, 7, 11, .5);
  color: rgba(231, 220, 201, .78);
  font-size: 13px;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  transition: opacity .35s ease;
}

.end-button {
  position: absolute;
  z-index: 4;
  right: calc(14px + var(--safe-right));
  bottom: calc(14px + var(--safe-bottom));
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(212, 158, 136, .2);
  border-radius: 30px;
  background: rgba(27, 9, 9, .38);
  color: rgba(225, 193, 179, .62);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 9px;
}

.completion-card {
  width: min(560px, 100%);
}

.completion-card .primary-button,
.completion-card .quiet-button {
  width: min(400px, 100%);
  margin-top: 10px;
}

.document-progress {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: #c4b59e;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
}

.document-progress i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(218, 176, 100, .22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: orbit .9s linear infinite;
}

@media (orientation: landscape) {
  .page-ambience {
    background-image:
      linear-gradient(180deg, rgba(1, 4, 7, .36), rgba(2, 5, 8, .88)),
      image-set(
        url("/assets/backgrounds/aurora-v1/table-landscape.avif") type("image/avif"),
        url("/assets/backgrounds/aurora-v1/table-landscape.webp") type("image/webp")
      );
  }
}

@media (max-width: 620px) {
  .welcome-card {
    padding: 30px 20px;
  }

  .ritual-rules {
    grid-template-columns: 1fr;
  }

  .ritual-rules > div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 4px 12px;
    align-items: start;
    padding: 15px;
  }

  .rule-number {
    grid-row: 1 / span 2;
    margin: 2px 0 0;
  }

  .coupon-row {
    grid-template-columns: 1fr;
  }

  .connection-steps {
    gap: 15px;
  }

  .game-message {
    bottom: calc(52px + var(--safe-bottom));
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}