/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
/* Hallmark · genre: atmospheric · tone: ceremonial and tactile · anchor: limestone gold · macrostructure: Map / Diagram · theme: Obsidian Codex · enrichment: official Tzolkin renders · nav: N9 · footer: none · contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30) */

@import url("../../tokens.css");

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  min-width: 20rem;
  background: var(--color-paper);
  overflow-x: clip;
}

body {
  min-height: 100svh;
  margin: 0;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 14% 8%, var(--color-accent-faint), transparent 28rem),
    linear-gradient(145deg, var(--color-paper-2), var(--color-paper) 54%);
  font-family: var(--font-body);
  overflow-x: clip;
}

button, a, summary { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
i { font-style: normal; }

.skip-link {
  position: fixed;
  inset: var(--space-sm) auto auto var(--space-sm);
  z-index: calc(var(--z-modal) + 1);
  padding: var(--space-sm) var(--space-md);
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: relative;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
  align-items: center;
  min-height: 5.25rem;
  padding: var(--space-sm) clamp(var(--space-md), 3vw, var(--space-xl));
  border-bottom: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: 0 1rem 3rem var(--color-shadow-soft);
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.brand img { width: 2rem; height: 2.7rem; object-fit: contain; }
.brand__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: .02em;
}
.brand__wordmark i { color: var(--color-accent); font-weight: 400; }

.chapter {
  display: grid;
  grid-template-columns: auto 8rem auto;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-width: 18rem;
  text-align: center;
}
.chapter > span,
.chapter > small,
.eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.chapter > strong { grid-column: 1 / -1; grid-row: 1; font-family: var(--font-display); font-weight: 400; }
.chapter__track { height: .2rem; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.chapter__track span { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(.25); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
.chapter > span, .chapter > small, .chapter__track { grid-row: 2; }

.topbar__actions { justify-self: end; display: flex; gap: var(--space-xs); }
.icon-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  cursor: pointer;
  transition: border-color var(--dur-short), background var(--dur-short), transform var(--dur-micro);
}
.icon-button svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.audio-button { width: auto; min-width: 4.8rem; grid-template-columns: auto auto; gap: .38rem; padding-inline: .62rem; }
.audio-button .control-label { font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.icon-button:hover { border-color: var(--color-accent-line); background: var(--color-paper-3); }
.icon-button:active { transform: scale(.94); }
.icon-button[aria-pressed="false"] { color: var(--color-muted); }
.icon-button[data-audio-state="playing"] { border-color: var(--color-accent-line); color: var(--color-accent); }

.game-shell {
  display: grid;
  grid-template-columns: minmax(32rem, 1.45fr) minmax(18rem, .55fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-xl));
  width: min(90rem, 100%);
  margin: 0 auto;
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.board-region { min-width: 0; }
.board-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-md); }
.board-heading h1 {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1;
}
.score { text-align: right; font-variant-numeric: tabular-nums; }
.score span { display: block; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.score strong { color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-lg); }

.board-frame {
  width: min(100%, calc(100svh - 13rem));
  min-width: 0;
  margin: 0 auto;
  padding: clamp(.5rem, 1vw, .75rem);
  border: var(--rule-thin) solid var(--color-accent-line);
  border-radius: var(--radius-lg);
  background: var(--color-board);
  box-shadow: 0 1.5rem 4rem var(--color-shadow), inset 0 0 0 var(--rule-thin) var(--color-rule);
}
.game-board { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; outline: none; }
#game-canvas, #game-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.game-board:focus-visible { box-shadow: 0 0 0 .2rem var(--color-focus); }
.board-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-sm); background: var(--color-board); color: var(--color-muted); text-align: center; transition: opacity var(--dur-long), visibility var(--dur-long); }
.board-loading.is-hidden { opacity: 0; visibility: hidden; }
.board-loading__mark { color: var(--color-accent); font-size: var(--text-xl); animation: breathe 1.4s var(--ease-in-out) infinite alternate; }

