:root {
  --ink: #08090f;
  --chrome: #121622;
  --paper: #f8f4f1;
  --muted: #acb3c3;
  --ember: #ff693c;
  --pink: #ff4fa3;
  --violet: #7c3cff;
  --cyan: #49d7e8;
  --line: rgba(255, 255, 255, 0.16);
  --glass: rgba(10, 12, 20, 0.62);
  --display: "Arial Black", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --utility: "SFMono-Regular", Menlo, Consolas, monospace;
  --header-height: 88px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  overflow: hidden;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

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

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font: 700 12px var(--utility);
  transform: translateY(-150%);
}

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

.boot-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 47%, rgba(124, 60, 255, 0.22), transparent 26%),
    radial-gradient(circle at 37% 54%, rgba(255, 79, 163, 0.13), transparent 18%),
    linear-gradient(145deg, #0d1020 0%, #05060a 52%, #0d0814 100%);
  transition: opacity 780ms cubic-bezier(.2, .8, .2, 1), visibility 780ms, transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.boot-screen::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.018) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255, 255, 255, 0.018) 80px);
  transform: perspective(900px) rotateX(60deg) translateY(25%);
  mask-image: linear-gradient(transparent, black 35%);
}

.boot-noise,
.world-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.boot-orbit {
  position: absolute;
  width: min(65vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  animation: boot-spin 18s linear infinite;
}

.boot-orbit::before,
.boot-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 28px var(--pink);
}

.boot-orbit::before { top: 11%; left: 17%; }
.boot-orbit::after { right: 2%; bottom: 36%; background: var(--cyan); box-shadow: 0 0 28px var(--cyan); }
.boot-orbit-two { width: min(44vw, 490px); animation-direction: reverse; animation-duration: 13s; opacity: 0.65; }

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

.boot-lockup {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.boot-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  margin-bottom: 22px;
  transform: rotate(-7deg);
}

.boot-mark i,
.mini-mark {
  position: absolute;
  inset: 0;
  border-radius: 25px 9px 27px 10px;
  background: linear-gradient(135deg, var(--ember), var(--pink) 48%, var(--violet));
  box-shadow: 0 18px 55px rgba(255, 79, 163, 0.28);
}

.boot-mark b {
  position: relative;
  color: #fff;
  font: 900 italic 29px/1 var(--display);
  letter-spacing: -0.12em;
  transform: translateX(-2px);
}

.boot-title {
  font: 900 clamp(35px, 6vw, 78px)/0.9 var(--display);
  letter-spacing: -0.065em;
  text-transform: uppercase;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.45);
}

.boot-prompt {
  margin-top: 30px;
  color: #d4d7e0;
  font: 600 12px/1 var(--utility);
  letter-spacing: 0.12em;
  animation: prompt-pulse 1.8s ease-in-out infinite;
}

@keyframes prompt-pulse {
  50% { opacity: 0.4; }
}

.boot-meta {
  position: absolute;
  right: clamp(20px, 4vw, 58px);
  bottom: clamp(22px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 600 9px var(--utility);
  letter-spacing: 0.12em;
}

.boot-meta i {
  width: 35px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.boot-meta span { color: var(--cyan); }

body[data-booted="true"] .boot-screen {
  visibility: hidden;
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

.console-shell {
  position: relative;
  min-height: 100dvh;
  opacity: 0;
  transition: opacity 620ms ease 350ms;
}

body[data-booted="true"] .console-shell { opacity: 1; }

.world-stage,
.world-art,
.world-chrome,
.world-grain {
  position: fixed;
  inset: 0;
}

.world-stage {
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.world-art {
  background-position: center 46%;
  background-size: cover;
  filter: saturate(1.16) contrast(1.04);
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 760ms ease, transform 7s ease-out;
}

.world-art.is-visible {
  opacity: 1;
  transform: scale(1);
}

.world-chrome {
  background:
    linear-gradient(90deg, rgba(5, 6, 11, 0.98) 0%, rgba(5, 6, 11, 0.86) 27%, rgba(5, 6, 11, 0.18) 69%, rgba(5, 6, 11, 0.5) 100%),
    linear-gradient(0deg, rgba(4, 5, 9, 0.94) 0%, transparent 38%, rgba(4, 5, 9, 0.65) 100%);
}

.world-chrome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 48%, transparent 0 23%, rgba(8, 9, 15, 0.36) 70%);
}

.world-grain { opacity: 0.14; }

.console-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) auto minmax(180px, 0.8fr);
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0 clamp(24px, 3.8vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(rgba(7, 8, 14, 0.78), rgba(7, 8, 14, 0.15));
  backdrop-filter: blur(14px);
}

.brand-lockup,
.mode-link,
.header-cta,
.rail-dot,
.library-arrows button,
.primary-action,
.text-action,
.dialog-close,
.offer-tile button,
.mobile-dock button {
  cursor: pointer;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 13px;
  padding: 0;
  color: var(--paper);
  background: none;
  font-size: 15px;
}

.brand-lockup > span:last-child { display: flex; gap: 5px; }
.brand-lockup b { font-weight: 800; }

.mini-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px 5px 12px 5px;
  color: white;
  font: 900 italic 12px var(--display);
  letter-spacing: -0.1em;
  transform: rotate(-6deg);
}

