/* ---------- Title ---------- */

#title { overflow-y: auto; align-items: center; }
.title-art { height: min(70vh, 640px); }

.title-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: max(25vh, 150px) 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  animation: rise .9s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
h1 {
  margin: -6px 0 0;
  font: 900 clamp(40px, 11.5vw, 64px)/.88 var(--stencil);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 40px rgba(242, 169, 59, .25);
}
h1 em { font-style: normal; color: var(--sodium); display: block; font-size: 1.32em; margin-top: .04em; }

.form {
  position: relative;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(transparent 0 95%, rgba(30, 27, 22, .05) 95%) 0 0 / 100% 28px,
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(var(--paper), var(--paper-2));
  border-radius: 3px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 18px 40px rgba(0, 0, 0, .55), 0 2px 0 var(--paper-3);
}
.form::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(30, 27, 22, .25);
  border-radius: 2px;
  pointer-events: none;
}
.form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 500 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.cutoff {
  font: 700 12px var(--cond);
  letter-spacing: .12em;
  color: var(--red);
  border: 1.5px solid currentColor;
  padding: 3px 6px 2px;
  border-radius: 2px;
  transform: rotate(-2deg);
}
#intro { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.form-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.form-meta b { color: var(--ink); }
.form .btn { margin-top: 2px; }
.previous {
  align-self: center;
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--ink-3);
}
.previous b { color: var(--ink); }

.disclaimer {
  margin: 4px auto 0;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c4);
  color: #8d8676;
}

/* ---------- Quiz ---------- */

#quiz { overflow: hidden; }
.shaft {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* The stairwell tile is 960px wide and centred; fading the sides into the shaft walls keeps
     its seams out of sight on wide screens. */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 470px), #000 calc(50% - 300px), #000 calc(50% + 300px), transparent calc(50% + 470px));
  mask-image: linear-gradient(90deg, transparent calc(50% - 470px), #000 calc(50% - 300px), #000 calc(50% + 300px), transparent calc(50% + 470px));
}
.shaft .treads {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 440px);
  opacity: .55;
  will-change: transform;
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1);
}
.shaft .treads svg { display: block; }
.shaft::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(13, 12, 10, .2), rgba(13, 12, 10, .85));
}

.qbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 8px;
}
.depth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  min-width: 64px;
  padding: 6px 8px;
  background: #050605;
  border: 1px solid #1f2a22;
  border-radius: 3px;
  box-shadow: inset 0 0 12px rgba(134, 242, 160, .08);
}
.depth-label { font: 500 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--crt-dim); }
.depth-num { font: 600 22px var(--mono); color: var(--crt); text-shadow: 0 0 8px rgba(134, 242, 160, .6); }
.gauge { --p: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gauge-ticks { display: flex; gap: 3px; }
.gauge-ticks i {
  flex: 1;
  height: 6px;
  border-radius: 1px;
  background: var(--c3);
  transition: background .4s, box-shadow .4s;
}
.gauge-ticks i.done { background: var(--sodium-lo); }
.gauge-ticks i.now { background: var(--sodium); box-shadow: 0 0 10px rgba(242, 169, 59, .7); }
.q-num { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--paper-3); }

