:root {
  color-scheme: dark;
  --interface-scale: 1;
  --root-scale-min: 14px;
  --root-scale-fluid: calc(0.45vw + 9.5px);
  --root-scale-max: 24px;
  --tap-target: 40px;
  --void: #070c14;
  --glass: rgb(13 23 38 / 82%);
  --glass-hi: rgb(20 34 54 / 90%);
  --cyan: #6fe3ff;
  --cyan-dim: #2c5b73;
  --cyan-soft: rgb(111 227 255 / 14%);
  --gold: #f5c86b;
  --gold-dim: #7a6234;
  --ink: #e8f1f7;
  --muted: #8fa6b8;
  --danger: #ff7892;
  --success: #7ce0b5;
  --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --window-cut: 1.625rem;
  --window-shape: polygon(0 0, calc(100% - var(--window-cut)) 0, 100% var(--window-cut), 100% 100%, var(--window-cut) 100%, 0 calc(100% - var(--window-cut)));
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--void);
  font-size: clamp(var(--root-scale-min), var(--root-scale-fluid), var(--root-scale-max));
}

html[data-interface-scale="compact"] {
  --interface-scale: .85;
  --root-scale-min: 11.9px;
  --root-scale-fluid: calc(0.3825vw + 8.075px);
  --root-scale-max: 20.4px;
}

html[data-interface-scale="large"] {
  --interface-scale: 1.15;
  --root-scale-min: 16.1px;
  --root-scale-fluid: calc(0.5175vw + 10.925px);
  --root-scale-max: 27.6px;
}

html[data-interface-scale="vast"] {
  --interface-scale: 1.35;
  --root-scale-min: 18.9px;
  --root-scale-fluid: calc(0.6075vw + 12.825px);
  --root-scale-max: 32.4px;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(75rem 43.75rem at 62% 30%, rgb(35 68 96 / 35%), transparent 60%),
    radial-gradient(50rem 31.25rem at 20% 80%, rgb(24 44 66 / 25%), transparent 55%),
    var(--void);
  font: 0.9375rem/1.55 var(--ui);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgb(111 227 255 / 1.6%) 1px, transparent 1px), linear-gradient(90deg, rgb(111 227 255 / 1.2%) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  mask-image: radial-gradient(circle at 55% 45%, black, transparent 74%);
  pointer-events: none;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 20;
  border: 1px solid rgb(111 227 255 / 3%);
  content: "";
  pointer-events: none;
}

button,
input,
select,
textarea {
  min-width: 0;
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
canvas:focus-visible {
  outline: 0.125rem solid var(--cyan);
  outline-offset: 0.1875rem;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.void-motes {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
}

.void-motes i {
  position: absolute;
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 50%;
  background: rgb(111 227 255 / 35%);
  animation: mote-drift 14s linear infinite;
}

.void-motes i:nth-child(1) { left: 12%; top: 70%; }
.void-motes i:nth-child(2) { left: 78%; top: 20%; animation-delay: -4s; }
.void-motes i:nth-child(3) { left: 40%; top: 88%; animation-delay: -8s; }
.void-motes i:nth-child(4) { left: 88%; top: 60%; animation-delay: -11s; }

@keyframes mote-drift {
  from { opacity: 0; transform: translateY(0); }
  12% { opacity: .7; }
  88% { opacity: .4; }
  to { opacity: 0; transform: translateY(-42vh); }
}

.summon-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  display: flex;
  width: 4rem;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1.125rem 0;
  border-right: 1px solid rgb(111 227 255 / 8%);
  background: linear-gradient(180deg, rgb(9 15 26 / 90%), rgb(9 15 26 / 60%));
}

.system-mark {
  display: grid;
  width: 2.75rem;
  min-height: 6.5rem;
  margin-bottom: 0.875rem;
  color: var(--cyan);
  font: 0.6875rem/1 var(--mono);
  letter-spacing: .18em;
  text-decoration: none;
  writing-mode: vertical-rl;
  place-items: center;
}

.summon-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.summon-list a {
  position: relative;
  display: grid;
  width: max(2.75rem, var(--tap-target));
  height: max(2.75rem, var(--tap-target));
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 1.0625rem;
  text-decoration: none;
  place-items: center;
}

.summon-list a:hover,
.summon-list a:focus-visible,
.summon-list a[aria-current="page"] {
  border-color: rgb(111 227 255 / 25%);
  color: var(--cyan);
  background: rgb(111 227 255 / 4%);
}

.summon-list a[aria-current="page"]::before {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: -1px;
  width: 0.125rem;
  background: var(--cyan);
  box-shadow: 0 0 0.5rem var(--cyan);
  content: "";
}

.summon-list b {
  font: inherit;
}

.summon-list span {
  position: absolute;
  top: 50%;
  left: 3.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(111 227 255 / 20%);
  opacity: 0;
  color: var(--cyan);
  background: rgb(9 15 26 / 95%);
  font: 0.6875rem/1.4 var(--mono);
  letter-spacing: .14em;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
  white-space: nowrap;
}

.summon-list a:hover span,
.summon-list a:focus-visible span {
  opacity: 1;
}

.system-seal {
  position: fixed;
  top: 1.125rem;
  right: 1.375rem;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.streak-ember {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  color: var(--muted);
  font: 0.75rem/1 var(--mono);
  letter-spacing: .12em;
}

.streak-ember strong {
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 0 0.75rem rgb(245 200 107 / 60%);
}

.rank-hex {
  position: relative;
  display: grid;
  width: 3.25rem;
  height: 3.625rem;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(160deg, rgb(122 98 52 / 50%), rgb(30 25 14 / 85%));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  place-items: center;
}

.rank-hex::before {
  position: absolute;
  inset: 0.1875rem;
  border: 1px solid rgb(245 200 107 / 35%);
  clip-path: inherit;
  content: "";
}

.rank-hex b {
  color: var(--gold);
  font: 600 0.9375rem/1 var(--mono);
  letter-spacing: .04em;
}

.voice-controls {
  position: fixed;
  top: 5.375rem;
  right: 1.375rem;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font: 0.625rem/1.2 var(--mono);
}

.voice-controls #voice-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.voice-mic {
  min-width: max(2.5rem, var(--tap-target));
  min-height: max(2.5rem, var(--tap-target));
  padding: 0 0.625rem;
  border: 1px solid rgb(111 227 255 / 18%);
  color: var(--muted);
  background: rgb(9 15 26 / 72%);
  cursor: pointer;
}

.voice-mic:not(:disabled):hover,
.voice-mic[data-listening="true"] {
  border-color: var(--cyan);
  color: var(--cyan);
}

.voice-mic:disabled {
  cursor: not-allowed;
  visibility: hidden;
}

.voice-action {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.system-stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  padding: 6rem 5rem 3.5rem 6.25rem;
  place-items: center;
}

.system-window-stack {
  position: relative;
  width: min(56.25rem, 100%);
  min-width: 0;
}

.system-window.ghost-window {
  position: absolute;
  top: -3rem;
  right: -2.125rem;
  z-index: 0;
  width: 88%;
  min-height: 3rem;
  border-color: rgb(111 227 255 / 20%);
  opacity: .62;
  background: var(--glass);
  text-decoration: none;
  transition: border-color 120ms ease, opacity 120ms ease;
}

.system-window.ghost-window:hover,
.system-window.ghost-window:focus-visible { border-color: rgb(111 227 255 / 46%); opacity: 1; }

.view-stack {
  position: relative;
  display: grid;
  z-index: 1;
  width: 100%;
  min-width: 0;
  border: 1px solid rgb(111 227 255 / 28%);
  background: var(--glass);
  box-shadow: 0 0 0 1px rgb(111 227 255 / 6%), 0 1.5rem 5rem rgb(0 0 0 / 50%), 0 0 2.625rem rgb(111 227 255 / 7%);
  clip-path: var(--window-shape);
  backdrop-filter: blur(0.625rem);
  animation: window-arrive 500ms cubic-bezier(.2, .9, .25, 1.15) both 150ms;
}

.view-stack::after,
.system-window::after,
.panel::after {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1.125rem;
  height: 1.125rem;
  border-top: 0.125rem solid var(--cyan);
  border-left: 0.125rem solid var(--cyan);
  content: "";
  opacity: .9;
  pointer-events: none;
}

@keyframes window-arrive {
  from { opacity: 0; transform: scale(.94) translateY(0.875rem); }
  to { opacity: 1; transform: none; }
}

.view-heading,
.window-head {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid rgb(111 227 255 / 16%);
  color: var(--cyan);
  font: 0.6875rem/1.35 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.view-heading::before,
.window-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  flex: 0 0 auto;
  background: var(--cyan);
  box-shadow: 0 0 0.375rem var(--cyan);
  content: "";
  transform: rotate(45deg);
}

.view-heading > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.view-heading > div::before {
  color: rgb(111 227 255 / 75%);
  content: "SYSTEM ⟡";
}

.view-heading h1,
.view-heading p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.view-heading .eyebrow {
  display: none;
}

.view-heading > :last-child {
  margin-left: auto;
}

.view-stack > :not(.view-heading) {
  margin-right: 1.625rem;
  margin-left: 1.625rem;
}

.view-stack > :last-child {
  margin-bottom: 1.625rem;
}

.view-stack > .view-heading {
  margin: 0;
}

.view-stack > .view-heading + * {
  margin-top: 1.625rem;
}

.system-window,
.panel {
  position: relative;
  border: 1px solid rgb(111 227 255 / 18%);
  background: rgb(9 17 29 / 52%);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  box-shadow: inset 0 1px rgb(255 255 255 / 2%);
}

.panel::after {
  width: 0.625rem;
  height: 0.625rem;
  border-width: 1px;
  opacity: .5;
}

.window-body {
  padding: 1.625rem;
}

.panel {
  padding: 1.25rem;
}

.panel-heading,
.quest-column > h2,
.drill-card-meta,
.quest-card-head,
.meter-copy,
.reward-line,
.fusion-chance,
.insight-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
}

