/* AviatorGame (ET-1) · tone: calm editorial, dawn over the highlands · anchor hue: sky blue #0369a1 · light theme only */

@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/takeoff-sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/takeoff-sourcesans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --hl-bg: #f4f8fc;
  --hl-surface: #ffffff;
  --hl-ink: #0f1f33;
  --hl-ink-2: #22354d;
  --hl-muted: #51627a;
  --hl-accent: #0369a1;
  --hl-accent-strong: #075985;
  --hl-accent-soft: #e0f2fe;
  --hl-dawn: #bae6fd;
  --hl-line: #d6e2ee;
  --hl-line-strong: #b4c7da;
  --hl-night: #0f1f33;
  --hl-night-2: #1b3352;
  --hl-on-night: #ffffff;
  --hl-on-night-muted: #c9d8e8;
  --hl-debit-soft: #f1f4f8;
  --hl-focus: #0369a1;
  --hl-ridge: #cfe3f2;
  --hl-ridge-near: #b9d6eb;

  --hl-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hl-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --hl-s1: 4px;
  --hl-s2: 8px;
  --hl-s3: 12px;
  --hl-s4: 16px;
  --hl-s5: 24px;
  --hl-s6: 32px;
  --hl-s7: 48px;
  --hl-s8: 64px;
  --hl-s9: 96px;

  --hl-r-sm: 8px;
  --hl-r: 14px;
  --hl-r-lg: 22px;
  --hl-pill: 999px;

  --hl-t-body: 1.0625rem;
  --hl-t-small: 0.9375rem;
  --hl-t-h1: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  --hl-t-h2: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --hl-t-h3: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);

  --hl-shadow: 0 1px 2px rgb(15 31 51 / 0.05), 0 10px 28px -16px rgb(15 31 51 / 0.28);
  --hl-shadow-soft: 0 1px 2px rgb(15 31 51 / 0.04), 0 6px 18px -14px rgb(15 31 51 / 0.24);
  --hl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hl-dur: 180ms;
  --hl-head-h: 64px;
  --hl-gutter: 16px;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: var(--hl-s5); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--hl-bg);
  color: var(--hl-ink);
  font-family: var(--hl-font-body);
  font-size: var(--hl-t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--hl-font-display);
  font-style: normal;
  color: var(--hl-ink);
  line-height: 1.22;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--hl-t-h1); font-weight: 700; margin: 0 0 var(--hl-s4); }
h2 { font-size: var(--hl-t-h2); font-weight: 600; margin: 0 0 var(--hl-s4); }
h3 { font-size: var(--hl-t-h3); font-weight: 600; margin: var(--hl-s6) 0 var(--hl-s3); }
p { margin: 0 0 var(--hl-s4); }
a { color: var(--hl-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--hl-accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hl-focus); outline-offset: 2px; border-radius: 4px; }
strong { font-weight: 600; color: var(--hl-ink); }
.hl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hl-skip {
  position: absolute; left: var(--hl-s3); top: -60px; z-index: 50;
  background: var(--hl-ink); color: var(--hl-on-night); padding: var(--hl-s2) var(--hl-s4); border-radius: var(--hl-r-sm);
  text-decoration: none; font-weight: 600;
}
.hl-skip:focus { top: var(--hl-s3); color: var(--hl-on-night); }
.hl-main { display: block; outline: none; }

.hl-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--hl-gutter); min-width: 0; }
.hl-wrap--prose { max-width: calc(780px + 2 * var(--hl-gutter)); }
.hl-wrap--wide { max-width: calc(1040px + 2 * var(--hl-gutter)); }

/* ------------------------------------------------------------ buttons */
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hl-s2);
  min-height: 44px; padding: var(--hl-s2) var(--hl-s5);
  border: 2px solid var(--hl-accent); border-radius: var(--hl-pill);
  background: var(--hl-accent); color: var(--hl-on-night);
  font-family: var(--hl-font-display); font-weight: 600; font-size: 1rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--hl-dur) var(--hl-ease), border-color var(--hl-dur) var(--hl-ease), transform var(--hl-dur) var(--hl-ease);
}
.hl-btn:hover { background: var(--hl-accent-strong); border-color: var(--hl-accent-strong); color: var(--hl-on-night); text-decoration: none; }
.hl-btn:active { transform: translateY(1px); }
.hl-btn[disabled], .hl-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.hl-btn--play .hl-btn__label::after {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-left: 0.45em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-0.1em) rotate(45deg);
}
.hl-btn__sub { font-family: var(--hl-font-body); font-weight: 600; font-size: 0.8125rem; opacity: 0.85; }
.hl-btn--lg { min-height: 52px; padding-inline: var(--hl-s6); font-size: 1.0625rem; }
.hl-btn--block { display: flex; width: 100%; }
.hl-btn--ghost { background: transparent; color: var(--hl-accent); }
.hl-btn--ghost:hover { background: var(--hl-accent-soft); color: var(--hl-accent-strong); }
.hl-btn--light { background: var(--hl-surface); border-color: var(--hl-surface); color: var(--hl-ink); }
.hl-btn--light:hover { background: var(--hl-accent-soft); border-color: var(--hl-accent-soft); color: var(--hl-ink); }
.hl-btn--light:focus-visible { outline-color: var(--hl-on-night); }
.hl-cta { margin: var(--hl-s5) 0 var(--hl-s6); }
.hl-cta .hl-btn { flex-wrap: wrap; row-gap: 2px; }

