:root {
  --black: #080909;
  --asphalt: #111315;
  --asphalt-soft: #181b1d;
  --paper: #f1eee6;
  --paper-deep: #d8d5cd;
  --white: #fffdf7;
  --sun: #f5c84c;
  --red: #ff5a36;
  --cyan: #66d8ff;
  --acid: #b5ff68;
  --muted: rgba(255, 253, 247, 0.55);
  --line: rgba(255, 255, 255, 0.16);
  --dark-line: rgba(10, 11, 11, 0.18);
  --hero-progress: 0;
  --world-progress: 0;
  --life-progress: 0;
  --mx: 50vw;
  --my: 50vh;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--black);
}

html.overlay-open {
  overflow-y: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: "Manrope", Arial, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body.deck-open,
body.launcher-open {
  overflow: hidden;
}

body.deck-open main canvas,
body.launcher-open main canvas {
  visibility: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
}

canvas,
svg,
img {
  display: block;
}

::selection {
  background: var(--red);
  color: var(--white);
}

.film-grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.5) 0 0.7px, transparent 0.9px);
  background-size: 3px 3px, 5px 5px;
}

.street-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate3d(calc(var(--mx) - 11px), calc(var(--my) - 11px), 0);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.05s linear;
}

.street-cursor span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

body.pointer-active .street-cursor {
  width: 42px;
  height: 42px;
  border-color: var(--sun);
  background: rgba(245, 200, 76, 0.12);
  transform: translate3d(calc(var(--mx) - 21px), calc(var(--my) - 21px), 0);
}

.opening-shot {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #060707;
  transition: visibility 0s linear 1.15s;
}

.opening-shot::before,
.opening-shot::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: #060707;
  transition: transform 1.05s cubic-bezier(0.75, 0, 0.12, 1) 0.12s;
}

.opening-shot::before { left: 0; }
.opening-shot::after { right: 0; }

body.loaded .opening-shot {
  visibility: hidden;
}

body.loaded .opening-shot::before { transform: translateX(-102%); }
body.loaded .opening-shot::after { transform: translateX(102%); }

.opening-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(245, 200, 76, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.opening-sun::before,
.opening-sun::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.opening-sun::before {
  inset: 55px;
  border: 1px dashed rgba(255, 90, 54, 0.33);
  animation: spin 12s linear infinite;
}

.opening-sun::after {
  inset: 125px;
  background: var(--red);
  box-shadow: 0 0 80px rgba(255, 90, 54, 0.35);
}

.opening-sun i {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.opening-lockup {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 4px;
  transition: opacity 0.35s ease, transform 0.8s cubic-bezier(0.75, 0, 0.12, 1);
}

body.loaded .opening-lockup,
body.loaded .opening-frequency {
  opacity: 0;
  transform: translateY(-18px);
}

.opening-lockup > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 9px;
  background: var(--sun);
  color: var(--black);
  font-weight: 800;
}

.opening-lockup strong {
  font-size: 27px;
  letter-spacing: 0;
}

.opening-lockup small,
.opening-frequency {
  color: rgba(255, 255, 255, 0.45);
  font-family: "Roboto Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.opening-frequency {
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 5;
  display: flex;
  width: min(420px, 65vw);
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  transition: opacity 0.35s ease;
}

.opening-frequency i {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.opening-frequency i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sun);
  transform-origin: left;
  animation: tuneIn 1.25s cubic-bezier(0.6, 0, 0.2, 1) both;
}

@keyframes tuneIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.city-telemetry {
  position: fixed;
  top: 22px;
  z-index: 120;
  display: grid;
  gap: 4px;
  pointer-events: none;
  font-family: "Roboto Mono", monospace;
  font-size: 8px;
  text-transform: uppercase;
  transition: color 0.35s ease;
  mix-blend-mode: difference;
}

.city-telemetry span { color: rgba(255, 255, 255, 0.48); }
.city-telemetry strong { font-size: 9px; font-weight: 400; }
.city-telemetry-left { left: 25px; }
.city-telemetry-right { right: 25px; text-align: right; }

.radio-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 500;
  display: grid;
  width: min(960px, calc(100vw - 40px));
  height: 68px;
  grid-template-columns: 82px 174px 1fr 68px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.025) 8px, transparent 9px 15px),
    rgba(10, 11, 11, 0.9);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 22px 90px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(24px) saturate(120%);
  transform: translateX(-50%);
}

.radio-brand {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
}

.radio-brand span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: var(--sun);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.22, 1);
}

.radio-brand:hover span { transform: rotate(-10deg) scale(1.06); }
.radio-brand small { color: rgba(255, 255, 255, 0.45); font-family: "Roboto Mono", monospace; font-size: 7px; }

.radio-display {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 0 18px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 90, 54, 0.055);
}

.radio-display > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Roboto Mono", monospace;
}

.radio-display > div span { color: var(--red); font-size: 7px; }
.radio-display > div strong { font-size: 19px; font-weight: 400; }
.radio-display > small { color: rgba(255, 255, 255, 0.4); font-family: "Roboto Mono", monospace; font-size: 7px; }

.radio-wave {
  position: absolute;
  right: 11px;
  top: 16px;
  width: 42px;
  height: 34px;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, var(--sun) 0 1px, transparent 1px 4px);
  clip-path: polygon(0 43%, 8% 30%, 16% 48%, 24% 17%, 32% 57%, 40% 35%, 48% 68%, 56% 25%, 64% 42%, 72% 10%, 80% 55%, 88% 35%, 100% 45%, 100% 55%, 88% 48%, 80% 67%, 72% 30%, 64% 58%, 56% 43%, 48% 78%, 40% 50%, 32% 75%, 24% 32%, 16% 65%, 8% 47%, 0 57%);
  animation: waveShift 1.2s steps(4) infinite;
}

@keyframes waveShift {
  50% { transform: scaleY(0.62); }
}

.radio-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.radio-presets button {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  transition: background 0.25s ease, color 0.25s ease;
}

.radio-presets button::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 2px;
  background: var(--sun);
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.radio-presets button.active,
.radio-presets button:hover {
  background: rgba(255, 255, 255, 0.055);
  color: var(--white);
}

.radio-presets button.active::before { opacity: 1; transform: scaleX(1); }
.radio-presets svg { width: 18px; height: 18px; stroke-width: 1.4; }

.radio-presets button > span {
  position: absolute;
  bottom: calc(100% + 13px);
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0c0d0d;
  color: var(--white);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.radio-presets button:hover > span { opacity: 1; transform: translateY(0); }

.radio-knob {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
}

.radio-knob::before,
.radio-knob span {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.radio-knob::before {
  inset: 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 38% 32%, #41484b, #111315 52%, #060707);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
}

.radio-knob span {
  inset: 17px;
  border: 1px dashed rgba(245, 200, 76, 0.4);
  transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.22, 1);
}

.radio-knob:hover span { transform: rotate(120deg); }
.radio-knob svg { position: relative; z-index: 2; width: 15px; }

.dispatch-call {
  position: fixed;
  right: 24px;
  top: 74px;
  z-index: 140;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 13px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(10, 11, 11, 0.64);
  color: var(--white);
  backdrop-filter: blur(14px);
}

.dispatch-call > svg { width: 30px; height: 30px; padding: 7px; background: var(--red); }
.dispatch-call > span { display: grid; gap: 2px; font-size: 9px; }
.dispatch-call small { color: rgba(255, 255, 255, 0.42); font-family: "Roboto Mono", monospace; font-size: 6px; }

main {
  position: relative;
  overflow: clip;
}

.hero-chapter {
  position: relative;
  z-index: 10;
  height: 210svh;
  background: var(--black);
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #090a0a;
  isolation: isolate;
}

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

.city-canvas { z-index: -5; }
.traffic-canvas { z-index: -3; pointer-events: none; mix-blend-mode: screen; }

.hero-grade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 8, 8, 0.86) 0, rgba(7, 8, 8, 0.28) 42%, rgba(7, 8, 8, 0.04) 70%, rgba(7, 8, 8, 0.62) 100%),
    linear-gradient(180deg, rgba(7, 8, 8, 0.58), transparent 28%, transparent 68%, rgba(7, 8, 8, 0.9));
}