.panel-heading {
  margin-bottom: 1.125rem;
}

.panel-heading h2,
.quest-column > h2,
.panel-heading p {
  margin: 0;
}

.panel-heading h2,
.quest-column > h2,
.drill-card h3,
.scenario-node h2,
.fusion-card h2 {
  font-family: var(--mono);
}

.panel-heading h2,
.quest-column > h2 {
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.panel-heading > span,
.quest-column > h2 span,
.view-hint {
  color: var(--muted);
  font: 0.6875rem/1.3 var(--mono);
  letter-spacing: .08em;
}

.eyebrow,
.panel-label,
.quest-kind,
.locked-label {
  margin: 0;
  color: var(--cyan);
  font: 500 0.625rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.numeral {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.rank-badge {
  display: grid;
  min-width: 2.625rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5625rem;
  color: var(--void);
  background: var(--cyan);
  font: 700 0.6875rem/1 var(--mono);
  letter-spacing: .1em;
  place-items: center;
}

.primary-button,
.secondary-button,
.danger-button,
.drill-mode-switch button,
.archive-switcher button {
  min-height: max(2.5rem, var(--tap-target));
  padding: 0.5625rem 0.875rem;
  border: 1px solid rgb(111 227 255 / 34%);
  border-radius: 0;
  color: var(--cyan);
  background: rgb(111 227 255 / 8%);
  font: 600 0.6875rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

a.secondary-button,
label.secondary-button {
  display: inline-grid;
  text-decoration: none;
  place-items: center;
}

.primary-button {
  border-color: var(--cyan);
  color: var(--void);
  background: var(--cyan);
}

.danger-button {
  border-color: rgb(255 120 146 / 48%);
  color: var(--danger);
  background: rgb(255 120 146 / 8%);
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.danger-button:hover:not(:disabled),
.drill-mode-switch button:hover,
.archive-switcher button:hover {
  box-shadow: 0 0 1rem rgb(111 227 255 / 24%);
  filter: brightness(1.12);
}

button:disabled {
  cursor: not-allowed;
  filter: saturate(.35);
  opacity: .48;
}

progress {
  width: 100%;
  height: 0.3125rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgb(111 227 255 / 12%);
  appearance: none;
}

progress::-webkit-progress-bar { background: rgb(111 227 255 / 12%); }
progress::-webkit-progress-value { background: var(--cyan); box-shadow: 0 0 0.5rem rgb(111 227 255 / 60%); }
progress::-moz-progress-bar { background: var(--cyan); box-shadow: 0 0 0.5rem rgb(111 227 255 / 60%); }

.status-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgb(111 227 255 / 18%);
  background: rgb(9 17 29 / 52%);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.status-grid::after {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
  content: "";
  pointer-events: none;
}

.status-grid > .panel {
  border: 0;
  background: transparent;
  clip-path: none;
  box-shadow: none;
}

.status-grid > .panel::after {
  display: none;
}

.identity-panel { grid-column: span 7; }
.stats-panel { grid-column: span 5; border-left: 1px solid rgb(111 227 255 / 12%) !important; }
.rank-panel { grid-column: span 5; border-top: 1px solid rgb(111 227 255 / 12%) !important; }
.titles-panel { grid-column: span 7; border-top: 1px solid rgb(111 227 255 / 12%) !important; border-left: 1px solid rgb(111 227 255 / 12%) !important; }
.task-accuracy-panel { grid-column: 1 / -1; border-top: 1px solid rgb(111 227 255 / 12%) !important; }
.status-directive { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; border-top: 1px solid rgb(245 200 107 / 28%) !important; background: linear-gradient(90deg, rgb(122 98 52 / 12%), transparent) !important; }
.status-directive p { margin: 0; color: var(--muted); }
.status-directive .eyebrow { color: var(--gold); }
.status-directive a { text-decoration: none; }

.identity-panel h2 {
  margin: 0.75rem 0 0.125rem;
  font: 500 clamp(1.625rem, 5vw, 2.625rem)/1.1 var(--mono);
}

.level-line {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font: 0.75rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.level-line strong { color: var(--cyan); }
.meter-copy { margin-bottom: 0.4375rem; color: var(--muted); font: 0.6875rem/1.3 var(--mono); }
.balance-indicator { display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.875rem; margin-top: 1.375rem; padding-top: 0.875rem; border-top: 1px solid rgb(111 227 255 / 12%); }
.balance-indicator span, .balance-indicator small { color: var(--muted); font: 0.625rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.balance-indicator small { grid-column: 1 / -1; }
.balance-indicator strong { color: var(--success); font: 600 0.9375rem/1 var(--mono); }
.balance--warning strong, .balance--severe strong { color: var(--gold); }
.life-boost, .balance-curve, .equipped-title, .rank-value, .empty-copy, .return-framing { color: var(--muted); font-size: 0.8125rem; }

.stat-list { display: grid; gap: 0.6875rem; }
.stat-row > div { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; color: var(--muted); font: 0.6875rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.stat-row strong { color: var(--ink); }
.stat-value { display: inline-flex; align-items: center; gap: 0.4375rem; }
.stat-row button { width: max(2.5rem, var(--tap-target)); height: max(2.5rem, var(--tap-target)); padding: 0; }

.compact-facts { display: grid; gap: 0; margin: 1.125rem 0 0; }
.compact-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5625rem 0; border-top: 1px solid rgb(111 227 255 / 9%); }
.compact-facts dt { color: var(--muted); }
.compact-facts dd { margin: 0; font-family: var(--mono); }
.chip-list, .task-accuracy-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.chip-list li, .task-accuracy-strip li { padding: 0.4375rem 0.625rem; border: 1px solid rgb(111 227 255 / 18%); color: var(--muted); font: 0.625rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.task-accuracy-strip li { display: flex; gap: 0.625rem; }
.task-accuracy-strip strong { color: var(--cyan); }
.task-accuracy-strip .is-weakest { border-color: var(--gold-dim); }

.quest-meter-strip {
  display: grid;
  gap: 0;
  padding: 0 0.875rem;
  border: 1px solid rgb(111 227 255 / 16%);
  background: rgb(4 10 18 / 28%);
}

.quest-meter-strip > .quest-column + .quest-column { border-top: 1px solid rgb(111 227 255 / 12%); }

.quest-column > h2 {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(111 227 255 / 12%);
}

.quest-cards {
  display: grid;
  gap: 0;
}

.meter-empty-line {
  margin: 0;
  padding: 0.625rem 0;
  color: var(--muted);
  font: 0.6875rem/1.4 var(--mono);
}

.quest-card {
  display: grid;
  grid-template-columns: minmax(8.125rem, 1fr) minmax(12.5rem, 2fr) auto;
  gap: 0.375rem 0.875rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgb(111 227 255 / 10%);
  background: transparent;
}

.quest-card::after { display: none; }
.quest-card-head { display: flex; grid-column: 1; grid-row: 1; justify-content: flex-start; }
.quest-card h3 { grid-column: 1; grid-row: 2; margin: 0; font: 500 0.8125rem/1.4 var(--mono); }
.objective-list { display: grid; gap: 0.4375rem; margin: 0; padding: 0; list-style: none; }
.quest-card .objective-list { grid-column: 2; grid-row: 1 / span 2; }
.objective-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; color: var(--muted); font-size: 0.75rem; }
.objective-list progress { grid-column: 1 / -1; }
.reward-line { grid-column: 3; grid-row: 1; font: 0.625rem/1.3 var(--mono); }
.reward-line strong { color: var(--gold); }
.quest-window, .featured-resting { color: var(--cyan); }
.quest-card .primary-button { grid-column: 3; grid-row: 2; }
.foregone-meter.is-empty > h2 { display: none; }
.foregone-meter .return-framing { margin: 0.5rem 0; }

.drill-panel {
  padding: 0;
  border-color: rgb(111 227 255 / 28%);
  background: rgb(13 23 38 / 72%);
}

.drill-panel > .panel-heading { padding: 0.8125rem 1.125rem; margin: 0; border-bottom: 1px solid rgb(111 227 255 / 16%); }
.drill-panel > .panel-heading > div { display: flex; gap: 0.625rem; align-items: center; }
.drill-panel > .panel-heading .eyebrow { order: 2; color: var(--muted); }
.drill-mode-switch { display: flex; gap: 0.25rem; padding: 0.875rem 1.125rem 0; }
.drill-mode-switch button[aria-pressed="true"] { color: var(--void); background: var(--cyan); }
.task-progress { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.125rem 0; color: var(--muted); font: 0.6875rem/1.3 var(--mono); letter-spacing: .14em; }
.task-segments { display: flex; gap: 0.25rem; }
.task-segments i { width: 1.375rem; height: 0.25rem; background: rgb(111 227 255 / 15%); }
.task-segments i.done { background: var(--cyan); box-shadow: 0 0 0.375rem rgb(111 227 255 / 60%); }
.task-segments i.current { outline: 1px solid var(--cyan-dim); outline-offset: 0.125rem; }
.drill-items { padding: 1.125rem; }
.drill-card { position: relative; }
.drill-card-meta { margin-bottom: 1.125rem; color: var(--muted); font: 0.6875rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.drill-card-meta span { color: var(--void); background: var(--cyan); padding: 0.125rem 0.5625rem; font-weight: 700; }
.drill-card h3 { max-width: 47.5rem; margin: 0 0 1.5rem; font-size: clamp(1.25rem, 3vw, 1.6875rem); font-weight: 500; line-height: 1.4; }
.drill-card h3::before { color: var(--cyan); content: "» "; }
.ritual--cloze h3 { padding: 1rem; border: 1px solid rgb(111 227 255 / 16%); background: rgb(4 10 18 / 45%); }
.ritual--pairUp .pair-up-rows { position: relative; padding: 0.875rem; border: 1px solid rgb(111 227 255 / 15%); background: radial-gradient(circle at center, rgb(111 227 255 / 7%), transparent 48%); }
.ritual--sequence .sequence-list { padding: 0.75rem; border-left: 1px solid var(--cyan-dim); }
.ritual--explainBack .canonical-explanation { animation: signal-materialize 350ms ease both; }
.ritual--workedExample .worked-example-steps li { animation: signal-materialize 300ms ease both; }
.drill-options { display: grid; gap: 0.625rem; }
.drill-options button { position: relative; min-height: max(3rem, var(--tap-target)); padding: 0.75rem 1rem; border: 1px solid rgb(143 166 184 / 18%); color: var(--ink); background: rgb(255 255 255 / 2.5%); text-align: left; cursor: pointer; }
.drill-options button::before { position: absolute; inset: 0 auto 0 0; width: 0.125rem; background: transparent; content: ""; }
.drill-options button:hover:not(:disabled), .drill-options button:focus-visible { border-color: rgb(111 227 255 / 50%); background: var(--cyan-soft); }
.drill-options button:hover::before, .drill-options button:focus-visible::before { background: var(--cyan); }
.drill-options button.is-correct { border-color: var(--success); color: var(--success); }
.drill-options button.is-wrong { border-color: var(--danger); color: var(--danger); }
.drill-result { display: grid; gap: 0.3125rem; min-height: 1px; margin-top: 1rem; color: var(--muted); font-size: 0.8125rem; }
.drill-result strong { color: var(--cyan); font: 600 0.75rem/1.4 var(--mono); letter-spacing: .08em; }
.drill-result .is-wrong { color: var(--gold); }
.drill-instruction, .guidance-hint { padding: 0.5625rem 0.75rem; border-left: 0.125rem solid var(--cyan); color: var(--muted); background: var(--cyan-soft); }
.cloze-blank { padding: 1px 0.625rem; border-bottom: 0.125rem solid var(--cyan); color: var(--cyan); background: transparent; }
.sequence-list { display: grid; gap: 0.5rem; padding: 0; list-style: none; counter-reset: sequence; }
.sequence-list li { display: grid; grid-template-columns: 1fr max(2.5rem, var(--tap-target)) max(2.5rem, var(--tap-target)); align-items: center; gap: 0.375rem; min-height: 3rem; padding-left: 0.875rem; border: 1px solid rgb(111 227 255 / 16%); counter-increment: sequence; }
.sequence-list li span::before { margin-right: 0.625rem; color: var(--cyan); content: counter(sequence, decimal-leading-zero); font-family: var(--mono); }
.sequence-list button { width: max(2.5rem, var(--tap-target)); height: max(2.5rem, var(--tap-target)); overflow: hidden; padding: 0; font-size: 0; }
.sequence-list button::after { font-size: 1rem; content: "↑"; }
.sequence-list button:last-child::after { content: "↓"; }
.pair-up-rows { display: grid; gap: 0.625rem; }
.pair-up-rows label { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.25rem; }
.pair-up-rows label::after { position: absolute; top: 50%; left: calc(50% - 0.625rem); width: 1.25rem; border-top: 1px solid rgb(111 227 255 / 42%); box-shadow: 0 0 0.375rem rgb(111 227 255 / 22%); content: ""; }
.pair-up-rows select, select, input, textarea { min-height: max(2.625rem, var(--tap-target)); border: 1px solid rgb(111 227 255 / 25%); border-radius: 0; color: var(--ink); background: rgb(7 12 20 / 78%); }
.pair-up-rows select, select, input { padding: 0.4375rem 0.625rem; }
textarea { width: 100%; padding: 0.75rem; resize: vertical; }
.flaw-candidates { padding: 0.75rem; border: 1px dashed rgb(245 200 107 / 35%); background: rgb(122 98 52 / 5%); }
.canonical-explanation { padding: 1rem; border: 1px solid rgb(111 227 255 / 22%); background: var(--cyan-soft); }
.worked-example-steps { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding-left: 1.75rem; }
.worked-example-steps li { padding: 0.5rem 0.625rem; border-left: 1px solid var(--cyan-dim); background: rgb(111 227 255 / 4%); }
.worked-example-transfer { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid rgb(111 227 255 / 16%); }
.trial-slot { display: flex; align-items: center; gap: 0.875rem; margin: 0 !important; padding: 0.8125rem 1.125rem; border: 1px solid rgb(245 200 107 / 35%); border-width: 1px 0 0; background: linear-gradient(90deg, rgb(122 98 52 / 16%), rgb(122 98 52 / 4%)); }
.trial-sigil { display: grid; width: 1.625rem; height: 1.625rem; flex: 0 0 auto; border: 1px solid rgb(245 200 107 / 40%); color: var(--gold); transform: rotate(45deg); place-items: center; }
.trial-sigil i { font: 0.625rem/1 var(--ui); transform: rotate(-45deg); }
.trial-slot .eyebrow { flex: 1; color: var(--gold); }
.trial-card { width: 100%; }
.foregone-list, .registry-list, .quest-history ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.foregone-list li, .registry-list > li, .quest-history li { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid rgb(111 227 255 / 10%); }
.foregone-list span, .registry-list span { display: grid; }
.foregone-list small, .registry-list small { color: var(--muted); }
.registry-categories { display: grid; gap: 1.375rem; }
.registry-category { display: grid; gap: 0.375rem; }
.registry-category-header { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 1.75rem; color: var(--cyan); font: 0.625rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.registry-category-header::after { grid-column: 2; grid-row: 1; height: 1px; background: linear-gradient(90deg, rgb(111 227 255 / 32%), rgb(111 227 255 / 4%)); content: ""; }
.registry-category-header h3 { grid-column: 1; grid-row: 1; margin: 0; font: inherit; letter-spacing: .18em; }
.registry-category-header button { all: unset; display: flex; min-height: var(--tap-target); grid-column: 3; grid-row: 1; align-items: center; gap: 0.5rem; color: var(--muted); letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.registry-category-header button:focus-visible { outline: 0.125rem solid var(--cyan); outline-offset: 0.1875rem; }

.firmament { min-width: 0; min-height: 35.625rem; padding: 0; border-color: rgb(111 227 255 / 30%); background: rgb(7 12 20 / 72%); }
.firmament-head { display: flex; min-height: 3.25rem; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid rgb(111 227 255 / 15%); color: var(--cyan); font: 0.625rem/1.4 var(--mono); letter-spacing: .18em; }
.firmament-head-dot { width: 0.3125rem; height: 0.3125rem; flex: 0 0 auto; background: var(--cyan); box-shadow: 0 0 0.375rem var(--cyan); transform: rotate(45deg); }
.firmament-toggle { display: flex; margin-left: auto; border: 1px solid rgb(111 227 255 / 30%); }
.firmament-toggle button { all: unset; min-width: 4.25rem; min-height: var(--tap-target); padding: 0.4375rem 0.75rem; color: var(--muted); font: 0.6875rem/1.3 var(--mono); letter-spacing: .16em; text-align: center; cursor: pointer; }
.firmament-toggle button[aria-pressed="true"] { color: var(--void); background: var(--cyan); font-weight: 700; }
.firmament-toggle button:focus-visible { outline: 0.125rem solid var(--cyan); outline-offset: 0.1875rem; }
.firmament-chart { position: relative; min-width: 0; min-height: 32.375rem; background: radial-gradient(40.625rem 24.375rem at 54% 42%, rgb(30 58 84 / 30%), transparent 62%), var(--void); }
.firmament-scroll { width: 100%; min-width: 0; height: 32.375rem; overflow: hidden; }
.firmament-svg { display: block; width: 100%; height: 100%; }
.firmament-region { fill: none; stroke: rgb(111 227 255 / 10%); stroke-dasharray: 3 7; }
.firmament-region-label { fill: rgb(143 166 184 / 55%); font: 0.625rem var(--mono); letter-spacing: .34em; }
.firmament-chain { fill: none; stroke: rgb(111 227 255 / 28%); stroke-width: 1; }
.firmament-star { cursor: pointer; }
.firmament-star-hit { fill: transparent; }
.firmament-star-core { fill: #1b2a3d; stroke: rgb(143 166 184 / 45%); stroke-width: 1; }
.firmament-star-glow { fill: rgb(111 227 255 / 45%); }
.firmament-star.is-lit .firmament-star-core { fill: #0e2233; stroke: var(--cyan); stroke-width: 1.4; }
.firmament-star.is-active .firmament-star-glow { animation: firmament-pulse 2.4s ease-in-out infinite; }
.firmament-star-ring { fill: none; stroke: rgb(245 200 107 / 55%); stroke-dasharray: 2 3; }
.firmament-star-update { fill: none; stroke: var(--gold); stroke-linecap: square; stroke-width: 2; }
.firmament-star text { fill: var(--muted); font: 0.625rem var(--mono); letter-spacing: .12em; text-anchor: middle; }
.firmament-star.is-lit text { fill: var(--ink); }
.firmament-star:focus-visible { outline: none; }
.firmament-star:focus-visible .firmament-star-core { stroke: var(--gold); stroke-width: 3; }
@keyframes firmament-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.firmament-window { position: absolute; top: 1.25rem; right: 1.125rem; z-index: 4; width: 20.625rem; max-height: calc(100% - 2.5rem); overflow: auto; border: 1px solid rgb(111 227 255 / 30%); color: var(--ink); background: var(--glass); box-shadow: 0 1.25rem 3.4375rem rgb(0 0 0 / 45%); clip-path: polygon(0 0, calc(100% - 1.375rem) 0, 100% 1.375rem, 100% 100%, 1.375rem 100%, 0 calc(100% - 1.375rem)); backdrop-filter: blur(0.625rem); animation: firmament-arrive .4s cubic-bezier(.2, .9, .25, 1.15) both; }
.firmament-window::after { position: absolute; top: -1px; left: -1px; width: 0.875rem; height: 0.875rem; border-top: 0.125rem solid var(--cyan); border-left: 0.125rem solid var(--cyan); content: ""; pointer-events: none; }
@keyframes firmament-arrive { from { opacity: 0; transform: scale(.95) translateY(0.625rem); } to { opacity: 1; transform: none; } }
.firmament-window-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5625rem 0.625rem 0.5625rem 0.875rem; border-bottom: 1px solid rgb(111 227 255 / 15%); color: var(--cyan); font: 0.625rem/1.4 var(--mono); letter-spacing: .2em; }
.firmament-window-head button { width: max(2rem, var(--tap-target)); height: max(2rem, var(--tap-target)); padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.firmament-window-body { padding: 1rem; }
.firmament-window-body h2 { margin: 0 0 0.375rem; font: 500 1.1875rem/1.35 var(--mono); }
.firmament-node-category { margin-bottom: 0.75rem; color: var(--gold); font: 0.625rem/1.4 var(--mono); letter-spacing: .22em; }
.firmament-window-body > p { margin: 0 0 0.875rem; color: var(--muted); font: 0.8125rem/1.5 var(--ui); }
.firmament-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.firmament-facts div { padding: 0.5rem 0.625rem; border: 1px solid rgb(143 166 184 / 16%); }
.firmament-facts b { display: block; color: var(--ink); font: 600 0.9375rem/1.3 var(--mono); }
.firmament-facts span { color: var(--muted); font: 0.5625rem/1.3 var(--mono); letter-spacing: .14em; }
.firmament-grades { display: flex; height: 1.625rem; align-items: flex-end; gap: 0.125rem; margin-bottom: 1rem; }
.firmament-grades i { width: 100%; min-height: 0.1875rem; background: rgb(111 227 255 / 35%); }
.firmament-grades i:nth-child(1) { height: 100%; }
.firmament-grades i:nth-child(2) { height: 88%; }
.firmament-grades i:nth-child(3) { height: 60%; }
.firmament-grades i:nth-child(4) { height: 52%; }
.firmament-grades i:nth-child(5) { height: 40%; }
.firmament-grades i:nth-child(6) { height: 30%; }
.firmament-grades i:nth-child(7) { height: 22%; }
.firmament-grades i:nth-child(8) { height: 14%; }
.firmament-grades i:nth-child(9) { height: 10%; }
.firmament-grades i.is-empty { opacity: .18; }
.firmament-recommendation { padding: 0.5625rem 0.625rem; border-left: 0.125rem solid var(--gold); background: rgb(245 200 107 / 8%); }
.firmament-action { width: 100%; min-height: max(2.625rem, var(--tap-target)); padding: 0.625rem; border: 0; color: var(--void); background: var(--cyan); font: 700 0.6875rem/1.4 var(--mono); letter-spacing: .16em; cursor: pointer; }
.firmament-action:hover:not(:disabled) { box-shadow: 0 0 0.875rem rgb(111 227 255 / 40%); }
.firmament-index { display: grid; gap: 1.125rem; padding: 1.25rem; }
.firmament-index > p { margin: 0; color: var(--muted); }

.skill-canvas-panel { padding: 0; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgb(33 78 105 / 24%), transparent 55%), rgb(4 10 18 / 68%); }
#skill-tree-canvas { display: block; width: 100%; height: min(58vh, 38.75rem); cursor: grab; touch-action: none; }
#skill-tree-canvas:active { cursor: grabbing; }
.skill-tooltip { position: absolute; right: 0.875rem; bottom: 0.875rem; padding: 0.5rem 0.625rem; border: 1px solid rgb(111 227 255 / 22%); color: var(--cyan); background: rgb(7 12 20 / 92%); font: 0.6875rem/1.4 var(--mono); }
.skill-legend { position: absolute; bottom: 0.875rem; left: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.75rem; color: var(--muted); font: 0.625rem/1.3 var(--mono); text-transform: uppercase; }
.skill-legend span { display: flex; align-items: center; gap: 0.3125rem; }
.skill-legend i { width: 0.4375rem; height: 0.4375rem; border: 1px solid var(--cyan-dim); transform: rotate(45deg); }
.dot--owned { background: var(--cyan); box-shadow: 0 0 0.4375rem var(--cyan); }
.dot--available { background: var(--cyan-dim); }
.dot--locked { opacity: .4; }
.skill-node-window { position: absolute; top: 1.125rem; right: 1.125rem; z-index: 3; width: min(22.5rem, calc(100% - 2.25rem)); max-height: calc(100% - 2.25rem); overflow: auto; border: 1px solid rgb(111 227 255 / 30%); background: var(--glass); box-shadow: 0 1.25rem 3.4375rem rgb(0 0 0 / 45%); clip-path: var(--window-shape); backdrop-filter: blur(10px); animation: firmament-arrive .4s cubic-bezier(.2, .9, .25, 1.15) both; }
.skill-node-window-body { padding: 1.125rem; }
.skill-node-window-body h2 { margin: 0.3125rem 0 0.4375rem; font: 500 1.25rem/1.3 var(--mono); }
.skill-node-window-body h3 { margin: 1.125rem 0 0.5rem; color: var(--cyan); font: 0.625rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.skill-node-window-body > p { color: var(--muted); }
.skill-node-state { color: var(--cyan) !important; font: 0.625rem/1.4 var(--mono); letter-spacing: .16em; }
.skill-node-state--locked { color: var(--gold) !important; }
.skill-prerequisite-chain { display: grid; gap: 0.4375rem; margin: 0 0 0.875rem; padding: 0; list-style: none; }
.skill-prerequisite-chain li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.625rem; border-left: 2px solid var(--gold-dim); background: rgb(122 98 52 / 8%); font: 0.6875rem/1.4 var(--mono); }
.skill-prerequisite-chain li.is-met { border-color: var(--cyan); background: var(--cyan-soft); }
.skill-prerequisite-chain strong { color: var(--gold); font-size: 0.5625rem; }
.skill-prerequisite-chain .is-met strong { color: var(--cyan); }
.skill-root-copy { font: 0.6875rem/1.4 var(--mono); }
.skill-acquire-error { min-height: 1.4em; color: var(--gold) !important; font: 0.6875rem/1.4 var(--mono); }
.skill-fallback { max-height: 28.75rem; overflow: auto; }
.skill-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.skill-list li { border-bottom: 1px solid rgb(111 227 255 / 10%); }
.skill-list button { display: grid; width: 100%; gap: 0.375rem; padding: 0.875rem 0; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.skill-list button:hover, .skill-list button:focus-visible { color: var(--cyan); background: var(--cyan-soft); }
.skill-list button > span { display: flex; justify-content: space-between; gap: 0.75rem; }
.skill-list small { color: var(--cyan); font-family: var(--mono); }
.rarity { color: var(--gold); font: 0.625rem/1.4 var(--mono); text-transform: uppercase; }

.fusion-grid { display: grid; gap: 0.875rem; }
.fusion-card { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.375rem; align-items: center; }
.fusion-symbol { display: grid; width: 3.5rem; height: 3.5rem; border: 1px solid rgb(245 200 107 / 42%); color: var(--gold); font-size: 1.5rem; transform: rotate(45deg); place-items: center; }
.fusion-symbol::first-letter { transform: rotate(-45deg); }
.fusion-copy h2 { margin: 0.4375rem 0; }
.fusion-copy > p { color: var(--muted); }
.fusion-chance, .insight-display { padding: 0.5rem 0; border-top: 1px solid rgb(111 227 255 / 10%); color: var(--muted); font: 0.6875rem/1.3 var(--mono); }
.fusion-chance strong, .insight-display strong { color: var(--cyan); }
.hint-display { margin: 0.875rem 0; padding: 0.75rem 0.875rem; border-left: 0.125rem solid var(--gold-dim); background: rgb(122 98 52 / 8%); }
.hint-display strong { color: var(--gold); font: 0.6875rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hint-display p { margin: 0.3125rem 0 0; color: var(--muted); }
.empty-state { padding: 2.125rem; text-align: center; }
.empty-state .fusion-symbol { margin: 0 auto 1.5rem; }
.empty-state .secondary-button { display: inline-grid; margin-top: 0.875rem; text-decoration: none; place-items: center; }
.fusion-missing { display: grid; gap: 0.5rem; max-width: 32.5rem; margin: 1.125rem auto; padding: 0; color: var(--muted); font: 0.75rem/1.5 var(--mono); list-style: none; text-align: left; }
.fusion-missing li { padding: 0.625rem 0.75rem; border-left: 0.125rem solid var(--gold-dim); background: rgb(122 98 52 / 8%); }
.fusion-result { padding: 0.875rem 1.125rem; border: 1px solid rgb(111 227 255 / 24%); color: var(--cyan); font-family: var(--mono); }

.scenario-directory { display: grid; gap: 0.875rem; }
.descent-entry { display: grid; gap: 0.625rem; }
.descent-entry .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.descent-entry .section-heading > span { color: var(--muted); font-size: 0.6875rem; }
.descent-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.descent-card { display: grid; min-height: 14.375rem; gap: 0.625rem; padding: 1.625rem; border-color: rgb(245 200 107 / 52%); background: radial-gradient(circle at 82% 24%, rgb(245 200 107 / 17%), transparent 32%), linear-gradient(115deg, rgb(122 98 52 / 18%), rgb(7 12 20 / 32%)); box-shadow: inset 0 0 2.5rem rgb(245 200 107 / 4%); }
.descent-card h2 { margin: 0.75rem 0 0; color: var(--gold); font: 500 clamp(1.375rem, 4vw, 2.125rem)/1.2 var(--mono); }
.descent-card p { max-width: 42rem; margin: 0; }
.daily-descent-card { border-color: rgb(111 227 255 / 48%); background: radial-gradient(circle at 82% 24%, rgb(111 227 255 / 14%), transparent 34%), linear-gradient(115deg, rgb(111 227 255 / 8%), rgb(7 12 20 / 32%)); }
.daily-descent-card h2 { color: var(--cyan); font-size: clamp(1.125rem, 3vw, 1.625rem); }
.daily-bonus { color: var(--gold); font-family: var(--mono); }
.daily-descent-result { padding: 0.625rem 0.75rem; border-left: 0.125rem solid var(--cyan); color: var(--cyan); background: var(--cyan-soft); }
.daily-board-summon { width: min(100%, 19rem); }
.daily-board-window { position: fixed; z-index: 20; inset: 8vh max(1rem, calc((100vw - 64rem) / 2)); display: grid; align-content: start; gap: 0.875rem; overflow: auto; padding: 1.5rem; border: 1px solid var(--cyan); background: rgb(7 12 20 / 98%); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 72%), inset 0 0 3rem rgb(111 227 255 / 5%); }
.daily-board-window[hidden] { display: none; }
.daily-board-window h3 { margin: 0; color: var(--cyan); font: 500 clamp(1.25rem, 4vw, 2rem)/1.2 var(--mono); letter-spacing: .08em; }
.daily-board-close { justify-self: end; min-height: var(--tap-target); border: 0; color: var(--muted); background: transparent; font: 600 0.6875rem/1 var(--mono); text-transform: uppercase; cursor: pointer; }
.daily-board-privacy { color: var(--gold); font-family: var(--mono); }
.daily-board-table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.daily-board-table th, .daily-board-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid rgb(111 227 255 / 14%); text-align: right; }
.daily-board-table th:nth-child(2), .daily-board-table td:nth-child(2) { text-align: left; }
.daily-board-table th { color: var(--muted); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; }
.daily-board-table tr[data-own-daily-row] { color: var(--gold); background: rgb(245 200 107 / 7%); }
.descent-call { color: var(--ink); font-family: var(--mono); }
.descent-reach { color: var(--muted); }
.descent-begin { width: min(100%, 19rem); margin-top: auto; border-color: var(--gold-dim); color: var(--void); background: var(--gold); }
.system-error { color: var(--danger); font-family: var(--mono); }
.featured-expedition { min-height: 10.625rem; padding: 1.625rem; border-color: rgb(245 200 107 / 35%); background: radial-gradient(circle at 88% 20%, rgb(245 200 107 / 16%), transparent 36%), linear-gradient(100deg, rgb(122 98 52 / 12%), transparent); }
.featured-expedition h2 { max-width: 38.75rem; margin: 0.75rem 0 0.5rem; font: 500 clamp(1.375rem, 4vw, 2.125rem)/1.2 var(--mono); }
.featured-expedition p { max-width: 36.25rem; color: var(--muted); }
.featured-expedition .featured-bonus { color: var(--gold); font-family: var(--mono); }
.featured-expedition .featured-resting { color: var(--cyan); font-family: var(--mono); }
.scenario-intro { color: var(--muted); }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.scenario-card { display: flex; min-height: 13.125rem; flex-direction: column; }
.scenario-card h2 { margin: 1.125rem 0 0.25rem; font: 500 1.125rem/1.3 var(--mono); }
.scenario-card > p { color: var(--muted); }
.scenario-card .primary-button { width: 100%; margin-top: auto; }
.scenario-card--locked { filter: saturate(.35); opacity: .66; }
.scenario-run { display: grid; grid-template-columns: 13.75rem 1fr; gap: 0.875rem; }
.scenario-progress { display: flex; flex-direction: column; gap: 0.625rem; }
.scenario-progress [data-fact] { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.5625rem; border-top: 1px solid rgb(111 227 255 / 10%); color: var(--muted); font-size: 0.6875rem; }
.scenario-progress [data-fact] strong { color: var(--ink); }
.scenario-node h2 { margin: 0.75rem 0 0.5rem; font-size: clamp(1.3125rem, 3vw, 1.8125rem); }
.descent-node { position: relative; overflow: hidden; border-color: rgb(111 227 255 / 25%); }
.descent-node::before { position: absolute; inset: 0 0 auto; height: 0.125rem; background: linear-gradient(90deg, transparent, var(--cyan), transparent); content: ""; opacity: .75; }
.descent-node > .quest-kind { color: var(--gold); }
.descent-held { margin: 0.875rem 0; padding: 0.75rem 0.875rem; border: 1px solid rgb(245 200 107 / 30%); color: var(--gold); background: rgb(122 98 52 / 10%); letter-spacing: .04em; }
.scenario-body { color: var(--muted); }
.scenario-actions { display: grid; gap: 0.5rem; }
.scenario-challenge { display: grid; gap: 0.875rem; }
.challenge-prompt { font: 500 1.125rem/1.5 var(--mono); }
.quiz-options { display: grid; gap: 0.5625rem; }
.quiz-option { display: flex; min-height: max(3rem, var(--tap-target)); align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; border: 1px solid rgb(143 166 184 / 18%); cursor: pointer; }
.quiz-option:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.allocation-control { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.allocation-control input { grid-column: 1 / -1; }
.descent-rest { border-color: rgb(245 200 107 / 58%); background: radial-gradient(circle at 50% 0, rgb(245 200 107 / 14%), transparent 48%), var(--glass); box-shadow: 0 0 2.25rem rgb(245 200 107 / 8%); }
.descent-ceremony-copy, .descent-pronouncement { color: var(--gold); font: 500 1rem/1.55 var(--mono); }
.descent-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.descent-choice { display: grid; min-height: max(5rem, var(--tap-target)); padding: 0.875rem 1rem; border: 1px solid; border-radius: 0; background: transparent; font: 700 0.75rem/1.4 var(--mono); letter-spacing: .14em; text-align: left; text-transform: uppercase; cursor: pointer; }
.descent-choice small { margin-top: 0.375rem; font-size: 0.625rem; font-weight: 500; letter-spacing: .06em; }
.descent-choice--extract { border-color: var(--gold); color: var(--gold); background: linear-gradient(135deg, rgb(245 200 107 / 18%), rgb(122 98 52 / 5%)); box-shadow: inset 0 0 1.5rem rgb(245 200 107 / 6%); }
.descent-choice--descend { border-color: var(--cyan); color: var(--cyan); background: linear-gradient(135deg, rgb(111 227 255 / 13%), transparent); }
.descent-summary { display: grid; gap: 1rem; max-width: 55rem; margin-inline: auto; border-color: rgb(245 200 107 / 48%); background: radial-gradient(circle at 85% 10%, rgb(245 200 107 / 14%), transparent 36%), var(--glass); }
.descent-summary--collapsed { border-color: rgb(255 120 146 / 32%); background: radial-gradient(circle at 85% 10%, rgb(255 120 146 / 8%), transparent 36%), var(--glass); }
.descent-summary h2 { margin: 0; font: 500 clamp(1.5rem, 4vw, 2.25rem)/1.2 var(--mono); }
.reward-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid rgb(111 227 255 / 14%); }
.reward-breakdown > div { display: grid; gap: 0.25rem; padding: 0.75rem; border: 1px solid rgb(111 227 255 / 7%); }
.reward-breakdown dt { color: var(--muted); font-size: 0.6875rem; }
.reward-breakdown dd { margin: 0; color: var(--ink); }
.completion-summary { display: grid; gap: 0.875rem; }
.path-recap { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0; list-style: none; }
.path-recap li { padding: 0.3125rem 0.5rem; border: 1px solid rgb(111 227 255 / 14%); color: var(--muted); font: 0.625rem/1.3 var(--mono); }

.profile-grid { display: grid; min-width: 0; gap: 0.75rem; }
.archive-switcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.archive-switcher button { overflow: hidden; padding-inline: 0.5rem; text-overflow: ellipsis; }
.archive-switcher button[aria-selected="true"] { color: var(--void); background: var(--cyan); }
.archive-panel { display: grid; gap: 0.75rem; }
.toggle-row { display: flex; min-height: 3.375rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgb(111 227 255 / 10%); }
.toggle-row span { display: grid; }
.toggle-row small { color: var(--muted); }
.toggle-row input { width: 2.75rem; height: 1.5rem; accent-color: var(--cyan); }
.interface-scale-row select { width: min(12rem, 45%); color: var(--cyan); font: 600 0.6875rem/1.3 var(--mono); letter-spacing: .08em; }
.hard-reset-row { display: flex; min-height: 3.375rem; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; padding: 0.75rem; border: 1px solid rgb(245 200 107 / 30%); background: linear-gradient(90deg, rgb(122 98 52 / 14%), transparent); }
.hard-reset-row > span { display: grid; }
.hard-reset-row strong { color: var(--gold); font-family: var(--mono); text-transform: uppercase; }
.hard-reset-row small { color: var(--muted); }
.hard-reset-row .danger-button { border-color: rgb(245 200 107 / 48%); color: var(--gold); background: rgb(122 98 52 / 12%); }
.task-class-profile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5625rem 0.4375rem; border-bottom: 1px solid rgb(111 227 255 / 10%); text-align: left; }
td { color: var(--muted); font-family: var(--mono); }
tr.is-weakest { color: var(--gold); }
.registry-series-header { color: var(--gold); font-family: var(--mono); text-transform: uppercase; }
.sync-login-row, .local-transfer-actions { display: flex; gap: 0.5rem; }
.sync-login-row input { flex: 1; }
.life-card-list, .insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.life-card, .insight-card { display: grid; padding: 0.75rem; border: 1px solid rgb(111 227 255 / 14%); }
.life-card span, .life-card small, .insight-card p { color: var(--muted); }
.insight-card--locked { border-style: dashed; }
.insight-card--locked strong { color: var(--muted); }
.status { font: 0.625rem/1.3 var(--mono); text-transform: uppercase; }
.status--completed { color: var(--success); }
.status--missed { color: var(--gold); }
.system-recommendation { padding: 0.625rem 0.75rem; border-left: 0.125rem solid var(--cyan); color: var(--muted); background: var(--cyan-soft); }

.tutorial-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.tutorial-guidance {
  position: fixed;
  right: 1.375rem;
  bottom: 1.25rem;
  z-index: 2;
  width: min(20.625rem, calc(100% - 1.5rem));
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  border: 1px solid rgb(111 227 255 / 35%);
  color: var(--ink);
  background: var(--glass-hi);
  box-shadow: 0 0 0 1px rgb(111 227 255 / 6%), 0 1rem 3.125rem rgb(0 0 0 / 50%);
  clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 1.125rem 100%, 0 calc(100% - 1.125rem));
  pointer-events: auto;
  backdrop-filter: blur(0.625rem);
}

.tutorial-guidance::after {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0.875rem;
  height: 0.875rem;
  border-top: 0.125rem solid var(--cyan);
  border-left: 0.125rem solid var(--cyan);
  content: "";
  pointer-events: none;
}

.tutorial-head {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgb(111 227 255 / 16%);
  color: var(--cyan);
  font: 0.625rem/1.35 var(--mono);
  letter-spacing: .22em;
}

.tutorial-dot {
  width: 0.25rem;
  height: 0.25rem;
  flex: 0 0 auto;
  background: var(--cyan);
  box-shadow: 0 0 0.375rem var(--cyan);
  transform: rotate(45deg);
}

.tutorial-segments {
  display: flex;
  margin-left: auto;
  gap: 0.1875rem;
}

.tutorial-segments i {
  width: 0.875rem;
  height: 0.1875rem;
  background: rgb(111 227 255 / 15%);
}

.tutorial-segments .tutorial-done {
  background: var(--cyan);
  box-shadow: 0 0 0.3125rem rgb(111 227 255 / 60%);
}

.tutorial-body { padding: 1rem 1rem 0.875rem; }
.tutorial-place { margin-bottom: 0.5625rem; color: var(--gold); font: 0.5625rem/1.4 var(--mono); letter-spacing: .24em; }
.tutorial-line { margin-bottom: 0.75rem; font: 500 1rem/1.45 var(--mono); }
.tutorial-line::before { color: var(--cyan); content: "» "; }
.tutorial-sub { margin: 0; color: var(--muted); font: 0.75rem/1.55 var(--ui); }
.tutorial-sub b { color: var(--ink); font-weight: 600; }

.tutorial-foot {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 0.8125rem;
}

.tutorial-withdraw {
  min-height: max(2.5rem, var(--tap-target));
  padding: 0;
  border: 0;
  border-bottom: 1px dotted rgb(143 166 184 / 40%);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font: 0.625rem/1 var(--mono);
  letter-spacing: .16em;
  cursor: pointer;
}

.tutorial-acknowledge {
  min-height: max(2.5rem, var(--tap-target));
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--cyan);
  border-radius: 0;
  color: var(--void);
  background: var(--cyan);
  font: 700 0.6875rem/1 var(--mono);
  letter-spacing: .16em;
  cursor: pointer;
}

.tutorial-withdrawn { bottom: 1rem; }
.tutorial-withdrawn .tutorial-line { font-size: 0.875rem; }

.tutorial-complete {
  position: fixed;
  top: 4rem;
  left: clamp(5.5rem, 10vw, 9rem);
  z-index: 2;
  width: min(35rem, calc(100% - 7rem));
  border-color: rgb(111 227 255 / 28%);
  background: var(--glass);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 50%);
  pointer-events: auto;
  backdrop-filter: blur(0.625rem);
}

.tutorial-chip {
  position: fixed;
  z-index: 60;
  top: 4.25rem;
  left: 50%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(111 227 255 / 35%);
  background: rgb(9 15 26 / 94%);
  color: var(--cyan);
  font: 0.6875rem/1.5 var(--mono);
  letter-spacing: .12em;
  translate: -50% 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  animation: window-arrive 0.4s ease both;
}
.tutorial-chip b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .tutorial-chip { animation: none; }
}

.tutorial-complete-body { display: grid; gap: 0.875rem; }
.tutorial-complete-line { margin: 0; font: 500 1.0625rem/1.5 var(--mono); }
.tutorial-complete-line::before { color: var(--cyan); content: "» "; }
.tutorial-grant { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 0.875rem; border: 1px solid rgb(245 200 107 / 35%); background: linear-gradient(90deg, rgb(122 98 52 / 16%), rgb(122 98 52 / 4%)); }
.tutorial-sigil { display: grid; width: 1.375rem; height: 1.375rem; color: var(--gold); border: 1px solid rgb(245 200 107 / 40%); font-size: 0.625rem; transform: rotate(45deg); place-items: center; }
.tutorial-grant p { margin: 0; color: var(--gold); font: 0.6875rem/1.4 var(--mono); letter-spacing: .14em; }

.tutorial-beam {
  position: fixed;
  z-index: 1;
  display: flex;
  height: 1.5rem;
  align-items: center;
  justify-content: space-around;
  color: var(--cyan);
  filter: drop-shadow(0 0 0.375rem rgb(111 227 255 / 60%));
  font: 1rem/1 var(--mono);
  pointer-events: none;
  transform-origin: 0 50%;
}

.tutorial-beam::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(111 227 255 / 42%), transparent);
  content: "";
}

.tutorial-beam i {
  z-index: 1;
  padding: 0 0.1875rem;
  background: var(--void);
  font-style: normal;
  animation: tutorial-march 1.2s ease-in-out infinite;
}

.tutorial-beam i:nth-child(2) { animation-delay: .15s; }
.tutorial-beam i:nth-child(3) { animation-delay: .3s; }

@keyframes tutorial-march {
  0%, 100% { opacity: .25; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(0.3125rem); }
}

.tutorial-halo {
  outline: 0.125rem solid var(--cyan) !important;
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 1px rgb(111 227 255 / 25%), 0 0 1.125rem rgb(111 227 255 / 35%) !important;
  animation: tutorial-halo 2s ease-in-out infinite;
}

@keyframes tutorial-halo {
  0%, 100% { outline-offset: 0.1875rem; filter: drop-shadow(0 0 0.375rem rgb(111 227 255 / 25%)); }
  50% { outline-offset: 0.3125rem; filter: drop-shadow(0 0 0.75rem rgb(111 227 255 / 50%)); }
}

.tutorial-preference-row .secondary-button { min-width: 7rem; }

dialog {
  width: min(38.75rem, calc(100% - 1.75rem));
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
}

dialog::backdrop { background: rgb(3 6 10 / 78%); backdrop-filter: blur(0.25rem); }
.reset-dialog-card { padding: 1.5rem; border: 1px solid rgb(255 120 146 / 42%); background: var(--glass-hi); clip-path: var(--window-shape); }
.reset-preview dl { display: grid; gap: 0.3125rem; }
.reset-preview dl div { display: flex; justify-content: space-between; gap: 0.75rem; }
.reset-preview dd { margin: 0; font-family: var(--mono); }
.reset-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }

.pronouncement-region {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  z-index: 30;
  width: min(38.75rem, calc(100% - 11.25rem));
  pointer-events: none;
  transform: translateX(-50%);
}

.pronouncement {
  padding: 0.5625rem 1rem;
  border: 1px solid rgb(111 227 255 / 30%);
  color: var(--cyan);
  background: rgb(9 15 26 / 92%);
  clip-path: polygon(0 0, calc(100% - 0.625rem) 0, 100% 0.625rem, 100% 100%, 0.625rem 100%, 0 calc(100% - 0.625rem));
  font: 0.75rem/1.5 var(--mono);
  letter-spacing: .08em;
  text-align: center;
  animation: pronounce 4.5s ease both;
}

.pronouncement--warning { border-color: rgb(245 200 107 / 42%); color: var(--gold); }

@keyframes pronounce {
  0% { opacity: 0; transform: translateY(-0.75rem); }
  8%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-0.5rem); }
}

.awakening-layer,
.recovery-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.625rem;
  padding: 1.25rem;
  background: var(--void);
}