.mode-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(5, 6, 10, 0.32);
}

.mode-link {
  position: relative;
  padding: 10px 15px;
  border-radius: 99px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: color 180ms, background 180ms, transform 180ms;
}

.mode-link:hover { color: white; transform: translateY(-1px); }
.mode-link.is-active { color: white; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mode-link-gta.is-active { background: linear-gradient(135deg, rgba(255, 105, 60, 0.48), rgba(255, 79, 163, 0.38)); }

.header-cta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
  padding: 11px 12px 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 99px;
  color: white;
  background: rgba(4, 5, 9, 0.32);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
  transition: background 180ms, transform 180ms;
}

.header-cta:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
.header-cta i { display: grid; place-items: center; width: 26px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--ink); font-style: normal; }

.screen-rail {
  position: fixed;
  z-index: 25;
  top: 50%;
  left: clamp(24px, 3.8vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  transform: translateY(-50%);
}

.rail-player { color: rgba(255, 255, 255, 0.45); font: 600 8px var(--utility); letter-spacing: 0.1em; }

.rail-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: transparent;
  transition: transform 220ms, background 220ms, box-shadow 220ms;
}

.rail-dot span {
  position: absolute;
  top: 50%;
  left: 21px;
  width: max-content;
  color: white;
  font: 600 9px var(--utility);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translate(5px, -50%);
  transition: opacity 160ms, transform 160ms;
  pointer-events: none;
}

.rail-dot:hover span,
.rail-dot:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail-dot.is-active { background: white; transform: scale(1.35); box-shadow: 0 0 15px rgba(255, 255, 255, 0.58); }
.rail-line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.3), transparent); }

.screen-stack {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
}

.game-screen {
  position: fixed;
  z-index: 0;
  inset: var(--header-height) 0 0;
  min-height: calc(100dvh - var(--header-height));
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  transition: opacity 360ms ease, transform 480ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.game-screen[hidden] { display: block; visibility: hidden; }
.game-screen.is-active { z-index: 2; visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.screen-inner {
  width: 100%;
  height: 100%;
  padding: clamp(38px, 5vh, 68px) clamp(34px, 7.7vw, 132px) 56px clamp(86px, 9.2vw, 158px);
}

.screen-home .screen-inner {
  padding-top: clamp(48px, 7vh, 92px);
}

.home-copy {
  max-width: 700px;
}

.mode-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.68);
  font: 700 10px/1 var(--utility);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mode-eyebrow::before {
  content: "";
  width: 25px;
  height: 1px;
  background: currentColor;
}

.home-copy h1,
.section-copy h2,
.founder-copy h2,
.gta-heading h2,
.console-dialog h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.home-copy h1 {
  max-width: 690px;
  font-size: clamp(52px, 7.6vw, 118px);
  line-height: 0.78;
  text-shadow: 0 9px 35px rgba(0, 0, 0, 0.4);
}

.home-description {
  max-width: 585px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.5;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.55);
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 850;
  transition: transform 180ms, box-shadow 180ms, background 180ms;
}

.primary-action:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 42px rgba(0,0,0,.26); background: white; }
.primary-action > span { display: grid; place-items: center; width: 24px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--ink); font-size: 8px; }
.primary-action i { font-style: normal; }

.selection-format { color: rgba(255, 255, 255, 0.57); font: 650 9px var(--utility); letter-spacing: 0.1em; }

.library-zone {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 38px;
  width: 100%;
}

.library-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 clamp(34px, 3.8vw, 64px) 12px clamp(76px, 7vw, 112px);
}

.library-heading > div:first-child { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.68); font: 700 9px var(--utility); letter-spacing: .12em; }
.library-heading b { color: white; font-weight: 600; }
.library-arrows { display: flex; gap: 6px; }
.library-arrows button { display: grid; place-items: center; width: 30px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: rgba(7,8,14,.42); backdrop-filter: blur(8px); transition: background 180ms, transform 180ms; }
.library-arrows button:hover { background: rgba(255,255,255,.15); transform: scale(1.06); }