.street-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20% 100%, 100% 25%;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.hero-copy {
  position: absolute;
  left: 5%;
  top: 17%;
  z-index: 10;
  width: 720px;
  opacity: calc(1 - var(--hero-progress) * 1.22);
  transform: translate3d(calc(var(--hero-progress) * -120px), calc(var(--hero-progress) * -32px), 0);
}

.hero-label,
.world-header > span,
.life-header > span,
.factions-header > span,
.economy-header > span,
.servers-header > span,
.deck-header span,
.launcher-sheet header span {
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.66);
}

.hero-label::before { content: ""; width: 34px; height: 2px; background: var(--red); }

.hero-copy h1 {
  display: grid;
  width: max-content;
  margin: 24px 0 0;
  font-size: 142px;
  font-weight: 800;
  line-height: 0.74;
  letter-spacing: 0;
}

.hero-copy h1 span:last-child {
  padding-left: 88px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.82);
}

.hero-copy h1 i {
  display: inline-block;
  margin-left: 8px;
  color: var(--sun);
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-style: normal;
  -webkit-text-stroke: 0;
  vertical-align: top;
}

.hero-copy > p {
  width: 410px;
  margin: 35px 0 0 92px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 28px 0 0 92px;
}

.enter-city {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 34px;
  padding: 0 9px 0 18px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform 0.25s ease, background 0.25s ease;
}

.enter-city:hover { background: var(--sun); color: var(--black); transform: translateY(-3px); }
.enter-city svg { width: 32px; height: 32px; padding: 7px; background: rgba(0, 0, 0, 0.28); }

.watch-feed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.watch-feed svg { width: 14px; fill: currentColor; }

.hero-season {
  position: absolute;
  right: 4%;
  top: 19%;
  z-index: 7;
  display: grid;
  justify-items: end;
  color: rgba(255, 255, 255, 0.18);
  text-align: right;
  opacity: calc(1 - var(--hero-progress) * 1.4);
  transform: translateX(calc(var(--hero-progress) * 80px));
}

.hero-season small,
.hero-season span { color: rgba(255, 255, 255, 0.48); font-family: "Roboto Mono", monospace; font-size: 8px; }
.hero-season strong { margin: 5px 0; font-size: 78px; font-weight: 800; line-height: 0.78; letter-spacing: 0; }

.server-live {
  position: absolute;
  right: 3.5%;
  bottom: 14%;
  z-index: 12;
  width: 360px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: rgba(12, 13, 13, 0.68);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: calc(1 - var(--hero-progress) * 1.35);
  transform: translate3d(calc(var(--hero-progress) * 90px), calc(var(--hero-progress) * 35px), 0) rotateY(calc(var(--hero-progress) * -14deg));
  transform-origin: right center;
}

.server-live header,
.server-live footer,
.server-live-main,
.server-live-main > div,
.server-live header span {
  display: flex;
  align-items: center;
}

.server-live header {
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.48);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
}

.server-live header span { gap: 6px; }
.server-live header i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 13px rgba(181, 255, 104, 0.7); }

.server-live-main {
  min-height: 82px;
  gap: 13px;
}

.server-number {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.19);
  color: var(--sun);
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

.server-live-main > div { flex: 1; display: grid; gap: 3px; }
.server-live-main small { color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.server-live-main strong { font-size: 18px; font-weight: 600; }
.server-live-main button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; background: transparent; transition: transform 0.4s ease; }
.server-live-main button:hover { transform: rotate(180deg); }
.server-live-main svg { width: 14px; }

.server-capacity { height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.server-capacity i { display: block; width: 79%; height: 100%; background: var(--red); transition: width 0.5s ease; }

.server-live footer { justify-content: space-between; padding-top: 11px; color: rgba(255, 255, 255, 0.42); font-family: "Roboto Mono", monospace; font-size: 7px; }
.server-live footer strong { color: var(--white); font-weight: 400; }

.hero-camera-tag {
  position: absolute;
  left: 4%;
  bottom: 16%;
  z-index: 6;
  display: flex;
  width: 230px;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  opacity: calc(1 - var(--hero-progress) * 1.5);
}

.hero-camera-tag i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.22); }
.hero-camera-tag small { color: var(--red); font-size: inherit; animation: recBlink 1s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: 0.2; } }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 112px;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  text-transform: uppercase;
  opacity: calc(1 - var(--hero-progress) * 1.5);
  transform: translateX(-50%);
}

.hero-scroll > i { position: relative; width: 1px; height: 38px; background: rgba(255, 255, 255, 0.2); }
.hero-scroll b { position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--sun); animation: scrollDrop 1.7s ease-in-out infinite; }
@keyframes scrollDrop { 70%, 100% { transform: translateY(26px); opacity: 0; } }

.world-chapter {
  position: relative;
  z-index: 12;
  height: 330svh;
  background: #0a0c0d;
}

.world-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 48%, rgba(102, 216, 255, 0.08), transparent 27%),
    #0a0c0d;
}

.district-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

.world-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 16.666% 100%, 100% 20%;
  mask-image: linear-gradient(90deg, transparent 5%, #000 25%, #000 95%);
}

.world-header {
  position: absolute;
  left: 4.5%;
  top: 7%;
  z-index: 12;
}

.world-header > span,
.life-header > span,
.factions-header > span,
.servers-header > span {
  color: rgba(255, 255, 255, 0.45);
}

.world-header h2,
.life-header h2,
.factions-header h2,
.economy-header h2,
.servers-header h2 {
  margin: 15px 0 0;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}

.world-header h2 em,
.life-header h2 em,
.factions-header h2 em,
.economy-header h2 em {
  color: rgba(255, 255, 255, 0.35);
  font-style: normal;
}

.map-coordinates {
  position: absolute;
  right: 3.5%;
  top: 6%;
  z-index: 10;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: rgba(255, 255, 255, 0.36);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
}