.board-footer { display: flex; min-height: 2rem; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); }
.status-message, .combo { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.combo { color: var(--color-accent); font-family: var(--font-display); }

.codex-powers { margin-top: var(--space-lg); padding-block: var(--space-md); border-block: var(--rule-thin) solid var(--color-rule); }
.codex-powers__heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-md); }
.codex-powers__heading h2 { margin: 0 0 var(--space-3xs); font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; }
.codex-powers__heading p { margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.codex-powers__heading > span { flex: none; color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); }
.codex-power-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.codex-power {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 3.75rem;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: var(--rule-thin) solid color-mix(in srgb, var(--power-color) 52%, var(--color-rule));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--power-color) 8%, var(--color-paper-2));
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-short), background var(--dur-short), transform var(--dur-micro), opacity var(--dur-short);
}
.codex-power:hover:not(:disabled) { border-color: var(--power-color); background: color-mix(in srgb, var(--power-color) 14%, var(--color-paper-2)); }
.codex-power:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.codex-power__glyph { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; }
.codex-power__glyph img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .12rem .18rem rgb(0 0 0 / .48)); }
.codex-power__copy { min-width: 0; }
.codex-power__copy strong, .codex-power__copy small { display: block; overflow: hidden; }
.codex-power__copy strong { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 400; line-height: 1.15; white-space: normal; }
.codex-power__copy small { margin-top: var(--space-3xs); color: var(--color-muted); font-size: .64rem; }
.codex-power__count { display: grid; min-width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; background: var(--color-paper); color: var(--power-color); font-family: var(--font-outlier); font-size: .68rem; }
.codex-power.has-charges::after { content: ""; position: absolute; inset: -.4rem; border: .1rem solid var(--power-color); border-radius: inherit; opacity: 0; pointer-events: none; animation: codexPowerGlow 2.2s var(--ease-in-out) infinite; }
.codex-power.is-locked { opacity: .42; filter: grayscale(.8); }
.codex-power.is-locked .codex-power__count { color: var(--color-muted); }
.power-signature { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: .68rem; }
.power-signature span { display: inline-flex; align-items: center; gap: .3rem; }
.power-signature b { color: var(--color-accent); font-size: .78rem; }

.mission-panel {
  align-self: start;
  position: sticky;
  top: var(--space-lg);
  max-height: calc(100svh - 2 * var(--space-lg));
  overflow-y: auto;
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  box-shadow: 0 1.25rem 3.5rem var(--color-shadow-soft);
}
.mission-panel__intro { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.mission-panel__index { color: var(--color-ink-faint); font-size: var(--text-xs); }
.mission-panel__level { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.mission-panel__level > span { padding: .18rem .45rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); }
.mission-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); margin: calc(-1 * var(--space-xs)) 0 var(--space-md); }
.mission-path button {
  display: grid;
  min-height: 2rem;
  place-items: center;
  padding: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--dur-short), border-color var(--dur-short), background var(--dur-short), transform var(--dur-micro);
}
.mission-path button:hover { color: var(--color-ink); border-color: var(--color-accent-line); }
.mission-path button:active { transform: translateY(1px); }
.mission-path button[aria-current="step"] { color: var(--color-accent-ink); border-color: var(--color-accent); background: var(--color-accent); }
.seal-portrait { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md); background: var(--color-board); isolation: isolate; }
.seal-portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -4rem 3rem var(--color-shadow); pointer-events: none; }
.seal-portrait > img, .seal-portrait > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.seal-portrait > video { opacity: 0; transform: scale(1.025); }
.seal-portrait.has-video > video { opacity: 1; transform: scale(1); }
.seal-portrait.has-video > img { opacity: 0; transform: scale(1.02); }
.seal-portrait__motion { position: absolute; z-index: 2; inset: var(--space-xs) var(--space-xs) auto auto; display: inline-flex; align-items: center; gap: .35rem; padding: .24rem .48rem; border-radius: var(--radius-pill); background: rgb(12 10 8 / .72); color: var(--color-ink-soft); font-size: .64rem; opacity: 0; transition: opacity var(--dur-short); }
.seal-portrait.is-video-playing .seal-portrait__motion { opacity: 1; }
.seal-portrait__motion i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--mission-power, var(--color-accent)); box-shadow: 0 0 .5rem var(--mission-power, var(--color-accent)); animation: videoPulse 1.8s var(--ease-in-out) infinite; }
.seal-portrait__name { position: absolute; z-index: 1; inset: auto var(--space-md) var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); }
.seal-portrait__name i { color: var(--color-accent); font-weight: 400; }
.seal-purpose { display: grid; gap: var(--space-3xs); margin: var(--space-sm) 0 0; padding: var(--space-sm) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.seal-purpose span { color: var(--color-muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.seal-purpose strong { color: var(--mission-power, var(--color-accent)); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 400; }
.mission-roster { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); padding: var(--space-sm) 0 0; }
.mission-roster__seal {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-board);
}
.mission-roster__seal img { width: 100%; height: 100%; object-fit: cover; }
.mission-roster__seal.is-goal { border-color: var(--color-accent); box-shadow: 0 0 0 .12rem var(--color-accent-soft); }

.mission-copy { padding: var(--space-lg) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.mission-copy h2 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; }
.mission-copy h2 strong { color: var(--color-accent); }
.mission-copy p, .how-to p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; }