.library-rail {
  display: flex;
  gap: 13px;
  padding: 0 clamp(34px, 3.8vw, 64px) 17px clamp(76px, 7vw, 112px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.library-rail::-webkit-scrollbar { display: none; }

.game-card {
  position: relative;
  flex: 0 0 clamp(152px, 12.6vw, 205px);
  aspect-ratio: 1.08 / 1;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  color: white;
  background: #171924;
  box-shadow: 0 9px 26px rgba(0, 0, 0, 0.22);
  text-align: left;
  transform-origin: bottom;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 200ms, box-shadow 280ms, filter 220ms;
  cursor: pointer;
}

.game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) brightness(0.75);
  transition: filter 240ms, transform 550ms cubic-bezier(.2,.8,.2,1);
}

.game-card:hover { transform: translateY(-8px) scale(1.02); }
.game-card:hover img { filter: saturate(1.15) brightness(0.9); transform: scale(1.04); }
.game-card.is-selected { z-index: 3; border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 14px 42px rgba(0,0,0,.36), 0 0 0 2px rgba(255,255,255,.2); transform: translateY(-13px) scale(1.06); }
.game-card.is-selected img { filter: saturate(1.23) brightness(1.03); transform: scale(1.035); }
.game-card-special.is-selected { border-color: var(--pink); box-shadow: 0 15px 45px rgba(0,0,0,.36), 0 0 24px rgba(255,79,163,.32); }

.card-shade,
.offer-shade,
.film-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 5, 9, 0.95) 0%, rgba(5,5,9,.18) 62%, rgba(5,5,9,.2) 100%);
}

.card-number { position: absolute; top: 10px; right: 11px; color: rgba(255,255,255,.72); font: 600 8px var(--utility); }
.card-label { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; flex-direction: column; gap: 3px; }
.card-label small { color: rgba(255,255,255,.65); font: 600 8px var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.card-label b { overflow: hidden; font-size: 14px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }

.controller-hints {
  position: fixed;
  z-index: 35;
  right: clamp(24px, 3.8vw, 64px);
  bottom: 12px;
  left: clamp(24px, 3.8vw, 64px);
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.53);
  font: 600 8px var(--utility);
  letter-spacing: 0.07em;
  pointer-events: none;
}

.controller-hints span { display: flex; align-items: center; gap: 6px; }
.controller-hints i { padding: 3px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: white; font-style: normal; }
.controller-hints b { margin-left: auto; color: rgba(255,255,255,.3); font-weight: 500; }

.split-screen,
.founder-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(520px, 1.32fr);
  align-items: center;
  gap: clamp(38px, 6vw, 100px);
}

.section-copy h2,
.founder-copy h2 {
  font-size: clamp(50px, 6vw, 92px);
  line-height: 0.85;
}

.section-copy > p:not(.mode-eyebrow),
.founder-copy > p:not(.mode-eyebrow),
.gta-heading > p:last-child {
  max-width: 510px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.55;
}

.chapter-list {
  max-width: 480px;
  margin: 35px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.chapter-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(255,255,255,.48);
  font-size: 12px;
  transition: color 200ms, padding 200ms;
}

.chapter-list li span,
.chapter-list li i { font: 600 8px var(--utility); font-style: normal; }
.chapter-list li b { font-weight: 700; }
.chapter-list li.is-current { padding-left: 8px; color: white; }
.chapter-list li.is-current span { color: var(--cyan); }

.video-deck,
.founder-film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 28px;
  color: white;
  background: #11131b;
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
  text-align: left;
  cursor: pointer;
  transform: perspective(1200px) rotateY(-2deg);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms;
}

.video-deck:hover,
.founder-film:hover { transform: perspective(1200px) rotateY(0) translateY(-5px); box-shadow: 0 42px 100px rgba(0,0,0,.54); }
.video-deck img,
.founder-film img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) brightness(.76); transition: filter 500ms, transform 8s ease-out; }
.video-deck.is-playing img,
.founder-film.is-playing img { filter: saturate(1.2) brightness(.52); transform: scale(1.08); }

.video-deck::before,
.founder-film::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(circle at 50%, transparent 0 35%, rgba(3,4,8,.45) 100%);
}

