/* Eternity class quiz: a phone-first page on the Emanation Online look.
   Ink and gold, Crimson Pro for display, IBM Plex Sans for everything read,
   and the aether mist underneath (fx.js).

   Type rules carried over from the client: one scale with nothing under 13px,
   sentence case, upright labels (no italics, no tracked capitals), 4px corners. */

:root {
  --ink: #0E0B08;
  --ink-2: #17130F;
  --ink-3: #241E17;
  --paper: #F5F1E8;
  --hairline: #3A3126;
  --gold: #E0B94A;
  --gold-line: #C9931F;
  --gold-dim: #8A6F28;
  --on-ink: #C6BCA8;
  --on-ink-dim: #A2978A;

  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;

  /* The trailer's spring (stiffness 170, damping 0.62), sampled into linear(). */
  --arrive: linear(0, 0.0462, 0.1597, 0.3083, 0.4674, 0.6197, 0.7543, 0.8655, 0.9513, 1.0129, 1.0528, 1.0749, 1.0832, 1.0815, 1.0733, 1.0615, 1.0483, 1.0353, 1.0235, 1.0137, 1.0059, 1.0002, 0.9964, 0.9941, 0.9932, 0.9931, 0.9936, 0.9946, 1);
  --settle: linear(0, 0.0401, 0.1347, 0.2549, 0.3815, 0.5024, 0.6111, 0.7046, 0.782, 0.8441, 0.8926, 0.9294, 0.9566, 0.9759, 0.9892, 0.9979, 1.0033, 1.0062, 1.0075, 1.0077, 1.0073, 1.0065, 1);

  --pad: max(20px, env(safe-area-inset-left));
  --col: 30rem;
}

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--ink); color: var(--on-ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* the mist sits fixed behind everything; a gradient stands in without WebGL */
#app {
  position: relative; min-height: 100dvh;
  background: radial-gradient(90% 60% at 50% 30%, #2A2117 0%, #16110C 50%, var(--ink) 100%);
}
.aether { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* The map of Altius, as faint light lines over the mist. */
.map {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(/art/map.webp) 50% 38% / min(980px, 170vw) auto no-repeat;
  opacity: .08; mix-blend-mode: screen; transition: opacity 1.2s ease;
  /* fade to nothing before the image runs out, so it has no edge */
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 48% at 50% 40%, #000 55%, transparent 100%);
}
[data-scene="question"] .map { opacity: .05; }
[data-scene="result"] .map { opacity: .06; }
#app > section { position: relative; z-index: 1; }

/* ── buttons ── */
.btn {
  appearance: none; border: 1px solid var(--gold-line); border-radius: 4px;
  background: var(--gold-line); color: var(--ink-2);
  font: 600 16px/1 var(--sans); padding: 14px 20px; min-height: 48px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--gold); }
.btn.big { font-size: 18px; padding: 16px 40px; min-height: 56px; }
.btn.ghost { background: transparent; color: var(--paper); border-color: var(--hairline); }
.btn.ghost:hover { background: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── scenes ── */
.intro, .ask, .result { display: none; }
[data-scene="intro"] .intro, [data-scene="question"] .ask, [data-scene="result"] .result { display: flex; }

/* intro */
.intro {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 100dvh; padding: 48px var(--pad) calc(40px + env(safe-area-inset-bottom));
  max-width: var(--col); margin: 0 auto;
}
.intro__logo { width: min(200px, 54vw); height: auto; margin-bottom: 6px; }

.fan { position: relative; width: min(340px, 88vw); height: min(170px, 44vw); margin: 26px 0 18px; }
.fan__spark {
  position: absolute; left: 50%; top: 56%; width: 70%; translate: -50% -50%;
  animation: glow 4.8s ease-in-out infinite; opacity: .9;
}
@keyframes glow { 50% { opacity: .55; scale: .94; } }
.fan__m {
  position: absolute; left: 50%; bottom: 0; width: var(--w); aspect-ratio: 1;
  transform-origin: 50% 120%;
  transform: translateX(calc(-50% + var(--x))) rotate(var(--r));
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  animation: fan-in .9s var(--arrive) both; animation-delay: calc(.1s + var(--d) * 70ms);
}
@keyframes fan-in { from { opacity: 0; transform: translateX(-50%) rotate(0deg) scale(.6); } }
.intro__title { font: 600 clamp(40px, 11vw, 56px)/1.02 var(--serif); color: var(--paper); margin: 0 0 16px; text-wrap: balance; }
.intro__lede { font: 400 19px/1.45 var(--sans); color: var(--on-ink); margin: 0 0 10px; text-wrap: balance; }
.intro__hint { font: 400 15px/1.5 var(--sans); color: var(--on-ink-dim); margin: 0 0 32px; text-wrap: balance; }
.intro__count { font: 400 14px var(--sans); color: var(--on-ink-dim); margin: 22px 0 0; }
.intro__count b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.intro > * { animation: rise .8s var(--arrive) both; }
.intro > :nth-child(2) { animation-delay: .06s; } .intro > :nth-child(3) { animation-delay: .12s; }
.intro > :nth-child(4) { animation-delay: .18s; } .intro > :nth-child(5) { animation-delay: .24s; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes leave { to { opacity: 0; transform: translateY(-14px); } }

/* question */
.ask {
  flex-direction: column; min-height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  max-width: var(--col); margin: 0 auto;
}
.ask__top { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; min-height: 44px; margin-bottom: 8px; }
.ask__back {
  appearance: none; background: none; border: 0; padding: 10px 0; text-align: left;
  font: 500 15px var(--sans); color: var(--on-ink-dim); cursor: pointer;
}
.ask__back:hover { color: var(--paper); }
.ask__back[aria-hidden="true"] { visibility: hidden; }
.ask__n { text-align: right; font: 500 14px var(--sans); color: var(--on-ink-dim); font-variant-numeric: tabular-nums; }

/* progress as the diamond tally that runs down a card's edge */
.tally { display: flex; justify-content: center; gap: 7px; list-style: none; margin: 0; padding: 0; }
.tally li { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--gold-dim); transition: background .3s, border-color .3s; }
/* filled steps are the real Level Indicator diamond, which is already diamond-shaped */
.tally li.on { transform: none; width: 12px; height: 12px; margin: -2px 0; border: 0; background: url(/art/diamond.webp) center / contain no-repeat; }
.tally li.now { border-color: var(--gold); box-shadow: 0 0 8px rgba(224,185,74,.5); }

.ask__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 0 8px; }
.ask__body.in > * { animation: rise .7s var(--arrive) both; }
.ask__body.in .ask__choices > * { animation: rise .7s var(--arrive) both; animation-delay: calc(.05s + var(--i) * .04s); }
.ask__body.out { animation: leave .22s ease-in both; }

.ask__q { font: 600 clamp(27px, 7.4vw, 34px)/1.15 var(--serif); color: var(--paper); margin: 0 0 24px; text-wrap: balance; }
.ask__choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  appearance: none; display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(23,19,15,.82); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 14px 16px; min-height: 56px; color: var(--paper);
  font: 500 17px/1.35 var(--sans);
  transition: border-color .15s, background .15s, color .15s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.choice small { display: block; margin-top: 3px; font: 400 14px/1.4 var(--sans); color: var(--on-ink-dim); }
/* Role and element answers carry one of Jacob's gold icons. */
.choice.has-icon { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; }
.choice__icon { width: 46px; height: 46px; display: block; }
span.choice__icon { border: 1px solid var(--hairline); border-radius: 50%; }
.choice.picked .choice__icon { filter: drop-shadow(0 0 8px rgba(224,185,74,.6)); }
.choice:hover { border-color: var(--gold-dim); }
.choice.picked { border-color: var(--gold); background: rgba(58,44,18,.9); color: var(--gold); }
.choice.picked small { color: var(--on-ink); }
/* the motto answers are in-world titles, so they're set in the serif */
.ask__choices.motto .choice { font: 600 19px/1.3 var(--serif); }

/* result */
.result {
  flex-direction: column; align-items: center; text-align: center;
  padding: calc(32px + env(safe-area-inset-top)) var(--pad) calc(40px + env(safe-area-inset-bottom));
  max-width: var(--col); margin: 0 auto;
}

/* the card: face down, then it turns over */
.card { width: min(300px, 72vw); aspect-ratio: 1; perspective: 1200px; margin: 8px 0 0; }
.card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 1.1s var(--arrive);
}
[data-stage="up"] .card__inner, [data-stage="shown"] .card__inner { transform: rotateY(180deg); }
.card__back, .card__front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card__back { display: grid; place-items: center; }
.card__ring { position: absolute; inset: -4%; width: 108%; height: 108%; filter: drop-shadow(0 18px 50px rgba(0,0,0,.65)); }
.card__spark { position: relative; width: 62%; }
[data-stage="down"] .card__spark { animation: glow 1.6s ease-in-out infinite; }
[data-stage="down"] .card__ring { animation: ring-glow 1.6s ease-in-out infinite; }
@keyframes ring-glow { 50% { filter: drop-shadow(0 0 34px rgba(224,185,74,.45)); } }
.card__front { transform: rotateY(180deg); display: grid; place-items: center; }
.card__front img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 40px rgba(0,0,0,.55)); }