.goal-meter { padding: var(--space-lg) 0 var(--space-md); }
.goal-meter__labels { display: flex; justify-content: space-between; margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; }
.goal-meter__labels strong { color: var(--color-ink); }
.meter { height: .4rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-rule); }
.meter span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out); }
.objective-list { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.objective-list li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.objective-list li::before { content: ""; width: .75rem; height: .75rem; justify-self: center; border: var(--rule-thin) solid var(--color-rule); border-radius: 50%; background: var(--color-paper); }
.objective-list li.is-complete { color: var(--color-ink-soft); }
.objective-list li.is-complete::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 .16rem var(--color-paper-2); }
.objective-list strong { color: var(--color-ink); font-family: var(--font-outlier); font-weight: 400; }
.mission-stats { display: grid; grid-template-columns: 1fr 1fr; border-block: var(--rule-thin) solid var(--color-rule); }
.mission-stats div { padding: var(--space-md) 0; }
.mission-stats div + div { padding-left: var(--space-md); border-left: var(--rule-thin) solid var(--color-rule); }
.mission-stats span { display: block; color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.mission-stats strong { display: block; margin-top: var(--space-xs); font-family: var(--font-outlier); font-size: var(--text-lg); }

.power-block { padding-top: var(--space-lg); }
.power-block__heading { display: flex; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.power-block__heading > div { display: grid; gap: var(--space-3xs); }
.power-block__label { color: var(--color-accent); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; }
.power-block__heading strong { font-family: var(--font-display); font-weight: 400; }
.power-block__energy { color: var(--color-muted); font-size: var(--text-xs); }
.meter--energy { height: .2rem; margin-bottom: var(--space-md); }
.power-button {
  display: flex;
  width: 100%;
  min-height: 3.6rem;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-accent-line);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-short), transform var(--dur-micro), opacity var(--dur-short);
}
.power-button:hover:not(:disabled) { background: var(--color-accent-faint); }
.power-button:active:not(:disabled) { transform: translateY(1px); }
.power-button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.power-button.is-ready { border-color: var(--mission-power, var(--color-accent)); background: color-mix(in srgb, var(--mission-power, var(--color-accent)) 14%, var(--color-paper-2)); }
.power-button__icon { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; overflow: hidden; border: .12rem solid var(--mission-power, var(--color-accent)); border-radius: 50%; background: var(--color-board); box-shadow: 0 .22rem .65rem var(--color-shadow-soft); }
.power-button__icon img { width: 100%; height: 100%; object-fit: cover; }
.power-button.is-ready .power-button__icon { animation: powerReady 1.45s var(--ease-in-out) infinite; }
.power-button span:nth-child(2) { display: grid; gap: var(--space-3xs); }
.power-button small { color: var(--color-muted); }
.how-to { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.how-to summary { width: max-content; cursor: pointer; color: var(--color-ink-soft); }
.how-to p { margin-top: var(--space-sm); }

.game-legal {
  display: flex;
  width: min(90rem, calc(100% - 2 * var(--space-lg)));
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 auto;
  padding: var(--space-lg) 0 var(--space-xl);
  border-top: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.intro-replay,
.intro-skip {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-accent-line);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
}
.intro-replay:hover,
.intro-skip:hover { color: var(--color-ink); border-color: var(--color-accent); }

.game-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: var(--space-lg); border: 0; overflow-y: auto; background: var(--color-overlay); color: var(--color-ink); }
.game-dialog[open] { display: grid; place-items: center; }
.game-dialog::backdrop { background: var(--color-overlay); }
.game-dialog[open]::backdrop { animation: dialogBackdrop 180ms var(--ease-out); }
.dialog-card { position: relative; width: min(64rem, 100%); overflow: hidden; border: var(--rule-thin) solid var(--color-accent-line); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: 0 2rem 6rem var(--color-shadow); }
.game-dialog[open] .dialog-card { animation: dialogReveal 260ms var(--ease-out); }
.dialog-card--small { width: min(28rem, 100%); padding: var(--space-xl); text-align: center; }
.dialog-card--small h2 { font-family: var(--font-display); font-weight: 400; }
.dialog-card--small p:not(.eyebrow) { color: var(--color-muted); line-height: 1.6; }
.dialog-card--intro { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(24rem, 1.1fr); width: min(68rem, 100%); max-height: calc(100svh - 2 * var(--space-lg)); }
.intro-visual { position: relative; min-height: 42rem; overflow: hidden; background: var(--color-board); isolation: isolate; }
.intro-visual > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transform: scale(1.025); }
.intro-visual__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 8 5 / .06), rgb(10 8 5 / .18) 52%, rgb(10 8 5 / .86)); }
.intro-visual__caption { position: absolute; inset: auto var(--space-lg) var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-thin) solid rgb(255 255 255 / .26); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); text-shadow: 0 .15rem .6rem rgb(0 0 0 / .74); }
.intro-content { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(var(--space-xl), 5vw, var(--space-2xl)); background: radial-gradient(circle at 100% 0, var(--color-accent-faint), transparent 22rem), var(--color-paper-2); }
.intro-brand { display: inline-flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); font-family: var(--font-display); font-size: var(--text-md); }
.intro-brand img { width: 1.7rem; height: 2.35rem; object-fit: contain; }
.intro-brand i { color: var(--color-accent); }
.intro-content h2 { max-width: 12ch; margin: var(--space-sm) 0 var(--space-md); font-family: var(--font-display); font-size: clamp(var(--text-xl), 4.2vw, var(--text-2xl)); font-weight: 400; line-height: 1.02; }
.intro-lead { max-width: 37rem; margin: 0; color: var(--color-muted); line-height: 1.65; }
.intro-steps { display: grid; gap: 0; margin: var(--space-xl) 0; padding: 0; border-block: var(--rule-thin) solid var(--color-rule); list-style: none; }
.intro-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-height: 4.25rem; padding-block: var(--space-sm); }
.intro-steps li + li { border-top: var(--rule-thin) solid var(--color-rule); }
.intro-steps b { color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 400; }
.intro-steps span { display: grid; gap: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); }
.intro-steps strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 400; }
.intro-actions { display: flex; align-items: center; gap: var(--space-lg); }
.intro-actions .primary-button { display: inline-flex; align-items: center; gap: var(--space-sm); }
.intro-skip { color: var(--color-muted); }
.intro-copyright { margin: var(--space-lg) 0 0; color: var(--color-ink-faint); font-size: .65rem; }
.dialog-card--learning { display: grid; grid-template-columns: minmax(16rem, .8fr) 1.2fr; }
.learning-image { min-height: 32rem; background: var(--color-board); }
.learning-image img { width: 100%; height: 100%; object-fit: cover; }
.learning-copy { align-self: center; padding: clamp(var(--space-xl), 5vw, var(--space-2xl)); }
.learning-copy h2 { margin: var(--space-sm) 0 var(--space-md); font-family: var(--font-display); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); font-weight: 400; }
.learning-copy h2 i { color: var(--color-accent); font-weight: 400; }
.learning-copy > p:not(.eyebrow), blockquote { color: var(--color-muted); font-size: var(--text-base); line-height: 1.75; }
.result-reward { display: inline-flex; width: fit-content; align-items: center; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent) !important; font-size: var(--text-xs) !important; font-weight: 700; }
.result-reward[hidden] { display: none; }
.keywords { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.keywords span { padding: var(--space-xs) var(--space-sm); border: var(--rule-thin) solid var(--color-accent-line); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
blockquote { margin: var(--space-lg) 0; padding-left: var(--space-lg); border-left: .16rem solid var(--color-accent); font-family: var(--font-display); font-style: italic; }
.dialog-actions { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.primary-button { min-height: 3rem; padding: var(--space-sm) var(--space-lg); border: var(--rule-thin) solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; cursor: pointer; transition: background var(--dur-short), transform var(--dur-micro); }
.primary-button:hover { background: var(--color-accent-hover); }
.primary-button:active { transform: translateY(1px); }
.text-link { color: var(--color-accent); text-underline-offset: .24em; }
.dialog-close { position: absolute; z-index: 2; inset: var(--space-md) var(--space-md) auto auto; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: var(--rule-thin) solid var(--color-rule); border-radius: 50%; background: var(--color-paper); font-size: var(--text-lg); cursor: pointer; }

h1, h2, h3, h4, h5, h6 { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
.primary-button, .text-link, summary { white-space: nowrap; }
button:disabled { cursor: not-allowed; filter: saturate(.55); }
button[aria-busy="true"] { cursor: wait; }
button[data-state="error"] { border-color: var(--color-error); }
button[data-state="success"] { border-color: var(--color-success); }

:where(button, a, summary):focus-visible { outline: .18rem solid var(--color-focus); outline-offset: .18rem; }

@keyframes breathe { to { transform: scale(1.18) rotate(45deg); opacity: .65; } }
@keyframes powerReady {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mission-power, var(--color-accent)) 22%, transparent); }
  50% { transform: scale(1.055); box-shadow: 0 0 0 .38rem transparent; }
}
@keyframes dialogBackdrop { from { opacity: 0; } }
@keyframes dialogReveal {
  from { opacity: 0; transform: translateY(.55rem) scale(.985); filter: blur(.18rem); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes codexPowerGlow {
  0%, 100% { opacity: 0; transform: scale(.96); }
  45% { opacity: .48; }
  75% { opacity: 0; transform: scale(1.035); }
}
@keyframes videoPulse { 50% { transform: scale(1.25); opacity: .62; } }

@media (max-width: 64rem) {
  .game-shell { grid-template-columns: minmax(26rem, 1.3fr) minmax(17rem, .7fr); gap: var(--space-lg); padding: var(--space-lg); }
  .board-frame { width: 100%; }
  .chapter { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .codex-power-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .topbar { min-height: 4.25rem; padding: var(--space-xs) var(--space-md); position: sticky; top: 0; }
  .brand__wordmark { font-size: var(--text-md); }
  .game-shell { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .board-heading { align-items: center; }
  .board-heading h1 { font-size: var(--text-xl); }
  .board-frame { width: calc(100% + 2 * var(--space-md)); margin-left: calc(-1 * var(--space-md)); padding: var(--space-2xs); border-inline: 0; border-radius: 0; }
  .mission-panel { position: static; max-height: none; overflow: visible; padding: var(--space-lg); }
  .codex-power-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-legal { width: calc(100% - 2 * var(--space-md)); align-items: flex-start; flex-direction: column; }
  .dialog-card--intro { grid-template-columns: 1fr; overflow-y: auto; }
  .intro-visual { min-height: 14rem; height: 30svh; }
  .intro-visual__caption { inset: auto var(--space-md) var(--space-md); font-size: var(--text-md); }
  .intro-content { padding: var(--space-lg); }
  .intro-brand { margin-bottom: var(--space-md); }
  .intro-content h2 { max-width: 14ch; font-size: var(--text-xl); }
  .intro-steps { margin-block: var(--space-lg); }
  .dialog-card--learning { grid-template-columns: 1fr; max-height: calc(100svh - 2 * var(--space-lg)); overflow-y: auto; }
  .learning-image { min-height: 15rem; height: 36svh; }
  .learning-copy { padding: var(--space-lg); }
}

@media (max-width: 25.875rem) {
  .brand__wordmark { display: none; }
  .audio-button { width: 2.75rem; min-width: 2.75rem; grid-template-columns: 1fr; padding-inline: 0; }
  .audio-button .control-label { display: none; }
  .board-heading { gap: var(--space-sm); }
  .board-heading h1 { font-size: var(--text-lg); }
  .score strong { font-size: var(--text-md); }
  .game-shell { padding-inline: var(--space-sm); }
  .board-frame { width: calc(100% + 2 * var(--space-sm)); margin-left: calc(-1 * var(--space-sm)); }
  .board-footer { align-items: start; flex-direction: column; gap: var(--space-xs); }
  .codex-powers__heading { align-items: start; }
  .codex-power-list { grid-template-columns: 1fr; }
  .intro-actions { align-items: stretch; flex-direction: column; gap: var(--space-sm); }
  .intro-skip { width: max-content; align-self: center; }
  .dialog-actions { align-items: stretch; flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seal-portrait > video { display: none; }
  .intro-visual > video { display: none; }
  .seal-portrait > img { opacity: 1 !important; transform: none !important; }
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
.reduce-motion .seal-portrait > video { display: none; }
.reduce-motion .intro-visual > video { display: none; }
.reduce-motion .seal-portrait > img { opacity: 1 !important; transform: none !important; }