/*
  GameHangar shared layer.
  Loaded by every page on the site, including the sub-sites (board games,
  party printables, BingoBloom) that keep their own visual identity.
  Everything here is namespaced (gh-*): no element selectors, so it can sit
  next to any product stylesheet without changing its base styles.
*/

@font-face {
  font-family: "GH Display";
  src: url("./fonts/gh-display-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}

/* 游戏夯 (U+6E38 U+620F U+592F) ship separately so the wordmark alone stays tiny. */
@font-face {
  font-family: "GH Display";
  src: url("./fonts/gh-display-brand.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+592F, U+620F, U+6E38;
}

@font-face {
  font-family: "GH Display";
  src: url("./fonts/gh-display-cjk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+4E00-592E, U+5930-620E, U+6210-6E37, U+6E39-9FFF, U+FF00-FFEF;
}

:root {
  /* Tier 1: hangar palette */
  --gh-concrete: #e4e7e8;
  --gh-bay: #f4f5f5;
  --gh-bay-raised: #ffffff;
  --gh-ink: #13202b;
  --gh-steel: #55636e;
  --gh-line: #c5ccd1;
  --gh-signal: #ffbe0b;
  --gh-signal-deep: #e0a200;
  --gh-signal-ink: #1a1300;
  --gh-flare: #c63d22;
  --gh-flare-ink: #ffffff;
  --gh-focus: #13202b;
  --gh-frame: #13202b;

  /* Tier 2: type */
  --gh-font-display: "GH Display", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --gh-font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;

  /* Tier 2: shape and depth */
  --gh-radius-s: 4px;
  --gh-radius-m: 8px;
  --gh-shadow-lift: 0 1px 0 rgba(19, 32, 43, 0.06), 0 10px 24px -12px rgba(19, 32, 43, 0.28);
  --gh-hazard: repeating-linear-gradient(-45deg, var(--gh-signal) 0 10px, var(--gh-ink) 0 20px);
  --gh-page-width: 1180px;
  --gh-gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-gh-scheme="light"]) {
    --gh-concrete: #0e151b;
    --gh-bay: #16212a;
    --gh-bay-raised: #1c2933;
    --gh-ink: #e7ecef;
    --gh-steel: #9dabb5;
    --gh-line: #2c3b47;
    --gh-signal-deep: #ffd25c;
    --gh-flare: #ff6a4a;
    --gh-flare-ink: #1a0600;
    --gh-focus: #ffbe0b;
    --gh-frame: #34444f;
    --gh-shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
    --gh-hazard: repeating-linear-gradient(-45deg, var(--gh-signal) 0 10px, #0e151b 0 20px);
  }
}

/* Sub-sites with a fixed light identity opt out of the dark palette. */
:root[data-gh-scheme="light"] {
  color-scheme: light;
}

/* Night: the hangar after dark. Every page of the site wears it; sub-sites keep their own
   material (felt card table, paper printables) inside this frame. */
:root[data-gh-scheme="night"] {
  color-scheme: dark;
  --gh-concrete: #091017;
  --gh-bay: #0f1820;
  --gh-bay-raised: #15212b;
  --gh-ink: #eef1ee;
  --gh-steel: #94a4af;
  --gh-line: #26343f;
  --gh-signal-deep: #ffd25c;
  --gh-flare: #ff6a4a;
  --gh-flare-ink: #1a0600;
  --gh-focus: #ffbe0b;
  --gh-frame: #2a3945;
  --gh-shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --gh-hazard: repeating-linear-gradient(-45deg, var(--gh-signal) 0 12px, #0b1218 0 24px);
  --gh-night: #091017;
  --gh-bone: #f4f1e8;
  --gh-led: #ffd66b;
  --gh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Long-form pages carry both languages; only the active one is shown. */
:root:lang(en) [data-gh-show="zh"],
:root:not(:lang(en)) [data-gh-show="en"] {
  display: none !important;
}

/* ---------- Global bar ---------- */

.gh-bar {
  position: relative;
  z-index: 50;
  color: var(--gh-ink);
  background: var(--gh-bay);
  border-bottom: 1px solid var(--gh-line);
  font-family: var(--gh-font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.gh-bar.is-sticky {
  position: sticky;
  top: 0;
}

.gh-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(var(--gh-page-width), 100% - 2 * var(--gh-gutter));
  min-height: 56px;
  margin-inline: auto;
}

.gh-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: inherit;
  text-decoration: none;
}

.gh-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.gh-home-name {
  font-family: var(--gh-font-display);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.gh-home-sub {
  margin-inline-start: -4px;
  color: var(--gh-steel);
  font-size: 0.8125rem;
}

.gh-crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--gh-steel);
}

.gh-crumbs a,
.gh-crumbs span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gh-crumbs a {
  color: inherit;
  text-decoration: none;
}

.gh-crumbs a:hover {
  color: var(--gh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gh-crumbs [aria-current="page"] {
  color: var(--gh-ink);
  font-weight: 600;
}

.gh-crumbs .gh-sep {
  flex: none;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.gh-bar-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

.gh-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gh-links a {
  padding: 8px 10px;
  border-radius: var(--gh-radius-s);
  color: var(--gh-steel);
  text-decoration: none;
}

.gh-links a:hover,
.gh-links a[aria-current="page"] {
  color: var(--gh-ink);
  background: color-mix(in oklab, var(--gh-ink) 7%, transparent);
}

.gh-links a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--gh-signal);
}

.gh-text-link {
  padding: 8px 10px;
  border-radius: var(--gh-radius-s);
  color: var(--gh-steel);
  text-decoration: none;
  white-space: nowrap;
}

.gh-text-link:hover {
  color: var(--gh-ink);
  background: color-mix(in oklab, var(--gh-ink) 7%, transparent);
}

.gh-lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--gh-line);
  border-radius: 999px;
  background: var(--gh-bay-raised);
}

.gh-lang button {
  min-width: 40px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--gh-steel);
  background: transparent;
  font: 600 0.8125rem/1 var(--gh-font-body);
  cursor: pointer;
}

.gh-lang button[aria-pressed="true"] {
  color: var(--gh-signal-ink);
  background: var(--gh-signal);
}

/* Sub-sites style bare elements; keep the shared controls unaffected. */
.gh-bar :where(a, button),
.gh-footer a {
  box-shadow: none;
  filter: none;
  transform: none;
  letter-spacing: normal;
  text-transform: none;
}

.gh-bar a:focus-visible,
.gh-bar button:focus-visible,
.gh-footer a:focus-visible,
.gh-skip:focus-visible {
  outline: 2px solid var(--gh-focus);
  outline-offset: 2px;
}

.gh-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--gh-radius-s);
  color: var(--gh-signal-ink);
  background: var(--gh-signal);
  font: 600 0.9375rem/1 var(--gh-font-body);
  text-decoration: none;
  transform: translateY(-160%);
}