.awakening-layer::before,
.recovery-layer::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(37.5rem 22.5rem at 50% 48%, rgb(35 68 96 / 28%), transparent 70%);
  content: "";
}

.awakening-signal {
  z-index: 1;
  margin: 0;
  color: var(--cyan);
  font: 0.75rem/1.5 var(--mono);
  letter-spacing: .12em;
  animation: signal-materialize 700ms ease both;
}

@keyframes signal-materialize {
  from { opacity: 0; filter: blur(0.25rem); }
  to { opacity: 1; filter: none; }
}

.awakening-window {
  z-index: 1;
  width: min(32.5rem, 100%);
  border-color: rgb(111 227 255 / 32%);
  background: var(--glass-hi);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 60%), 0 0 2.625rem rgb(111 227 255 / 10%);
  clip-path: var(--window-shape);
  animation: window-arrive 500ms cubic-bezier(.2, .9, .25, 1.15) both;
}

.recovery-window {
  z-index: 1;
  width: min(42.5rem, 100%);
  border-color: rgb(245 200 107 / 42%);
  background: var(--glass-hi);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 60%), 0 0 2.625rem rgb(245 200 107 / 9%);
  clip-path: var(--window-shape);
  animation: window-arrive 500ms cubic-bezier(.2, .9, .25, 1.15) both;
}

