@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --night: #08090d;
  --night-2: #10131a;
  --storm: #172332;
  --ivory: #f1eadb;
  --paper: #e5dbc5;
  --ink: #17191d;
  --muted: #69675f;
  --gold: #d7aa55;
  --gold-light: #f0d694;
  --ember: #d85f38;
  --blue: #78a8d2;
  --green: #86a96d;
  --violet: #9477ac;
  --line: rgba(23, 25, 29, .18);
  --white-line: rgba(255, 255, 255, .16);
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--night); font-family: var(--body); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.eyebrow { margin: 0 0 14px; color: var(--gold-light); font: 800 .72rem/1 var(--body); letter-spacing: .17em; text-transform: uppercase; }
.eyebrow--ink { color: #795829; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(3.2rem, 6.6vw, 7.2rem); font-weight: 900; line-height: .82; letter-spacing: -.035em; }
h3 { margin: 0; font-size: 1.45rem; line-height: 1; letter-spacing: .015em; }
p { line-height: 1.65; }

.hero { position: relative; min-height: 910px; display: flex; flex-direction: column; overflow: hidden; color: white; background: #090a0f; }
.hero__art { position: absolute; inset: 0; background: #10131a center 26% / cover no-repeat; transform: scale(1.025); filter: saturate(.84) contrast(1.03); }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,7,10,.99) 0%, rgba(6,7,10,.88) 31%, rgba(6,7,10,.32) 68%, rgba(6,7,10,.42) 100%), linear-gradient(0deg, rgba(6,7,10,.96) 0%, transparent 42%); }
.hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -270px; top: 90px; border: 1px solid rgba(215,170,85,.27); border-radius: 50%; box-shadow: 0 0 0 75px rgba(215,170,85,.03), 0 0 0 150px rgba(120,168,210,.025); }
.nav { position: relative; z-index: 3; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.18); }
.sigil { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sigil span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--night); background: var(--gold); font: 900 1rem var(--display); transform: rotate(45deg); }
.sigil span::first-letter { transform: rotate(-45deg); }
.sigil strong { font: 800 1.05rem var(--display); letter-spacing: .07em; text-transform: uppercase; }
.nav__links { display: flex; gap: 24px; align-items: center; }
.nav__links a { color: rgba(255,255,255,.68); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--gold-light); }
.hero__copy { position: relative; z-index: 2; flex: 1; padding: 145px 0 135px; }
.hero h1 { max-width: 830px; margin: 0; font-size: clamp(5.2rem, 10.7vw, 11.5rem); font-weight: 900; line-height: .72; letter-spacing: -.045em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero__lede { max-width: 650px; margin: 32px 0; color: rgba(255,255,255,.72); font-size: 1.08rem; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-size: .73rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; transition: transform .18s, background .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); }
.button--gold { color: #15130e; background: var(--gold); }
.button--ghost { color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.public-note { margin-top: 22px; color: rgba(255,255,255,.4); font: 600 .68rem var(--body); letter-spacing: .05em; text-transform: uppercase; }
.stat-ribbon { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.18); background: rgba(5,6,9,.86); backdrop-filter: blur(14px); }
.stat-ribbon div { min-height: 114px; padding: 25px clamp(20px, 3.4vw, 55px); border-right: 1px solid rgba(255,255,255,.12); }
.stat-ribbon div:last-child { border-right: 0; }
.stat-ribbon strong { display: block; color: var(--gold); font: 900 2.4rem/1 var(--display); }
.stat-ribbon span { display: block; margin-top: 7px; color: rgba(255,255,255,.49); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }

section { padding: 110px 0; }
.ivory { background: var(--ivory); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(42px, 8vw, 120px); align-items: end; }
.section-head > p, .section-head > div:last-child > p { margin: 0; color: var(--muted); }
.section-head--light { color: white; }
.section-head--light > p, .section-head--light > div:last-child > p { color: rgba(255,255,255,.6); }
.flight-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 68px; border-top: 2px solid var(--ink); }
.flight-grid article { min-height: 300px; padding: 26px 25px 20px 0; border-right: 1px solid var(--line); }
.flight-grid article + article { padding-left: 25px; }
.flight-grid article:last-child { border-right: 0; }
.flight-grid span { display: block; margin-bottom: 68px; color: #8e6a35; font: 900 2.1rem/1 var(--display); }
.flight-grid p { color: var(--muted); font-size: .9rem; }
.keep-strip { margin-top: 32px; padding: 22px 0; display: grid; grid-template-columns: 190px 1fr auto; gap: 30px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.keep-strip strong { font: 800 1.2rem var(--display); text-transform: uppercase; }
.keep-strip p { margin: 0; color: var(--muted); font-size: .86rem; }
.text-button { padding: 0; color: #755321; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; font-size: .72rem; font-weight: 800; text-transform: uppercase; }

.storm { color: white; background: radial-gradient(circle at 85% 18%, rgba(120,168,210,.2), transparent 32%), radial-gradient(circle at 12% 85%, rgba(148,119,172,.12), transparent 28%), var(--storm); }
.console-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 9vw, 130px); align-items: center; }
.console-copy h2 { max-width: 620px; }
.console-copy > p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.64); }
.rule-chip { margin-top: 35px; padding: 22px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.055); }
.rule-chip span { display: block; margin-bottom: 7px; color: var(--gold-light); font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rule-chip strong { font-size: .9rem; }
.console { padding: 34px; border: 1px solid rgba(255,255,255,.17); background: rgba(4,7,11,.72); box-shadow: 20px 20px 0 rgba(4,7,11,.28); }
.console > label, .myriad-controls > label { display: block; margin-bottom: 18px; color: var(--gold-light); font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.console input[type="number"], .myriad-controls input[type="number"], .myriad-controls select { width: 100%; min-height: 49px; margin-top: 8px; padding: 0 13px; color: white; border: 1px solid rgba(255,255,255,.19); background: #121926; }
.console small, .myriad-controls small { display: block; margin-top: 6px; color: rgba(255,255,255,.42); font-size: .67rem; letter-spacing: 0; text-transform: none; }
.console fieldset { display: grid; gap: 10px; margin: 25px 0; padding: 0; border: 0; }
.console legend { margin-bottom: 11px; color: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.console fieldset label { color: rgba(255,255,255,.7); font-size: .8rem; }
input[type="checkbox"] { accent-color: var(--gold); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.result-grid div { padding: 20px 15px; border-right: 1px solid rgba(255,255,255,.13); }
.result-grid div:last-child { border-right: 0; }
.result-grid strong { display: block; color: var(--gold); font: 900 3rem/1 var(--display); }
.result-grid span { color: rgba(255,255,255,.48); font-size: .61rem; text-transform: uppercase; }
.console-note { margin-bottom: 0; color: rgba(255,255,255,.5); font-size: .75rem; }

.myriad-workbench { display: grid; grid-template-columns: 390px 1fr; gap: 16px; margin-top: 60px; }
.myriad-controls { padding: 28px; color: white; background: var(--night-2); }
.myriad-controls .check-row { display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,.68); letter-spacing: 0; text-transform: none; }
.myriad-result { min-height: 390px; padding: 48px; display: flex; flex-direction: column; justify-content: center; color: white; background: linear-gradient(135deg, #1c2b3c, #191722 58%, #3d2722); }
.myriad-result .copy-count { color: var(--gold); font: 900 clamp(5rem, 10vw, 9rem)/.8 var(--display); }
.myriad-result h3 { margin: 18px 0 7px; font-size: 2rem; }
.myriad-result p { max-width: 650px; margin: 6px 0; color: rgba(255,255,255,.63); }
.myriad-result .warning { color: var(--gold-light); font-weight: 700; }
.truth-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border: 1px solid var(--line); }
.truth-grid article { min-height: 190px; padding: 24px; border-right: 1px solid var(--line); }
.truth-grid article:last-child { border-right: 0; }
.truth-grid span { color: #765321; font: 800 .72rem var(--body); letter-spacing: .05em; text-transform: uppercase; }
.truth-grid p { color: var(--muted); font-size: .82rem; }

.vault { color: white; background: linear-gradient(145deg, #08090d, #141119 50%, #281912); }
.route-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 55px; }
.route-tabs button { padding: 12px 15px; color: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.16); background: transparent; cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.route-tabs button[aria-selected="true"], .route-tabs button:hover, .route-tabs button:focus-visible { color: #16120d; border-color: var(--gold); background: var(--gold); }
.route-stage { min-height: 330px; margin-top: 18px; display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); }
.route-stage__steps { padding: 38px; }
.route-stage__steps h3 { font-size: 2.2rem; }
.route-stage__steps ol { margin: 25px 0 0; padding-left: 22px; color: rgba(255,255,255,.65); }
.route-stage__steps li { padding: 7px 0 7px 8px; }
.route-stage__cards { padding: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: center; background: rgba(0,0,0,.23); }
.route-card { min-height: 220px; padding: 13px; display: flex; align-items: end; color: white; text-align: left; border: 1px solid rgba(255,255,255,.17); background: #1c1b22 center / cover; box-shadow: inset 0 -100px 65px -45px rgba(5,6,8,.98); cursor: zoom-in; font: 800 .75rem/1.15 var(--body); }
.cast-warning { margin-top: 18px; padding: 22px; display: grid; grid-template-columns: 170px 1fr; gap: 25px; border-left: 3px solid var(--ember); background: rgba(216,95,56,.08); }
.cast-warning strong { color: #f0a184; font: 900 1.25rem var(--display); text-transform: uppercase; }
.cast-warning p { margin: 0; color: rgba(255,255,255,.55); }

.line-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 58px; }
.line-card { min-height: 360px; padding: 32px; border: 1px solid var(--line); background: rgba(255,255,255,.26); }
.line-card--infinite { color: white; border-color: #202632; background: #202632; }
.line-card > span { color: #8d6730; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.line-card--infinite > span { color: var(--gold-light); }
.line-card h3 { margin-top: 18px; font-size: 2rem; }
.line-card ol { min-height: 140px; padding-left: 21px; color: var(--muted); }
.line-card--infinite ol { color: rgba(255,255,255,.61); }
.line-card li { padding: 5px 0; }
.line-card > strong { color: #765321; font-size: .76rem; text-transform: uppercase; }
.line-card--infinite > strong { color: var(--gold-light); }
.klauth-note { margin-top: 18px; padding: 22px; display: grid; grid-template-columns: 220px 1fr; gap: 25px; border: 1px solid var(--line); }
.klauth-note strong { font: 900 1.35rem var(--display); text-transform: uppercase; }
.klauth-note p { margin: 0; color: var(--muted); }

.hand-section { color: white; background: radial-gradient(circle at 12% 20%, rgba(215,170,85,.15), transparent 28%), #11151b; }
.hand-cards { min-height: 190px; margin-top: 48px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.hand-card { min-height: 190px; padding: 12px; display: flex; align-items: end; overflow: hidden; color: white; text-align: left; border: 1px solid rgba(255,255,255,.16); background: #262832 center / cover; box-shadow: inset 0 -100px 70px -42px rgba(5,6,8,.96); cursor: zoom-in; font-size: .67rem; font-weight: 800; line-height: 1.18; }
.hand-verdict { margin: 20px 0 0; padding: 18px 20px; color: rgba(255,255,255,.62); border-left: 3px solid var(--gold); background: rgba(255,255,255,.045); }
.hand-verdict strong { color: var(--gold-light); }

.catalog { color: white; background: #0b0d12; }
.catalog-controls { display: grid; grid-template-columns: 1fr 310px; gap: 12px; margin: 48px 0 24px; }
.catalog-controls label { color: rgba(255,255,255,.46); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-controls input, .catalog-controls select { width: 100%; min-height: 50px; margin-top: 8px; padding: 0 14px; color: white; border: 1px solid rgba(255,255,255,.17); background: #141820; }
.catalog-controls option { color: var(--ink); background: white; }
.card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.card-tile { padding: 0; overflow: hidden; color: white; text-align: left; border: 1px solid rgba(255,255,255,.12); background: #141820; cursor: zoom-in; }
.card-tile__art { display: block; aspect-ratio: 1.35 / 1; background: #20242c center / cover; transition: transform .2s, filter .2s; }
.card-tile:hover .card-tile__art, .card-tile:focus-visible .card-tile__art { filter: saturate(1.25); transform: scale(1.03); }
.card-tile__body { min-height: 122px; display: block; padding: 14px; }
.card-tile__role { color: var(--gold); font-size: .57rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.card-tile__name { display: block; margin-top: 7px; font-size: .84rem; font-weight: 800; line-height: 1.18; }
.card-tile__tags { display: block; margin-top: 10px; color: rgba(255,255,255,.38); font-size: .59rem; }
.empty { padding: 35px; text-align: center; border: 1px dashed rgba(255,255,255,.2); }

.deck-section { color: white; background: #050609; }
.deck-intro { display: grid; grid-template-columns: 1.35fr .65fr; gap: 80px; align-items: end; padding-bottom: 55px; border-bottom: 1px solid rgba(255,255,255,.14); }
.deck-intro__aside { max-width: 440px; }
.deck-intro__aside p { color: rgba(255,255,255,.5); }
.snapshot { font-size: .67rem; }
.deck-columns { columns: 4; column-gap: 52px; margin-top: 55px; }
.deck-role { break-inside: avoid; margin-bottom: 34px; }
.deck-role h3 { margin-bottom: 11px; color: var(--gold); font: 900 .77rem var(--body); letter-spacing: .08em; }
.deck-card { width: 100%; padding: 4px 0; display: block; color: rgba(255,255,255,.71); text-align: left; border: 0; background: transparent; cursor: zoom-in; font-size: .86rem; line-height: 1.4; }
.deck-card:hover, .deck-card:focus-visible { color: var(--gold-light); transform: translateX(3px); }

footer { padding: 35px 0; color: rgba(255,255,255,.45); background: #020204; font-size: .7rem; }
footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
footer strong { color: var(--gold); font: 900 1rem var(--display); text-transform: uppercase; }
footer a { color: var(--gold-light); }

dialog { width: min(850px, calc(100% - 28px)); padding: 0; color: var(--ink); border: 0; background: var(--ivory); box-shadow: 0 45px 130px #000; }
dialog::backdrop { background: rgba(3,4,7,.87); backdrop-filter: blur(7px); }
.dialog-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 42px; height: 42px; color: var(--night); border: 0; background: var(--gold); cursor: pointer; font-size: 1.45rem; }
.dialog-card { display: grid; grid-template-columns: .8fr 1.2fr; }
.dialog-card img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.dialog-copy { padding: 42px; }
.dialog-copy .tag { color: #795829; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dialog-copy h2 { margin: 12px 0 24px; font-size: 3.1rem; line-height: .88; }
.dialog-copy .oracle { white-space: pre-line; color: var(--muted); }
.dialog-copy a { color: #70501f; font-weight: 800; }
.companion-preview { --companion-preview-background: rgba(8,9,13,.97); --companion-preview-border: rgba(215,170,85,.62); --companion-preview-radius: 3px; --companion-preview-shadow: 0 28px 85px rgba(0,0,0,.66), 0 0 0 1px rgba(120,168,210,.13); --companion-preview-meta-font: var(--body); }

.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

@media (max-width: 1050px) {
  .nav__links a:nth-child(-n+3) { display: none; }
  .flight-grid { grid-template-columns: 1fr 1fr; }
  .flight-grid article:nth-child(2) { border-right: 0; }
  .section-head, .console-layout { grid-template-columns: 1fr; }
  .myriad-workbench { grid-template-columns: 330px 1fr; }
  .truth-grid { grid-template-columns: 1fr 1fr; }
  .truth-grid article:nth-child(2) { border-right: 0; }
  .route-stage { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .hand-cards { grid-template-columns: repeat(4, 1fr); }
  .deck-columns { columns: 3; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 28px, 1220px); }
  .hero { min-height: 820px; }
  .hero__veil { background: linear-gradient(0deg, rgba(6,7,10,.98) 8%, rgba(6,7,10,.54) 65%, rgba(6,7,10,.75)); }
  .nav { min-height: 72px; }
  .sigil strong { display: none; }
  .nav__links a { display: none !important; }
  .nav__links a:last-child { display: block !important; }
  .hero__copy { padding: 150px 0 80px; }
  .hero h1 { font-size: clamp(4.1rem, 20vw, 7rem); }
  .hero__lede { font-size: .96rem; }
  .stat-ribbon { grid-template-columns: repeat(2, 1fr); }
  .stat-ribbon div { min-height: 92px; padding: 19px 22px; }
  .stat-ribbon div:nth-child(even) { border-right: 0; }
  .stat-ribbon div:last-child { grid-column: span 2; }
  section { padding: 75px 0; }
  h2 { font-size: clamp(3rem, 16vw, 5.5rem); }
  .flight-grid { grid-template-columns: 1fr; }
  .flight-grid article, .flight-grid article + article { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .flight-grid span { margin-bottom: 12px; }
  .keep-strip { grid-template-columns: 1fr; gap: 12px; }
  .console { padding: 24px; box-shadow: 8px 8px 0 rgba(4,7,11,.28); }
  .result-grid strong { font-size: 2.2rem; }
  .result-grid span { font-size: .53rem; }
  .myriad-workbench { grid-template-columns: 1fr; }
  .myriad-result { min-height: 330px; padding: 30px; }
  .truth-grid { grid-template-columns: 1fr; }
  .truth-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .route-stage__cards { grid-template-columns: 1fr 1fr; }
  .route-card { min-height: 180px; }
  .cast-warning, .klauth-note { grid-template-columns: 1fr; gap: 8px; }
  .line-grid { grid-template-columns: 1fr; }
  .line-card { min-height: auto; }
  .line-card ol { min-height: auto; }
  .hand-cards { grid-template-columns: repeat(2, 1fr); }
  .hand-card { min-height: 160px; }
  .catalog-controls { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .deck-intro { grid-template-columns: 1fr; gap: 25px; }
  .deck-columns { columns: 1; }
  footer .shell { display: block; }
  footer span, footer a { display: block; margin-top: 8px; }
  .dialog-card { grid-template-columns: 1fr; }
  .dialog-card img { min-height: 300px; max-height: 420px; }
  .dialog-copy { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}