.video-chrome { position: absolute; z-index: 3; top: 20px; right: 22px; left: 22px; display: flex; justify-content: space-between; color: rgba(255,255,255,.78); font: 600 9px var(--utility); letter-spacing: .09em; }
.video-chrome i { font-style: normal; }
.video-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translate(-50%,-50%); transition: opacity 240ms, transform 240ms; }
.video-play i { display: grid; place-items: center; width: 68px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(7,8,13,.4); backdrop-filter: blur(12px); font-style: normal; }
.video-play b { font: 700 9px var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.is-playing .video-play { opacity: 0; transform: translate(-50%,-50%) scale(.75); }
.video-caption { position: absolute; z-index: 3; right: 22px; bottom: 28px; left: 22px; max-width: 410px; font: 750 clamp(14px,1.4vw,20px)/1.25 var(--body); text-shadow: 0 2px 15px rgba(0,0,0,.7); opacity: 0; transform: translateY(8px); transition: opacity 300ms 120ms, transform 300ms 120ms; }
.is-playing .video-caption { opacity: 1; transform: translateY(0); }
.video-progress { position: absolute; z-index: 4; right: 22px; bottom: 15px; left: 22px; height: 2px; overflow: hidden; background: rgba(255,255,255,.23); }
.video-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--ember),var(--pink),var(--cyan)); }
.is-playing .video-progress i { animation: video-progress 12s linear forwards; }
@keyframes video-progress { to { width: 100%; } }

.perks-layout {
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(560px, 1.2fr);
  align-items: center;
  gap: 70px;
}

.perk-detail {
  max-width: 465px;
  margin-top: 34px;
  padding: 20px 0 0 24px;
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
}

.perk-detail span { color: var(--cyan); font: 650 9px var(--utility); letter-spacing: .12em; }
.perk-detail h3 { margin: 10px 0 7px; font-size: 20px; }
.perk-detail p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.5; }

.loadout-ring {
  position: relative;
  justify-self: center;
  width: min(49vw, 650px);
  aspect-ratio: 1;
}

.orbit-ring { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit-ring::before { content: ""; position: absolute; top: -3px; left: 50%; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.orbit-one { inset: 10%; animation: boot-spin 28s linear infinite; }
.orbit-two { inset: 26%; border-style: dashed; animation: boot-spin 20s linear infinite reverse; opacity: .7; }
.loadout-core { position: absolute; inset: 34%; display: grid; place-items: center; align-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 40% 60% 52% 48%; background: linear-gradient(145deg,rgba(255,105,60,.32),rgba(124,60,255,.4)); box-shadow: 0 0 80px rgba(124,60,255,.28); transform: rotate(-8deg); }
.loadout-core span { font: 900 italic clamp(32px,4vw,62px) var(--display); letter-spacing: -.1em; transform: rotate(8deg); }
.loadout-core b { font: 700 8px var(--utility); letter-spacing: .15em; transform: rotate(8deg); }

.perk-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 13px 8px 8px; border: 1px solid rgba(255,255,255,.17); border-radius: 99px; color: rgba(255,255,255,.68); background: rgba(7,8,14,.54); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; transition: transform 220ms, color 220ms, background 220ms, border-color 220ms; cursor: pointer; }
.perk-node i { display: grid; place-items: center; width: 39px; aspect-ratio: 1; border-radius: 50%; color: white; background: rgba(255,255,255,.12); font: 800 11px var(--utility); font-style: normal; }
.perk-node:hover { color: white; transform: scale(1.04); }
.perk-node.is-selected { border-color: rgba(255,255,255,.7); color: white; background: rgba(255,255,255,.14); box-shadow: 0 12px 30px rgba(0,0,0,.26); }
.perk-node.is-selected i { background: linear-gradient(135deg,var(--ember),var(--pink)); }
.perk-node-one { top: 5%; left: 37%; }
.perk-node-two { top: 43%; right: 0; }
.perk-node-three { bottom: 4%; left: 35%; }
.perk-node-four { top: 42%; left: 0; }

.founder-layout { grid-template-columns: minmax(520px, 1.3fr) minmax(310px, .7fr); }
.founder-film { aspect-ratio: 16/10.8; transform: perspective(1200px) rotateY(2deg); }
.founder-film:hover { transform: perspective(1200px) rotateY(0) translateY(-5px); }
.film-vignette { background: linear-gradient(90deg,transparent,rgba(7,8,13,.12)),linear-gradient(0deg,rgba(6,7,12,.75),transparent 55%); }
.founder-copy { padding-right: 4vw; }
.founder-handle { display: flex; align-items: center; justify-content: space-between; max-width: 310px; margin: 28px 0 18px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: white; text-decoration: none; font: 650 11px var(--utility); letter-spacing: .08em; }
.founder-handle i { color: var(--cyan); font-style: normal; }

.content-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(20px, 3vh, 32px);
  padding-top: clamp(28px, 4vh, 48px);
}