/* ------------------------------------------------------------ header */
.hl-head { position: relative; z-index: 20; background: var(--hl-surface); border-bottom: 1px solid var(--hl-line); }
.hl-head--over { position: absolute; inset: 0 0 auto; background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(1.2) blur(6px); backdrop-filter: saturate(1.2) blur(6px); }
.hl-head__in { display: flex; align-items: center; gap: var(--hl-s3); min-height: var(--hl-head-h); }
.hl-logo { display: inline-flex; align-items: center; gap: var(--hl-s2); min-height: 44px; color: var(--hl-ink); text-decoration: none; font-family: var(--hl-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; margin-right: auto; }
.hl-logo img { width: 34px; height: 34px; border-radius: 9px; }
.hl-logo:hover { color: var(--hl-ink); text-decoration: none; }
.hl-nav { display: none; }
.hl-nav ul, .hl-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.hl-head__play { display: none; }
.hl-menu { position: static; }
.hl-menu__btn {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--hl-line-strong); border-radius: var(--hl-r-sm);
  color: var(--hl-ink); background: var(--hl-surface); cursor: pointer;
}
.hl-menu__btn::-webkit-details-marker { display: none; }
.hl-menu__btn:hover { border-color: var(--hl-accent); color: var(--hl-accent); }
.hl-menu[open] .hl-menu__btn { background: var(--hl-accent-soft); border-color: var(--hl-accent); color: var(--hl-accent); }
.hl-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--hl-surface); border-bottom: 1px solid var(--hl-line); box-shadow: var(--hl-shadow);
  padding: var(--hl-s2) var(--hl-gutter) var(--hl-s4);
}
.hl-menu__panel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--hl-s3);
  color: var(--hl-ink); text-decoration: none; font-weight: 600; border-radius: var(--hl-r-sm); white-space: nowrap;
}
.hl-menu__panel a:hover { background: var(--hl-accent-soft); color: var(--hl-accent-strong); }
.hl-menu__panel a[aria-current="page"] { color: var(--hl-accent); box-shadow: inset 3px 0 0 var(--hl-accent); }

/* ------------------------------------------------------------ breadcrumbs, byline */
.hl-crumbs { padding-top: var(--hl-s4); font-size: var(--hl-t-small); }
.hl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--hl-s2); margin: 0; padding: 0; color: var(--hl-muted); }
.hl-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.hl-crumbs li + li::before { content: ""; width: 6px; height: 6px; margin-right: var(--hl-s2); border-top: 1.5px solid var(--hl-line-strong); border-right: 1.5px solid var(--hl-line-strong); transform: rotate(45deg); }
.hl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hl-muted); white-space: nowrap; }
.hl-crumbs a:hover { color: var(--hl-accent); }
.hl-crumbs [aria-current] { color: var(--hl-ink); font-weight: 600; white-space: nowrap; }
.hl-byline { display: flex; align-items: flex-start; gap: var(--hl-s2); color: var(--hl-muted); font-size: var(--hl-t-small); margin-bottom: var(--hl-s5); }
.hl-ico { flex: none; color: var(--hl-accent); }
.hl-byline .hl-ico { margin-top: 1px; }
.hl-lede { font-size: 1.1875rem; color: var(--hl-ink-2); max-width: 62ch; }

/* ------------------------------------------------------------ prose + content classes */
.hl-prose { min-width: 0; }
.hl-prose > p, .hl-prose li { max-width: 72ch; }
.hl-prose ul, .hl-prose ol { padding-left: 1.3em; margin: 0 0 var(--hl-s5); }
.hl-prose li { margin-bottom: var(--hl-s2); }
.hl-prose ul > li::marker { color: var(--hl-accent); }
.hl-prose ol > li::marker { color: var(--hl-accent); font-family: var(--hl-font-display); font-weight: 600; font-size: 0.92em; }
.hl-prose h2 + p { font-size: 1.0938rem; }

/* transition sentence */
.onward {
  position: relative; margin: var(--hl-s6) 0 0; padding: var(--hl-s3) 0 0 var(--hl-s6);
  border-top: 1px dashed var(--hl-line-strong); color: var(--hl-ink-2); font-weight: 600;
}
.onward::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--hl-s3) + 0.42em); width: 16px; height: 9px;
  background: var(--hl-accent);
  clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%);
}

/* briefing box */
.briefing {
  position: relative; margin: var(--hl-s5) 0; padding: var(--hl-s4) var(--hl-s4) var(--hl-s4) 56px;
  background: var(--hl-accent-soft); border: 1px solid #bfe2f7; border-radius: var(--hl-r);
}
.briefing::before {
  content: ""; position: absolute; left: 16px; top: 18px; width: 26px; height: 26px; border-radius: 7px;
  background:
    linear-gradient(var(--hl-surface), var(--hl-surface)) 50% 4px / 2px 4px no-repeat,
    linear-gradient(var(--hl-surface), var(--hl-surface)) 50% 11px / 2px 4px no-repeat,
    linear-gradient(var(--hl-surface), var(--hl-surface)) 50% 18px / 2px 4px no-repeat,
    var(--hl-accent);
}
.briefing p { margin: 0; max-width: none; }
.briefing p + p { margin-top: var(--hl-s2); }
.briefing strong { color: var(--hl-accent-strong); font-family: var(--hl-font-display); font-weight: 600; letter-spacing: 0.01em; }

/* pros / cons */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s4); margin: var(--hl-s5) 0; }
.ledger .credit, .ledger .debit { min-width: 0; padding: var(--hl-s4) var(--hl-s5); border-radius: var(--hl-r); border: 1px solid var(--hl-line); background: var(--hl-surface); }
.ledger .credit { border-top: 4px solid var(--hl-accent); }
.ledger .debit { border-top: 4px solid var(--hl-muted); background: var(--hl-debit-soft); }
.ledger h3 { margin: 0 0 var(--hl-s3); font-size: 1.0625rem; display: flex; align-items: center; gap: var(--hl-s2); }
.ledger h3::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hl-accent); color: var(--hl-on-night); font-size: 1rem; line-height: 1; }
.ledger .debit h3::before { content: "\2212"; background: var(--hl-muted); }
.ledger ul { list-style: none; padding: 0; margin: 0; }
.ledger li { position: relative; padding-left: var(--hl-s5); margin-bottom: var(--hl-s2); max-width: none; }
.ledger li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 8px; height: 2px; background: var(--hl-accent); }
.ledger .debit li::before { background: var(--hl-muted); }

