/* Find your jumper: the launcher's look. Words and thin lines over the 3D court, never boxes. */
:root {
  --bg: #07040d;
  --ink: #f4f1fa;
  --muted: #a49cb8;
  --dim: #6f6782;
  --line: rgba(244, 241, 250, 0.22);
  --line-hi: rgba(244, 241, 250, 0.7);
  --purple: #9b30ff;
  --purple-hi: #d27bff;
  --err: #fca5a5;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); }
/* No text selection or dragging anywhere except where you type. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, a { -webkit-user-drag: none; }
input { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--line-hi); outline-offset: 4px; }
a { color: inherit; }

#arena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.shade { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(7, 4, 13, 0.35), rgba(7, 4, 13, 0.82) 75%); }

.top { position: fixed; top: 22px; left: 28px; right: 28px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: 0.18em; font-size: 14px; }
.top-link { text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.2s ease; }
.top-link:hover, .top-link:focus-visible { color: #fff; }

.back-link { position: fixed; top: 74px; left: 28px; z-index: 3; background: none; border: 0; padding: 6px 0; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.2s ease, transform 0.2s ease; }
.back-link::before { content: "\2190  "; }
.back-link:hover, .back-link:focus-visible { color: #fff; transform: translateX(-3px); outline: none; }
.back-link[hidden] { display: none; }

main { position: fixed; inset: 0; z-index: 2; }
.stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 110px 24px 70px; opacity: 0; transform: translateY(24px) scale(0.985); filter: blur(6px); pointer-events: none; transition: opacity 0.6s ease, transform 0.8s var(--ease), filter 0.6s ease; }
.stage.active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.stage.leaving { opacity: 0; transform: translateY(-24px) scale(0.985); filter: blur(6px); }

.big-line { margin: 0; max-width: 22ch; text-align: center; text-wrap: balance; font-size: clamp(30px, 5.2vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 6px 40px rgba(155, 48, 255, 0.55), 0 2px 0 rgba(0, 0, 0, 0.6); }
.hi { color: var(--purple-hi); }
.eyebrow { margin: 0; color: var(--purple-hi); font-size: 12px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; }

.line-btn { white-space: nowrap; background: none; border: 0; border-bottom: 1px solid transparent; padding: 6px 2px; color: var(--ink); font-weight: 800; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; text-shadow: 0 2px 12px #000; transition: color 0.2s ease, border-color 0.2s ease, letter-spacing 0.3s var(--ease); }
.line-btn:hover, .line-btn:focus-visible { color: #fff; border-bottom-color: var(--line-hi); outline: none; letter-spacing: 0.26em; }
.line-btn.go::after { content: " \2192"; }
.line-btn[aria-pressed="true"] { color: var(--purple-hi); border-bottom-color: var(--purple-hi); }
.line-form { display: flex; align-items: flex-end; gap: 22px; width: min(420px, 100%); }
.line-input { width: 100%; min-width: 0; padding: 8px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.08em; text-align: center; transition: border-color 0.2s ease; -moz-appearance: textfield; }
.line-input::-webkit-outer-spin-button, .line-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.line-input::placeholder { color: var(--dim); font-weight: 500; font-size: 18px; letter-spacing: 0.1em; }
.line-input:focus { outline: none; border-bottom-color: var(--line-hi); }
.line-input.bad { border-bottom-color: var(--err); }
.line-msg { margin: 0; max-width: 600px; min-height: 20px; color: var(--muted); font-size: 15px; line-height: 1.55; letter-spacing: 0.03em; text-align: center; text-shadow: 0 2px 10px #000; }
.line-msg.err { color: var(--err); }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; max-width: 760px; }

.result, .long { gap: 18px; overflow-y: auto; justify-content: flex-start; -webkit-mask-image: linear-gradient(to bottom, transparent 70px, #000 112px); mask-image: linear-gradient(to bottom, transparent 70px, #000 112px); }
.result > :first-child, .long > :first-child { margin-top: auto; }
.result > :last-child, .long > :last-child { margin-bottom: auto; }
.rating-form { width: min(760px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 34px; }
.rating-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; align-content: start; }
.rating-form legend { padding: 0 0 4px; color: var(--purple-hi); font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; }
.rating-form label { display: grid; grid-template-columns: 1fr 64px; align-items: baseline; gap: 12px; color: var(--muted); font-size: 14px; letter-spacing: 0.04em; text-shadow: 0 2px 10px #000; }
.rating-form input { width: 100%; padding: 2px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: #fff; font-size: 20px; font-weight: 700; text-align: center; -moz-appearance: textfield; -webkit-user-select: text; user-select: text; }
.rating-form input::-webkit-outer-spin-button, .rating-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rating-form input:focus { outline: none; border-bottom-color: var(--line-hi); }
.rating-form input.bad { border-bottom-color: var(--err); }
.rating-form .actions { grid-column: 1 / -1; }
.slot-split { margin: 0; color: #d6cfe0; font-size: 14px; letter-spacing: 0.06em; text-align: center; text-shadow: 0 2px 10px #000; }
.slot-split strong { color: var(--purple-hi); }
.result .big-line { font-size: clamp(28px, 4.4vw, 56px); }
.pick { display: grid; grid-template-columns: auto auto; gap: 6px 18px; margin: 0; font-size: 16px; text-shadow: 0 2px 10px #000; }
.pick dt { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; text-align: right; padding-top: 3px; }
.pick dd { margin: 0; font-weight: 700; letter-spacing: 0.04em; }
.dim { color: var(--muted); font-weight: 500; }
.facts { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); max-width: 640px; display: grid; gap: 9px; font-size: 15px; line-height: 1.5; color: #d6cfe0; text-align: center; text-shadow: 0 2px 10px #000; }
.facts strong { color: var(--ink); }
.gradebar { width: min(620px, 100%); }
.gradebar svg { display: block; width: 100%; height: auto; font-family: var(--font); letter-spacing: 0.08em; }
.rows { list-style: none; margin: 0; padding: 0; width: min(560px, 100%); display: grid; gap: 16px; text-shadow: 0 2px 10px #000; }
.rows li { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: baseline; }
.rows .num { text-align: right; font-size: 30px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.rows .txt { font-size: 15px; line-height: 1.45; color: var(--muted); }
.rows .txt strong { color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.rows .txt em { font-style: normal; color: #d6cfe0; }
.rows .txt .of { color: var(--dim); letter-spacing: 0.06em; }
.badge-grid { list-style: none; margin: 0; padding: 0; width: min(760px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 28px; text-shadow: 0 2px 10px #000; }
.badge-grid li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.badge-grid img { width: 56px; height: 56px; filter: drop-shadow(0 4px 10px #000a); }
.badge-grid li.locked img { filter: grayscale(1) brightness(0.55); opacity: 0.6; }
.badge-grid strong { color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.badge-grid .lvl { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #f2c200; margin-left: 6px; }
.badge-grid li.locked .lvl, .badge-grid li.locked strong { color: var(--dim); }
.badge-grid em { font-style: normal; font-size: 14px; line-height: 1.45; color: #d6cfe0; }
.badge-grid li.locked em { color: var(--muted); }
.rows li:has(.badge-num) { align-items: center; }
.badge-num { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.badge-num img { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px #000a); }
.badge-num img.locked { filter: grayscale(1) brightness(0.55); opacity: 0.6; }
.badge-num .lvl { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #f2c200; }
.verdict { margin: 0; max-width: 560px; text-align: center; font-size: 16px; line-height: 1.55; color: #d6cfe0; text-shadow: 0 2px 10px #000; }
.verdict strong { color: #fff; }
.verdict .why { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-top: 8px; }

body:not([data-step="intro"]) .foot { display: none; }
.small { font-size: 12px; color: var(--dim); }
.foot { position: fixed; bottom: 14px; left: 0; right: 0; z-index: 3; margin: 0; padding: 0 20px; text-align: center; color: var(--dim); font-size: 11px; letter-spacing: 0.06em; }

@media (max-width: 650px) {
  .top { top: 16px; left: 18px; right: 18px; }
  .back-link { top: 58px; left: 18px; }
  .stage { padding: 96px 18px 64px; gap: 22px; }
  .pick { grid-template-columns: 1fr; text-align: center; }
  .rows li { grid-template-columns: 84px 1fr; gap: 12px; }
  .rows .num { font-size: 22px; }
  .badge-num img { width: 52px; height: 52px; }
  .rows .txt { font-size: 14px; }
  .pick dt { text-align: center; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage, .line-btn, .back-link { transition: none; }
  .stage { filter: none; transform: none; }
}