:root {
  --paper: #e9ede4;
  --ink: #102932;
  --acid: #d7ff43;
  --cyan: #53c8c3;
  --red: #d45b4d;
  --muted: #708086;
  --line: rgba(16, 41, 50, 0.22);
  --mono: "IBM Plex Mono", monospace;
  --sans: "Inter", sans-serif;
  --system-small: 500 .58rem/1.2 var(--mono);
  --system-label: 500 .68rem/1.2 var(--mono);
  --system-metric: 600 1.35rem/1 var(--mono);
  --editorial-title: 800 clamp(2.8rem, 7vw, 6.75rem)/.78 var(--sans);
  --editorial-body: 600 .94rem/1.5 var(--sans);
  --global-rigidity: 0;
  --global-pressure: 0;
  --global-restoration: 0;
  --global-density: 0;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(16, 41, 50, 0.035) 50%, transparent 50.1%) 0 0 / 22px 22px,
    linear-gradient(rgba(16, 41, 50, 0.035) 49.9%, transparent 50.1%) 0 0 / 22px 22px,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

body::before {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 clamp(28px, 3vw, 52px);
  width: 2px;
  background: rgba(212, 91, 77, 0.6);
  content: "";
  pointer-events: none;
}

button, a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: .75rem;
  left: .75rem;
  padding: .65rem;
  background: var(--ink);
  color: var(--paper);
  font: 500 .72rem/1 var(--mono);
  transform: translateY(-180%);
}

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