/* feedback cards */
.logbook { list-style: none; padding: 0 !important; margin: var(--hl-s5) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s4); }
.logbook li {
  position: relative; margin: 0; max-width: none; min-width: 0;
  padding: var(--hl-s5) var(--hl-s5) var(--hl-s4); background: var(--hl-surface);
  border: 1px solid var(--hl-line); border-left: 4px solid var(--hl-dawn); border-radius: var(--hl-r); box-shadow: var(--hl-shadow-soft);
}
.logbook p { margin: 0 0 var(--hl-s3); }
.logbook cite {
  display: inline-flex; align-items: center; gap: var(--hl-s2); font-style: normal; font-size: 0.875rem; font-weight: 600; color: var(--hl-muted);
}
.logbook cite::before { content: ""; width: 14px; height: 2px; background: var(--hl-accent); }

/* tables */
.hl-table {
  margin: var(--hl-s5) 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r);
}
.hl-table:focus-visible { outline-offset: 3px; }
.hl-table table { width: 100%; border-collapse: collapse; font-size: 0.96875rem; line-height: 1.5; }
.hl-table caption {
  caption-side: top; text-align: left; padding: var(--hl-s3) var(--hl-s4); font-family: var(--hl-font-display); font-weight: 600;
  font-size: 0.9375rem; color: var(--hl-ink); background: var(--hl-accent-soft); border-bottom: 1px solid var(--hl-line);
}
.hl-table th, .hl-table td { padding: var(--hl-s3) var(--hl-s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--hl-line); overflow-wrap: anywhere; min-width: 7.5rem; }
.hl-table thead th { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hl-muted); background: var(--hl-bg); font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
.hl-table tbody th { font-weight: 600; color: var(--hl-ink); }
.hl-table tbody tr:last-child > * { border-bottom: 0; }
.hl-table tbody tr:nth-child(even) { background: #f9fbfe; }

/* figures */
.hl-fig { margin: var(--hl-s5) 0 var(--hl-s6); }
.hl-fig img { width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--hl-r); border: 1px solid var(--hl-line); background: var(--hl-surface); }
.hl-fig figcaption { margin-top: var(--hl-s2); font-size: 0.875rem; color: var(--hl-muted); text-align: center; }

/* schemes */
.hl-scheme { margin: var(--hl-s5) 0 var(--hl-s6); background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r-lg); padding: var(--hl-s4) 0 var(--hl-s3); }
.hl-scheme__title { display: flex; align-items: center; gap: var(--hl-s2); padding: 0 var(--hl-s4) var(--hl-s2); font-family: var(--hl-font-display); font-weight: 600; font-size: 0.98rem; color: var(--hl-ink); }
/* two drawings per scheme, no sideways scroll: vertical below a 680px figure, horizontal from 680px (container query) */
.hl-scheme { container-type: inline-size; }
.hl-scheme__body { padding: 0 var(--hl-s2); }
.hl-svg { display: block; width: 100%; max-width: 100%; height: auto; }
.hl-svg--h { display: none; }
.hl-svg--v { max-width: 400px; margin-inline: auto; }
@container (min-width: 680px) {
  .hl-scheme__body { padding: 0 var(--hl-s3); }
  .hl-svg--h { display: block; }
  .hl-svg--v { display: none; }
}
.hl-svg text { font-family: var(--hl-font-body); }
.hl-svg__lab { font-family: var(--hl-font-display) !important; font-weight: 600; font-size: 20px; fill: var(--hl-ink); }
.hl-svg__det { font-size: 17px; fill: var(--hl-muted); }
.hl-svg__num { font-family: var(--hl-font-display) !important; font-weight: 700; font-size: 18px; fill: var(--hl-on-night); }
.hl-svg__node { fill: var(--hl-accent); }
.hl-svg__node--ring { fill: var(--hl-accent); stroke: var(--hl-surface); stroke-width: 4; }
.hl-svg__path { fill: none; stroke: var(--hl-accent); stroke-width: 3; stroke-dasharray: 9 9; stroke-linejoin: round; stroke-linecap: round; }
.hl-svg__plane path, .hl-svg__plane { fill: var(--hl-ink); }
.hl-svg__ground { stroke: var(--hl-line-strong); stroke-width: 2; }
.hl-svg__tick { stroke: var(--hl-line); stroke-width: 2; }
.hl-svg__card { fill: var(--hl-bg); stroke: var(--hl-line); stroke-width: 2; }
.hl-svg__card--key { fill: var(--hl-accent-soft); stroke: var(--hl-accent); }
.hl-svg__arrow { fill: none; stroke: var(--hl-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hl-svg__seal rect, .hl-svg__seal path { fill: none; stroke: var(--hl-accent); stroke-width: 2.5; stroke-linecap: round; }
.hl-svg__note { fill: var(--hl-night); }
.hl-svg__notetext { font-size: 17px; font-weight: 600; fill: var(--hl-on-night); }
.hl-svg__runway { fill: var(--hl-night); }
.hl-svg__centre { stroke: var(--hl-on-night); stroke-width: 3; stroke-dasharray: 22 18; opacity: 0.55; }
.hl-svg__light { fill: var(--hl-dawn); }

/* ------------------------------------------------------------ home hero */
.hl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--hl-head-h) + var(--hl-s6)) 0 var(--hl-s6);
  background: linear-gradient(180deg, var(--hl-dawn) 0%, #d6eefc 38%, var(--hl-bg) 72%);
}
.hl-hero__stars { position: absolute; inset: 0 0 auto; height: 420px; z-index: -1; pointer-events: none; }
.hl-hero__stars svg { width: 100%; height: 100%; display: block; }
.hl-hero__stars circle { fill: var(--hl-ink); opacity: 0.5; }
.hl-hero__ridge { position: relative; z-index: -1; height: clamp(96px, 15vw, 210px); margin-top: var(--hl-s2); }
.hl-hero__ridge svg { display: block; width: 100%; height: 100%; }
.hl-hero__crest { fill: none; stroke: var(--hl-line-strong); stroke-width: 1.5; }
.hl-hero__path { fill: none; stroke: var(--hl-accent); stroke-width: 3; stroke-dasharray: 10 11; stroke-linecap: round; }
.hl-hero__base { position: relative; margin-top: calc(-0.42 * clamp(96px, 15vw, 210px)); }
.hl-ico-plane path, .hl-ico-plane { fill: var(--hl-ink); }
.hl-hero__in { position: relative; }
.hl-hero__kicker {
  display: inline-flex; justify-self: start; align-items: center; gap: var(--hl-s2); margin-bottom: var(--hl-s4);
  padding: var(--hl-s1) var(--hl-s3) var(--hl-s1) var(--hl-s2); border-radius: var(--hl-pill);
  background: rgb(255 255 255 / 0.8); border: 1px solid var(--hl-line); font-weight: 600; font-size: 0.875rem; color: var(--hl-ink-2);
}
.hl-hero h1 { max-width: 24ch; font-size: clamp(1.625rem, 1.15rem + 2.1vw, 2.625rem); margin-bottom: var(--hl-s4); }
.hl-hero__lede { max-width: 60ch; font-size: 1.1875rem; color: var(--hl-ink-2); }
.hl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hl-s3) var(--hl-s5); margin: var(--hl-s5) 0 0; }
.hl-hero__actions .hl-btn { flex-wrap: wrap; row-gap: 2px; }
.hl-hero__check { display: none; }
.hl-hero__check-t { display: flex; align-items: center; gap: var(--hl-s2); margin: 0 0 var(--hl-s3); font-family: var(--hl-font-display); font-weight: 600; font-size: 1rem; }
.hl-hero__check ol { list-style: none; margin: 0; padding: 0; counter-reset: hlchk; position: relative; }
.hl-hero__check ol::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; border-left: 2px dashed var(--hl-accent); opacity: 0.6; }
.hl-hero__check li { counter-increment: hlchk; position: relative; display: flex; align-items: center; gap: var(--hl-s3); min-height: 48px; padding: var(--hl-s1) 0; font-weight: 600; color: var(--hl-ink-2); line-height: 1.35; }
.hl-hero__check li::before { content: counter(hlchk); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hl-surface); border: 2px solid var(--hl-accent); color: var(--hl-accent); font-family: var(--hl-font-display); font-weight: 700; font-size: 0.875rem; position: relative; }
.hl-hero__check li:last-child::before { background: var(--hl-accent); color: var(--hl-on-night); }
.hl-hero__note { margin: 0; font-size: var(--hl-t-small); font-weight: 600; color: var(--hl-muted); }
.hl-hero__panel {
  margin: 0; padding: var(--hl-s2); background: var(--hl-surface); border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-lg); box-shadow: var(--hl-shadow);
}
.hl-hero__panel img { width: 100%; height: auto; border-radius: calc(var(--hl-r-lg) - 6px); }