.district-map {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.district-map::before,
.district-map::after {
  content: "";
  position: absolute;
  left: 62%;
  top: 50%;
  border: 1px solid rgba(102, 216, 255, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.district-map::before { width: 560px; height: 560px; }
.district-map::after { width: 340px; height: 340px; border-style: dashed; animation: spin 22s linear infinite; }

.district-node {
  position: absolute;
  z-index: 8;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 10px;
  min-width: 150px;
  align-items: center;
  background: transparent;
  text-align: left;
  opacity: 0.42;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.65s cubic-bezier(0.2, 0.85, 0.22, 1);
}

.district-node > span {
  position: relative;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
}

.district-node > span::before,
.district-node > span::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.district-node > span::before { inset: 8px; border: 1px dashed rgba(102, 216, 255, 0.5); }
.district-node > span::after { inset: 17px; background: rgba(255, 255, 255, 0.65); }
.district-node strong { font-size: 13px; font-weight: 600; }
.district-node small { color: rgba(255, 255, 255, 0.42); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }

.district-node.active { opacity: 1; transform: scale(1.08); }
.district-node.active > span { border-color: var(--cyan); box-shadow: 0 0 30px rgba(102, 216, 255, 0.18); }
.district-node.active > span::before { animation: spin 4s linear infinite; }
.district-node.active > span::after { background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }

.district-vinewood { left: 63%; top: 19%; }
.district-downtown { left: 53%; top: 41%; }
.district-vespucci { left: 29%; top: 62%; }
.district-davis { left: 61%; top: 68%; }
.district-sandy { left: 78%; top: 37%; }

.dispatch-sweep {
  position: absolute;
  left: 62%;
  top: 50%;
  z-index: 3;
  width: 470px;
  height: 470px;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dispatch-sweep::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform-origin: left top;
  background: conic-gradient(from 0deg, rgba(102, 216, 255, 0.17), transparent 50deg);
  animation: sweep 7s linear infinite;
}

.dispatch-sweep i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan);
  transform: translate(-50%, -50%);
}

@keyframes sweep {
  to { transform: rotate(360deg); }
}

.district-readout {
  position: absolute;
  left: 4.5%;
  bottom: 17%;
  z-index: 12;
  width: 350px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.district-readout > span { color: var(--cyan); font-family: "Roboto Mono", monospace; font-size: 8px; }
.district-readout h3 { margin: 8px 0 0; font-size: 42px; font-weight: 500; }
.district-readout p { min-height: 60px; margin: 12px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 1.65; }
.district-readout > div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 17px; color: rgba(255, 255, 255, 0.42); font-family: "Roboto Mono", monospace; font-size: 7px; }
.district-readout > div strong { color: var(--white); font-weight: 400; }
.district-readout > div > i { position: relative; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.district-readout > div b { display: block; width: 72%; height: 100%; background: var(--cyan); transition: width 0.45s ease; }

.world-progress {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  bottom: 9%;
  z-index: 12;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, 0.35);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
}

.world-progress > i { position: relative; height: 1px; background: rgba(255, 255, 255, 0.15); }
.world-progress b { position: absolute; inset: 0 auto 0 0; width: calc(var(--world-progress) * 100%); background: var(--cyan); }

.life-section {
  position: relative;
  z-index: 14;
  min-height: 1150px;
  overflow: hidden;
  padding: 110px 5% 150px;
  background: #111315;
}

.vehicle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.life-lights {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 19, 21, 0.94) 0, rgba(17, 19, 21, 0.64) 38%, transparent 58%, rgba(17, 19, 21, 0.25) 100%),
    linear-gradient(180deg, rgba(17, 19, 21, 0.75), transparent 30%, transparent 75%, #111315);
}

.life-header {
  position: relative;
  z-index: 8;
}

.life-header h2 { font-size: 64px; }

.life-console {
  position: relative;
  z-index: 9;
  display: grid;
  width: 510px;
  grid-template-columns: 165px 1fr;
  margin-top: 90px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.life-modes {
  border-right: 1px solid var(--line);
}

.life-modes button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100px;
  grid-template-columns: 24px 1fr;
  gap: 3px 8px;
  align-content: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s ease;
}

.life-modes button:last-child { border-bottom: 0; }
.life-modes button.active { padding-left: 20px; background: var(--red); color: var(--white); }
.life-modes span { grid-row: 1 / span 2; font-family: "Roboto Mono", monospace; font-size: 8px; }
.life-modes strong { font-size: 12px; }
.life-modes small { font-size: 7px; opacity: 0.5; }

.life-copy {
  min-height: 300px;
  padding: 28px;
  background: rgba(8, 9, 9, 0.42);
  backdrop-filter: blur(10px);
}

.life-copy > span { color: var(--red); font-family: "Roboto Mono", monospace; font-size: 8px; }
.life-copy h3 { margin: 12px 0 0; font-size: 29px; font-weight: 500; line-height: 1.1; }
.life-copy > p { margin: 17px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 11px; line-height: 1.65; }

.life-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.life-stats span { display: grid; gap: 4px; }
.life-stats small { color: rgba(255, 255, 255, 0.37); font-family: "Roboto Mono", monospace; font-size: 6px; text-transform: uppercase; }
.life-stats strong { font-size: 20px; font-weight: 500; }

.garage-floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 72px;
  z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
  color: rgba(255, 255, 255, 0.38);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
}

.garage-floor i { height: 1px; background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, 0.12)); }

.factions-section {
  position: relative;
  z-index: 16;
  min-height: 1220px;
  overflow: hidden;
  padding: 120px 5% 150px;
  background: #4e150f;
}

.faction-siren {
  position: absolute;
  right: -180px;
  top: -160px;
  width: 700px;
  height: 700px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  box-shadow: inset 0 0 140px rgba(255, 90, 54, 0.2);
}

