.skip-link {
  position: fixed;
  z-index: 999;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--focus);
  border-radius: var(--radius-sm);
  background: var(--ink-950);
  color: var(--focus);
  font-family: var(--mono-font);
  font-size: 0.78rem;
  font-weight: 900;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

:where(
  button,
  input,
  select,
  textarea,
  summary,
  a,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(7 23 19 / 82%);
}

.seed-input-wrap:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(255 244 168 / 18%);
}

.seed-input-wrap input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.toggle input:focus-visible + .toggle__track {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .game-canvas-host::before,
  .loading-mark__arrow,
  .loading-track__fill {
    animation: none;
  }

  .loading-track__fill {
    width: 42%;
    transform: none;
  }
}

:root[data-reduced-motion="true"] *,
:root[data-reduced-motion="true"] *::before,
:root[data-reduced-motion="true"] *::after,
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

:root[data-reduced-motion="true"] .game-canvas-host::before,
body.reduced-motion .game-canvas-host::before {
  transform: none;
}

@media (prefers-contrast: more) {
  :root {
    --panel-bg: rgb(1 15 11 / 98%);
    --panel-edge: #fff1bd;
    --panel-edge-soft: rgb(255 241 189 / 48%);
    --text-muted: #e8edcd;
  }

  .scene-shade {
    background: rgb(0 10 7 / 38%);
  }

  .button,
  .camp-card,
  .tinker-part,
  .reward-card,
  .field input,
  .field select,
  .hud-card,
  .meta-node,
  .setting-row {
    border-width: 4px;
  }
}

:root[data-high-contrast="true"],
body.high-contrast {
  --panel-bg: rgb(1 13 10 / 99%);
  --panel-edge: #fff1bd;
  --panel-edge-soft: rgb(255 241 189 / 54%);
  --text: #fffde9;
  --text-muted: #eef2d6;
  --moss-400: #a7ef91;
  --focus: #fff36c;
}

:root[data-high-contrast="true"] .scene-shade,
body.high-contrast .scene-shade {
  background: rgb(0 9 6 / 48%);
  box-shadow: inset 0 0 16vw rgb(0 0 0 / 62%);
}

:root[data-high-contrast="true"] :where(.button, .camp-card, .tinker-part, .reward-card, .field input, .field select, .hud-card, .meta-node, .setting-row),
body.high-contrast :where(.button, .camp-card, .tinker-part, .reward-card, .field input, .field select, .hud-card, .meta-node, .setting-row) {
  border-width: 4px;
}

@media (forced-colors: active) {
  :root {
    color-scheme: light dark;
  }

  .game-canvas-host,
  .game-canvas-host::before,
  .game-canvas-host::after,
  .scene-shade {
    background: Canvas;
  }

  .panel,
  .hud-card,
  .button,
  .camp-card,
  .tinker-part,
  .reward-card,
  .meta-node,
  .setting-row,
  .field input,
  .field select,
  .seed-input-wrap {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }

  .meter {
    border: 2px solid CanvasText;
    background: Canvas;
  }

  .meter__fill,
  .loading-track__fill {
    background: Highlight;
  }

  .button--primary,
  .reward-card,
  .meta-node.is-unlocked {
    background: Highlight;
    color: HighlightText;
  }

  .toggle__track,
  .toggle__track::after {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .toggle input:checked + .toggle__track::after {
    background: Highlight;
  }
}

@media (pointer: coarse) {
  .field input,
  .field select,
  summary {
    min-height: 2.75rem;
  }

  .button {
    min-height: 3.35rem;
  }

  .reward-card {
    min-height: 12rem;
  }

  .camp-card {
    min-height: 4.7rem;
  }

  .meta-node {
    min-height: 7.7rem;
  }

  :where(.button, .camp-card, .tinker-part, .reward-card, .meta-node) {
    touch-action: manipulation;
  }
}

@media (forced-colors: active) {
  .game-title__main,
  .reward-panel .choice-heading h1,
  .biome-transition-heading h1 {
    -webkit-text-stroke: 0;
  }

  .reward-card__glyph,
  .reward-card__family,
  .reward-card__action,
  .meta-node__sigil,
  .meta-node__cost,
  .results-summary,
  .biome-passage__act,
  .carry-summary {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }
}

@media (max-width: 520px) {
  .skip-link {
    right: 0.65rem;
    text-align: center;
  }
}