/* ------------------------------------------------------------ home bands */
.hl-band { padding: var(--hl-s7) 0; }
.hl-band:nth-of-type(even) { background: var(--hl-surface); }
.hl-band--intro { padding-top: var(--hl-s4); }
.hl-intro > p:first-child { font-size: 1.1875rem; color: var(--hl-ink-2); }
.hl-sec { scroll-margin-top: var(--hl-s5); }
.hl-band .hl-sec > h2 { padding-top: var(--hl-s4); border-top: 3px solid var(--hl-ink); display: inline-block; max-width: 100%; }

/* promo strip (dark accent band) */
.hl-strip { background: var(--hl-night); color: var(--hl-on-night); padding: var(--hl-s6) 0; position: relative; overflow: hidden; }
.hl-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: repeating-linear-gradient(90deg, rgb(186 230 253 / 0.45) 0 26px, transparent 26px 48px); }
.hl-strip__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s4); align-items: center; }
.hl-strip__ico { color: var(--hl-dawn); }
.hl-strip__title { font-family: var(--hl-font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 var(--hl-s2); color: var(--hl-on-night); }
.hl-strip__text p:last-child { margin: 0; color: var(--hl-on-night-muted); }
.hl-strip .hl-btn { justify-self: start; }

/* ------------------------------------------------------------ cards */
.hl-cards { list-style: none; padding: 0 !important; margin: var(--hl-s5) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s4); }
.hl-cards > .hl-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; max-width: none;
  background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r-lg); overflow: hidden;
  box-shadow: var(--hl-shadow-soft); transition: border-color var(--hl-dur) var(--hl-ease), transform var(--hl-dur) var(--hl-ease);
}
.hl-card:hover { border-color: var(--hl-accent); transform: translateY(-2px); }
.hl-card:focus-within { border-color: var(--hl-accent); }
.hl-card__media { background: var(--hl-accent-soft); border-bottom: 1px solid var(--hl-line); }
.hl-card__media img { width: 100%; height: auto; }
.hl-card__body { display: flex; flex-direction: column; gap: var(--hl-s2); padding: var(--hl-s4) var(--hl-s5) var(--hl-s5); flex: 1; }
.hl-card__name { margin: 0; font-size: 1.1875rem; }
.hl-card__name a { color: var(--hl-ink); text-decoration: none; }
.hl-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hl-card__name a:focus-visible { outline: none; }
.hl-card__name a:focus-visible::after { outline: 3px solid var(--hl-focus); outline-offset: -3px; }
.hl-card__body p { margin: 0; color: var(--hl-muted); font-size: 0.98rem; max-width: none; }
.hl-card__more { margin-top: auto; padding-top: var(--hl-s2); font-weight: 600; font-size: 0.9375rem; color: var(--hl-accent); }
.hl-card__more::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.4em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-0.05em) rotate(45deg); }
.hl-card__tag { display: inline-flex; align-items: center; gap: var(--hl-s1); align-self: flex-start; padding: 2px var(--hl-s3) 2px var(--hl-s2); border-radius: var(--hl-pill); background: var(--hl-accent-soft); color: var(--hl-accent-strong); font-size: 0.8125rem; font-weight: 600; }
.hl-card__tag .hl-ico { width: 16px; height: 16px; }
.hl-card:not(.hl-card--lead):last-child:nth-child(even) .hl-card__name { font-size: 1.25rem; }
.hl-card--lead .hl-card__name { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.hl-card--lead .hl-card__body p { font-size: 1.0625rem; }

/* ------------------------------------------------------------ game page */
.hl-game { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--hl-s7); }
.hl-article { min-width: 0; }
.hl-article__head { min-width: 0; padding: var(--hl-s4) 0 0; }
.hl-game .hl-byline { margin-bottom: var(--hl-s4); }

