body:has(.game-page) {
  min-height: 100svh;
  overflow: hidden;
  background: #020503;
}

.game-page {
  --game-acid: #cfff3e;
  --game-line: rgba(222,255,181,.16);
  min-height: 100svh;
  color: #f3f7ef;
  background: #020503;
}

.game-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 3.2vw;
  border-bottom: 1px solid var(--game-line);
  background: rgba(2,6,3,.88);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(1.2);
}

.game-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.045em;
}

.game-brand img {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(168,255,0,.38);
  border-radius: 50%;
  object-fit: cover;
}

.game-product {
  display: grid;
  justify-items: center;
  gap: .2rem;
  text-transform: uppercase;
}

.game-product small {
  color: #697467;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.game-product strong {
  color: var(--game-acid);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.game-header nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: #9da79a;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-header nav a { transition: color 180ms ease; }
.game-header nav a:hover { color: var(--game-acid); }

.game-stage {
  position: fixed;
  inset: 72px 0 0;
  isolation: isolate;
  overflow: hidden;
  background: #030704;
  touch-action: none;
  user-select: none;
}

.game-canvas,
.game-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.game-canvas { z-index: -3; outline: 0; }

.game-atmosphere {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(210,255,151,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210,255,151,.025) 1px, transparent 1px),
    radial-gradient(circle at 72% 35%, rgba(168,255,0,.055), transparent 30rem),
    linear-gradient(90deg, rgba(73,17,1,.18), transparent 48%, rgba(14,46,65,.13));
  background-size: 68px 68px, 68px 68px, auto, auto;
  mix-blend-mode: screen;
}

.game-hud {
  position: absolute;
  z-index: 5;
  top: 1.25rem;
  left: 3.2vw;
  right: 3.2vw;
  display: grid;
  grid-template-columns: 1.05fr .8fr 1fr;
  gap: 8px;
  pointer-events: none;
}

.hud-module {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(222,255,181,.14);
  background: linear-gradient(125deg, rgba(3,9,5,.88), rgba(3,8,5,.62));
  box-shadow: 0 18px 44px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(14px);
}

.hud-module > span {
  display: grid;
  gap: .35rem;
}