.recovery-window .window-dot { background: var(--gold); box-shadow: 0 0 0.375rem var(--gold); }
.recovery-window .window-head { color: var(--gold); border-color: rgb(245 200 107 / 22%); }
.recovery-body { display: grid; gap: 1rem; }
.recovery-body h1 { margin: 0; color: var(--gold); font: 500 1.125rem/1.5 var(--mono); }
.recovery-body > p { margin: 0; }
.recovery-reason { padding: 0.75rem; border-left: 0.125rem solid var(--gold); color: var(--muted); background: rgb(122 98 52 / 10%); font: 0.6875rem/1.5 var(--mono); }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; padding-top: 0.375rem; }
.recovery-begin { border-color: rgb(245 200 107 / 55%); color: var(--gold); background: rgb(122 98 52 / 14%); }

.awakening-form { display: grid; gap: 1rem; }
.awakening-form label { color: var(--ink); font: 500 1.375rem/1.35 var(--mono); }
.awakening-form input { width: 100%; min-height: 3.25rem; padding: 0.625rem 0.8125rem; border-color: rgb(111 227 255 / 42%); font-family: var(--mono); }
.awakening-complete { animation: awakening-away 420ms ease both; }
@keyframes awakening-away { to { opacity: 0; filter: blur(0.3125rem); } }