/* until the class's own art arrives: a medallion with its initial */
.medal {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #3A2C12, var(--ink-2) 72%);
  border: 2px solid var(--gold-line); box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px var(--gold-dim);
  font: 700 clamp(96px, 30vw, 132px)/1 var(--serif); color: var(--gold);
}

.result__wait { font: 400 18px var(--serif); color: var(--on-ink); margin: 26px 0 0; transition: opacity .3s; }
[data-stage="up"] .result__wait, [data-stage="shown"] .result__wait { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.result__body { display: none; width: 100%; }
[data-stage="shown"] .result__body { display: block; }
[data-stage="shown"] .result__body > * { animation: rise .8s var(--arrive) both; }
[data-stage="shown"] .result__body > :nth-child(2) { animation-delay: .05s; }
[data-stage="shown"] .result__body > :nth-child(3) { animation-delay: .1s; }
[data-stage="shown"] .result__body > :nth-child(4) { animation-delay: .2s; }
[data-stage="shown"] .result__body > :nth-child(5) { animation-delay: .3s; }
[data-stage="shown"] .result__body > :nth-child(n+6) { animation-delay: .4s; }

.result__you { font: 400 16px var(--sans); color: var(--on-ink-dim); margin: 22px 0 2px; }
.result__name { font: 700 clamp(46px, 13vw, 60px)/1 var(--serif); color: var(--gold); margin: 0; text-wrap: balance; }
.result__epithet { font: 400 20px/1.3 var(--serif); color: var(--paper); margin: 8px 0 0; text-wrap: balance; }

.dnd {
  margin: 26px 0 0; padding: 18px 16px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.dnd__label { font: 500 14px var(--sans); color: var(--on-ink-dim); margin: 0 0 4px; }
.dnd__name { font: 600 28px/1.15 var(--serif); color: var(--paper); margin: 0; text-wrap: balance; }
.dnd__src { font: 400 14px/1.4 var(--sans); color: var(--on-ink-dim); margin: 6px 0 0; }

.runner {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 4px; border-bottom: 1px solid var(--hairline);
}
/* with no D&D panel above (Royal Guard, for now) the row needs its own top rule */
.dnd[hidden] + .runner { margin-top: 24px; border-top: 1px solid var(--hairline); }
.runner__art { width: 72px; height: 72px; flex: none; object-fit: contain; }
.runner__text { font: 400 16px/1.4 var(--sans); color: var(--on-ink); margin: 0; }
.runner__text b { display: block; font: 600 22px/1.2 var(--serif); color: var(--paper); }
.runner__text span { display: block; font: 400 14px var(--sans); color: var(--on-ink-dim); margin-top: 2px; }

.crowd { margin: 24px 0 0; }
.crowd__line { font: 400 17px/1.4 var(--sans); color: var(--on-ink); margin: 0 0 12px; }
.crowd__line b { font: 700 26px var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; margin-right: 2px; }
.crowd__bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.crowd__bars i { flex: 1; background: var(--ink-3); border-radius: 1px; height: 0; transition: height .9s var(--settle); transition-delay: calc(var(--i) * 18ms + .3s); }
.crowd__bars i.you { background: var(--gold); box-shadow: 0 0 10px rgba(224,185,74,.45); }
.crowd__rank { font: 400 14px var(--sans); color: var(--on-ink-dim); margin: 10px 0 0; text-wrap: balance; }

.pdf {
  margin: 28px 0 0; padding: 20px 16px; text-align: left;
  background: rgba(23,19,15,.85); border: 1px solid var(--hairline); border-radius: 4px;
}
.pdf__title { font: 600 22px/1.2 var(--serif); color: var(--paper); margin: 0 0 4px; }
.pdf__sub { font: 400 14px/1.45 var(--sans); color: var(--on-ink-dim); margin: 0 0 14px; }
.pdf__row { display: flex; gap: 8px; }
.pdf input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 12px;
  background: var(--ink); border: 1px solid var(--hairline); border-radius: 4px;
  color: var(--paper); font: 400 16px var(--sans);
}
.pdf input:focus { outline: none; border-color: var(--gold); }
.pdf__msg { font: 400 14px/1.4 var(--sans); margin: 10px 0 0; min-height: 1.4em; color: var(--on-ink); }
.pdf__msg:empty { min-height: 0; margin: 0; }
.pdf__msg.bad { color: #E0714F; }
.pdf__opt { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font: 400 14px/1.45 var(--sans); color: var(--on-ink); cursor: pointer; }
.pdf__opt input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--gold-line); }
.pdf__opt b { color: var(--paper); font-weight: 600; }
.pdf__dl { display: flex; align-items: center; justify-content: center; margin: 12px 0 0; text-decoration: none; }
.pdf.sent .pdf__row, .pdf.sent .pdf__opt { display: none; }
.pdf.sent .pdf__msg { color: var(--gold); font-size: 16px; }

.actions { display: flex; gap: 10px; margin: 22px 0 0; }
.actions .btn { flex: 1; }
.links { display: flex; justify-content: center; gap: 24px; margin: 22px 0 0; }
.links a { font: 500 15px var(--sans); color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 4px; }
.links a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}