:root {
  --ink: #07151c;
  --ink-soft: #10262f;
  --ink-line: #28424a;
  --paper: #f1ead8;
  --paper-deep: #e3d8bf;
  --teal: #55c6bf;
  --teal-dark: #177b79;
  --gold: #d6aa55;
  --gold-pale: #f0d79b;
  --wine: #743a57;
  --white: #fffdf6;
  --muted: #799097;
  --rail: 15rem;
  --radius: 1.15rem;
  --shadow: 0 1.5rem 4rem rgb(1 11 16 / 22%);
  --companion-preview-background: rgb(7 21 28 / 97%);
  --companion-preview-border: var(--gold);
  --companion-preview-radius: var(--radius);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  padding: .7rem 1rem;
  background: var(--paper);
  border-radius: .4rem;
  transition: top .2s ease;
}

.skip-link:focus { top: 1rem; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--rail);
  padding: 1.65rem 1.35rem;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  background:
    radial-gradient(circle at 40% 0%, rgb(85 198 191 / 10%), transparent 30%),
    var(--ink);
  border-right: 1px solid var(--ink-line);
}

.brand {
  display: flex;
  gap: .8rem;
  align-items: center;
  text-decoration: none;
}

.brand__seal {
  width: 2.65rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-pale);
  font: 700 1.2rem Georgia, serif;
  box-shadow: inset 0 0 0 .25rem var(--ink), inset 0 0 0 .3rem rgb(214 170 85 / 45%);
}

.brand strong, .brand small { display: block; }
.brand strong { font: 700 .96rem Georgia, serif; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: .7rem; margin-top: .1rem; }

.rail__status {
  margin: 2rem 0 1rem;
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rail__status i {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 .25rem rgb(85 198 191 / 12%);
}

.rail nav { display: grid; gap: .12rem; }
.rail nav a {
  padding: .63rem .7rem;
  border-left: 2px solid transparent;
  color: #a9bbc0;
  text-decoration: none;
  font-size: .78rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rail nav a:hover, .rail nav a:focus-visible {
  color: var(--white);
  border-color: var(--gold);
  background: rgb(255 255 255 / 3%);
}

.all-decks {
  margin-top: auto;
  color: var(--muted);
  font-size: .75rem;
  text-underline-offset: .25rem;
}

main { margin-left: var(--rail); overflow: hidden; }

.hero {
  position: relative;
  min-height: min(52rem, 100vh);
  display: grid;
  align-items: end;
  padding: clamp(3rem, 7vw, 7rem);
  color: var(--paper);
  isolation: isolate;
}

.hero__art, .hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero__art { object-fit: cover; object-position: center 24%; background: var(--ink-soft); }
.hero__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(4 16 22 / 92%) 0%, rgb(4 16 22 / 63%) 47%, rgb(4 16 22 / 17%) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 40%);
}

.hero__copy { max-width: 47rem; padding-bottom: 5.5rem; }
.eyebrow, .kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.02; }
h1 {
  margin-bottom: 1.4rem;
  color: var(--white);
  font-size: clamp(4.6rem, 11vw, 10.5rem);
  letter-spacing: -.075em;
  text-wrap: balance;
}
h1 em { color: var(--gold-pale); font-weight: 400; }
h2 { margin-bottom: 0; font-size: clamp(2.7rem, 5vw, 5.8rem); letter-spacing: -.05em; }
h3 { font-size: 1.45rem; }