.awakening-active .system-stage,
.awakening-active .summon-rail,
.awakening-active .system-seal,
.awakening-active .voice-controls {
  visibility: hidden;
}

.recovery-active .system-stage,
.recovery-active .summon-rail,
.recovery-active .system-seal,
.recovery-active .voice-controls {
  visibility: hidden;
}

.awakening-active .view-stack {
  opacity: 0;
  animation: none;
}

/* Public profile keeps the same System material without loading the private island shell. */
.app-frame { width: min(56.25rem, calc(100% - 2rem)); margin: 0 auto; padding: 2.375rem 0; }
.system-header, .system-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 1rem 0; }
.system-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand-mark { display: grid; width: 2.625rem; height: 2.625rem; border: 1px solid var(--cyan-dim); color: var(--cyan); font-family: var(--mono); place-items: center; }
.system-brand > span:last-child { display: grid; }
.system-brand small, .system-footer { color: var(--muted); }

@media (max-width: 900px) {
  .system-stage { padding-right: 1.375rem; padding-left: 5.375rem; }
  .view-stack > :not(.view-heading) { margin-right: 1.125rem; margin-left: 1.125rem; }
  .identity-panel, .stats-panel, .rank-panel, .titles-panel { grid-column: 1 / -1; }
  .stats-panel, .titles-panel { border-left: 0 !important; border-top: 1px solid rgb(111 227 255 / 12%) !important; }
  .quest-card { grid-template-columns: 1fr auto; }
  .quest-card .quest-card-head { grid-column: 1; grid-row: 1; }
  .quest-card h3 { grid-column: 1; grid-row: 2; }
  .quest-card .objective-list { grid-column: 1; grid-row: 3; }
  .quest-card .reward-line { grid-column: 1; grid-row: 4; }
  .quest-card .primary-button { grid-column: 2; grid-row: 1 / span 4; }
  .scenario-run { grid-template-columns: 1fr; }
  .scenario-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1599px) {
  .ghost-window { display: none; }
}