/* play card: one element; compact strip under the H1 below 1024px, sticky right card from 1024px */
.hl-side {
  min-width: 0; display: grid; grid-template-columns: clamp(84px, 26vw, 112px) minmax(0, 1fr); align-items: center; gap: var(--hl-s3) var(--hl-s4);
  margin: 0 0 var(--hl-s5); padding: var(--hl-s3) var(--hl-s4) var(--hl-s3) var(--hl-s3);
  background: var(--hl-surface); border: 1px solid var(--hl-line); border-top: 4px solid var(--hl-accent);
  border-radius: var(--hl-r-lg); box-shadow: var(--hl-shadow-soft);
}
.hl-side__title { display: none; }
.hl-side__media { grid-column: 1; grid-row: 1; min-width: 0; }
.hl-side__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--hl-r-sm); border: 1px solid var(--hl-line); background: var(--hl-bg); }
.hl-side__facts { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; display: grid; gap: 2px; font-size: var(--hl-t-small); line-height: 1.35; }
.hl-side__facts div { min-width: 0; }
.hl-side__facts dt { display: inline; color: var(--hl-muted); }
.hl-side__facts dt::after { content: ": "; }
.hl-side__facts dd { display: inline; margin: 0; font-weight: 600; color: var(--hl-ink); overflow-wrap: anywhere; }
.hl-side__fair { display: none; }
.hl-side__play { grid-column: 1 / -1; }
.hl-side__sub { grid-column: 1 / -1; margin: calc(-1 * var(--hl-s1)) 0 0; text-align: center; font-size: 0.8125rem; color: var(--hl-muted); }
.hl-side .hl-toc { display: none; }
@media (min-width: 600px) {
  .hl-side { grid-template-columns: 160px minmax(0, 1fr); padding: var(--hl-s4); }
  .hl-side__fair { display: block; }
}

.hl-score {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--hl-s4); align-items: start;
  padding: var(--hl-s4) var(--hl-s5); background: var(--hl-surface); border: 1px solid var(--hl-line);
  border-radius: var(--hl-r-lg); box-shadow: var(--hl-shadow-soft); margin-bottom: var(--hl-s5);
  background-image: linear-gradient(180deg, var(--hl-accent-soft), var(--hl-surface) 70%);
}
.hl-score__num { margin: 0; font-family: var(--hl-font-display); line-height: 1; display: flex; align-items: baseline; }
.hl-score__val { font-size: 2.75rem; font-weight: 700; color: var(--hl-ink); letter-spacing: -0.03em; }
.hl-score__of { font-size: 1.125rem; font-weight: 600; color: var(--hl-muted); margin-left: 2px; }
.hl-score__label { margin: 0 0 var(--hl-s2); font-family: var(--hl-font-display); font-weight: 600; font-size: 0.875rem; color: var(--hl-accent-strong); }
.hl-score__bar {
  position: relative; height: 10px; border-radius: var(--hl-pill); margin-bottom: var(--hl-s3);
  background: repeating-linear-gradient(90deg, var(--hl-line) 0 calc(20% - 4px), transparent calc(20% - 4px) 20%);
}
.hl-score__bar span {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--hl-accent) 0 calc(20% - 4px), transparent calc(20% - 4px) 20%);
  clip-path: inset(0 calc(100% - var(--hl-score, 0%)) 0 0);
}
.hl-score__sum { margin: 0; font-size: 0.98rem; color: var(--hl-ink-2); }
@media (max-width: 599px) {
  .hl-score { row-gap: var(--hl-s2); align-items: center; }
  .hl-score__body { display: contents; }
  .hl-score__num { grid-row: 1 / span 2; }
  .hl-score__label { grid-column: 2; grid-row: 1; margin: 0; }
  .hl-score__bar { grid-column: 2; grid-row: 2; margin: 0; }
  .hl-score__sum { grid-column: 1 / -1; grid-row: 3; padding-top: var(--hl-s2); border-top: 1px solid var(--hl-line); }
}