.gh-skip:focus-visible {
  transform: none;
}

@media (max-width: 720px) {
  .gh-home-sub,
  .gh-links .gh-optional {
    display: none;
  }
}

@media (max-width: 520px) {
  .gh-bar-inner {
    gap: 8px;
  }

  .gh-home-name {
    font-size: 1.15rem;
  }

  /* On small screens the crumbs keep only the current page. */
  .gh-crumbs > :not(:nth-last-child(-n + 2)) {
    display: none;
  }

  .gh-links a {
    padding-inline: 8px;
  }
}

/* ---------- Footer ---------- */

.gh-footer {
  margin-top: 64px;
  color: var(--gh-steel);
  background: var(--gh-bay);
  border-top: 1px solid var(--gh-line);
  font-family: var(--gh-font-body);
  font-size: 0.875rem;
  line-height: 1.6;
}

.gh-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(var(--gh-page-width), 100% - 2 * var(--gh-gutter));
  margin-inline: auto;
  padding: 24px 0 28px;
}

.gh-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gh-ink);
}

.gh-footer-brand .gh-mark {
  width: 22px;
  height: 22px;
}

.gh-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.gh-footer a {
  color: inherit;
  text-decoration: none;
}

.gh-footer a:hover {
  color: var(--gh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Night chrome: glass bar, hazard sill, film grain, floodlights ---------- */

:root[data-gh-scheme="night"] body {
  background-color: var(--gh-night);
}

:root[data-gh-scheme="night"] .gh-bar {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: rgba(9, 16, 23, 0.84);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}

:root[data-gh-scheme="night"] .gh-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 11, 0.55) 50%, transparent);
  pointer-events: none;
}

:root[data-gh-scheme="night"] .gh-lang {
  background: rgba(255, 255, 255, 0.04);
}

:root[data-gh-scheme="night"] .gh-footer {
  position: relative;
  border-top: 0;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 190, 11, 0.06), transparent 70%),
    #060b10;
}

:root[data-gh-scheme="night"] .gh-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--gh-hazard);
  opacity: 0.85;
}

/* Film grain over the whole page: one static, composited layer. */
:root[data-gh-scheme="night"] body:not(.gh-no-grain)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Two roof floodlights over the top of every page; pages may hide them (.gh-no-flood). */
.gh-flood {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
}

.gh-flood::before,
.gh-flood::after {
  content: "";
  position: absolute;
  inset: -8% 0 0;
  transform-origin: 50% 0;
  animation: gh-flood-sway 12s ease-in-out infinite alternate;
}

.gh-flood::before {
  background: conic-gradient(from 168deg at 72% -6%, transparent 0deg, rgba(255, 241, 214, 0.075) 9deg, rgba(255, 241, 214, 0.015) 18deg, transparent 22deg);
}

.gh-flood::after {
  background: conic-gradient(from 180deg at 18% -8%, transparent 0deg, rgba(255, 241, 214, 0.05) 8deg, transparent 17deg);
  animation-duration: 15s;
  animation-direction: alternate-reverse;
}

@keyframes gh-flood-sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

/* A runway light that fills with reading progress (added by gh.js on night pages). */
.gh-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: linear-gradient(90deg, var(--gh-signal), var(--gh-led, #ffd66b));
  box-shadow: 0 0 10px rgba(255, 190, 11, 0.7);
  transform: scaleX(var(--gh-read, 0));
  transform-origin: left;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gh-flood::before,
  .gh-flood::after {
    animation: none;
  }
}

@media (pointer: coarse) {
  :root[data-gh-scheme="night"] .gh-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(9, 16, 23, 0.96);
  }
}

@media (forced-colors: active) {
  .gh-lang button[aria-pressed="true"] {
    border: 1px solid Highlight;
  }
}

@media print {
  .gh-bar,
  .gh-footer,
  .gh-skip,
  .gh-flood,
  .gh-progress {
    display: none !important;
  }

  :root[data-gh-scheme="night"] body:not(.gh-no-grain)::after {
    display: none;
  }

  /* Printables come out on white paper, whatever the screen theme. */
  :root[data-gh-scheme="night"] body {
    background: #fff !important;
  }
}