:root {
  color-scheme: dark;
  --page:#101027; --panel:#1c1939; --line:#393359; --ink:#fbf7ff;
  --muted:#c4badb; --lilac:#c6a8ff; --violet:#a883ff; --mint:#a4f0d2; --gold:#ffd681;
  --display:Georgia,"Times New Roman",serif;
  font-family: "Trebuchet MS",system-ui,sans-serif; color:var(--ink); background:var(--page);
}
* {box-sizing:border-box}
body {margin:0; min-width:300px; min-height:100vh; background:radial-gradient(ellipse at 62% 23%,#241a41 0,transparent 48%),radial-gradient(ellipse at 9% 75%,#191736,transparent 43%),var(--page)}
button,select,input,textarea {font:inherit}
button {cursor:pointer}
button:disabled {cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible {outline:3px solid var(--gold);outline-offset:4px}
.sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip {position:absolute;top:8px;left:8px;transform:translateY(-150%);z-index:5;background:var(--gold);color:var(--page);padding:8px}
.skip:focus {transform:none}
.site-header {border-bottom:1px solid #332e50;background:#12112a}
.topbar {max-width:1256px;margin:auto;min-height:76px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand {display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;text-align:left;font-size:13px;line-height:1.05;letter-spacing:.14em;font-weight:900;padding:0}
.brand small {display:block;color:var(--lilac);font-size:10px;letter-spacing:.25em;margin-top:5px}
.logo {width:36px;height:36px;border-radius:11px;border:1px solid #695498;display:grid;place-items:center;background:#2c2251;color:var(--gold);font-size:25px}
.tabs,.player-tools {display:flex;align-items:center;gap:8px}
.tabs button,.balance,.player-picker select {color:var(--muted);border:1px solid transparent;background:transparent;border-radius:10px;min-height:42px;padding:8px 13px;font-size:14px;font-weight:800;white-space:nowrap}
.tabs button span {margin-right:5px;color:var(--lilac)}
.tabs button[aria-current="page"],.tabs button:hover {background:#2c2347;color:var(--ink);border-color:#483964}
.balance {color:var(--gold);background:#30253e;border-color:#4a3c57;min-width:64px}
.balance span {margin-right:4px}
.player-picker select {background:#251e40;border-color:#483b62;color:var(--ink);max-width:112px}
main {max-width:1196px;margin:auto;padding:36px 34px 42px;min-height:calc(100vh - 155px)}
main:focus,.focus-heading:focus {outline:none}
.hero {display:grid;grid-template-columns:minmax(280px,.83fr) minmax(0,1.3fr);align-items:center;gap:38px}
.hero-copy {padding:12px 0}
.eyebrow {display:flex;gap:8px;align-items:center;margin:0 0 12px;color:var(--lilac);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:900;line-height:1.5}
.eyebrow .spark {color:var(--gold);font-size:14px}
h1,h2,h3,p {margin-top:0}
h1,h2 {font-family:var(--display);font-weight:700}
h1 {font-size:clamp(46px,5.5vw,77px);line-height:.99;letter-spacing:-.055em;margin-bottom:19px}
.hero h1 em {color:var(--lilac);font-weight:inherit}
h2 {font-size:clamp(26px,4vw,39px);line-height:1.06;letter-spacing:-.036em;margin-bottom:9px}
h3 {font-size:17px;margin-bottom:6px;line-height:1.25}
.lede {color:var(--muted);line-height:1.65;font-size:16px;max-width:47ch;margin-bottom:21px}
.actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.primary,.secondary,.text-button,.choice,.card {color:var(--ink);border-radius:11px;font-weight:850}
.primary {border:1px solid #d9c2ff;background:#c5a4ff;color:#201237;padding:12px 16px;min-height:46px;box-shadow:0 4px 0 #7252aa}
.primary:hover {background:#e1cbff}
.primary:active {transform:translateY(2px);box-shadow:0 2px 0 #7252aa}
.primary:disabled {opacity:.64;box-shadow:none}
.secondary {border:1px solid #54476d;background:#241d40;padding:11px 14px;min-height:44px}
.secondary:hover,.choice:hover {background:#392953;border-color:var(--lilac)}
.secondary:disabled {opacity:.65}
.text-button {padding:5px 3px;border:0;background:none;color:var(--lilac)}
.text-button:hover {text-decoration:underline}
.hero-progress {margin-top:22px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.dots {display:flex;gap:5px}
.dot {width:17px;height:5px;border-radius:10px;background:#49405f}
.dot.on {background:var(--mint)}
.map {position:relative;min-width:0;aspect-ratio:1.56;isolation:isolate;background:#181433;border:1px solid #4a3b69;border-radius:22px;overflow:hidden;box-shadow:0 18px 55px #08071560}
.map svg {width:100%;height:100%;display:block}
.map-tag {position:absolute;left:17px;top:15px;padding:7px 9px;background:#1b1736e8;border:1px solid #6c5b8c;border-radius:7px;color:#f0e5ff;letter-spacing:.14em;font-size:10px;font-weight:900}
.map-caption {position:absolute;left:17px;right:17px;bottom:13px;display:flex;align-items:center;justify-content:space-between;color:#e5d5ff;font-size:10px;font-weight:900;letter-spacing:.12em;pointer-events:none}
.map-node {display:grid;place-items:center;width:34px;height:34px;position:absolute;transform:translate(-50%,-50%);border:2px solid #ded0ff;border-radius:50%;background:#272047;color:#fff;font-weight:900;box-shadow:0 0 0 5px #c6a8ff27,0 0 20px #a879ffb0;z-index:2}
.map-node:not(:disabled):hover {background:var(--gold);color:var(--page)}
.map-node.done {background:#a4f0d2;color:#16322b;border-color:#e3fff4;box-shadow:0 0 0 5px #a4f0d22b}
.map-node:disabled {border-color:#9a8bb1;color:#d2c4e7;background:#211d3b;box-shadow:none}
.quest-board {margin-top:36px}
.section-head {display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-head .eyebrow {margin-bottom:5px}
.section-head h2 {margin:0}
.section-note {color:var(--muted);font-size:13px;margin:0 0 2px;text-align:right}
.cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card {min-width:0;display:flex;flex-direction:column;text-align:left;padding:15px;background:linear-gradient(135deg,#252044,#1a1734);border:1px solid #45395d;min-height:154px}
button.card:hover {border-color:var(--lilac);background:#30244c}
.card-top {display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:12px}
.emblem {display:grid;place-items:center;width:41px;height:41px;background:#3b2d5a;border-radius:11px;border:1px solid #6b548e;font-size:22px;color:var(--gold);flex:none}
.emblem.mint {background:#203e43;color:var(--mint);border-color:#42686c}
.emblem.rose {background:#482a51;color:#ffbedc;border-color:#74476f}
.pill {border:1px solid #605371;border-radius:30px;padding:4px 8px;color:#d9cce9;font-size:10px;letter-spacing:.09em;font-weight:900;text-transform:uppercase;white-space:nowrap}
.pill.open {background:#2c463f;color:#b6f6db;border-color:#507d6c}
.pill.done {background:#3b304b;color:#ffe096;border-color:#756142}
.card h3 {color:#fff}
.card p {font-weight:500;color:var(--muted);font-size:13px;line-height:1.45;margin-bottom:0}
.site-footer {max-width:1196px;margin:auto;border-top:1px solid #352d4d;padding:14px 34px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#bcb0d2;font-size:11px;font-weight:800;letter-spacing:.1em}
.site-footer b {color:var(--gold)}
.site-footer button {font-size:12px;letter-spacing:0}
.inside {max-width:965px;margin:auto}
.back {margin-bottom:20px}
.page-title {font-size:clamp(38px,5vw,59px);margin-bottom:12px}
.split {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(235px,1fr);gap:16px;align-items:start}
.panel {background:linear-gradient(140deg,#252043,#191632);border:1px solid #473961;border-radius:16px;padding:clamp(16px,3vw,27px);min-width:0}
.panel p,.panel li {color:var(--muted);line-height:1.6}
.story p {margin-bottom:13px;color:#f3ebff;font-size:16px}
.story .mission {font-weight:900;color:var(--gold);margin-bottom:20px}
hr {border:0;border-top:1px solid #4b3d62;margin:19px 0}
.form-label {font-weight:900;display:block;margin-bottom:8px}
input,textarea {border:1px solid #6b5b87;border-radius:9px;background:#17142d;color:#fff;padding:11px 12px}
input {width:min(145px,100%);min-height:44px}
textarea {display:block;width:100%;min-height:92px;resize:vertical;margin:8px 0 4px}
.feedback {margin:13px 0 0!important;color:#ffe1a2!important;font-weight:750}
.feedback:empty {display:none}
.feedback.good {color:var(--mint)!important}
.clue {border-left:3px solid var(--lilac);padding-left:12px;margin-top:15px}
.clue p {margin-bottom:9px;font-size:14px}
.clue h3 {font-size:15px;color:var(--lilac)}
.clue-tools {margin-top:15px}
.note {font-size:13px}
details {margin-top:16px}
summary {cursor:pointer;color:var(--lilac);font-weight:800}
.choice-list {display:grid;gap:8px;margin-bottom:12px}
.choice {border:1px solid #55466e;background:#201a38;text-align:left;padding:10px 12px;min-height:42px}
.choice[aria-pressed="true"] {border-color:var(--gold);color:var(--gold)}
.completion {padding:26px 10px 20px;text-align:center;position:relative;overflow:hidden}
.completion::before {content:"✦   ✧   ✷    ✦   ✧";display:block;letter-spacing:.4em;color:var(--gold);font-size:22px;animation:pop .65s ease-out both;margin-bottom:9px}
@keyframes pop {from {transform:scale(.4);opacity:.2} to {transform:scale(1);opacity:1}}
.completion .emblem {margin:0 auto 14px;width:64px;height:64px;font-size:34px}
.completion p {max-width:55ch;margin:12px auto}
.completion .actions {justify-content:center;margin-top:18px}
.diagram {padding:10px 0}
.crate {display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.crate span,.beats span {display:grid;place-items:center;border:1px solid #66577c;border-radius:5px;min-height:23px;font-size:10px;color:#fff;background:#2a2546}
.crate .blue {background:#345a91}
.crate .gold {background:#6b5022}
.beats {display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:5px 0}
.beats .hit {background:#415f59;color:#e2ffee}
.route-line {display:grid;grid-template-columns:3.5rem 1fr;gap:6px;align-items:center;margin-bottom:7px;font-size:12px;color:var(--muted)}
.route-line div {display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.route-line b {color:var(--gold);background:#382f49;padding:4px 6px;border-radius:5px}
.vault-header {display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:16px}
.vault-header .lede {margin-bottom:0}
.big-balance {min-width:108px;background:#33263d;border:1px solid #705b60;border-radius:12px;color:var(--gold);padding:12px;text-align:center;font-weight:900}
.big-balance b {font-size:23px}
.big-balance small {display:block;margin-top:3px}
.shelf {margin-top:22px}
.shelf .card {min-height:168px}
.shelf .card .actions {margin-top:auto;padding-top:12px}
.shop .emblem {font-size:25px}
.shop .primary,.shop .secondary {min-height:39px;padding:7px 10px;font-size:13px}
.companion {display:flex;align-items:center;gap:9px;color:var(--mint);margin:14px 0 0;font-weight:800}
.portrait {width:63px;height:63px}
.portrait svg {width:100%;height:100%}
.companion .portrait {width:36px;height:36px}
.completion .eyebrow {justify-content:center}
@media(max-width:830px) {.hero {gap:20px;grid-template-columns:minmax(235px,.9fr) minmax(0,1fr)}.map {aspect-ratio:1.31}.map svg {position:absolute;inset:0}.topbar,main,.site-footer {padding-left:22px;padding-right:22px}}
@media(max-width:650px) {.topbar {display:grid;grid-template-columns:1fr auto;padding-top:11px;gap:7px}.tabs {grid-row:2;grid-column:1 / -1;padding-bottom:6px}.player-tools {grid-column:2;grid-row:1}.hero,.split {grid-template-columns:1fr;gap:17px}.hero-copy {padding:0}.map {aspect-ratio:1.56}.quest-board {margin-top:28px}.cards {grid-template-columns:1fr}.card {min-height:123px}.section-note {display:none}.site-footer span:nth-child(2) {display:none}main {padding-top:25px}.vault-header {align-items:start}.shelf .card {min-height:130px}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;scroll-behavior:auto!important}}