.page-header {
  display: grid;
  width: min(1360px, calc(100% - 48px));
  min-height: 112px;
  margin-inline: auto;
  padding-inline: 2rem;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.page-header__brand {
  font: 800 1.45rem/1 var(--sans);
  letter-spacing: .08em;
  text-decoration: none;
}

.page-header p, .page-header__back,
.experience__header p, .game__hud, .game__footer,
.game__start, .game__result {
  font-family: var(--mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}

.page-header p { margin: 0; color: var(--muted); font-size: .7rem; }
.page-header__back { justify-self: end; font-size: .66rem; text-decoration: none; }

.experience {
  width: min(1360px, calc(100% - 48px));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.75rem) 2rem 4rem;
}

.experience__header {
  display: flex;
  padding-bottom: 1.25rem;
  justify-content: space-between;
  align-items: end;
}

.experience__header p { margin: 0 0 .55rem; color: var(--muted); font-size: .66rem; }
.experience__header > p { color: var(--ink); }
.experience__header h1 { margin: 0; font: var(--editorial-title); letter-spacing: -.075em; }

.game {
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: .9rem .9rem 0 rgba(16, 41, 50, .12);
  filter: saturate(calc(1 - var(--global-rigidity) * .35));
  transition: filter .8s ease;
}

.game__hud {
  display: grid;
  min-height: 62px;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  background: var(--paper);
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background-image: linear-gradient(90deg, rgba(212,91,77,calc(var(--global-pressure) * .08)), rgba(83,200,195,calc(var(--global-restoration) * .08)));
}

.game__hud p { display: flex; gap: .9rem; margin: 0; align-items: baseline; }
.game__hud p:nth-child(2) { justify-self: center; }
.game__hud p:last-child { justify-self: end; }
.game__hud span { color: var(--muted); font-size: .67rem; }
.game__hud strong { font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 500; }

.game__tower-dock {
  display: grid;
  padding: 1px 0 0;
  background: var(--ink);
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
}

.game__tower-dock button {
  display: grid;
  min-width: 0;
  min-height: 42px;
  padding: .48rem clamp(.55rem, 1.5vw, 1rem);
  border: 0;
  border-radius: 0;
  background: #dfe4da;
  color: var(--ink);
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  align-items: center;
  font: 500 clamp(.58rem, .9vw, .71rem)/1 var(--mono);
  letter-spacing: .08em;
  text-align: left;
  cursor: pointer;
}

.game__tower-dock button i {
  width: 1.2rem;
  color: var(--muted);
  font: normal 1.15rem/1 var(--mono);
  text-align: center;
}

.game__tower-dock button small { color: var(--muted); font: 400 .58rem/1 var(--mono); }
.game__tower-dock button:is(:hover, :focus-visible) { background: #f0f3eb; box-shadow: inset 0 -2px rgba(83,200,195,.45); }
.game__tower-dock button.is-selected { background: #f0f3eb; box-shadow: inset 0 -2px var(--cyan); }
.game__tower-dock button.is-selected i { color: var(--ink); }

.game__stage {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  aspect-ratio: 16 / 8.65;
  isolation: isolate;
  background: #07171d;
}
.game__stage::before {
  position: absolute;
  z-index: 0;
  inset: -9%;
  background:
    radial-gradient(circle at 28% 34%, rgba(79, 129, 137, .18), transparent 31%),
    radial-gradient(circle at 72% 58%, rgba(92, 75, 117, .13), transparent 36%),
    url('../assets/unoptimized/textures/far-fog.jpg') center / cover no-repeat;
  content: '';
  opacity: .31;
  transform: scale(1.03);
  transform-origin: center;
  animation: field-atmosphere 38s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}
.game__stage::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url('../assets/unoptimized/textures/near-grain.jpg') center / 420px repeat;
  content: '';
  opacity: .045;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.game canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: transparent; cursor: crosshair; touch-action: none; }
.game[data-boss-phase="takeover"] canvas { cursor: cell; }
.game[data-boss-phase="expand"] .game__tower-dock,
.game[data-boss-phase="takeover"] .game__tower-dock { letter-spacing: calc(.08em + var(--global-rigidity) * .08em); }
.game[data-boss-phase="takeover"] .game__hud { box-shadow: inset 0 -2px 0 rgba(212,91,77,.55); }
.game[data-boss-phase="collapse"] .game__hud,
.game[data-boss-phase="collapse"] .game__tower-dock { transform: translateX(calc(var(--global-restoration) * 1px)); }

.game__start, .game__result {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  padding: 2rem;
  background: rgba(16, 41, 50, .78);
  color: var(--paper);
  place-content: center;
  text-align: center;
  backdrop-filter: blur(5px);
}

@keyframes field-atmosphere {
  from { transform: translate3d(-.6%, -.4%, 0) scale(1.03); }
  to { transform: translate3d(.7%, .5%, 0) scale(1.055); }
}

.game__start[hidden], .game__result[hidden] { display: none; }
.game__start p, .game__result p { margin: 0 0 .7rem; color: var(--cyan); font-size: .68rem; }
.game__start strong, .game__result strong { font: 800 clamp(2.3rem, 6vw, 5.8rem)/.9 var(--sans); letter-spacing: -.06em; }
.game__start button, .game__result button, .game__footer button {
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.game__start button, .game__result button { width: max-content; margin: 1.75rem auto 0; padding: .85rem 1.2rem; background: var(--acid); color: var(--ink); }
.game__start button:is(:hover, :focus-visible), .game__result button:is(:hover, :focus-visible) { background: var(--paper); }

.game__footer {
  display: flex;
  min-height: 44px;
  padding: 0 1rem 0 1.4rem;
  background: var(--paper);
  justify-content: space-between;
  align-items: center;
  font-size: .62rem;
  letter-spacing: calc(.075em + var(--global-density) * .045em);
}
.game__footer p { margin: 0; }
.game__footer button { padding: .55rem .75rem; }
.game__footer-actions { display: flex; gap: .4rem; }
.game__footer button:disabled { opacity: .3; cursor: default; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 46rem) {
  .page-header { min-height: 88px; padding-inline: 0; grid-template-columns: 1fr auto; }
  .page-header p { display: none; }
  .experience { padding-inline: 0; }
  .experience__header { display: block; }
  .experience__header > p { margin-top: 1rem; }
  .game__stage { min-height: 0; aspect-ratio: 1 / 1; }
  .game__hud { min-height: 54px; padding-inline: .8rem; }
  .game__hud p { display: flex; gap: .4rem; align-items: baseline; }
  .game__hud span { font-size: .54rem; }
  .game__hud strong { font-size: clamp(1.08rem, 5.5vw, 1.38rem); }
  .game__tower-dock { grid-template-columns: repeat(2, 1fr); }
  .game__tower-dock button { min-height: 44px; padding-block: .38rem; }
  .game__footer { min-height: 48px; padding-inline: .75rem; gap: .7rem; }
  .game__footer p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game__footer-actions { flex: 0 0 auto; }
  .game__footer button { padding: .5rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .game { transition: none; }
  .game__stage::before { animation: none; }
}

@media (max-width: 40rem), (update: slow) {
  .game { box-shadow: .45rem .45rem 0 rgba(16, 41, 50, .12); }
  .game__stage { min-height: 0; }
}