.faction-siren::before,
.faction-siren::after {
  content: "";
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.faction-siren::before { inset: 100px; animation: spin 25s linear infinite; }
.faction-siren::after { inset: 230px; animation: spin 15s linear infinite reverse; }

.factions-header {
  position: relative;
  z-index: 5;
}

.factions-header h2 { font-size: 66px; }
.factions-header h2 em { color: rgba(255, 255, 255, 0.42); }

.faction-tuner {
  position: relative;
  z-index: 6;
  display: grid;
  min-height: 600px;
  grid-template-columns: 300px 1fr;
  margin-top: 90px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.faction-list {
  display: grid;
  align-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.faction-button {
  display: grid;
  width: 100%;
  min-height: 82px;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: transparent;
  color: rgba(255, 255, 255, 0.48);
  text-align: left;
  transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease;
}

.faction-button:last-child { border-bottom: 0; }
.faction-button.active { padding-left: 26px; background: var(--paper); color: var(--black); }
.faction-button > span { font-family: "Roboto Mono", monospace; font-size: 8px; }
.faction-button > div { display: grid; gap: 3px; }
.faction-button strong { font-size: 12px; }
.faction-button small { font-size: 7px; opacity: 0.55; text-transform: uppercase; }
.faction-button > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.faction-stage {
  position: relative;
  overflow: hidden;
}

.faction-code {
  position: absolute;
  left: 3%;
  top: 50%;
  color: rgba(255, 255, 255, 0.06);
  font-size: 190px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.faction-scope {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 370px;
  height: 370px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.faction-scope::before,
.faction-scope::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9%;
  width: 1px;
  height: 118%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.faction-scope::after { transform: rotate(90deg); }
.faction-scope i { position: absolute; inset: 50px; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 50%; animation: spin 15s linear infinite; }
.faction-scope b { position: absolute; inset: 135px; border-radius: 50%; background: var(--faction-color, var(--cyan)); box-shadow: 0 0 80px var(--faction-color, var(--cyan)); transition: background 0.45s ease, box-shadow 0.45s ease; }

.faction-copy {
  position: absolute;
  right: 5%;
  top: 50%;
  width: 390px;
  transform: translateY(-50%);
}

.faction-copy > span { color: var(--sun); font-family: "Roboto Mono", monospace; font-size: 8px; }
.faction-copy h3 { margin: 13px 0 0; font-size: 39px; font-weight: 500; line-height: 1.05; }
.faction-copy > p { min-height: 54px; margin: 19px 0 0; color: rgba(255, 255, 255, 0.58); font-size: 12px; line-height: 1.65; }
.faction-copy > div { display: flex; gap: 46px; margin-top: 30px; }
.faction-copy > div span { display: grid; gap: 5px; }
.faction-copy small { color: rgba(255, 255, 255, 0.4); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.faction-copy > div strong { font-size: 20px; font-weight: 500; }
.faction-copy > button { display: flex; min-height: 48px; align-items: center; gap: 28px; margin-top: 34px; padding: 0 10px 0 17px; background: var(--paper); color: var(--black); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.faction-copy > button svg { width: 28px; height: 28px; padding: 6px; background: var(--black); color: var(--white); }

.economy-section {
  position: relative;
  z-index: 18;
  min-height: 1150px;
  overflow: hidden;
  padding: 150px 5% 130px;
  background:
    linear-gradient(90deg, rgba(10, 11, 11, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 11, 11, 0.06) 1px, transparent 1px),
    var(--paper);
  background-size: 20% 100%, 100% 220px, auto;
  color: var(--black);
}

.economy-tape {
  position: absolute;
  left: 0;
  top: 35px;
  display: flex;
  width: max-content;
  color: rgba(10, 11, 11, 0.06);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  animation: tapeMove 34s linear infinite;
}

.economy-tape span { padding-right: 35px; }
@keyframes tapeMove { to { transform: translateX(-50%); } }

.economy-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(500px, 760px) 320px;
  gap: 8%;
  align-items: end;
}

.economy-header > span { grid-column: 1 / -1; color: rgba(10, 11, 11, 0.5); }
.economy-header h2 { font-size: 62px; }
.economy-header h2 em { color: rgba(10, 11, 11, 0.38); }
.economy-header p { margin: 0 0 4px; color: rgba(10, 11, 11, 0.58); font-size: 12px; line-height: 1.7; }

.economy-ledger {
  position: relative;
  z-index: 4;
  margin-top: 110px;
  border-top: 1px solid var(--dark-line);
}

.ledger-row {
  display: grid;
  min-height: 112px;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr 0.7fr;
  gap: 20px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--dark-line);
  transition: background 0.35s ease, color 0.35s ease, padding 0.35s ease;
}

.ledger-row:not(.ledger-head):hover,
.ledger-row.active { padding: 0 28px; background: var(--black); color: var(--white); }
.ledger-head { min-height: 52px; color: rgba(10, 11, 11, 0.45); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.ledger-row strong { font-size: 16px; font-weight: 600; }
.ledger-row span, .ledger-row small { font-family: "Roboto Mono", monospace; font-size: 9px; }
.ledger-row b { color: var(--red); font-size: 17px; font-weight: 500; }
.ledger-row small { color: currentColor; opacity: 0.55; }

.economy-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 70px;
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}

.economy-metrics > span { display: grid; min-height: 145px; align-content: center; gap: 7px; padding: 20px; border-right: 1px solid var(--dark-line); }
.economy-metrics > span:last-child { border-right: 0; }
.economy-metrics strong { font-size: 44px; font-weight: 500; }
.economy-metrics small { color: rgba(10, 11, 11, 0.5); font-family: "Roboto Mono", monospace; font-size: 8px; text-transform: uppercase; }

.servers-section {
  position: relative;
  z-index: 20;
  min-height: 1700px;
  overflow: hidden;
  padding: 130px 5% 0;
  background: #0a0b0b;
}

.server-wave {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 720px;
  opacity: 0.42;
}

.servers-header {
  position: relative;
  z-index: 4;
}

.servers-header h2 { max-width: 800px; font-size: 66px; }

.server-lines {
  position: relative;
  z-index: 5;
  margin-top: 90px;
  border-top: 1px solid var(--line);
}

.server-row {
  position: relative;
  display: grid;
  min-height: 142px;
  grid-template-columns: 70px 1fr 150px 150px 80px 58px;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: padding 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.server-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--row-accent, var(--red));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.22, 1);
}

.server-row:hover,
.server-row.selected { padding: 0 20px; color: var(--black); }
.server-row:hover::before,
.server-row.selected::before { transform: scaleY(1); }
.server-row.offline { opacity: 0.45; }
.server-row > span:first-child { font-family: "Roboto Mono", monospace; font-size: 11px; }
.server-row-title { display: grid; gap: 4px; }
.server-row-title strong { font-size: 28px; font-weight: 500; }
.server-row-title small, .server-row-stat small { color: currentColor; font-family: "Roboto Mono", monospace; font-size: 7px; opacity: 0.5; text-transform: uppercase; }
.server-row-stat { display: grid; gap: 5px; }
.server-row-stat strong { font-size: 18px; font-weight: 500; }
.server-load { height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.15); }
.server-load i { display: block; height: 100%; background: currentColor; }
.server-status { display: flex; align-items: center; gap: 6px; font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.server-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(181, 255, 104, 0.5); }
.server-row.offline .server-status::before { background: var(--red); box-shadow: none; }
.server-row > button { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: transparent; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.server-row > button:hover { background: var(--black); color: var(--white); transform: rotate(45deg); }
.server-row > button svg { width: 18px; }

.news-band {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 1px;
  margin-top: 130px;
  background: rgba(255, 255, 255, 0.15);
}

.news-item {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: 28px;
  background: #101212;
}

.news-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 260px;
  height: 260px;
  border: 1px solid color-mix(in srgb, var(--news-color) 55%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 80px color-mix(in srgb, var(--news-color) 12%, transparent);
  transform: translate(-50%, -50%);
}

.news-item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--news-color);
  filter: blur(20px);
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

.news-item > span { position: relative; z-index: 3; color: var(--news-color); font-family: "Roboto Mono", monospace; font-size: 8px; text-transform: uppercase; }
.news-item > div { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 3; }
.news-item h3 { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.1; }
.news-item p { margin: 11px 0 0; color: rgba(255, 255, 255, 0.48); font-size: 10px; line-height: 1.6; }
.news-item:first-child h3 { font-size: 34px; }

.start-terminal {
  position: relative;
  z-index: 6;
  display: flex;
  min-height: 330px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 120px;
  padding: 55px 6%;
  overflow: hidden;
  background: var(--sun);
  color: var(--black);
}

.start-terminal::before {
  content: "88.08";
  position: absolute;
  right: 22%;
  top: 50%;
  color: rgba(10, 11, 11, 0.08);
  font-family: "Roboto Mono", monospace;
  font-size: 190px;
  transform: translateY(-50%);
}

.start-terminal > div,
.start-terminal > button { position: relative; z-index: 2; }
.start-terminal > div > span { font-family: "Roboto Mono", monospace; font-size: 8px; }
.start-terminal h2 { margin: 12px 0 0; font-size: 65px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.start-terminal p { max-width: 520px; margin: 17px 0 0; font-size: 12px; line-height: 1.6; }
.start-terminal > button { display: grid; width: 165px; height: 165px; place-items: center; border-radius: 50%; background: var(--black); color: var(--white); transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.22, 1); }
.start-terminal > button:hover { transform: rotate(12deg) scale(1.05); }
.start-terminal > button span { align-self: end; margin-bottom: -20px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.start-terminal > button svg { align-self: start; width: 31px; height: 31px; margin-top: -20px; }

.site-footer {
  position: relative;
  z-index: 22;
  display: grid;
  min-height: 250px;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 40px;
  align-items: end;
  padding: 70px 5% 120px;
  background: #060707;
}

.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand span { display: grid; width: 42px; height: 42px; place-items: center; background: var(--sun); color: var(--black); font-weight: 800; }
.footer-brand strong { font-size: 13px; }
.site-footer p { margin: 0; color: rgba(255, 255, 255, 0.4); font-size: 9px; line-height: 1.6; }
.site-footer > div:last-child { display: grid; justify-items: end; gap: 4px; color: rgba(255, 255, 255, 0.35); font-family: "Roboto Mono", monospace; font-size: 7px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.85, 0.22, 1);
}

[data-reveal].revealed { opacity: 1; transform: translateY(0); }

.city-deck,
.launcher-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.75s;
}

.city-deck.open,
.launcher-sheet.open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.deck-backdrop,
.launcher-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.city-deck.open .deck-backdrop,
.launcher-sheet.open .launcher-backdrop { opacity: 1; }

.deck-console {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  display: grid;
  height: min(900px, calc(100vh - 18px));
  grid-template-columns: 82px 1fr;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #0b0d0e;
  box-shadow: 0 -40px 120px rgba(0, 0, 0, 0.52);
  transform: translateY(105%);
  transition: transform 0.78s cubic-bezier(0.75, 0, 0.12, 1);
}

.city-deck.open .deck-console { transform: translateY(0); }

.deck-handle {
  position: absolute;
  left: 50%;
  top: -13px;
  z-index: 4;
  display: grid;
  width: 80px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #0b0d0e;
  transform: translateX(-50%);
}

.deck-handle i { width: 36px; height: 2px; background: rgba(255, 255, 255, 0.3); }

.deck-modes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  background: #070808;
}