.hero__lede {
  max-width: 38rem;
  margin-bottom: 2rem;
  color: #cbd7d7;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.hero__actions, .deck-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.8rem;
  padding: .65rem 1.1rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .04em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.button:hover { transform: translateY(-2px); }
.button--gold { border-color: var(--gold); color: var(--ink); background: var(--gold); }
.button--ghost { border-color: rgb(255 255 255 / 30%); color: var(--paper); background: rgb(7 21 28 / 45%); }

.hero__stats {
  position: absolute;
  left: clamp(3rem, 7vw, 7rem);
  right: clamp(3rem, 7vw, 7rem);
  bottom: 1.6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 42rem;
  border-top: 1px solid rgb(255 255 255 / 20%);
}
.hero__stats div { padding: 1rem 1rem .4rem 0; }
.hero__stats strong, .hero__stats span { display: block; }
.hero__stats strong { color: var(--white); font: 700 1.45rem Georgia, serif; }
.hero__stats span { color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .12em; }

.section { padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 7vw, 7.5rem); }
.section--paper { background: var(--paper); }
.section--ink { color: var(--paper); background: var(--ink); }
.section__head {
  display: grid;
  grid-template-columns: minmax(16rem, 1.1fr) minmax(17rem, .65fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.section__head > p { margin-bottom: .35rem; max-width: 36rem; color: #57666b; }
.section--ink .section__head > p { color: #93a8ad; }
.section--paper .kicker { color: var(--teal-dark); }

.identity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #b8ab8f;
  border-bottom: 1px solid #b8ab8f;
}
.identity-grid article { padding: 2.2rem 1.4rem 2rem 0; }
.identity-grid article + article { padding-left: 1.4rem; border-left: 1px solid #cbbfa6; }
.identity-grid span, .timeline span, .loop-track span {
  color: var(--teal-dark);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.identity-grid strong { display: block; margin: .35rem 0 .7rem; font: 700 1.5rem Georgia, serif; }
.identity-grid p { margin: 0; color: #586168; font-size: .86rem; }
blockquote {
  max-width: 56rem;
  margin: 4rem 0 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--gold);
  color: #3b464b;
  font: italic 1.2rem/1.55 Georgia, serif;
}

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); }
.timeline article { display: grid; grid-template-columns: 3rem 1fr; gap: .7rem; padding-right: 1.5rem; }
.timeline article + article { padding-left: 1.5rem; border-left: 1px solid var(--ink-line); }
.timeline b {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-pale);
  font: 400 .75rem Georgia, serif;
}
.timeline span { color: var(--teal); }
.timeline h3 { margin: .4rem 0 .7rem; }
.timeline p { margin: 0; color: #96aaae; font-size: .83rem; }

.lab-shell {
  display: grid;
  grid-template-columns: minmax(17rem, .7fr) minmax(24rem, 1.3fr);
  gap: 2rem;
  padding: clamp(1.4rem, 4vw, 3.25rem);
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink-soft);
  box-shadow: var(--shadow);
}
.lab-controls { display: grid; gap: 1.2rem; align-content: center; }
.lab-controls label { display: grid; gap: .55rem; color: #bfccce; font-size: .75rem; }
select, input[type="search"] {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid #38525b;
  border-radius: .45rem;
  color: var(--paper);
  background: #0a1b23;
}
input[type="range"] { width: 100%; accent-color: var(--gold); }
output { float: right; color: var(--gold-pale); font-weight: 800; }
.switch { grid-template-columns: 2.8rem 1fr; align-items: center; }
.switch input { position: absolute; opacity: 0; }
.switch > span { position: relative; height: 1.45rem; border-radius: 999px; background: #38515a; }
.switch > span::after {
  content: "";
  position: absolute;
  top: .18rem;
  left: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .16s ease;
}
.switch input:checked + span { background: var(--teal-dark); }
.switch input:checked + span::after { transform: translateX(1.3rem); }
.switch b { font-size: .75rem; }

.vote-output { display: grid; grid-template-columns: 10rem 1fr; gap: 1.4rem; align-items: center; }
.vote-ring {
  width: 9.5rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 .55rem var(--ink-soft), inset 0 0 0 .6rem rgb(214 170 85 / 35%);
}
.vote-ring span { color: var(--gold-pale); font: 700 3.7rem Georgia, serif; line-height: .9; }
.vote-ring small { color: #99aaae; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.token-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.token {
  position: relative;
  min-height: 7.2rem;
  display: grid;
  align-content: center;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: .7rem;
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: 0 .45rem 1.2rem rgb(0 0 0 / 12%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.token::after {
  content: "";
  position: absolute;
  width: 4.8rem;
  aspect-ratio: 1;
  right: -1.6rem;
  top: -1.9rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .15;
  box-shadow: 0 0 0 .55rem currentColor;
}
.token:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / 18%); }
.token span { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.token strong { margin: .16rem 0 .4rem; font: 700 2.6rem Georgia, serif; line-height: 1; }
.token small { font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .74; }
.token small b { display: inline-block; margin-left: .15rem; font-size: .72rem; transition: transform .16s ease; }
.token:hover small b { transform: translate(.12rem, -.12rem); }
.token--clue { color: #d7ffff; background: #176c75; }
.token--treasure { color: #2b210c; background: var(--gold); }
.token--food { color: #f4dce8; background: var(--wine); }
.readiness { grid-column: 1 / -1; padding: 1.1rem 1.25rem; border-left: 3px solid var(--gold); background: #0a1b23; }
.readiness span { display: block; color: var(--teal); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.readiness strong { display: block; margin: .15rem 0; font-family: Georgia, serif; font-size: 1.25rem; }
.readiness p { margin: 0; color: #8fa2a7; font-size: .76rem; }
.readiness--short { border-color: var(--wine); }
.readiness--short span { color: #df9dbd; }
.rule-note { margin: 1.5rem 0 0; color: #546167; font-size: .82rem; }

.loop-track { display: grid; grid-template-columns: 1fr 2rem 1fr 2rem 1fr 2rem 1fr; align-items: center; }
.loop-track article { min-height: 14rem; padding: 1.5rem; border: 1px solid var(--ink-line); border-radius: .85rem; }
.loop-track h3 { margin: 2.5rem 0 .6rem; }
.loop-track p { margin: 0; color: #91a5a9; font-size: .82rem; }
.loop-track i { height: 1px; background: var(--gold); }
.drain-lab {
  display: grid;
  grid-template-columns: 1fr .8fr .8fr;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  border-radius: var(--radius);
  color: var(--ink);
  border: 1px solid #cbbb99;
  background: linear-gradient(135deg, #f6efdf, #e8dcc2);
}
.drain-lab .kicker { color: var(--teal-dark); }
.drain-lab form {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: 1.1rem 1.2rem;
  border: 1px solid #d3c5a7;
  border-radius: .75rem;
  background: rgb(255 253 246 / 52%);
}
.drain-lab form > label { display: grid; gap: .55rem; color: #35484f; font-size: .75rem; font-weight: 650; }
.drain-lab form output { color: #7a5713; }
.drain-lab form input[type="range"] { accent-color: #9a701e; }
.check { grid-template-columns: 1rem 1fr; align-items: center; }
.check input { width: .95rem; height: .95rem; accent-color: var(--teal-dark); }
.drain-result { align-self: center; padding-left: 1.5rem; border-left: 1px solid #b8ab8f; }
.drain-result strong, .drain-result span { display: block; }
.drain-result strong { color: var(--wine); font: 700 3.5rem Georgia, serif; line-height: 1; }
.drain-result span { font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.drain-result p { margin: .7rem 0 0; color: #596368; font-size: .78rem; }

.hand-console {
  --verdict: var(--teal-dark);
  display: grid;
  grid-template-columns: minmax(15rem, .34fr) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.15rem;
  border: 1px solid #c8bba0;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #e9dec7, #f4eddd);
  box-shadow: 0 1.4rem 3rem rgb(73 55 25 / 10%);
}
.hand-console[data-verdict="keepable"] { --verdict: #9a701e; }
.hand-console[data-verdict="borderline"] { --verdict: #a55d35; }
.hand-console[data-verdict="ship"] { --verdict: var(--wine); }
.hand-summary {
  min-width: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border-radius: .85rem;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgb(16 38 47 / 97%), rgb(7 21 28 / 100%)),
    var(--ink-soft);
  box-shadow: inset 4px 0 var(--verdict);
}
.hand-summary .kicker { margin-bottom: .65rem; color: var(--teal); }
.hand-summary h3 { margin: .4rem 0 .85rem; color: var(--white); font-size: clamp(2.2rem, 4vw, 3.5rem); }
.hand-summary > div > p:not(.kicker) { margin: 0; color: #b6c5c8; font-size: .84rem; }
.hand-signal {
  display: inline-flex;
  padding: .38rem .58rem;
  border: 1px solid color-mix(in srgb, var(--verdict) 70%, white);
  border-radius: 999px;
  color: #eff8f6;
  background: color-mix(in srgb, var(--verdict) 23%, transparent);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hand-summary .button { align-self: flex-start; }
.hand-stage { min-width: 0; padding: .35rem .35rem .2rem; }
.hand-stage__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin: .15rem 0 .75rem; }
.hand-stage__head span { color: #35474d; font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hand-stage__head small { color: #647176; font-size: .66rem; }
.hand-cards { display: grid; grid-template-columns: repeat(7, minmax(5.4rem, 1fr)); gap: .6rem; }
.mini-card {
  --card-accent: var(--teal);
  min-width: 0;
  min-height: 13rem;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6rem 1fr;
  border: 1px solid rgb(7 21 28 / 18%);
  border-radius: .65rem;
  color: var(--paper);
  background: var(--ink-soft);
  font: inherit;
  text-align: left;
  box-shadow: 0 .35rem 1rem rgb(7 21 28 / 14%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mini-card:hover { transform: translateY(-5px); border-color: var(--card-accent); box-shadow: 0 .9rem 1.6rem rgb(7 21 28 / 22%); }
.mini-card__art { position: relative; display: block; overflow: hidden; background: #0a1b23; }
.mini-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 21 28 / 45%), transparent 55%); box-shadow: inset 0 -3px var(--card-accent); }
.mini-card__art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; transition: transform .25s ease; }
.mini-card:hover .mini-card__art img { transform: scale(1.05); }
.mini-card__body { min-width: 0; padding: .72rem; display: grid; grid-template-rows: auto 1fr auto; gap: .42rem; }
.mini-card__role { overflow: hidden; color: var(--card-accent); font-size: .53rem; font-weight: 850; letter-spacing: .09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.mini-card strong { color: var(--white); font: 700 .78rem/1.15 Georgia, serif; overflow-wrap: anywhere; }
.mini-card__cost { color: var(--gold-pale); font-size: .62rem; }
.mini-card--commander { --card-accent: var(--gold); }
.mini-card--lands { --card-accent: #8eb7d0; }
.mini-card--mana { --card-accent: #d6aa55; }
.mini-card--card-advantage { --card-accent: #b8a4dc; }
.mini-card--sieve-access { --card-accent: #e38bb4; }
.mini-card--stack-protection { --card-accent: #6dc4d6; }
.mini-card--flexible-answers { --card-accent: #e18a6c; }
.mini-card--token-engine { --card-accent: #77c69b; }
.hand-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin-top: .65rem; }
.hand-metric { min-width: 0; padding: .62rem .7rem; display: flex; justify-content: space-between; align-items: baseline; gap: .35rem; border: 1px solid #c8b99a; border-radius: .55rem; color: #5b676b; background: rgb(255 253 246 / 46%); }
.hand-metric strong { color: #7b725f; font: 700 1.05rem Georgia, serif; }
.hand-metric span { overflow: hidden; font-size: .58rem; font-weight: 750; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hand-metric--active { border-color: color-mix(in srgb, var(--verdict) 45%, #c8b99a); color: #304249; background: rgb(255 253 246 / 72%); }
.hand-metric--active strong { color: var(--verdict); }
.keep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.keep-grid article { padding: 1.25rem; border-top: 3px solid var(--teal-dark); background: #e6dcc5; }
.keep-grid article:nth-child(2) { border-color: #9a701e; }
.keep-grid article:nth-child(3) { border-color: var(--wine); }
.keep-grid strong { color: var(--teal-dark); font: 700 1.2rem Georgia, serif; }
.keep-grid p { margin: .4rem 0 0; color: #5b6568; font-size: .8rem; }

.answer-tabs, .filters { display: flex; gap: .55rem; flex-wrap: wrap; }
.answer-tabs { margin-bottom: 1rem; }
.answer-tabs button, .filters button {
  padding: .55rem .85rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: #a8babf;
  background: transparent;
  font-size: .7rem;
}
.answer-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--gold); background: var(--gold); }
.answer-panel {
  min-height: 15rem;
  display: grid;
  grid-template-columns: minmax(16rem, .8fr) minmax(18rem, 1.2fr);
  gap: 3rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-soft);
}
.answer-panel h3 { margin-bottom: .9rem; font-size: 2rem; }
.answer-panel p { margin: 0; color: #94a8ac; }
.answer-cards { display: flex; gap: .65rem; flex-wrap: wrap; }
.answer-card {
  padding: .75rem 1rem;
  border: 1px solid #3c565e;
  border-radius: .55rem;
  color: var(--paper);
  background: #0a1b23;
  font: 700 .8rem Georgia, serif;
}
.answer-card:hover { border-color: var(--teal); }
.discipline-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; }
.discipline-grid article { padding: 1.25rem 1.25rem 0 0; }
.discipline-grid article + article { padding-left: 1.25rem; border-left: 1px solid var(--ink-line); }
.discipline-grid span { color: var(--teal); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.discipline-grid p { margin: .45rem 0 0; color: #8fa3a7; font-size: .78rem; }

.explorer-toolbar { display: grid; grid-template-columns: 1fr minmax(14rem, .5fr); gap: 1rem 2rem; align-items: end; }
.filters button { color: #4a5b60; border-color: #b9ac91; }
.filters button[aria-pressed="true"] { color: var(--paper); border-color: var(--teal-dark); background: var(--teal-dark); }
.search span { display: block; margin-bottom: .35rem; color: #526166; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.search input { color: var(--ink); border-color: #b9ac91; background: #fffaf0; }
.deck-actions { grid-column: 1 / -1; }
.deck-actions .button { border-color: #a99b80; }
.fine-print { min-height: 1.2rem; margin: .8rem 0; color: var(--teal-dark); font-size: .72rem; }
.card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.card-tile {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid #c5b89d;
  border-radius: .75rem;
  color: var(--ink);
  text-align: left;
  background: #fffaf0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-tile:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgb(7 21 28 / 14%); }
.card-tile img { width: 100%; aspect-ratio: 488 / 350; object-fit: cover; object-position: center 18%; background: var(--ink-soft); }
.card-tile__copy { padding: .85rem; }
.card-tile strong { display: block; margin-bottom: .35rem; font: 700 .92rem/1.12 Georgia, serif; }
.card-tile span { color: var(--teal-dark); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-tile small { float: right; color: #59676b; font-size: .62rem; }
.empty { grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; color: #697579; }

.telemetry { background: var(--paper-deep); }
.telemetry-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 4rem; border: 1px solid #bdaf93; }
.telemetry-strip article { padding: 1.5rem; }
.telemetry-strip article + article { border-left: 1px solid #bdaf93; }
.telemetry-strip strong, .telemetry-strip span { display: block; }
.telemetry-strip strong { color: var(--wine); font: 700 2.5rem Georgia, serif; }
.telemetry-strip span { color: #5d686b; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.chart-grid article { padding: 1.5rem; background: rgb(255 253 246 / 42%); }
.chart-grid h3 { font-size: 1.25rem; }
.bars { display: grid; gap: .7rem; }
.bar { display: grid; grid-template-columns: 6.8rem 1fr 2rem; gap: .55rem; align-items: center; }
.bar span { overflow: hidden; color: #4e5b60; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.bar i { height: .55rem; border-radius: 999px; background: #c7baa0; overflow: hidden; }
.bar i::before { content: ""; display: block; width: var(--width); height: 100%; background: var(--teal-dark); }
.bar b { color: var(--wine); font: 700 .75rem Georgia, serif; text-align: right; }
.game-changers { margin-top: 2rem; border-top: 1px solid #b9aa8e; border-bottom: 1px solid #b9aa8e; }
.game-changers summary { padding: 1rem 0; display: flex; justify-content: space-between; cursor: pointer; font: 700 1rem Georgia, serif; }
.game-changers summary b { color: var(--wine); }
#gc-list { display: flex; gap: .5rem; flex-wrap: wrap; padding: 0 0 1.2rem; }
#gc-list span { padding: .35rem .6rem; border-radius: 999px; color: var(--paper); background: var(--wine); font-size: .66rem; }

footer {
  padding: 2rem clamp(2rem, 7vw, 7.5rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: #789097;
  background: #041017;
  font-size: .65rem;
}
footer p { margin: 0; }

.card-modal {
  width: min(56rem, calc(100% - 2rem));
  padding: 0;
  overflow: hidden;
  grid-template-columns: minmax(14rem, .75fr) 1.25fr;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink-soft);
  box-shadow: 0 3rem 8rem rgb(0 0 0 / 50%);
}
.card-modal[open] { display: grid; }
.card-modal::backdrop { background: rgb(2 11 16 / 78%); backdrop-filter: blur(5px); }
.card-modal > img { width: 100%; height: 100%; min-height: 31rem; object-fit: cover; }
.modal-copy { padding: clamp(1.5rem, 5vw, 3.5rem); align-self: center; }
.modal-copy h2 { font-size: 2.5rem; }
.modal-copy > p { color: #b2c0c2; white-space: pre-line; }
.modal-copy .kicker { color: var(--teal); }
.modal-copy .card-type { color: var(--gold-pale); font-size: .8rem; }
.modal-copy .button { margin-top: 1rem; color: var(--paper); }
.modal-close {
  position: absolute;
  right: .8rem;
  top: .7rem;
  z-index: 1;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  color: var(--paper);
  background: rgb(7 21 28 / 78%);
  font-size: 1.4rem;
}

.token-modal {
  width: min(48rem, calc(100% - 2rem));
  padding: 0;
  overflow: hidden;
  grid-template-columns: minmax(17rem, .82fr) 1.18fr;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink-soft);
  box-shadow: 0 3rem 8rem rgb(0 0 0 / 55%);
}
.token-modal[open] { display: grid; }
.token-modal::backdrop { background: rgb(2 11 16 / 78%); backdrop-filter: blur(5px); }
.token-modal__visual {
  min-height: 31rem;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgb(85 198 191 / 16%), transparent 15rem), #081820;
}
.token-modal__visual .kicker { align-self: flex-start; color: var(--teal); }
.token-portrait {
  --token-tone: var(--teal);
  position: relative;
  width: min(14rem, 80%);
  aspect-ratio: 5 / 7;
  padding: 1rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--token-tone) 70%, white);
  border-radius: 1rem;
  color: var(--white);
  background: linear-gradient(145deg, color-mix(in srgb, var(--token-tone) 60%, #07151c), #07151c 75%);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 38%), inset 0 0 0 .4rem rgb(7 21 28 / 55%);
}
.token-portrait::before, .token-portrait span { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; opacity: .22; }
.token-portrait::before { width: 11rem; aspect-ratio: 1; }
.token-portrait span { width: 8.2rem; aspect-ratio: 1; box-shadow: 0 0 0 .65rem rgb(255 255 255 / 4%); }
.token-portrait b { position: relative; z-index: 1; font: 700 4.8rem Georgia, serif; text-shadow: 0 .2rem 1rem rgb(0 0 0 / 34%); }
.token-portrait small { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding-top: .65rem; border-top: 1px solid rgb(255 255 255 / 28%); font-size: .66rem; font-weight: 850; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.token-portrait--clue { --token-tone: #2e9ba3; }
.token-portrait--treasure { --token-tone: #c18b24; }
.token-portrait--food { --token-tone: #8d4968; }
.token-modal__tabs { display: flex; gap: .4rem; margin-top: 1.2rem; }
.token-modal__tabs button { padding: .45rem .65rem; border: 1px solid #3c565e; border-radius: 999px; color: #9fb2b6; background: transparent; font-size: .62rem; }
.token-modal__tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); background: var(--gold); }
.token-modal__copy { padding: clamp(2rem, 5vw, 3.5rem); align-self: center; }
.token-modal__copy .kicker { color: var(--teal); }
.token-modal__copy h2 { font-size: 3.2rem; }
.token-modal__copy .card-type { color: var(--gold-pale); font-size: .8rem; }
.token-reference { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line); }
.token-reference > span { color: var(--teal); font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.token-reference p { margin: .5rem 0 0; color: #c0ccce; font-size: .9rem; }
.token-reference--plan > span { color: var(--gold); }

@media (max-width: 1120px) {
  :root { --rail: 12.5rem; }
  .rail nav a { padding-block: .48rem; }
  .identity-grid, .timeline { grid-template-columns: repeat(2, 1fr); }
  .identity-grid article:nth-child(3), .identity-grid article:nth-child(4) { border-top: 1px solid #cbbfa6; }
  .timeline article:nth-child(3) { border-left: 0; padding-left: 0; }
  .timeline article:nth-child(n+3) { margin-top: 2rem; }
  .hand-cards { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  :root { --rail: 0rem; }
  .rail {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    padding: .7rem 1rem;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
  }
  .brand__seal { width: 2rem; }
  .brand small, .rail__status, .all-decks { display: none; }
  .rail nav { margin-left: auto; display: flex; max-width: 65%; overflow-x: auto; }
  .rail nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  main { margin-left: 0; }
  .hero { min-height: 44rem; }
  .section__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .lab-shell { grid-template-columns: 1fr; }
  .loop-track { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .loop-track i { display: none; }
  .drain-lab { grid-template-columns: 1fr 1fr; }
  .drain-result { grid-column: 1 / -1; padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid #b8ab8f; }
  .hand-console { grid-template-columns: 1fr; }
  .hand-summary { grid-row: auto; }
  .answer-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .discipline-grid { grid-template-columns: repeat(2, 1fr); }
  .discipline-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
  .discipline-grid article:nth-child(n+3) { margin-top: 1rem; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .rail nav a:nth-child(n+4) { display: none; }
  .hero { min-height: 42rem; padding: 4rem 1.25rem 7.5rem; }
  .hero__veil { background: linear-gradient(0deg, rgb(4 16 22 / 97%) 5%, rgb(4 16 22 / 56%) 100%); }
  .hero__copy { padding-bottom: 1rem; }
  h1 { font-size: clamp(4.2rem, 23vw, 7rem); }
  .hero__stats { left: 1.25rem; right: 1.25rem; }
  .hero__stats div { padding-right: .35rem; }
  .hero__stats strong { font-size: 1.15rem; }
  .hero__stats span { font-size: .52rem; }
  .section { padding: 4.2rem 1.25rem; }
  h2 { font-size: clamp(2.65rem, 14vw, 4.5rem); }
  .identity-grid, .timeline, .keep-grid, .telemetry-strip { grid-template-columns: 1fr; }
  .identity-grid article + article, .identity-grid article:nth-child(3), .identity-grid article:nth-child(4) { padding-left: 0; border-left: 0; border-top: 1px solid #cbbfa6; }
  .timeline article + article, .timeline article:nth-child(n+3) { margin-top: 0; padding: 1.2rem 0; border-left: 0; border-top: 1px solid var(--ink-line); }
  .timeline article:first-child { padding-bottom: 1.2rem; }
  .vote-output { grid-template-columns: 1fr; }
  .vote-ring { margin: 0 auto; }
  .token-results { grid-template-columns: repeat(3, 1fr); }
  .token { min-height: 5rem; padding: .7rem; }
  .loop-track { grid-template-columns: 1fr; }
  .loop-track article { min-height: auto; }
  .loop-track h3 { margin-top: 1.2rem; }
  .drain-lab { grid-template-columns: 1fr; }
  .drain-result { grid-column: auto; }
  .hand-console { padding: 1.2rem; }
  .hand-cards { grid-template-columns: repeat(2, 1fr); }
  .hand-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-grid article + article { margin-top: 0; }
  .discipline-grid { grid-template-columns: 1fr; }
  .discipline-grid article + article, .discipline-grid article:nth-child(3) { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--ink-line); }
  .explorer-toolbar { grid-template-columns: 1fr; }
  .deck-actions { grid-column: auto; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry-strip article + article { border-left: 0; border-top: 1px solid #bdaf93; }
  .card-modal[open] { display: block; }
  .card-modal > img { width: 100%; height: 16rem; min-height: 0; }
  .token-modal[open] { display: block; }
  .token-modal__visual { min-height: 25rem; padding: 1.5rem; }
  .token-portrait { width: 11rem; }
  .token-portrait::before { width: 8.5rem; }
  .token-portrait span { width: 6.2rem; }
  .token-modal__copy { padding: 2rem 1.5rem; }
  footer { display: block; }
  footer p + p { margin-top: .5rem; }
}

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