.hl-tocm { margin: 0 0 var(--hl-s5); background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r); }
.hl-tocm summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--hl-s4);
  font-family: var(--hl-font-display); font-weight: 600; cursor: pointer; list-style: none;
}
.hl-tocm summary::-webkit-details-marker { display: none; }
.hl-tocm summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--hl-accent); border-bottom: 2px solid var(--hl-accent); transform: rotate(45deg) translateY(-3px); transition: transform var(--hl-dur) var(--hl-ease); }
.hl-tocm[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.hl-tocm ol { margin: 0; padding: 0 var(--hl-s4) var(--hl-s3); list-style: none; counter-reset: hltoc; }
.hl-tocm li { counter-increment: hltoc; border-top: 1px solid var(--hl-line); }
.hl-tocm a { display: flex; align-items: center; gap: var(--hl-s3); min-height: 44px; color: var(--hl-ink); text-decoration: none; font-weight: 600; }
.hl-tocm a::before { content: counter(hltoc, decimal-leading-zero); font-family: var(--hl-font-display); font-size: 0.8125rem; color: var(--hl-accent); min-width: 1.6em; }
.hl-tocm a:hover, .hl-tocm a[aria-current] { color: var(--hl-accent); }

.hl-article > .hl-sec { padding-top: var(--hl-s6); margin-top: var(--hl-s6); border-top: 1px solid var(--hl-line); }
.hl-article > .hl-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: var(--hl-s2); }
.hl-article > .hl-sec > h2 { position: relative; padding-left: var(--hl-s4); }
.hl-article > .hl-sec > h2::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 2px; background: linear-gradient(var(--hl-accent), var(--hl-dawn)); }

/* FAQ */
.hl-faq__intro { color: var(--hl-muted); }
.hl-faq__list { display: grid; gap: var(--hl-s2); }
.hl-faq__item { background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r); }
.hl-faq__item[open] { border-color: var(--hl-line-strong); box-shadow: var(--hl-shadow-soft); }
.hl-faq__item summary {
  position: relative; display: flex; align-items: center; min-height: 52px; padding: var(--hl-s3) 52px var(--hl-s3) var(--hl-s4);
  font-family: var(--hl-font-display); font-weight: 600; font-size: 1rem; line-height: 1.4; cursor: pointer; list-style: none; overflow-wrap: anywhere;
}
.hl-faq__item summary::-webkit-details-marker { display: none; }
.hl-faq__item summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border-radius: 50%; background: var(--hl-accent-soft); color: var(--hl-accent); font-size: 1.1rem; line-height: 1; }
.hl-faq__item[open] summary::after { content: "\2212"; background: var(--hl-accent); color: var(--hl-on-night); }
.hl-faq__item summary:hover { color: var(--hl-accent-strong); }
.hl-faq__a { padding: 0 var(--hl-s4) var(--hl-s2); }
.hl-faq__a p { color: var(--hl-ink-2); }

/* other games */
.hl-others { padding: var(--hl-s7) 0; background: var(--hl-surface); border-top: 1px solid var(--hl-line); }
.hl-others__title { font-family: var(--hl-font-display); font-weight: 600; font-size: var(--hl-t-h2); line-height: 1.22; margin: 0 0 var(--hl-s2); overflow-wrap: anywhere; }
.hl-others__lead { color: var(--hl-muted); }

/* closing banner */
.hl-banner { padding: var(--hl-s7) 0; }
.hl-banner__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s4);
  padding: var(--hl-s6) var(--hl-s5) var(--hl-s5); border-radius: var(--hl-r-lg); border: 1px solid #bfe2f7;
  background: linear-gradient(160deg, var(--hl-dawn) 0%, var(--hl-accent-soft) 45%, var(--hl-surface) 100%);
}
.hl-banner__art { display: none; width: 220px; height: 82px; pointer-events: none; }
.hl-banner__ridge { fill: var(--hl-ridge-near); }
.hl-banner__path { fill: none; stroke: var(--hl-accent); stroke-width: 2.5; stroke-dasharray: 8 8; }
.hl-banner__text { position: relative; }
.hl-banner__title { font-family: var(--hl-font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; margin: 0 0 var(--hl-s2); overflow-wrap: anywhere; }
.hl-banner__text p:last-child { margin: 0; color: var(--hl-ink-2); max-width: 60ch; }
.hl-banner .hl-btn { position: relative; justify-self: start; flex-wrap: wrap; row-gap: 2px; }

/* service pages, map, 404 */
.hl-plain { padding: var(--hl-s4) 0 var(--hl-s8); }
.hl-plain__head { padding: var(--hl-s4) 0 var(--hl-s2); }
.hl-plain h2 { margin-top: var(--hl-s7); }
.hl-map { padding-bottom: var(--hl-s8); }
.hl-map__block { margin-top: var(--hl-s6); }
.hl-map__h { font-family: var(--hl-font-display); font-weight: 600; font-size: var(--hl-t-h3); margin: 0 0 var(--hl-s3); overflow-wrap: anywhere; }
.hl-map__list, .hl-map__games { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s2) var(--hl-s5); }
.hl-map__list a, .hl-map__games ol a { display: inline-flex; align-items: center; min-height: 44px; }
.hl-map__game { padding: var(--hl-s4) var(--hl-s5); background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: var(--hl-r); min-width: 0; }
.hl-map__name { font-family: var(--hl-font-display); font-weight: 600; color: var(--hl-ink); text-decoration: none; display: block; padding: var(--hl-s1) 0 var(--hl-s2); overflow-wrap: anywhere; }
.hl-map__name:hover { color: var(--hl-accent); }
.hl-map__games ol { margin: 0; padding-left: 1.3em; columns: 2 10rem; column-gap: var(--hl-s5); }
.hl-map__games ol li::marker { color: var(--hl-accent); font-size: 0.85em; }
.hl-nf { padding: var(--hl-s7) var(--hl-gutter) var(--hl-s8); }
.hl-go { max-width: 560px; margin: 0 auto; padding: var(--hl-s8) var(--hl-gutter); }
.hl-go h1 { margin-top: var(--hl-s6); }