.content-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
}

.content-heading h2 {
  margin: 0;
  font: 900 clamp(50px, 5.8vw, 88px)/.82 var(--display);
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.content-heading > div:first-child > p:last-child {
  max-width: 620px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
}

.content-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  background: rgba(7,8,14,.48);
  backdrop-filter: blur(12px);
}

.content-filters button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 99px;
  color: rgba(255,255,255,.52);
  background: transparent;
  font: 700 9px var(--utility);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color 180ms, background 180ms, transform 180ms;
}

.content-filters button:hover { color: white; transform: translateY(-1px); }
.content-filters button.is-active { color: var(--ink); background: var(--paper); }

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.content-card {
  position: relative;
  min-height: 180px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 21px;
  color: white;
  background: linear-gradient(145deg,rgba(24,25,36,.94),rgba(8,9,15,.88));
  box-shadow: 0 20px 52px rgba(0,0,0,.28);
  text-align: left;
  cursor: pointer;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 220ms, box-shadow 260ms;
}

.content-card-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.content-card img,
.content-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.content-card img {
  object-fit: cover;
  filter: saturate(1.1) brightness(.78);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 300ms;
}

.content-shade {
  background: linear-gradient(0deg,rgba(6,7,12,.98) 0%,rgba(6,7,12,.2) 68%,rgba(6,7,12,.2) 100%);
}

.content-card:hover,
.content-card:focus-visible {
  z-index: 2;
  border-color: rgba(255,255,255,.58);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
  transform: translateY(-5px);
}

.content-card:hover img { filter: saturate(1.2) brightness(.9); transform: scale(1.045); }
.content-card.is-filtered-out { display: none; }

.content-type,
.content-card-copy,
.content-open,
.content-glyph {
  position: absolute;
  z-index: 2;
}

.content-type {
  top: 17px;
  left: 18px;
  color: var(--pink);
  font: 700 8px var(--utility);
  letter-spacing: .1em;
}