@media (max-width: 640px) {
  body { padding-bottom: 3.5rem; }
  .summon-rail { inset: auto 0 0; width: auto; height: 3.5rem; flex-direction: row; justify-content: center; padding: 0 0.5rem; border-top: 1px solid rgb(111 227 255 / 8%); border-right: 0; }
  .system-mark { display: none; }
  .summon-list { width: 100%; flex-direction: row; justify-content: space-around; gap: 0.125rem; }
  .summon-list a { width: max(2.75rem, var(--tap-target)); height: max(2.75rem, var(--tap-target)); }
  .summon-list a[aria-current="page"]::before { inset: auto 0.5rem -0.375rem; width: auto; height: 0.125rem; }
  .summon-list span { display: none; }
  .system-seal { top: 0.75rem; right: 0.75rem; }
  .voice-controls { top: 1.0625rem; right: 10.25rem; }
  .voice-controls > #voice-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .system-stage { min-height: calc(100vh - 3.5rem); padding: 5.375rem 0.75rem 1.75rem; place-items: start center; }
  .view-stack { --window-cut: 1.125rem; }
  .view-stack > :not(.view-heading) { margin-right: 0.75rem; margin-left: 0.75rem; }
  .view-stack > :last-child { margin-bottom: 1rem; }
  .view-stack > .view-heading + * { margin-top: 1rem; }
  .view-heading { padding: 0.625rem 0.75rem; letter-spacing: .12em; }
  .view-heading .view-hint { display: none; }
  .panel { padding: 1rem; }
  .status-grid, .scenario-grid, .descent-gates, .life-card-list, .insight-grid { grid-template-columns: 1fr; }
  .descent-card { min-height: 15rem; padding: 1.125rem; }
  .daily-board-window { inset: 0.75rem; padding: 1rem; }
  .descent-begin { width: 100%; }
  .descent-choices, .reward-breakdown { grid-template-columns: 1fr; }
  .status-directive { grid-template-columns: 1fr; }
  .quest-meter-strip { padding: 0 0.75rem; }
  .quest-card { display: flex; align-items: stretch; flex-direction: column; padding: 0.8125rem 0.125rem; }
  .quest-card .objective-list, .quest-card .reward-line, .quest-card .primary-button { grid-column: 1; grid-row: auto; }
  .quest-card .primary-button { width: 100%; }
  .drill-items { padding: 1rem 0.75rem; }
  .drill-card h3 { font-size: 1.25rem; }
  .trial-slot { align-items: stretch; flex-direction: column; }
  .fusion-card { grid-template-columns: 1fr; }
  .fusion-symbol { width: 2.625rem; height: 2.625rem; }
  .scenario-progress { grid-template-columns: 1fr; }
  .archive-switcher { display: flex; margin-right: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .archive-switcher button { flex: 0 0 auto; scroll-snap-align: start; }
  .firmament { min-height: 35.75rem; }
  .firmament-head { align-items: flex-start; flex-wrap: wrap; padding: 0.6875rem 0.75rem; letter-spacing: .12em; }
  .firmament-head > span:nth-child(2) { max-width: calc(100% - 1.25rem); }
  .firmament-toggle { width: 100%; margin-left: 0; }
  .firmament-toggle button { flex: 1; }
  .firmament-chart { min-height: 31.25rem; }
  .firmament-scroll { height: 31.25rem; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
  .firmament-svg { width: 62.5rem; max-width: none; height: 35rem; }
  .firmament-window { top: auto; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; width: auto; max-height: calc(100% - 1.5rem); }
  .firmament-index { padding: 1rem 0.75rem; }
  .registry-category-header { grid-template-columns: minmax(0, auto) 1fr auto; }
  .registry-list > li { align-items: stretch; flex-direction: column; }
  .registry-list > li > button { width: 100%; }
  .sync-login-row, .local-transfer-actions, .reset-actions, .recovery-actions, .hard-reset-row { align-items: stretch; flex-direction: column; }
  .pair-up-rows label { grid-template-columns: 1fr; gap: 0.375rem; }
  .pair-up-rows label::after { display: none; }
  .pronouncement-region { top: 4.75rem; width: calc(100% - 1.5rem); }
  .pronouncement { font-size: 0.625rem; }
  .tutorial-guidance { width: calc(100% - 1.5rem); max-height: calc(100vh - 5rem); }
  .tutorial-head { letter-spacing: .14em; }
  .tutorial-complete { top: 4.75rem; left: 0.75rem; width: calc(100% - 1.5rem); }
}

@media (max-width: 440px) {
  .streak-ember span { display: none; }
  .voice-controls { right: auto; left: 0.75rem; }
  .panel-heading { align-items: flex-start; }
  .sequence-list li { grid-template-columns: 1fr max(2.5rem, var(--tap-target)) max(2.5rem, var(--tap-target)); padding-left: 0.5rem; }
}

@media (min-width: 1800px) {
  .system-window-stack { width: min(67.5rem, 100%); }
  .system-stage { padding-right: 9vw; padding-left: calc(4rem + 9vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .tutorial-beam i, .tutorial-halo { animation: none !important; }
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
}

.reduce-motion .tutorial-beam i,
.reduce-motion .tutorial-halo {
  animation: none !important;
}


/* E27 polish: answered options keep their verdict colors */
.drill-options button:disabled.is-correct,
.drill-options button:disabled.is-wrong { opacity: 1; filter: none; }

/* System-chrome action buttons (drill flow) */
.system-action {
  border: 1px solid rgb(111 227 255 / 45%); background: rgb(111 227 255 / 10%);
  color: var(--cyan); font: 600 0.75rem var(--mono); letter-spacing: .15em;
  min-height: var(--tap-target); text-transform: uppercase; padding: 0.625rem 1rem; cursor: pointer; margin-top: 0.625rem;
}
.system-action:hover:not(:disabled), .system-action:focus-visible {
  background: rgb(111 227 255 / 20%); box-shadow: 0 0 0.75rem rgb(111 227 255 / 25%);
}
.system-action--gold {
  border-color: rgb(245 200 107 / 50%); background: rgb(245 200 107 / 12%); color: var(--gold);
}
.system-action--gold:hover:not(:disabled), .system-action--gold:focus-visible {
  background: rgb(245 200 107 / 22%); box-shadow: 0 0 0.75rem rgb(245 200 107 / 30%);
}

/* Phone: in-head streak duplicates the seal - hide, and clear the rail */
@media (max-width: 640px) {
  .window-head .streak-ember { display: none; }
  .stage, main { padding-bottom: 5.25rem; }
}