/* ------------------------------------------------------------ keno generator */
.hl-gen {
  margin: var(--hl-s5) 0 var(--hl-s6); padding: var(--hl-s5); border-radius: var(--hl-r-lg);
  background: var(--hl-surface); border: 1px solid var(--hl-line-strong); box-shadow: var(--hl-shadow);
  background-image: radial-gradient(circle at 100% 0, var(--hl-accent-soft), transparent 55%);
}
.hl-gen__title { font-family: var(--hl-font-display); font-weight: 700; font-size: 1.25rem; margin: 0 0 var(--hl-s1); }
.hl-gen__note { color: var(--hl-muted); font-size: var(--hl-t-small); }
.hl-gen__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--hl-s3) var(--hl-s4); margin-bottom: var(--hl-s4); }
.hl-gen__field { display: grid; gap: var(--hl-s1); }
.hl-gen__field label { font-weight: 600; font-size: var(--hl-t-small); }
.hl-gen__field select {
  min-height: 52px; min-width: 7rem; padding: 0 var(--hl-s6) 0 var(--hl-s4); font: inherit; font-weight: 600; color: var(--hl-ink);
  border: 2px solid var(--hl-line-strong); border-radius: var(--hl-r-sm); background: var(--hl-surface);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hl-accent) 50%), linear-gradient(135deg, var(--hl-accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.hl-gen__field select:hover { border-color: var(--hl-accent); }
.hl-gen__go { font-family: var(--hl-font-display); }
.hl-gen__balls { list-style: none; margin: 0 0 var(--hl-s3); padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--hl-s2); min-height: 0; }
.hl-gen--ready .hl-gen__balls:empty { display: none; }
.hl-ball {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 !important; border-radius: 50%;
  font-family: var(--hl-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--hl-on-night);
  background: radial-gradient(circle at 32% 28%, #3b9fd6 0, var(--hl-accent) 45%, var(--hl-night-2) 100%);
  box-shadow: inset 0 -3px 0 rgb(15 31 51 / 0.25);
  animation: hl-ball-in 260ms var(--hl-ease) both; animation-delay: calc(var(--hl-i, 0) * 45ms);
}
@keyframes hl-ball-in { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
.hl-gen__status { margin: 0 0 var(--hl-s4); font-size: var(--hl-t-small); color: var(--hl-ink-2); font-weight: 600; }
.hl-gen__board { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 460px; }
.hl-gen__board li {
  margin: 0 !important; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  color: var(--hl-muted); background: var(--hl-bg); border: 1px solid var(--hl-line); font-variant-numeric: tabular-nums;
}
.hl-gen__board li.hl-on { background: var(--hl-accent); border-color: var(--hl-accent); color: var(--hl-on-night); }

/* ------------------------------------------------------------ footer */
.hl-foot { background: var(--hl-surface); border-top: 1px solid var(--hl-line); padding: var(--hl-s7) 0 var(--hl-s6); font-size: var(--hl-t-small); }
.hl-foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hl-s5); }
.hl-foot__brand p { color: var(--hl-muted); max-width: 44ch; margin: var(--hl-s2) 0 var(--hl-s3); }
.hl-foot__h { font-family: var(--hl-font-display); font-weight: 600; color: var(--hl-ink); margin: 0 0 var(--hl-s1); }
.hl-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hl-s4); }
.hl-foot__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hl-ink-2); text-decoration: none; }
.hl-foot__col a:hover { color: var(--hl-accent); text-decoration: underline; }
.hl-age { display: flex; align-items: center; gap: var(--hl-s2); margin: 0; color: var(--hl-ink); font-weight: 600; }
.hl-age__badge { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--hl-s1); border-radius: 50%; border: 2px solid var(--hl-ink); font-family: var(--hl-font-display); font-weight: 700; font-size: 0.9375rem; }
.hl-foot__legal { margin-top: var(--hl-s6); padding-top: var(--hl-s4); border-top: 1px solid var(--hl-line); color: var(--hl-muted); }
.hl-foot__legal p { max-width: 90ch; }
.hl-foot__legal a { color: var(--hl-muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ mobile dock */
.hl-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--hl-s2) var(--hl-gutter) calc(var(--hl-s2) + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / 0.94); border-top: 1px solid var(--hl-line); box-shadow: 0 -8px 24px -18px rgb(15 31 51 / 0.4);
  transition: transform 220ms var(--hl-ease), opacity 220ms var(--hl-ease);
}
.hl-dock .hl-btn { min-height: 48px; }
.hl-dock--off { transform: translateY(110%); opacity: 0; pointer-events: none; }
.hl-body { padding-bottom: 72px; }

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 375px) {
  :root { --hl-gutter: 18px; }
}
@media (min-width: 414px) {
  :root { --hl-gutter: 20px; }
  .hl-head__play { display: inline-flex; min-height: 44px; padding-inline: var(--hl-s4); font-size: 0.9375rem; }
}
@media (max-width: 413px) {
  .hl-logo { font-size: 1rem; }
}
@media (min-width: 600px) {
  .hl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-card--lead, .hl-card:not(.hl-card--lead):last-child:nth-child(even) { grid-column: 1 / -1; }
  .hl-logbook, .logbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-foot__col ul { grid-template-columns: minmax(0, 1fr); }
  .hl-foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 768px) {
  :root { --hl-gutter: 28px; --hl-head-h: 70px; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-cards > .hl-card--lead { flex-direction: row; }
  .hl-card--lead .hl-card__media { flex: 0 0 58%; border-bottom: 0; border-right: 1px solid var(--hl-line); display: flex; align-items: center; }
  .hl-card--lead .hl-card__body { justify-content: center; padding: var(--hl-s6); }
  .hl-card:not(.hl-card--lead):last-child:nth-child(even) { flex-direction: row-reverse; }
  .hl-card:not(.hl-card--lead):last-child:nth-child(even) .hl-card__media { flex: 0 0 42%; border-bottom: 0; border-left: 1px solid var(--hl-line); display: flex; align-items: center; }
  .hl-card:not(.hl-card--lead):last-child:nth-child(even) .hl-card__body { justify-content: center; padding: var(--hl-s5) var(--hl-s6); }
  .hl-strip__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--hl-s5); }
  .hl-strip .hl-btn { justify-self: end; }
  .hl-banner__card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--hl-s6); padding: var(--hl-s7); }
  .hl-banner .hl-btn { justify-self: end; grid-column: 2; grid-row: 1; }
  .hl-banner__text { grid-column: 1; grid-row: 1; }
  .hl-score { padding: var(--hl-s5) var(--hl-s6); gap: var(--hl-s5); }
  .hl-score__val { font-size: 3.25rem; }
  .hl-map__games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-gen { padding: var(--hl-s6); }
  .hl-band { padding: var(--hl-s8) 0; }
}
@media (min-width: 1024px) {
  :root { --hl-gutter: 32px; --hl-head-h: 72px; }
  .hl-nav { display: block; }
  .hl-nav ul { display: flex; gap: 2px; }
  .hl-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--hl-r-sm);
    color: var(--hl-ink-2); text-decoration: none; font-weight: 600; font-size: 0.96875rem; white-space: nowrap; position: relative;
  }
  .hl-nav a:hover { color: var(--hl-accent-strong); background: var(--hl-accent-soft); }
  .hl-nav a[aria-current="page"] { color: var(--hl-accent); }
  .hl-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--hl-accent); }
  .hl-menu { display: none; }
  .hl-logo { margin-right: var(--hl-s4); }
  .hl-nav { margin-right: auto; }
  .hl-dock { display: none; }
  .hl-body { padding-bottom: 0; }

  .hl-game { grid-template-columns: minmax(0, 1fr) 272px; grid-template-rows: auto 1fr; column-gap: var(--hl-s8); align-items: start; }
  .hl-article__head { grid-column: 1; grid-row: 1; }
  .hl-article { grid-column: 1; grid-row: 2; }
  .hl-tocm { display: none; }
  .hl-side {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; display: block; position: sticky; top: var(--hl-s5);
    margin: var(--hl-s5) 0 0; padding: var(--hl-s4) var(--hl-s4) var(--hl-s3);
    max-height: calc(100vh - 2 * var(--hl-s5)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .hl-side__title { display: flex; align-items: center; gap: var(--hl-s2); margin: 0 0 var(--hl-s3); font-family: var(--hl-font-display); font-weight: 600; font-size: 0.9375rem; color: var(--hl-ink); }
  .hl-side__media { margin-bottom: var(--hl-s3); }
  .hl-side__media img { border-radius: var(--hl-r); }
  .hl-side__facts { gap: 0; margin-bottom: var(--hl-s4); }
  .hl-side__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--hl-s3); padding: 6px 0; border-top: 1px solid var(--hl-line); }
  .hl-side__facts div:last-child { border-bottom: 1px solid var(--hl-line); }
  .hl-side__facts dt { flex: none; }
  .hl-side__facts dt::after { content: none; }
  .hl-side__facts dd { text-align: right; }
  .hl-side__sub { margin: var(--hl-s2) 0 0; }
  .hl-side .hl-toc { display: block; margin-top: var(--hl-s4); padding-top: var(--hl-s3); border-top: 1px solid var(--hl-line); }
  .hl-side .hl-toc__track { margin-bottom: 0; }
  .hl-side .hl-toc ol a { min-height: 32px; font-size: 0.875rem; }
  .hl-toc__title { font-family: var(--hl-font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; color: var(--hl-muted); margin: 0 0 var(--hl-s3); }
  .hl-toc__track { position: relative; padding-left: var(--hl-s4); margin-bottom: var(--hl-s5); }
  .hl-toc__rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--hl-line); border-radius: 1px; overflow: hidden; }
  .hl-toc__rail span { position: absolute; inset: 0; background: var(--hl-accent); transform-origin: top; transform: scaleY(var(--hl-p, 0)); transition: transform 300ms var(--hl-ease); }
  .hl-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: hlside; }
  .hl-toc li { counter-increment: hlside; }
  .hl-toc ol a { display: flex; align-items: center; gap: var(--hl-s2); min-height: 40px; padding: 2px var(--hl-s2); border-radius: 6px; color: var(--hl-ink-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.3; }
  .hl-toc ol a::before { content: counter(hlside, decimal-leading-zero); font-family: var(--hl-font-display); font-size: 0.75rem; color: var(--hl-muted); min-width: 1.6em; }
  .hl-toc ol a:hover { background: var(--hl-accent-soft); color: var(--hl-accent-strong); }
  .hl-toc ol a[aria-current] { color: var(--hl-accent); font-weight: 600; background: var(--hl-accent-soft); }
  .hl-toc ol a[aria-current]::before { color: var(--hl-accent); }

  .hl-hero { padding-top: calc(var(--hl-head-h) + var(--hl-s8)); }
  .hl-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: var(--hl-s8); align-items: end; }
  .hl-hero__in > :not(.hl-hero__check) { grid-column: 1; }
  .hl-hero__check { display: block; grid-column: 2; grid-row: 1 / span 4; align-self: center; padding: var(--hl-s5); background: rgb(255 255 255 / 0.78); border: 1px solid var(--hl-line); border-radius: var(--hl-r-lg); box-shadow: var(--hl-shadow-soft); }
  .hl-foot__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--hl-s7); }
  .hl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hl-s5); }
}
@media (min-width: 1100px) {
  .hl-banner__card { grid-template-columns: minmax(0, 1fr) auto 220px; padding-right: var(--hl-s5); }
  .hl-banner__art { display: block; grid-column: 3; grid-row: 1; align-self: end; margin-bottom: calc(-1 * var(--hl-s7)); }
}
@media (min-width: 1280px) {
  .hl-game { grid-template-columns: minmax(0, 1fr) 288px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hl-side__media { display: none; }
}

/* ------------------------------------------------------------ motion + print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .hl-card:hover { transform: none; }
}
@media print {
  .hl-head, .hl-dock, .hl-side, .hl-banner, .hl-strip, .hl-foot__col { display: none !important; }
  body { background: #fff; padding: 0; }
}