*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  /* Prevents the body background from bleeding through on iOS rubber-band
     overscroll. #0d0907 = --ink, the darkest screen background. Can't use
     var() here because custom properties resolve on :root, not html itself. */
  background: #0d0907;
}

body {
  font-family: var(--font-body);
  /* Warm ink by default so screens that don't paint their own background
     (gate, identity, ritual empty states) read as one continuous darkness
     instead of bleeding navy through. The home-hub overlay paints its
     navy → terracotta sky gradient on top of this when it's mounted. */
  background: var(--ink);
  color: var(--papyrus);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.5;
  min-height: 100%;
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--title-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); font-weight: 500; }

.display-italic { font-style: italic; font-weight: 300; }
.lead {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  line-height: 1.45;
  font-weight: 300;
  font-style: italic;
}
.body-p {
  font-size: var(--body-size);
  line-height: 1.65;
  font-weight: 300;
}
.poem {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  line-height: 1.65;
}

.eyebrow {
  /* Eyebrows share the same display font as deity names so the type system
     reads coherently — every uppercase tracked label is Cinzel, not a
     mix of Inter (eyebrows) and Cinzel (deity names). */
  font-family: var(--font-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: var(--tiny-size);
  font-weight: 500;
  color: var(--papyrus-dim);
}
.deity-name {
  font-family: var(--font-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--small-size);
  color: var(--gold);
}

/* colour helpers */
.gold        { color: var(--gold); }
.dim         { color: var(--papyrus-dim); }
.terracotta  { color: var(--terracotta); }
.nile        { color: var(--nile); }

/* ── Layout helpers ─────────────────────────────────────── */
.centered   { text-align: center; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.max-w-md   { max-width: min(65ch, 92vw); }
.max-w-lg   { max-width: min(80ch, 94vw); }

.stack     { display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack-sm  { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-lg  { display: flex; flex-direction: column; gap: clamp(1.2rem, 4vw, 2rem); }

/* ── Screen scaffold ────────────────────────────────────── */
#main-content {
  min-height: 100dvh;
  padding-bottom: calc(var(--cta-dock-height) + env(safe-area-inset-bottom, 0px));
}

.screen {
  min-height: 100dvh;
  padding: var(--screen-padding);
  padding-top: calc(var(--screen-padding) + env(safe-area-inset-top, 0px));
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

/* ── Floating annotator launcher (localhost only) ─────────── */
#rps-annotate-btn {
  position: fixed;
  left: clamp(0.6rem, 2.5vw, 1rem);
  bottom: calc(clamp(0.6rem, 2.5vw, 1rem) + env(safe-area-inset-bottom, 0));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  opacity: 0.78;
  transition: opacity 0.15s, transform 0.15s;
}
#rps-annotate-btn:hover,
#rps-annotate-btn:focus-visible { opacity: 1; transform: scale(1.05); }

/* ── Back button ────────────────────────────────────────── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--papyrus-dim);
  font-family: var(--font-body);
  font-size: var(--small-size);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
  text-decoration: none;
  transition: color 0.2s;
}
.back-btn:hover { color: var(--gold); }
.back-btn::before { content: '←'; font-size: 1rem; }

/* ── Dividers ───────────────────────────────────────────── */
.rule {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.5;
}
.rule.short::before, .rule.short::after { flex: 0 0 2rem; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
  width: 100%;
}

/* ── Transitions ────────────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.2s var(--ease) both;
}
@keyframes fadeIn {
  /* No transform — fade-in is applied to the main router container which
     contains screens with 'position: fixed' children. A transform on the
     ancestor would make those children resolve against the container
     instead of the viewport. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Accessible focus ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Links ──────────────────────────────────────────────── */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Forms ──────────────────────────────────────────────── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
button { cursor: pointer; }

/* ── Utilities ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.optional-badge {
  display: inline-block;
  font-size: var(--tiny-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nile);
  border: 1px solid var(--nile);
  padding: 0.15em 0.5em;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.1ms !important;
  }
}