.deck {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.qcard {
  grid-area: 1 / 1;
  align-self: start;
  position: relative;
  margin-bottom: 16px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 85% 0%, rgba(255, 255, 255, .35), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(138, 58, 28, .1), transparent 30%),
    linear-gradient(var(--paper), var(--paper-2));
  border-radius: 3px;
  padding: 16px 14px 14px;
  box-shadow: 0 2px 0 var(--paper-3), 0 22px 44px rgba(0, 0, 0, .6);
}
.qcard.entering { animation: card-in .55s var(--ease) both; }
.qcard.leaving { animation: card-out .34s cubic-bezier(.55, 0, .8, .3) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(120px) rotate(1deg) scale(.97); } }
@keyframes card-out { to { opacity: 0; transform: translateY(-160px) rotate(-1.5deg) scale(.96); } }
.qcard header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.q-loc { text-align: right; color: var(--rust); }
.qcard h2 {
  margin: 14px 2px 16px;
  font: 500 clamp(19px, 5.2vw, 22px)/1.38 var(--body);
  color: var(--ink);
  text-wrap: pretty;
}
.options { display: flex; flex-direction: column; gap: 8px; }
.opt {
  appearance: none;
  display: grid;
  grid-template-columns: 26px 18px 1fr;
  align-items: start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  font: 400 16px/1.4 var(--body);
  color: var(--ink);
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(30, 27, 22, .22);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s var(--ease);
}
@media (hover: hover) { .opt:hover { background: rgba(255, 255, 255, .5); border-color: rgba(30, 27, 22, .45); } }
.opt:active { transform: scale(.99); }
.opt .box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  display: grid;
  place-items: center;
}
.opt .box svg { width: 26px; height: 26px; overflow: visible; }
.opt .box path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.opt[aria-checked="true"] .box path { stroke-dashoffset: 0; transition: stroke-dashoffset .28s ease-out; }
.opt .letter { font: 600 15px/24px var(--mono); color: var(--ink-3); }
.opt .txt { padding-top: 1px; }
.opt.picked { background: rgba(255, 255, 255, .62); border-color: var(--ink); }
.opt[aria-checked="true"] .letter { color: var(--red); }

.qfoot {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 4px 16px 10px;
}

.processing {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 8, 7, .82);
  animation: fade .3s both;
}
@keyframes fade { from { opacity: 0; } }
.crt {
  width: min(100%, 380px);
  padding: 20px 18px;
  background: radial-gradient(ellipse at center, #0c1a10, #040705);
  border: 10px solid #1d1c19;
  border-radius: 18px;
  box-shadow: inset 0 0 40px rgba(134, 242, 160, .12), 0 0 0 1px #33302a, 0 20px 50px rgba(0, 0, 0, .7);
  font: 500 14px/1.6 var(--mono);
  color: var(--crt);
  text-shadow: 0 0 6px rgba(134, 242, 160, .7);
  position: relative;
  overflow: hidden;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .25) 2px 3px);
  pointer-events: none;
}
.crt p { margin: 0; white-space: nowrap; overflow: hidden; animation: type .4s steps(28) both; }
.crt .l2 { animation-delay: .35s; }
.crt .l3 { animation-delay: .75s; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cursor { display: inline-block; width: .6em; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--crt); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Result ---------- */

#result { overflow-y: auto; align-items: center; }
.result-inner {
  width: 100%;
  max-width: 600px;
  padding: 60px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shared-note {
  margin: 0;
  text-align: center;
  font: 600 13px var(--cond);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sodium);
}
.notice {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(255, 255, 255, .35), transparent 50%),
    radial-gradient(circle at 8% 30%, rgba(138, 58, 28, .08), transparent 22%),
    linear-gradient(var(--paper), var(--paper-2));
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--paper-3), 0 26px 60px rgba(0, 0, 0, .65);
  overflow: hidden;
}
.notice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--dept) 0 12px, var(--ink) 12px 24px);
}
#result.in .notice { animation: notice-in .8s var(--ease) both; }
@keyframes notice-in { from { opacity: 0; transform: translateY(40px) scale(.98); } }
.notice-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 18px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font: 500 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.notice-hero {
  position: relative;
  text-align: center;
  padding: 22px 18px 18px;
}
.illustration {
  width: 132px;
  height: 132px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}
.illustration svg { width: 100%; height: 100%; display: block; }
[data-quiz="residents"] .illustration { width: 140px; height: 182px; transform: rotate(-2deg); }
[data-quiz="residents"] .second .mini { width: 52px; height: 68px; }
#result.in .illustration { animation: insignia-in .9s var(--ease) both .2s; }
@keyframes insignia-in { from { opacity: 0; transform: scale(.85) rotate(-8deg); } }
.assign-to { margin: 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.notice h2 {
  margin: 4px 0 6px;
  font: 900 clamp(46px, 13vw, 68px)/.9 var(--stencil);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}
.badge {
  display: inline-block;
  margin: 0;
  padding: 4px 10px 3px;
  font: 700 14px var(--cond);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dept-ink);
  background: var(--dept);
  border-radius: 2px;
}
.tagline { margin: 12px auto 0; max-width: 34ch; font: italic 400 17px/1.45 var(--body); color: var(--ink-2); text-wrap: balance; }

