/* Hallmark · macrostructure: Narrative Workflow · tone: playful · anchor hue: UFO lime
 * nav: N3 Side-rail · footer: Ft5 Statement · design-system: design.md · designed-as-app
 * Existing game palette, authentic screenshots, Jua display + native body.
 * pre-emit critique: P4 H5 E4 S5 R4 V4 · verified in .hallmark/review.md.
 */
@import url('./tokens.css');
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--space-md); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); font-synthesis: none; }
a { color: inherit; text-underline-offset: .25em; }
a:active { text-decoration-thickness: 3px; }
summary:active { opacity: .75; }
a, summary { -webkit-tap-highlight-color: var(--color-mint); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.flight-cover a:focus-visible, .departure a:focus-visible { outline-color: var(--color-accent); }
p { margin: 0; color: var(--color-ink-2); line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; min-width: 0; font-style: normal; overflow-wrap: anywhere; word-break: keep-all; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.025em; line-height: 1.22; }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-lg); line-height: 1.45; font-weight: 750; }
img { display: block; max-width: 100%; height: auto; }
figure, dl, dd { margin: 0; }
figcaption { font-size: var(--text-sm); line-height: 1.6; padding-top: var(--space-sm); }
.skip-link { position: absolute; top: -10rem; left: var(--space-md); padding: var(--space-sm); background: var(--color-accent); z-index: var(--z-sticky); }
.skip-link:focus { top: var(--space-md); }
.masthead { max-width: var(--shell); margin-inline: auto; padding: var(--space-md) var(--gutter); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.publisher { font-size: var(--text-lg); font-weight: 850; letter-spacing: -.05em; text-decoration: none; }
.masthead-game { display: none; }
.language-links { margin-inline-start: auto; display: flex; gap: var(--space-xs); }
.language-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-2xs); font-size: var(--text-sm); white-space: nowrap; text-decoration: none; }
.language-links a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 2px; }
.site-layout { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.site-rail nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--space-xs); padding-block: var(--space-xs) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.site-rail nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.site-rail nav a:hover, .site-rail nav a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.rail-credit { display: none; }
main { min-width: 0; }
.flight-cover { background: var(--color-night); color: var(--color-paper); border-radius: var(--radius-panel); padding: var(--space-lg) var(--space-md); display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-xl); }
.cover-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.game-name { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-md); }
h1 { font-size: var(--text-display); white-space: pre-line; }
.cover-description { margin-block: var(--space-md) var(--space-lg); color: var(--color-night-copy); max-width: 38ch; }
.play-button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 52px; padding: var(--space-sm) var(--space-md); background: var(--color-accent); border: var(--rule-strong) solid var(--color-accent); border-radius: var(--radius-control); color: var(--color-accent-ink); font-weight: 800; white-space: nowrap; text-decoration: none; box-shadow: 0 4px 0 var(--color-accent-deep); transition: transform var(--dur-short) var(--ease-out); }
.play-button span { font-size: var(--text-lg); }
.play-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-accent-deep); }
.play-note { margin-top: var(--space-md); color: var(--color-night-copy); font-size: var(--text-sm); }
.captain { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-night-rule); width: 100%; }
.captain img { width: 56px; height: 56px; flex-shrink: 0; }
.captain p { color: var(--color-night-copy); font-size: var(--text-sm); }
.cover-capture { width: min(100%,21rem); margin-inline: auto; }
.cover-capture img { width: 100%; border: var(--rule-hair) solid var(--color-night-rule); }
.cover-capture figcaption { color: var(--color-night-copy); }
.intro-copy { display: grid; gap: var(--space-md); padding-block: var(--space-xl) var(--space-2xl); }
.intro-copy h2 { white-space: pre-line; }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.section-head p { max-width: 62ch; }
.flight-guide { padding-bottom: var(--space-xl); }
.flight-movement { padding-block: var(--space-lg); border-top: var(--rule-strong) solid var(--color-ink); display: grid; gap: var(--space-md); }
.flight-movement h3, .stage-copy h3 { margin-bottom: var(--space-sm); }
.controls { align-self: start; background: var(--color-paper-2); padding: var(--space-md); border-radius: var(--radius-control); }
.key-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); }
kbd { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; min-width: 38px; min-height: 40px; padding: var(--space-2xs); display: grid; place-items: center; background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink-2); border-bottom: 3px solid var(--color-ink-2); border-radius: var(--radius-control); }
.key-row > span { padding-inline: var(--space-2xs); }
.controls p { font-size: var(--text-sm); text-align: center; margin-top: var(--space-sm); }
.flight-stage { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-lg); padding: var(--space-lg) var(--space-md); margin-top: var(--space-lg); border-radius: var(--radius-panel); }
.collection-stage { background: var(--color-sky); }
.combat-stage { background: var(--color-paper-2); }
.flight-stage figure { width: min(100%,17.5rem); justify-self: center; }
.flight-stage figure img { width: 100%; border: var(--rule-hair) solid var(--color-rule); }
.collection-stage .stage-copy { grid-row: 1; }
.stage-copy { align-self: center; }
.stage-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-title); line-height: 1.3; }
.field-note { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.field-note strong { display: block; margin-bottom: var(--space-2xs); }
.field-note p { font-size: var(--text-base); }
.inline-link { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; margin-top: var(--space-sm); font-weight: 700; white-space: nowrap; }
.armory { padding-block: var(--space-xl) var(--space-lg); }
.weapon-list { display: grid; grid-template-columns: minmax(0,1fr); }
.weapon-list article { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: var(--space-sm); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); align-items: start; }
.weapon-list img { width: 52px; }
.weapon-list h3 { margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
.weapon-list p { font-size: var(--text-base); }
.evolution-note { display: grid; gap: var(--space-md); background: var(--color-mint); border-radius: var(--radius-panel); margin-top: var(--space-md); padding: var(--space-md); }
.evolution-note p { font-size: var(--text-base); margin-top: var(--space-xs); }
.recipe { display: flex; justify-content: center; align-items: center; gap: var(--space-2xs); }
.recipe img { width: 44px; height: 44px; }
.recipe img:last-child { width: 60px; height: 60px; }
.earth-defense { padding-block: var(--space-xl); }
.earth-defense h2 { margin-bottom: var(--space-lg); }
.earth-defense dl { display: grid; }
.earth-defense dl > div { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
dt { font-weight: 750; }
dd { color: var(--color-ink-2); line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.development { padding-block: var(--space-lg) var(--space-xl); }
.dev-entry { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
time { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.dev-entry h3 { margin-bottom: var(--space-xs); }
.questions { padding-block: var(--space-md) var(--space-xl); }
.questions h2 { margin-bottom: var(--space-md); }
.questions details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.questions summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); justify-content: space-between; padding-block: var(--space-md); min-height: 56px; font-weight: 700; list-style: none; font-size: var(--text-sm); white-space: nowrap; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary > span { flex-shrink: 0; position: relative; width: 14px; height: 14px; }
.questions summary > span::before, .questions summary > span::after { content: ''; position: absolute; inset: 6px 0; height: 2px; background: var(--color-ink); }
.questions summary > span::after { transform: rotate(90deg); transition: transform var(--dur-short) var(--ease-out); }
.questions details[open] summary > span::after { transform: rotate(0); }
.questions details p { padding-bottom: var(--space-md); max-width: 68ch; }
.departure { padding: var(--space-lg) var(--space-md); background: var(--color-night); color: var(--color-paper); border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.departure-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-night-rule); }
.departure-action h2 { white-space: pre-line; }
.publisher-note { padding-block: var(--space-lg); }
.publisher-note h3 { font-size: var(--text-lg); letter-spacing: -.04em; margin-bottom: var(--space-sm); }
.publisher-note p { color: var(--color-night-copy); font-size: var(--text-base); }
.publisher-note .inline-link { font-size: var(--text-sm); }
.legal-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; border-top: var(--rule-hair) solid var(--color-night-rule); padding-top: var(--space-md); color: var(--color-night-copy); }
.legal-row a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); white-space: nowrap; }
.legal-row small { width: 100%; font-size: var(--text-xs); }
.error-page { min-height: 100svh; display: grid; place-items: center; padding: var(--space-lg); }
.error-page main { max-width: 38rem; }
.error-page h1 { margin-block: var(--space-md) var(--space-lg); font-size: var(--text-title); }
.error-code { color: var(--color-ink-2); font-size: var(--text-lg); }
@media (hover:hover) and (pointer:fine) {
  .play-button:hover { transform: translateY(-2px); }
  .inline-link:hover, .legal-row a:hover { text-decoration-thickness: 2px; }
  .questions summary:hover { color: var(--color-focus); }
}
@media (min-width:40rem) {
  .masthead-game { display: inline; color: var(--color-ink-2); font-size: var(--text-sm); margin-inline-start: var(--space-sm); }
  .site-rail nav { display: flex; justify-content: space-between; gap: var(--space-lg); }
  .flight-cover { padding: var(--space-lg); grid-template-columns: minmax(0,1.2fr) minmax(0,.85fr); gap: var(--space-lg); align-items: center; }
  .cover-capture { width: 100%; }
  .cover-description { font-size: var(--text-base); }
  .captain img { width: 64px; height: 64px; }
  .flight-movement { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-xl); }
  .flight-stage { padding: var(--space-lg); grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--space-xl); }
  .collection-stage .stage-copy { grid-row: auto; }
  .combat-stage { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .weapon-list { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--space-lg); }
  .evolution-note { padding: var(--space-lg); }
  .earth-defense dl > div { grid-template-columns: 9rem minmax(0,1fr); gap: var(--space-lg); }
  .dev-entry { grid-template-columns: 9rem minmax(0,1fr); gap: var(--space-lg); }
  .questions summary { font-size: var(--text-base); }
  .departure { padding: var(--space-xl); }
  .departure-action { justify-content: space-between; }
  .legal-row small { width: auto; margin-inline-end: auto; }
}
@media (min-width:64rem) {
  .masthead { min-height: 106px; padding-block: var(--space-md); }
  .site-layout { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: var(--space-lg); align-items: start; }
  .site-rail { position: sticky; top: var(--space-lg); align-self: start; padding-top: var(--space-sm); }
  .site-rail nav { display: flex; flex-direction: column; gap: var(--space-xs); border-top: 0; }
  .rail-credit { display: block; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; margin-top: var(--space-2xl); color: var(--color-ink-2); }
  .flight-cover { padding: var(--space-xl) var(--space-xl) calc(var(--space-xl) + var(--space-sm)); grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--space-lg); }
  .cover-description { font-size: var(--text-base); }
  .cover-copy h1 { font-size: clamp(2.75rem,4.8vw,4.5rem); }
  .cover-capture { max-width: 19rem; }
  .intro-copy { padding: var(--space-2xl) var(--space-lg); grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: start; gap: var(--space-xl); }
  .flight-guide, .armory, .earth-defense, .development, .questions { padding-inline: var(--space-lg); }
  .section-head { max-width: 48rem; }
  .flight-stage { padding: var(--space-xl); gap: var(--space-xl); }
  .field-note { margin-top: var(--space-xl); }
  .evolution-note { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-lg); align-items: center; }
  .recipe { gap: var(--space-xs); }
  .departure { margin-top: var(--space-lg); }
}
@media (prefers-reduced-motion:reduce) {
  .play-button, .questions summary > span::after { transition: none; }
}