.deck-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: var(--sun);
  color: var(--black);
  font-weight: 800;
}

.deck-modes > div { display: grid; gap: 10px; }
.deck-modes button { position: relative; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.42); }
.deck-modes button.active { border-color: var(--sun); color: var(--sun); }
.deck-modes button svg { width: 18px; }
.deck-modes button span { position: absolute; left: calc(100% + 12px); min-width: max-content; padding: 6px 8px; background: var(--sun); color: var(--black); font-family: "Roboto Mono", monospace; font-size: 7px; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.deck-modes button:hover span { opacity: 1; transform: translateX(0); }
.deck-signal { display: grid; justify-items: center; gap: 7px; color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; }
.deck-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); animation: recBlink 1.2s steps(1) infinite; }

.deck-main {
  min-width: 0;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    #0b0d0e;
  background-size: 20% 100%, 100% 25%;
}

.deck-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(11, 13, 14, 0.93);
  backdrop-filter: blur(16px);
}

.deck-header > div { display: grid; gap: 4px; }
.deck-header span { color: var(--sun); }
.deck-header h2 { margin: 0; font-size: 25px; font-weight: 500; }
.deck-close { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: transparent; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.deck-close:hover { background: var(--paper); color: var(--black); transform: rotate(90deg); }
.deck-close svg { width: 18px; }

.deck-view { display: none; min-height: calc(100% - 88px); }
.deck-view.active { display: block; animation: viewIn 0.45s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.auth-stage {
  display: grid;
  min-height: calc(100vh - 108px);
  grid-template-columns: 1.18fr 0.82fr;
}

.auth-broadcast {
  position: relative;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  background: radial-gradient(circle at 55% 36%, rgba(255, 90, 54, 0.14), transparent 25%), #090a0a;
}

.auth-broadcast > span { position: relative; z-index: 3; color: var(--red); font-family: "Roboto Mono", monospace; font-size: 8px; }
.auth-broadcast h3 { position: relative; z-index: 3; margin: 13px 0 0; font-size: 48px; font-weight: 500; line-height: 1.02; }
.auth-broadcast > small { position: relative; z-index: 3; margin-top: 22px; color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; }
.admin-broadcast { background: radial-gradient(circle at 55% 36%, rgba(102, 216, 255, 0.14), transparent 25%), #090a0a; }
.admin-broadcast > span { color: var(--cyan); }

.auth-city-model {
  position: absolute;
  left: 56%;
  top: 37%;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.auth-city-model::before,
.auth-city-model::after { content: ""; position: absolute; border-radius: 50%; }
.auth-city-model::before { inset: 50px; border: 1px dashed rgba(255, 90, 54, 0.35); animation: spin 16s linear infinite; }
.admin-broadcast .auth-city-model::before { border-color: rgba(102, 216, 255, 0.35); }
.auth-city-model::after { inset: 115px; background: var(--red); box-shadow: 0 0 50px rgba(255, 90, 54, 0.3); }
.admin-broadcast .auth-city-model::after { background: var(--cyan); box-shadow: 0 0 50px rgba(102, 216, 255, 0.3); }
.auth-city-model span { position: absolute; left: 50%; top: 50%; z-index: 3; font-size: 26px; font-weight: 800; transform: translate(-50%, -50%); }

.auth-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 52px;
  background: var(--paper);
  color: var(--black);
}

.auth-form label { display: grid; gap: 8px; margin-bottom: 22px; }
.auth-form label span { color: rgba(10, 11, 11, 0.52); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.auth-form input { width: 100%; height: 50px; border: 0; border-bottom: 1px solid rgba(10, 11, 11, 0.25); border-radius: 0; background: transparent; color: var(--black); outline: 0; }
.auth-form input:focus { border-color: var(--red); }
.auth-form > button { display: flex; min-height: 52px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 10px 0 18px; background: var(--black); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.auth-form > button svg { width: 31px; height: 31px; padding: 7px; background: var(--red); }
.auth-form > small { margin-top: 11px; color: rgba(10, 11, 11, 0.48); font-family: "Roboto Mono", monospace; font-size: 7px; }

.player-cabinet,
.admin-panel { display: none; }
.player-cabinet.loaded,
.admin-panel.loaded { display: block; }
.auth-stage.hidden { display: none; }

.cabinet-shell,
.admin-shell { padding: 26px; }
.cabinet-head,
.admin-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.cabinet-head > div > span,
.admin-head > div > span { color: var(--sun); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.admin-head > div > span { color: var(--cyan); }
.cabinet-head h3,
.admin-head h3 { margin: 6px 0 0; font-size: 33px; font-weight: 500; }
.logout-button { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: rgba(255, 255, 255, 0.56); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.logout-button svg { width: 14px; }

.character-hero {
  display: grid;
  min-height: 270px;
  grid-template-columns: 1.25fr 0.75fr;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 25% 50%, rgba(255, 90, 54, 0.13), transparent 28%), #101213;
}

.character-main { position: relative; display: flex; align-items: center; gap: 26px; padding: 28px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.character-mark { display: grid; width: 132px; height: 176px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(145deg, #2d1712, #0d0f10 60%); font-size: 42px; font-weight: 800; }
.character-copy > span { color: var(--red); font-family: "Roboto Mono", monospace; font-size: 8px; }
.character-copy h4 { margin: 8px 0 0; font-size: 32px; font-weight: 500; }
.character-copy p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 10px; }
.character-copy > div { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 20px; color: rgba(255, 255, 255, 0.43); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.character-copy > div strong { color: var(--white); font-weight: 400; }

.character-balance { display: grid; grid-template-columns: 1fr 1fr; }
.character-balance > div { display: flex; flex-direction: column; justify-content: center; padding: 22px; border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.character-balance > div:nth-child(even) { border-right: 0; }
.character-balance > div:nth-last-child(-n+2) { border-bottom: 0; }
.character-balance small { color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.character-balance strong { margin-top: 6px; font-size: 24px; font-weight: 500; }

.cabinet-grid,
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 17px; }
.cabinet-panel,
.admin-block { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.025); }
.panel-head { display: flex; min-height: 55px; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.11); }
.panel-head strong { font-size: 12px; font-weight: 600; }
.panel-head span { color: rgba(255, 255, 255, 0.36); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }

.vehicle-row,
.property-row,
.application-row,
.purchase-row,
.admin-application-row,
.admin-server-row,
.admin-user-row,
.event-row { display: grid; min-width: 0; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vehicle-row:last-child,
.property-row:last-child,
.application-row:last-child,
.purchase-row:last-child,
.admin-application-row:last-child,
.admin-server-row:last-child,
.admin-user-row:last-child,
.event-row:last-child { border-bottom: 0; }
.vehicle-row { grid-template-columns: 40px 1fr auto; }
.vehicle-swatch { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--vehicle-color); }
.vehicle-swatch svg { width: 17px; }
.row-copy { display: grid; min-width: 0; gap: 3px; }
.row-copy strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-copy small,
.row-meta { color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.property-row,
.application-row,
.purchase-row { grid-template-columns: 1fr auto; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.45); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.status-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.status-chip.active::before,
.status-chip.approved::before,
.status-chip.online::before { background: var(--acid); box-shadow: 0 0 9px rgba(181, 255, 104, 0.4); }
.status-chip.new::before,
.status-chip.review::before,
.status-chip.maintenance::before { background: var(--sun); }
.status-chip.declined::before,
.status-chip.banned::before,
.status-chip.offline::before { background: var(--red); }

.cabinet-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 17px;
  background: var(--paper);
  color: var(--black);
}
.cabinet-form label { display: grid; gap: 7px; }
.cabinet-form label:last-of-type { grid-column: 1 / -1; }
.cabinet-form label span { color: rgba(10, 11, 11, 0.5); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.cabinet-form select,
.cabinet-form input,
.cabinet-form textarea { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid rgba(10, 11, 11, 0.25); border-radius: 0; background: transparent; color: var(--black); outline: 0; }
.cabinet-form select,
.cabinet-form input { height: 39px; }
.cabinet-form textarea { min-height: 68px; resize: vertical; }
.cabinet-form button { grid-column: 1 / -1; min-height: 42px; background: var(--black); color: var(--white); font-size: 8px; font-weight: 700; text-transform: uppercase; }

.store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.1); }
.store-item { position: relative; min-height: 180px; padding: 18px; background: #101213; }
.store-item > span { color: var(--sun); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.store-item h4 { margin: 8px 0 0; font-size: 17px; font-weight: 500; }
.store-item p { margin: 9px 0 0; color: rgba(255, 255, 255, 0.42); font-size: 9px; line-height: 1.55; }
.store-item footer { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.store-item footer strong { font-size: 17px; font-weight: 500; }
.store-item footer button { min-height: 32px; padding: 0 10px; background: var(--sun); color: var(--black); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }

.promo-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 16px; background: var(--paper); }
.promo-form input { min-width: 0; border: 0; border-bottom: 1px solid rgba(10, 11, 11, 0.25); border-radius: 0; background: transparent; color: var(--black); outline: 0; }
.promo-form button { min-height: 38px; padding: 0 13px; background: var(--red); color: var(--white); font-size: 8px; font-weight: 700; text-transform: uppercase; }

.admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255, 255, 255, 0.13); }
.admin-metric { min-width: 0; padding: 21px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.admin-metric:last-child { border-right: 0; }
.admin-metric span { color: rgba(255, 255, 255, 0.38); font-family: "Roboto Mono", monospace; font-size: 7px; text-transform: uppercase; }
.admin-metric strong { display: block; margin-top: 7px; overflow-wrap: anywhere; font-size: 28px; font-weight: 500; }
.admin-application-row { grid-template-columns: 1fr auto auto; }
.admin-server-row { grid-template-columns: 1fr 75px auto auto; }
.admin-user-row { grid-template-columns: 1fr auto auto; }
.event-row { grid-template-columns: 8px 1fr auto; }
.event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.event-dot.warning { background: var(--red); }
.server-admin-load { height: 3px; background: rgba(255, 255, 255, 0.12); }
.server-admin-load i { display: block; height: 100%; background: var(--cyan); }
.row-actions { display: flex; gap: 5px; }
.mini-action { min-height: 28px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: rgba(255, 255, 255, 0.55); font-family: "Roboto Mono", monospace; font-size: 6px; text-transform: uppercase; }
.mini-action:hover { border-color: var(--sun); background: var(--sun); color: var(--black); }

.launcher-sheet > section {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(1100px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #0c0e0f;
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, 115%);
  transition: transform 0.68s cubic-bezier(0.75, 0, 0.12, 1);
}
.launcher-sheet.open > section { transform: translate(-50%, 0); }
.launcher-sheet header { display: flex; min-height: 100px; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.launcher-sheet header > div { display: grid; gap: 5px; }
.launcher-sheet header span { color: var(--sun); }
.launcher-sheet header h2 { margin: 0; font-size: 28px; font-weight: 500; }
.launcher-sheet header button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: transparent; }
.launcher-sheet header svg { width: 17px; }
.launcher-flow { display: grid; grid-template-columns: repeat(3, 1fr); }
.launcher-flow > div { min-height: 230px; padding: 26px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.launcher-flow > div:last-child { border-right: 0; }
.launcher-flow span { color: var(--red); font-family: "Roboto Mono", monospace; font-size: 9px; }
.launcher-flow strong { display: block; margin-top: 48px; font-size: 21px; font-weight: 500; }
.launcher-flow p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 10px; line-height: 1.6; }
.launcher-action { display: flex; min-height: 128px; align-items: center; justify-content: space-between; gap: 30px; padding: 22px 28px; background: var(--paper); color: var(--black); }
.launcher-action > div { display: grid; gap: 4px; }
.launcher-action span, .launcher-action small { color: rgba(10, 11, 11, 0.48); font-family: "Roboto Mono", monospace; font-size: 7px; }
.launcher-action strong { font-size: 19px; font-weight: 500; }
.launcher-action a { display: flex; min-height: 50px; align-items: center; gap: 30px; padding: 0 10px 0 17px; background: var(--red); color: var(--white); font-size: 10px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.launcher-action a svg { width: 30px; height: 30px; padding: 6px; background: rgba(0, 0, 0, 0.25); }

.toast {
  position: fixed;
  right: 24px;
  bottom: 105px;
  z-index: 1800;
  max-width: min(360px, calc(100vw - 48px));
  padding: 13px 16px;
  border-left: 3px solid var(--sun);
  background: #111315;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.4);
  color: var(--white);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: var(--red); }

@media (max-width: 1180px) {
  .hero-copy h1 { font-size: 116px; }
  .hero-season strong { font-size: 60px; }
  .server-live { width: 330px; }
  .district-map::before { width: 460px; height: 460px; }
  .district-map::after { width: 280px; height: 280px; }
  .dispatch-sweep { width: 390px; height: 390px; }
  .faction-copy { width: 330px; }
  .faction-copy h3 { font-size: 32px; }
  .faction-scope { width: 320px; height: 320px; }
  .server-row { grid-template-columns: 55px 1fr 125px 120px 70px 52px; gap: 13px; }
}

@media (max-width: 980px) {
  .radio-dock { grid-template-columns: 70px 150px 1fr 62px; }
  .hero-copy { left: 4%; width: 600px; }
  .hero-copy h1 { font-size: 96px; }
  .hero-copy > p, .hero-actions { margin-left: 62px; }
  .hero-copy > p { width: 360px; }
  .hero-season { display: none; }
  .server-live { right: 2%; bottom: 13%; width: 310px; }
  .world-header h2, .life-header h2 { font-size: 48px; }
  .district-vinewood { left: 58%; }
  .district-downtown { left: 48%; }
  .district-sandy { left: 71%; }
  .faction-tuner { grid-template-columns: 250px 1fr; }
  .faction-scope { left: 27%; width: 270px; height: 270px; }
  .faction-scope b { inset: 100px; }
  .faction-copy { right: 3%; width: 300px; }
  .economy-header { grid-template-columns: 1fr 260px; }
  .economy-header h2 { font-size: 52px; }
  .server-row { grid-template-columns: 45px 1fr 110px 90px 50px; }
  .server-row > div:nth-of-type(3) { display: none; }
  .news-band { grid-template-columns: 1.2fr 1fr; }
  .news-item:last-child { display: none; }
}

@media (max-width: 780px) {
  .city-telemetry { top: 14px; }
  .city-telemetry-left { left: 14px; }
  .city-telemetry-right { right: 14px; }
  .dispatch-call { right: 14px; top: 52px; }
  .radio-dock { width: calc(100vw - 20px); bottom: 10px; grid-template-columns: 56px 120px 1fr 54px; height: 60px; }
  .radio-brand { padding: 0 8px; }
  .radio-brand span { width: 34px; height: 34px; }
  .radio-brand small { display: none; }
  .radio-display { padding: 0 10px; }
  .radio-display > div strong { font-size: 16px; }
  .radio-wave { display: none; }
  .radio-presets button > span { display: none; }
  .radio-presets svg { width: 16px; }

  .hero-copy { left: 22px; top: 13%; width: 520px; }
  .hero-copy h1 { font-size: 80px; }
  .hero-copy > p { width: 320px; margin-left: 48px; font-size: 13px; }
  .hero-actions { margin-left: 48px; }
  .server-live { right: 18px; bottom: 15%; }
  .hero-camera-tag { display: none; }

  .world-header { left: 24px; }
  .world-header h2 { font-size: 42px; }
  .district-map::before { left: 64%; width: 390px; height: 390px; }
  .district-map::after { left: 64%; }
  .dispatch-sweep { left: 64%; width: 340px; height: 340px; }
  .district-node { min-width: 126px; grid-template-columns: 32px 1fr; }
  .district-node > span { width: 32px; height: 32px; }
  .district-node > span::before { inset: 6px; }
  .district-node > span::after { inset: 13px; }
  .district-vinewood { left: 58%; }
  .district-downtown { left: 42%; }
  .district-vespucci { left: 17%; }
  .district-davis { left: 56%; }
  .district-sandy { left: 70%; }
  .district-readout { left: 24px; width: 280px; }
  .world-progress { left: 24px; right: 24px; }

  .life-section { min-height: 1300px; padding-left: 24px; padding-right: 24px; }
  .life-console { width: 430px; grid-template-columns: 140px 1fr; }
  .life-copy { padding: 22px; }
  .life-stats { grid-template-columns: 1fr 1fr; }
  .life-stats span:last-child { display: none; }

  .factions-section { padding-left: 24px; padding-right: 24px; }
  .factions-header h2 { font-size: 52px; }
  .faction-tuner { grid-template-columns: 190px 1fr; }
  .faction-button { padding: 0 10px; grid-template-columns: 30px 1fr; }
  .faction-button > i { display: none; }
  .faction-scope { left: 50%; top: 30%; width: 250px; height: 250px; }
  .faction-copy { left: 28px; right: 28px; top: auto; bottom: 35px; width: auto; transform: none; }
  .faction-code { top: 26%; font-size: 120px; }

  .economy-section { padding-left: 24px; padding-right: 24px; }
  .economy-header { grid-template-columns: 1fr; }
  .economy-header p { max-width: 480px; margin-top: 20px; }
  .ledger-row { grid-template-columns: 1.5fr 0.8fr 0.8fr; }
  .ledger-row > span:nth-of-type(2), .ledger-row > small, .ledger-head > span:nth-child(4), .ledger-head > span:nth-child(5) { display: none; }

  .servers-section { padding-left: 24px; padding-right: 24px; }
  .servers-header h2 { font-size: 51px; }
  .server-row { grid-template-columns: 40px 1fr 95px 48px; }
  .server-row > .server-status { display: none; }
  .news-band { grid-template-columns: 1fr; }
  .news-item:nth-child(n+2) { display: none; }

  .site-footer { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; }
  .site-footer p { display: none; }
  .deck-console { left: 8px; right: 8px; grid-template-columns: 64px 1fr; }
  .auth-stage { grid-template-columns: 1fr; }
  .auth-broadcast { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
  .auth-form { min-height: 400px; }
  .character-hero { grid-template-columns: 1fr; }
  .character-main { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .cabinet-grid, .admin-grid { grid-template-columns: 1fr; }
  .admin-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-metric:nth-child(2) { border-right: 0; }
  .admin-metric:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (max-width: 560px) {
  .street-cursor { display: none; }
  .city-telemetry-right { display: none; }
  .dispatch-call { width: 42px; height: 42px; padding: 5px; }
  .dispatch-call > span { display: none; }
  .dispatch-call > svg { width: 30px; height: 30px; }

  .radio-dock { grid-template-columns: 52px 92px 1fr 50px; }
  .radio-display > small { font-size: 6px; }
  .radio-presets button:nth-child(4), .radio-presets button:nth-child(5) { display: none; }
  .radio-presets { grid-template-columns: repeat(3, 1fr); }
  .radio-knob::before { inset: 9px; }
  .radio-knob span { inset: 14px; }

  .hero-chapter { height: 185svh; }
  .hero-sticky { min-height: 610px; }
  .hero-copy { left: 16px; right: 14px; top: 78px; width: auto; }
  .hero-label { font-size: 7px; }
  .hero-copy h1 { margin-top: 18px; font-size: 58px; line-height: 0.77; }
  .hero-copy h1 span:last-child { padding-left: 36px; }
  .hero-copy > p { width: min(285px, calc(100vw - 50px)); margin: 24px 0 0 38px; font-size: 11px; line-height: 1.55; }
  .hero-actions { margin: 20px 0 0 38px; }
  .enter-city { min-height: 44px; gap: 20px; font-size: 8px; }
  .watch-feed { display: none; }
  .server-live { left: 12px; right: 12px; bottom: 88px; width: auto; padding: 10px; }
  .server-live-main { min-height: 67px; }
  .server-number { width: 42px; height: 42px; }
  .hero-scroll { display: none; }

  .world-chapter { height: 360svh; }
  .world-sticky { min-height: 610px; }
  .world-header { left: 18px; top: 35px; }
  .world-header h2 { font-size: 34px; }
  .map-coordinates { display: none; }
  .district-map::before { left: 59%; top: 48%; width: 310px; height: 310px; }
  .district-map::after { left: 59%; top: 48%; width: 190px; height: 190px; }
  .dispatch-sweep { left: 59%; top: 48%; width: 270px; height: 270px; }
  .district-node { min-width: 105px; }
  .district-node strong { font-size: 10px; }
  .district-node small { display: none; }
  .district-vinewood { left: 54%; top: 22%; }
  .district-downtown { left: 42%; top: 42%; }
  .district-vespucci { left: 11%; top: 59%; }
  .district-davis { left: 55%; top: 64%; }
  .district-sandy { left: 68%; top: 36%; }
  .district-readout { left: 18px; bottom: 15%; width: 230px; }
  .district-readout h3 { font-size: 28px; }
  .district-readout p { min-height: 0; font-size: 9px; }
  .world-progress { left: 18px; right: 18px; bottom: 10%; }

  .life-section { min-height: 1220px; padding: 88px 18px 120px; }
  .life-header h2 { font-size: 41px; }
  .life-console { width: min(350px, calc(100vw - 36px)); grid-template-columns: 105px 1fr; margin-top: 55px; }
  .life-modes button { min-height: 86px; grid-template-columns: 1fr; padding: 10px; }
  .life-modes button span { grid-row: auto; }
  .life-modes small { display: none; }
  .life-copy { min-height: 300px; padding: 18px; }
  .life-copy h3 { font-size: 23px; }
  .life-stats { grid-template-columns: 1fr; }
  .life-stats span:nth-child(n+2) { display: none; }
  .garage-floor { left: 18px; right: 18px; }

  .factions-section { min-height: 1400px; padding: 90px 18px 120px; }
  .factions-header h2 { font-size: 41px; }
  .faction-tuner { display: block; min-height: 920px; margin-top: 60px; }
  .faction-list { display: grid; grid-template-columns: repeat(5, 1fr); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .faction-button { min-height: 66px; grid-template-columns: 1fr; padding: 5px; text-align: center; }
  .faction-button.active { padding-left: 5px; }
  .faction-button > div small { display: none; }
  .faction-stage { min-height: 850px; }
  .faction-scope { top: 31%; width: 230px; height: 230px; }
  .faction-scope b { inset: 88px; }
  .faction-code { left: 50%; top: 27%; font-size: 100px; transform: translate(-50%, -50%); }
  .faction-copy { left: 0; right: 0; bottom: 45px; }
  .faction-copy h3 { font-size: 28px; }

  .economy-section { min-height: 1200px; padding: 120px 18px 100px; }
  .economy-tape { font-size: 52px; }
  .economy-header h2 { font-size: 40px; }
  .economy-header p { font-size: 10px; }
  .economy-ledger { margin-top: 70px; }
  .ledger-row { min-height: 100px; grid-template-columns: 1fr 90px; gap: 10px; padding: 0 8px; }
  .ledger-row:hover, .ledger-row.active { padding: 0 12px; }
  .ledger-row > span { display: none; }
  .ledger-head { display: none; }
  .economy-metrics { grid-template-columns: 1fr; }
  .economy-metrics > span { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .economy-metrics > span:last-child { border-bottom: 0; }

  .servers-section { min-height: 1550px; padding: 95px 18px 0; }
  .servers-header h2 { font-size: 40px; }
  .server-lines { margin-top: 65px; }
  .server-row { min-height: 120px; grid-template-columns: 30px 1fr 44px; gap: 9px; }
  .server-row > .server-row-stat { display: none; }
  .server-row-title strong { font-size: 22px; }
  .server-row > button { width: 40px; height: 40px; }
  .news-band { margin-top: 85px; }
  .news-item { min-height: 330px; }
  .start-terminal { min-height: 260px; margin-top: 90px; padding: 30px 24px; }
  .start-terminal h2 { font-size: 43px; }
  .start-terminal p { display: none; }
  .start-terminal > button { width: 96px; height: 96px; }
  .start-terminal > button span { display: none; }
  .start-terminal > button svg { align-self: center; margin: 0; }

  .site-footer { min-height: 220px; grid-template-columns: 1fr; padding: 50px 18px 100px; }
  .site-footer > div:last-child { justify-items: start; }

  .deck-console { left: 4px; right: 4px; height: calc(100vh - 8px); grid-template-columns: 50px 1fr; }
  .deck-modes { padding: 14px 0; }
  .deck-logo { width: 34px; height: 34px; font-size: 11px; }
  .deck-modes button { width: 38px; height: 38px; }
  .deck-modes button span { display: none; }
  .deck-header { min-height: 70px; padding: 10px 13px; }
  .deck-header h2 { font-size: 19px; }
  .deck-close { width: 37px; height: 37px; }
  .auth-stage { min-height: calc(100vh - 78px); }
  .auth-broadcast { min-height: 360px; padding: 25px 18px; }
  .auth-broadcast h3 { font-size: 31px; }
  .auth-city-model { width: 210px; height: 210px; }
  .auth-city-model::before { inset: 35px; }
  .auth-city-model::after { inset: 80px; }
  .auth-form { min-height: 380px; padding: 28px 18px; }
  .cabinet-shell, .admin-shell { padding: 12px; }
  .cabinet-head h3, .admin-head h3 { font-size: 24px; }
  .logout-button span { display: none; }
  .character-main { display: grid; justify-items: center; text-align: center; }
  .character-mark { width: 105px; height: 135px; }
  .character-copy > div { justify-content: center; }
  .character-balance > div { padding: 15px; }
  .cabinet-form { grid-template-columns: 1fr; }
  .cabinet-form label:last-of-type, .cabinet-form button { grid-column: auto; }
  .store-grid { grid-template-columns: 1fr; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-metric { padding: 14px; }
  .admin-metric strong { font-size: 21px; }
  .admin-application-row, .admin-user-row { grid-template-columns: 1fr; }
  .admin-server-row { grid-template-columns: 1fr auto; }
  .admin-server-row .server-admin-load { display: none; }
  .launcher-sheet > section { bottom: 4px; width: calc(100vw - 8px); max-height: calc(100vh - 8px); }
  .launcher-sheet header { min-height: 80px; padding: 14px 17px; }
  .launcher-sheet header h2 { font-size: 21px; }
  .launcher-flow { grid-template-columns: 1fr; }
  .launcher-flow > div { min-height: 155px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .launcher-flow strong { margin-top: 24px; }
  .launcher-action { display: grid; padding: 20px; }
  .launcher-action a { justify-content: space-between; }
}

@media (max-height: 720px) and (max-width: 560px) {
  .hero-copy > p { display: none; }
  .hero-actions { margin-top: 18px; }
  .server-live footer { display: none; }
  .server-live { bottom: 82px; }
}

@media (hover: none), (pointer: coarse) {
  .street-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}