.stamp {
  position: absolute;
  top: 92px;
  right: 4px;
  width: 120px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
}
.stamp svg { width: 100%; display: block; }
#result.in .stamp { animation: stamp .42s cubic-bezier(.5, 0, .9, .6) both .85s; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-4deg); }
  70% { opacity: .92; transform: scale(.94) rotate(-13deg); }
  100% { opacity: .9; transform: scale(1) rotate(-12deg); }
}
#result.in .notice-hero { animation: thud .3s ease-out both 1.2s; }
@keyframes thud { 30% { transform: translateY(2px); } }

.block {
  margin: 0 18px;
  padding: 18px 0;
  border-top: 1px dashed rgba(30, 27, 22, .35);
}
.block h3 {
  margin: 0 0 12px;
  font: 700 13px var(--cond);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rust);
}
.life p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.life p:last-child { margin-bottom: 0; }
.pact blockquote {
  margin: 0;
  padding: 14px 16px;
  background: rgba(30, 27, 22, .06);
  border-left: 4px solid var(--ink);
  font: 500 15px/1.6 var(--mono);
  color: var(--ink);
}

.radar-wrap { max-width: 320px; margin: 0 auto; }
.radar { width: 100%; display: block; overflow: visible; }
.radar .grid { fill: none; stroke: rgba(30, 27, 22, .22); stroke-width: 1; }
.radar .grid:last-of-type { stroke: rgba(30, 27, 22, .5); }
.radar .spoke { stroke: rgba(30, 27, 22, .22); stroke-dasharray: 2 3; }
.radar .shape {
  fill: color-mix(in srgb, var(--dept) 45%, transparent);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  transform-origin: 150px 138px;
}
#result.in .radar .shape { animation: grow 1s var(--ease) both 1.3s; }
@keyframes grow { from { transform: scale(0); opacity: 0; } }
.radar .dot { fill: var(--ink); }
#result.in .radar .dot { animation: fade .3s both; animation-delay: calc(1.9s + var(--d) * .07s); }
.radar text { font: 600 12px var(--cond); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-2); }
.radar .val { font: 600 14px var(--mono); letter-spacing: 0; fill: var(--ink); }

.axes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.axes b { font: 700 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-right: 4px; }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people li { display: grid; gap: 1px; padding-left: 14px; border-left: 3px solid var(--dept); }
.people b { font: 700 18px var(--cond); letter-spacing: .04em; }
.people span { font-size: 15px; color: var(--ink-2); line-height: 1.4; }

.second {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
}
.second .mini { width: 64px; height: 64px; flex: none; }
.second .mini svg { width: 100%; height: 100%; }
.second div:last-child { display: flex; flex-direction: column; gap: 2px; }
.second small { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.second b { font: 900 28px/1 var(--stencil); text-transform: uppercase; }
.second span { font: 600 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.actions { display: flex; flex-direction: column; gap: 10px; }
#result.in .actions { animation: rise .6s var(--ease) both 1.4s; }
#result .disclaimer { text-align: center; }


/* ---------- Larger screens ---------- */

@media (min-width: 720px) {
  .title-inner { padding-top: max(28vh, 200px); }
  .qbar { padding-top: 24px; }
  .deck { padding-top: 24px; }
  .qcard { padding: 22px 24px 20px; }
  .qcard h2 { font-size: 23px; margin: 18px 0 20px; }
  .options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .notice-head, .block { margin-left: 32px; margin-right: 32px; }
  .notice-hero { padding: 30px 32px 24px; }
  .stamp { width: 150px; right: 40px; top: 70px; }
  .actions { flex-direction: row; }
  .actions .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  .actions > .btn { flex: 1.3; }
  .actions .row { flex: 2; }
}
@media (min-height: 760px) and (min-width: 720px) {
  .deck { align-content: center; padding-bottom: 6vh; }
}