.hud-module small,
.result-score small {
  color: #6d786b;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hud-module strong {
  color: #eef4e9;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.momentum-module { display: grid; grid-template-columns: auto 1fr; }
.momentum-module strong { color: var(--game-acid); }
.momentum-track { height: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.momentum-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff6a1a, #ffd43d 44%, #a8ff00);
  box-shadow: 0 0 18px rgba(168,255,0,.45);
  transform-origin: left;
  transition: transform 120ms linear;
}

.score-module,
.phase-module { justify-content: space-between; }
.score-module > span + span,
.phase-module > span + span { text-align: right; }

.phase-track {
  position: absolute;
  z-index: 6;
  left: 3.2vw;
  right: 3.2vw;
  bottom: 1.3rem;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid rgba(222,255,181,.14);
  background: rgba(2,7,4,.76);
  backdrop-filter: blur(13px);
}

.phase-track > div {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border-right: 1px solid rgba(222,255,181,.12);
  color: #657063;
}

.phase-track > div:last-child { border-right: 0; }
.phase-track span { font-size: .46rem; font-weight: 950; letter-spacing: .12em; }
.phase-track strong { font-size: .72rem; font-weight: 950; }
.phase-track small { font-size: .46rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.phase-track i {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--phase-color,#a8ff00);
  transform: scaleX(0);
  transform-origin: left;
}
.phase-track > div:nth-child(1) { --phase-color: #ffc138; }
.phase-track > div:nth-child(2) { --phase-color: #ff6c1e; }
.phase-track > div:nth-child(3) { --phase-color: #addde8; }
.phase-track > div:nth-child(4) { --phase-color: #e6f8ff; }
.phase-track > div.active,
.phase-track > div.complete { color: #f0f5eb; }
.phase-track > div.active strong { color: var(--phase-color); }
.phase-track > div.complete i { transform: scaleX(1); }

.game-overlay {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5rem 5vw 6rem;
  background:
    linear-gradient(90deg, rgba(2,5,3,.97), rgba(3,8,5,.88) 52%, rgba(2,6,4,.66)),
    radial-gradient(circle at 68% 48%, rgba(168,255,0,.12), transparent 28rem);
  backdrop-filter: blur(8px);
}

.game-overlay[hidden],
.game-pause[hidden] { display: none; }

.game-intro {
  place-items: stretch;
  grid-template-rows: 70px 1fr;
  padding: 5vw;
}

.overlay-register {
  width: min(1120px,100%);
  min-height: 68px;
  justify-self: center;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: stretch;
  border: 1px solid rgba(222,255,181,.16);
  background: rgba(4,10,6,.7);
}

.overlay-register > span:first-child {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(222,255,181,.13);
  color: var(--game-acid);
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.overlay-register > span:nth-child(2) {
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 0 1rem;
  text-transform: uppercase;
}
.overlay-register small { color: #697467; font-size: .48rem; font-weight: 900; letter-spacing: .18em; }
.overlay-register strong { color: #eef4e9; font-size: .65rem; font-weight: 950; letter-spacing: .12em; }
.overlay-register b {
  display: grid;
  place-items: center;
  min-width: 175px;
  padding: 0 1rem;
  border-left: 1px solid rgba(222,255,181,.13);
  color: #9ba796;
  font-size: .54rem;
  letter-spacing: .14em;
}

.overlay-copy {
  width: min(1120px,100%);
  align-self: center;
  justify-self: center;
  padding: 2.5rem 0;
}

.game-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  color: #aeb8aa;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.game-eyebrow i { width: 38px; height: 2px; background: var(--game-acid); box-shadow: 0 0 16px rgba(168,255,0,.35); }
.overlay-copy h1 {
  margin: 1.4rem 0 1.2rem;
  color: #f4f7f1;
  font-size: clamp(5rem,12vw,11.5rem);
  font-weight: 950;
  letter-spacing: -.09em;
  line-height: .72;
}
.overlay-copy h1 em,
.result-body h2 em { color: var(--game-acid); font-style: normal; text-shadow: 0 0 45px rgba(168,255,0,.2); }
.game-intro-copy { max-width: 610px; margin: 0; color: #aab5a7; font-size: .95rem; line-height: 1.75; }

.control-doctrine {
  width: min(760px,100%);
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
  padding: 0 1rem;
  border: 1px solid rgba(222,255,181,.14);
  background: rgba(168,255,0,.025);
}
.control-doctrine > span { display: grid; gap: .35rem; }
.control-doctrine small { color: #697467; font-size: .46rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.control-doctrine strong { color: #eef4e9; font-size: .67rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.control-doctrine > i { height: 1px; background: linear-gradient(90deg, rgba(168,255,0,.5), rgba(168,255,0,.05)); }

.game-primary,
.game-secondary {
  min-height: 56px;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.game-primary {
  min-width: 250px;
  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding: 0 0 0 1.4rem;
  color: #071000;
  background: linear-gradient(135deg,#d8ff4f,#98ee00);
  box-shadow: 0 0 38px rgba(168,255,0,.18);
}
.game-primary span { display: grid; place-items: center; }
.game-primary b { width: 54px; display: grid; place-items: center; border-left: 1px solid rgba(0,0,0,.16); font-size: 1rem; }
.game-primary:hover { background: #e3ff7b; }
.game-secondary { padding: 0 1.4rem; border: 1px solid rgba(222,255,181,.2); color: #eef4e9; background: rgba(4,10,6,.78); }
.game-secondary:hover { border-color: rgba(168,255,0,.6); color: var(--game-acid); }

.game-best-line {
  width: min(330px,100%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  margin-top: 1rem;
  color: #687365;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.game-best-line i { height: 1px; background: rgba(168,255,0,.25); }
.game-best-line strong { color: #cfff3e; }

.phase-announcement {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  min-width: 280px;
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: 1.2rem 2rem;
  border-top: 1px solid rgba(222,255,181,.22);
  border-bottom: 1px solid rgba(222,255,181,.22);
  background: linear-gradient(90deg, transparent, rgba(2,8,4,.92) 18%, rgba(2,8,4,.92) 82%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.94);
}
.phase-announcement.show { animation: phase-callout 1.7s ease both; }
.phase-announcement small { color: #7c8779; font-size: .48rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.phase-announcement strong { color: var(--phase-accent,var(--game-acid)); font-size: 2.5rem; font-weight: 950; letter-spacing: -.05em; }
.phase-announcement span { color: #eef4e9; font-size: .55rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
@keyframes phase-callout {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.94); }
  20%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.03); }
}

.game-result { background: rgba(2,6,3,.9); }
.result-card { width: min(880px,100%); border: 1px solid rgba(222,255,181,.17); background: linear-gradient(145deg,rgba(7,14,8,.98),rgba(2,7,4,.98)); box-shadow: 0 45px 120px rgba(0,0,0,.48); }
.result-card .overlay-register { width: 100%; border: 0; border-bottom: 1px solid rgba(222,255,181,.14); }
.result-body { padding: clamp(2rem,5vw,4.5rem); }
.result-body h2 { margin: 1.4rem 0 1.6rem; color: #f3f7ef; font-size: clamp(4rem,9vw,8rem); line-height: .78; letter-spacing: -.08em; }
.result-score { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(222,255,181,.14); }
.result-score > span { min-height: 90px; display: grid; align-content: center; gap: .45rem; padding: 1rem; border-right: 1px solid rgba(222,255,181,.13); }
.result-score > span:last-child { border-right: 0; }
.result-score strong { color: var(--game-acid); font-size: .9rem; letter-spacing: .08em; }
.result-body > p:not(.game-eyebrow) { color: #9fab9b; font-size: .9rem; line-height: 1.7; }
.result-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.result-actions .game-primary { margin-top: 0; }

.game-pause {
  position: absolute;
  z-index: 16;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  background: rgba(1,4,2,.82);
  backdrop-filter: blur(12px);
}
.game-pause small { color: #7b8778; font-size: .52rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.game-pause strong { color: var(--game-acid); font-size: clamp(4rem,10vw,8rem); letter-spacing: -.07em; }
.game-pause span { color: #aab5a7; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.game-pause button { margin-top: 1rem; padding: .9rem 1.6rem; border: 1px solid rgba(168,255,0,.45); color: #cfff3e; background: transparent; font: inherit; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

.game-controls {
  position: absolute;
  z-index: 8;
  right: 3.2vw;
  bottom: 5.6rem;
  display: flex;
  gap: 7px;
}
.utility-control {
  min-width: 84px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(222,255,181,.14);
  color: #788475;
  background: rgba(2,7,4,.72);
  font: inherit;
  font-size: .47rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.utility-control strong { color: #d8ff4f; }

.charge-control {
  position: absolute;
  z-index: 8;
  left: 3.2vw;
  bottom: 5.2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .85rem .4rem .4rem;
  border: 1px solid rgba(222,255,181,.16);
  color: #f1f5ed;
  background: rgba(2,7,4,.75);
  font: inherit;
  text-align: left;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.charge-control > span:last-child { display: grid; gap: .18rem; }
.charge-control small { color: #6f7a6d; font-size: .45rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.charge-control strong { font-size: .62rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.charge-ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(168,255,0,.26); border-radius: 50%; }
.charge-ring::after { content: "↑"; position: absolute; color: #d8ff4f; font-size: .9rem; font-weight: 950; }
.charge-ring i { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(#a8ff00 calc(var(--charge,0)*1turn),rgba(168,255,0,.08) 0); mask: radial-gradient(circle,transparent 58%,black 60%); }

.game-toast {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 6rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(222,255,181,.18);
  color: #eaf3e4;
  background: rgba(2,8,4,.9);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%,12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.game-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  .game-header { grid-template-columns: 1fr auto; }
  .game-product { display: none; }
  .game-hud { grid-template-columns: 1fr 1fr; }
  .momentum-module { grid-column: 1 / -1; min-height: 56px; }
  .hud-module { min-height: 58px; }
  .game-intro { padding: 4vw; }
  .control-doctrine { grid-template-columns: repeat(3,1fr); }
  .control-doctrine > i { display: none; }
}

@media (max-width: 620px) {
  .game-header { height: 64px; padding: 0 1rem; }
  .game-header nav { gap: .8rem; }
  .game-header nav a:first-child { display: none; }
  .game-brand img { width: 34px; height: 34px; }
  .game-stage { inset: 64px 0 0; }
  .game-hud { top: .7rem; left: .75rem; right: .75rem; gap: 5px; }
  .hud-module { min-height: 52px; padding: .65rem .7rem; }
  .momentum-module { min-height: 48px; }
  .hud-module small { font-size: .4rem; }
  .hud-module strong { font-size: .58rem; }
  .phase-track { left: .75rem; right: .75rem; bottom: .65rem; }
  .phase-track > div { min-height: 43px; grid-template-columns: 1fr; justify-items: center; gap: .12rem; padding: .45rem .2rem; }
  .phase-track span,
  .phase-track small { display: none; }
  .phase-track strong { font-size: .58rem; }
  .game-overlay { padding: 1rem .8rem 4.4rem; }
  .game-intro { grid-template-rows: 58px 1fr; padding: .8rem .8rem 4.5rem; }
  .overlay-register { min-height: 58px; grid-template-columns: 54px 1fr; }
  .overlay-register b { display: none; }
  .overlay-copy { padding: 1.5rem .25rem; }
  .overlay-copy h1 { margin: 1.1rem 0; font-size: clamp(4.8rem,25vw,7.4rem); }
  .game-intro-copy { font-size: .82rem; line-height: 1.6; }
  .control-doctrine { min-height: 0; grid-template-columns: 1fr; gap: .7rem; margin-top: 1.2rem; padding: .8rem; }
  .control-doctrine > span:nth-of-type(2) { display: none; }
  .game-primary { width: 100%; min-width: 0; }
  .game-best-line { width: 100%; }
  .game-controls { right: .75rem; bottom: 4rem; }
  .utility-control { min-width: 70px; }
  .charge-control { left: .75rem; bottom: 3.75rem; }
  .charge-control > span:last-child { display: none; }
  .charge-ring { width: 50px; height: 50px; }
  .result-body { padding: 1.5rem 1rem; }
  .result-body h2 { font-size: clamp(3.6rem,19vw,5.4rem); }
  .result-score { grid-template-columns: 1fr; }
  .result-score > span { min-height: 62px; border-right: 0; border-bottom: 1px solid rgba(222,255,181,.13); }
  .result-score > span:last-child { border-bottom: 0; }
  .result-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-announcement.show { animation: none; opacity: 1; }
}