.content-card-copy {
  right: 18px;
  bottom: 17px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.content-card-copy b {
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.content-card-featured .content-card-copy b {
  font: 900 clamp(42px, 4.5vw, 72px)/.84 var(--display);
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.content-card-copy small {
  color: rgba(255,255,255,.58);
  font-size: 11px;
  line-height: 1.3;
}

.content-open {
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(5,6,11,.36);
  font-size: 13px;
  backdrop-filter: blur(8px);
}

.content-glyph {
  right: 6px;
  bottom: -30px;
  color: rgba(255,255,255,.06);
  font: 900 190px/1 var(--display);
  letter-spacing: -.08em;
}

.content-card-ink {
  background:
    radial-gradient(circle at 88% 12%,rgba(73,215,232,.16),transparent 34%),
    linear-gradient(145deg,#141827,#08090f);
}

.content-card-sunset {
  background:
    radial-gradient(circle at 16% 18%,rgba(255,105,60,.65),transparent 38%),
    linear-gradient(145deg,rgba(255,79,163,.42),rgba(50,20,90,.92) 54%,#090a12);
}

.content-dialog .dialog-art { background-position: center; }

.screen-gta .world-chrome { background: none; }
.gta-skyline { position: absolute; top: -8vh; right: 1vw; color: rgba(255,255,255,.08); font: 900 clamp(280px,40vw,660px)/1 var(--display); letter-spacing: -.15em; pointer-events: none; }
.gta-skyline span { background: linear-gradient(rgba(255,255,255,.12),transparent 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gta-layout { display: grid; grid-template-columns: minmax(360px,.72fr) minmax(650px,1.28fr); align-items: center; gap: clamp(40px,5vw,82px); padding-top: 30px; }
.gta-heading h2 { max-width: 640px; font-size: clamp(46px,4.5vw,68px); line-height: .9; }
.gta-heading h2 em { color: transparent; background: linear-gradient(100deg,var(--ember),var(--pink),#e1a0ff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.gta-heading > p:last-child { max-width: 540px; }

.offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(180px,1fr)); gap: 12px; max-height: 68vh; }
.offer-tile { position: relative; min-height: 190px; padding: 19px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: linear-gradient(145deg,rgba(26,27,39,.88),rgba(9,10,16,.7)); box-shadow: 0 18px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); transition: transform 220ms,border-color 220ms,background 220ms; cursor: pointer; }
.offer-tile:hover { z-index: 2; border-color: rgba(255,255,255,.42); transform: translateY(-4px); background: linear-gradient(145deg,rgba(38,35,53,.94),rgba(10,11,17,.8)); }
.offer-featured { grid-row: span 2; min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; }
.offer-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2); }
.offer-featured .offer-shade { background: linear-gradient(0deg,rgba(8,8,13,.98),rgba(8,8,13,.15) 70%); }
.offer-tile small,.offer-tile h3,.offer-tile p,.offer-tile button { position: relative; z-index: 2; }
.offer-tile small { color: var(--pink); font: 700 8px var(--utility); letter-spacing: .1em; }
.offer-tile h3 { margin: 10px 0 7px; font-size: clamp(17px,1.4vw,22px); line-height: 1.05; }
.offer-tile p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.45; }
.offer-tile button { position: absolute; right: 15px; bottom: 14px; display: flex; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.66); background: rgba(7,8,13,.48); font: 600 8px var(--utility); opacity: 0; transform: translateY(3px); transition: opacity 180ms,transform 180ms,background 180ms; }
.offer-tile:hover button,.offer-tile:focus-within button { opacity: 1; transform: translateY(0); }
.offer-tile button:hover { background: rgba(255,255,255,.14); color: white; }
.offer-tile button i { font-style: normal; }
.offer-tile:not(.offer-featured) { padding-bottom: 45px; }

.console-dialog {
  width: min(900px, calc(100vw - 40px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px;
  color: var(--paper);
  background: rgba(12,14,22,.96);
  box-shadow: 0 50px 140px rgba(0,0,0,.72);
  backdrop-filter: blur(24px);
}

.console-dialog[open] { display: grid; grid-template-columns: .84fr 1.16fr; animation: dialog-in 300ms cubic-bezier(.2,.8,.2,1); }
.console-dialog::backdrop { background: rgba(3,4,8,.72); backdrop-filter: blur(12px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dialog-art { min-height: 520px; background-position: center; background-size: cover; }
.dialog-body { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,70px); }
.dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; place-items: center; width: 35px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; background: rgba(255,255,255,.06); font-size: 21px; }
.console-dialog h2 { font-size: clamp(43px,5vw,76px); line-height: .86; }
.dialog-body > p:not(.mode-eyebrow),.consultation-success > p:not(.mode-eyebrow) { margin: 22px 0 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.6; }
.dialog-actions { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.text-action { padding: 12px; color: rgba(255,255,255,.65); background: none; font-size: 11px; font-weight: 700; }
.text-action:hover { color: white; }

.consultation-dialog { width: min(1050px,calc(100vw - 40px)); }
.consultation-dialog[open] { grid-template-columns: .74fr 1.26fr; }
.consultation-art { position: relative; display: flex; align-items: flex-end; min-height: 680px; padding: 42px; overflow: hidden; background: linear-gradient(25deg,rgba(10,10,16,.2),rgba(255,79,163,.1)),url('/art/pin-06.jpg') center/cover; }
.consultation-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,8,13,.82),transparent 65%); }
.consultation-art span { position: relative; z-index: 2; font: 900 clamp(48px,5vw,78px)/.82 var(--display); letter-spacing: -.08em; }
.consultation-body { overflow-y: auto; }
.consultation-body h2 { margin-bottom: 25px; }
#consultation-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { display: flex; flex-direction: column; gap: 8px; }
label span { color: rgba(255,255,255,.57); font: 650 9px var(--utility); letter-spacing: .08em; text-transform: uppercase; }
input,textarea,select { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: white; background: rgba(255,255,255,.055); font-size: 14px; }
input,select { min-height: 48px; padding: 0 14px; }
textarea { padding: 13px 14px; resize: vertical; }
input::placeholder,textarea::placeholder { color: rgba(255,255,255,.31); }
.field-wide { grid-column: 1/-1; }
.submit-action { align-self: end; }
.consultation-success { text-align: left; }
.consultation-success .success-icon { display: grid; place-items: center; width: 62px; aspect-ratio: 1; margin-bottom: 24px; border-radius: 50%; color: white; background: linear-gradient(135deg,var(--ember),var(--pink),var(--violet)); font-size: 24px; box-shadow: 0 15px 40px rgba(255,79,163,.25); }
.consultation-success .primary-action { margin-top: 28px; }

.editor-dialog { width: min(620px,calc(100vw - 36px)); }
.editor-dialog[open] { display: block; }
.editor-dialog .dialog-body { min-height: 540px; }
#offer-editor-form { display: grid; gap: 18px; margin-top: 27px; }

.mobile-dock { display: none; }
.screen-announcer { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1120px) {
  .console-header { grid-template-columns: 200px 1fr 145px; padding-inline: 28px; }
  .mode-link { padding-inline: 10px; }
  .screen-rail { left: 28px; }
  .screen-inner { padding-left: 80px; padding-right: 38px; }
  .split-screen,.founder-layout { gap: 35px; grid-template-columns: minmax(280px,.72fr) minmax(450px,1.28fr); }
  .perks-layout { grid-template-columns: minmax(320px,.8fr) minmax(470px,1.2fr); gap: 20px; }
  .content-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .content-filters { max-width: 100%; }
  .gta-layout { grid-template-columns: minmax(330px,.67fr) minmax(560px,1.33fr); gap: 30px; }
  .offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow-y: auto; padding-right: 5px; }
  .offer-featured { grid-row: span 2; }
}

@media (max-height: 790px) and (min-width: 761px) {
  :root { --header-height: 74px; }
  .console-header { height: 74px; }
  .screen-inner { padding-top: 30px; padding-bottom: 42px; }
  .screen-home .screen-inner { padding-top: 38px; }
  .home-copy h1 { font-size: clamp(48px,6vw,82px); }
  .home-description { margin-top: 18px; max-width: 520px; font-size: 15px; }
  .home-actions { margin-top: 20px; }
  .library-zone { bottom: 28px; }
  .game-card { flex-basis: clamp(130px,13vw,180px); }
  .video-deck,.founder-film { max-height: 62vh; }
  .chapter-list { margin-top: 20px; }
  .chapter-list li { padding-block: 11px; }
  .loadout-ring { width: min(43vw,520px); }
  .content-layout { gap: 18px; }
  .content-heading h2 { font-size: clamp(46px,5vw,68px); }
  .gta-heading h2 { font-size: clamp(42px,5vw,70px); }
  .offer-grid { max-height: 66vh; }
  .offer-tile { min-height: 155px; }
  .offer-featured { min-height: 325px; }
}

@media (max-width: 760px) {
  :root { --header-height: 68px; }
  body { overflow: hidden; }
  .boot-orbit { width: 115vw; }
  .boot-orbit-two { width: 76vw; }
  .boot-title { max-width: 320px; font-size: clamp(38px,13vw,58px); }
  .boot-prompt { font-size: 10px; }
  .boot-meta { right: 20px; bottom: max(22px,env(safe-area-inset-bottom)); }

  .console-header {
    grid-template-columns: 1fr auto;
    height: var(--header-height);
    padding: 0 17px;
  }
  .brand-lockup { font-size: 13px; }
  .brand-lockup > span:last-child { display: none; }
  .mini-mark { width: 36px; height: 36px; }
  .mode-nav { justify-content: flex-start; order: 3; position: absolute; top: var(--header-height); left: 0; width: 100%; padding: 8px 14px; overflow-x: auto; border: 0; border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; background: rgba(7,8,14,.75); scrollbar-width: none; }
  .mode-nav::-webkit-scrollbar { display: none; }
  .mode-link { flex: 0 0 auto; padding: 8px 12px; font-size: 10px; }
  .header-cta { padding: 9px 10px 9px 13px; }
  .header-cta i { width: 23px; }
  .screen-rail,.controller-hints { display: none; }

  .game-screen { inset: calc(var(--header-height) + 49px) 0 0; min-height: calc(100dvh - var(--header-height) - 49px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .screen-inner { height: auto; min-height: 100%; padding: 29px 18px 40px; }
  .world-chrome { background: linear-gradient(0deg,rgba(5,6,11,.96) 0%,rgba(5,6,11,.52) 65%,rgba(5,6,11,.76) 100%),linear-gradient(90deg,rgba(5,6,11,.87),rgba(5,6,11,.12)); }
  .world-art { background-position: center; }

  .screen-home { overflow: hidden; }
  .screen-home .screen-inner { padding: 29px 20px 260px; }
  .home-copy h1 { font-size: clamp(52px,16vw,72px); line-height: .82; }
  .home-description { display: -webkit-box; margin-top: 18px; overflow: hidden; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .home-actions { align-items: flex-start; margin-top: 19px; }
  .primary-action { min-height: 44px; padding-inline: 18px; }
  .selection-format { display: none; }
  .mode-eyebrow { margin-bottom: 15px; font-size: 8px; }
  .library-zone { right: 0; bottom: calc(74px + env(safe-area-inset-bottom)); width: 100%; }
  .library-heading { padding: 0 19px 10px; }
  .library-arrows { display: none; }
  .library-rail { gap: 10px; padding: 0 20px 18px; }
  .game-card { flex-basis: 43vw; max-width: 180px; border-radius: 15px; }
  .game-card.is-selected { transform: translateY(-8px) scale(1.035); }

  .split-screen,.founder-layout,.perks-layout,.gta-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .section-copy h2,.founder-copy h2 { font-size: clamp(49px,15vw,68px); }
  .section-copy > p:not(.mode-eyebrow),.founder-copy > p:not(.mode-eyebrow),.gta-heading > p:last-child { margin-top: 17px; font-size: 14px; }
  .video-deck,.founder-film { order: -1; aspect-ratio: 4/3; border-radius: 20px; transform: none; }
  .video-deck:hover,.founder-film:hover { transform: none; }
  .video-play i { width: 55px; }
  .video-caption { font-size: 14px; }
  .chapter-list { margin-top: 24px; }

  .perks-layout { padding-top: 25px; }
  .loadout-ring { order: -1; align-self: center; width: min(92vw,440px); margin: 0 -5px; }
  .perk-node { font-size: 9px; }
  .perk-node i { width: 32px; }
  .perk-node-one { top: 1%; left: 34%; }
  .perk-node-two { right: -1%; }
  .perk-node-three { bottom: 0; left: 31%; }
  .perk-node-four { left: -2%; }
  .perk-detail { margin-top: 24px; }

  .founder-copy { padding: 0; }
  .founder-handle { margin-block: 20px 14px; }

  .content-layout { display: flex; flex-direction: column; padding-top: 25px; }
  .content-heading { align-items: stretch; gap: 18px; }
  .content-heading h2 { font-size: clamp(52px,16vw,72px); }
  .content-heading > div:first-child > p:last-child { margin-top: 13px; font-size: 14px; }
  .content-filters { align-self: stretch; max-width: none; margin-inline: -2px; overflow-x: auto; scrollbar-width: none; }
  .content-filters::-webkit-scrollbar { display: none; }
  .content-filters button { padding: 8px 11px; }
  .content-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; gap: 10px; padding-bottom: 14px; }
  .content-card { min-height: 220px; border-radius: 18px; }
  .content-card-featured { grid-column: 1/-1; grid-row: auto; min-height: 340px; }
  .content-card-copy { right: 14px; bottom: 14px; left: 14px; }
  .content-card-copy b { font-size: 18px; }
  .content-card-featured .content-card-copy b { font-size: clamp(43px,13vw,60px); }
  .content-card-copy small { font-size: 9px; }
  .content-type { top: 14px; left: 14px; }
  .content-open { top: 12px; right: 12px; }
  .content-glyph { font-size: 130px; }

  .gta-layout { padding-top: 27px; }
  .gta-heading h2 { font-size: clamp(45px,13.5vw,63px); }
  .offer-grid { display: flex; max-height: none; padding: 0 0 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .offer-grid::-webkit-scrollbar { display: none; }
  .offer-tile,.offer-featured { flex: 0 0 78vw; min-height: 315px; scroll-snap-align: center; }
  .offer-tile:not(.offer-featured) { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 65px; }
  .offer-tile button { right: 18px; bottom: 18px; opacity: 1; transform: none; }
  .gta-skyline { top: -2vh; font-size: 95vw; }

  .mobile-dock { position: fixed; z-index: 50; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px 6px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(9,10,16,.84); box-shadow: 0 18px 55px rgba(0,0,0,.48); backdrop-filter: blur(20px); }
  .mobile-dock button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; color: rgba(255,255,255,.45); background: none; font: 650 8px var(--utility); }
  .mobile-dock button i { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 9px; font-style: normal; }
  .mobile-dock button.is-active { color: white; }
  .mobile-dock button.is-active i { background: linear-gradient(135deg,var(--ember),var(--pink),var(--violet)); box-shadow: 0 5px 14px rgba(255,79,163,.25); }

  .console-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 24px; }
  .console-dialog[open],.consultation-dialog[open] { display: block; overflow-y: auto; }
  .dialog-art { height: 220px; min-height: 0; }
  .dialog-body { min-height: auto; padding: 42px 24px 30px; }
  .console-dialog h2 { font-size: 48px; }
  .consultation-art { display: none; }
  .consultation-body { min-height: calc(100dvh - 20px); justify-content: flex-start; }
  #consultation-form { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .submit-action { width: 100%; }
  .editor-dialog .dialog-body { min-height: 570px; }
}

@media (max-width: 380px) {
  .screen-home .screen-inner { padding-top: 22px; }
  .home-copy h1 { font-size: 48px; }
  .home-description { -webkit-line-clamp: 2; }
  .game-card { flex-basis: 41vw; }
  .mode-nav { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .world-art { transform: none !important; }
}