:root {
  --bg: #f6fbff;
  --surface: #ffffff;
  --surface-soft: #eef5ff;
  --surface-alt: #f9fcff;
  --ink: #132033;
  --muted: #607189;
  --line: #d9e7f4;
  --accent: #1677ff;
  --accent-strong: #0d57c8;
  --accent-soft: #e9f2ff;
  --warm: #ff8f4a;
  --teal: #11a683;
  --shell: 1180px;
  --radius: 24px;
  --shadow: 0 20px 50px rgba(17, 34, 51, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", Aptos, "Trebuchet MS", sans-serif;
  line-height: 1.6;
  background:
    radial-gradient(circle at top left, rgba(22, 119, 255, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(17, 166, 131, 0.1), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.shell {
  width: min(var(--shell), calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(217, 231, 244, 0.9);
  backdrop-filter: blur(18px);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand strong {
  display: block;
  font-size: 1.08rem;
}

.brand small {
  display: block;
  color: var(--muted);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #5ea8ff);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(22, 119, 255, 0.28);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.inline-form {
  margin: 0;
}

.link-button,
.button,
.dash-button,
.mini-button {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(22, 119, 255, 0.24);
}

.button.small {
  padding: 10px 15px;
  font-size: 0.94rem;
}

.button.full {
  width: 100%;
}

.button.ghost,
.link-button {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.page-stack {
  display: grid;
  gap: 24px;
  padding: 24px 0 44px;
}

.home-stack {
  padding-top: 18px;
}

.launch-hero,
.dual-grid,
.play-layout,
.admin-grid {
  display: grid;
  gap: 22px;
}

.launch-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.spotlight-card,
.quick-panel,
.panel,
.game-card,
.metric-card,
.quick-launch-item,
.answer-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(217, 231, 244, 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.spotlight-card {
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(22, 119, 255, 0.08), rgba(255, 255, 255, 0.96)),
    #fff;
}

.launch-side {
  display: grid;
  gap: 16px;
}

.quick-panel,
.panel,
.game-card,
.metric-card,
.answer-card {
  padding: 22px;
}

.quick-launch-list,
.stack-list,
.comment-feed {
  display: grid;
  gap: 12px;
}

.quick-launch-item,
.list-link,
.comment-row {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface-alt);
}

.quick-launch-item span,
.list-link span,
.comment-row span,
.muted,
.saved-state,
.game-status {
  color: var(--muted);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-strong);
}

h1,
h2,
h3 {
  margin: 0 0 12px;
  line-height: 1.1;
  font-family: Georgia, "Times New Roman", serif;
}

h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.lead {
  font-size: 1.08rem;
}

.hero-actions,
.spotlight-meta,
.tag-row,
.panel-head,
.card-topline,
.comment-meta,
.toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.spotlight-meta {
  margin: 18px 0 10px;
  color: var(--muted);
}

.section-heading,
.page-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.card-grid,
.catalog-grid,
.answer-grid,
.admin-metrics,
.game-admin-grid {
  display: grid;
  gap: 18px;
}

.card-grid,
.catalog-grid,
.answer-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.play-grid .launch-card {
  height: 100%;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.84rem;
}

.pill.accent {
  background: rgba(255, 143, 74, 0.16);
  color: #c45d17;
}

.card-meta,
.fact-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.card-meta div,
.fact-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.plain-list,
.instruction-list {
  margin: 16px 0 0;
  padding-left: 18px;
}

.dual-grid,
.play-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.play-priority {
  padding: 24px;
}

.play-layout.game-launch {
  align-items: start;
}

.side-stack {
  display: grid;
  gap: 18px;
}

.game-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top center, rgba(94, 168, 255, 0.18), transparent 35%),
    linear-gradient(180deg, #102033 0%, #17273e 100%);
  color: #fff;
  min-height: 460px;
}

.game-stage {
  display: grid;
  place-items: center;
  min-height: 250px;
}

.game-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ad-slot {
  padding: 14px;
  border-radius: 20px;
  border: 1px dashed rgba(22, 119, 255, 0.24);
  background: rgba(233, 242, 255, 0.7);
}

.ad-slot.inline {
  margin-top: 10px;
}

.notice {
  padding: 14px 18px;
  border-radius: 18px;
  font-weight: 600;
}

.notice.error {
  background: rgba(255, 143, 74, 0.18);
  color: #b24c0b;
}

.notice.success {
  background: rgba(17, 166, 131, 0.14);
  color: #0a7c60;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  font-size: 0.92rem;
}

.breadcrumbs a {
  color: var(--accent-strong);
}

.breadcrumbs a::after {
  content: "/";
  margin-left: 12px;
  color: var(--muted);
}

.breadcrumbs a:last-child::after {
  display: none;
}

.text-link,
.list-link a {
  color: var(--accent-strong);
}

.comment-row,
.list-link {
  border: 1px solid var(--line);
  border-radius: 18px;
}

.code-block {
  margin: 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #0f1b2b;
  color: #eef5ff;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.pagination-bar,
.pagination-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pagination-bar {
  justify-content: space-between;
}

.pagination-summary {
  color: var(--muted);
  font-weight: 600;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-weight: 700;
}

.pagination-link.current {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: #fff;
}

.stack-form,
.comment-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.auth-shell {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
}

.auth-panel {
  width: min(560px, 100%);
}

.admin-metrics {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.metric-card strong {
  font-size: 1.8rem;
}

.game-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.game-flag-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-alt);
}

.site-footer {
  padding: 20px 0 34px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.footer-grid section {
  display: grid;
  gap: 8px;
}

.footer-bottom {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-alt);
}

.starter-shell {
  width: min(560px, 100%);
}

.starter-card {
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pulse-grid,
.reactor-grid {
  display: grid;
  gap: 12px;
}

.pulse-grid {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}

.pulse-pad,
.reactor-tile,
.dash-button,
.flip-card,
.mini-button {
  border: 0;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.pulse-pad {
  height: 110px;
  border-radius: 24px;
  opacity: 0.56;
}

.pulse-pad.active {
  opacity: 1;
  transform: scale(1.03);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.lane-board {
  position: relative;
  width: min(320px, 100%);
  height: 320px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
}

.lane {
  position: relative;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.runner,
.obstacle {
  position: absolute;
  left: 50%;
  width: 62%;
  transform: translateX(-50%);
  border-radius: 16px;
}

.runner {
  bottom: 12px;
  height: 34px;
  background: linear-gradient(135deg, #ffd166, #ef476f);
}

.obstacle {
  height: 30px;
  background: linear-gradient(135deg, #7ae582, #23b5d3);
}

.dash-button,
.mini-button {
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 10px;
  width: min(320px, 100%);
}

.flip-card {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
}

.flip-card.open,
.flip-card.matched {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.96), rgba(255, 143, 74, 0.96));
}

.reactor-grid {
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  width: min(310px, 100%);
}

.reactor-tile {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.42);
  font-size: 1.1rem;
}

.reactor-tile.live {
  background: linear-gradient(135deg, rgba(122, 229, 130, 0.92), rgba(35, 181, 211, 0.92));
  color: #102024;
  transform: scale(1.04);
}

.signal-sprint-shell,
.signal-sprint-hud,
.signal-pads {
  display: grid;
  gap: 12px;
}

.signal-sprint-hud {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.signal-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.signal-sprint-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.signal-sprint-board {
  position: relative;
  width: min(520px, 100%);
  height: 340px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(8, 16, 27, 0.18)),
    linear-gradient(90deg, rgba(105, 210, 231, 0.08) 0%, rgba(243, 134, 48, 0.08) 25%, rgba(167, 219, 216, 0.08) 50%, rgba(246, 215, 67, 0.08) 75%);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.signal-lane-overlay,
.signal-note-layer {
  position: absolute;
  inset: 0;
}

.signal-lane-overlay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.signal-lane-overlay::before,
.signal-lane-overlay::after {
  content: "";
}

.signal-lane-overlay > * {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.signal-lane-overlay {
  background-image:
    linear-gradient(90deg, transparent 24.8%, rgba(255, 255, 255, 0.08) 25%, transparent 25.2%, transparent 49.8%, rgba(255, 255, 255, 0.08) 50%, transparent 50.2%, transparent 74.8%, rgba(255, 255, 255, 0.08) 75%, transparent 75.2%);
}

.signal-hit-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.18));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
}

.signal-note {
  position: absolute;
  width: calc(25% - 16px);
  max-width: 108px;
  height: 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.signal-pads {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.signal-pad {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  color: #fff;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.signal-pad strong {
  font-size: 1.2rem;
}

.signal-pad span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.signal-pad.is-live {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(180deg, var(--lane-color), rgba(255, 255, 255, 0.12));
  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.18);
}

.steel-bastion-shell,
.steel-bastion-hud,
.steel-bastion-console,
.steel-control-grid,
.steel-action-strip,
.steel-bastion-intel,
.steel-dpad {
  display: grid;
  gap: 12px;
}

.steel-bastion-hud {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.steel-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.steel-bastion-briefing {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.steel-bastion-stage {
  width: min(720px, 100%);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(8, 16, 27, 0.12));
}

.steel-bastion-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.steel-bastion-intel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.steel-action-strip {
  grid-template-columns: repeat(3, minmax(0, auto));
  align-items: center;
  justify-content: center;
}

.steel-fire-button {
  min-width: 140px;
}

.steel-control-grid {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  align-items: stretch;
}

.steel-helper {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
}

.steel-helper strong {
  color: #fff;
  font-size: 1rem;
}

.steel-dpad {
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: stretch;
}

.steel-pad-button {
  min-height: 68px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.steel-pad-button.is-held,
.steel-fire-button.is-held {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 26px rgba(255, 255, 255, 0.12);
}

.steel-pad-button.is-held {
  background: linear-gradient(180deg, rgba(94, 168, 255, 0.38), rgba(255, 255, 255, 0.08));
}

.steel-fire-button.is-held {
  background: linear-gradient(135deg, #ff8f4a, #ff6b45);
}

.vault-rivals-shell,
.vault-rivals-hud,
.vault-rivals-intel,
.vault-control-shell,
.vault-main-actions,
.vault-player-panels,
.vault-panel,
.vault-panel-head,
.vault-action-column,
.vault-dpad {
  display: grid;
  gap: 12px;
}

.vault-rivals-hud {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vault-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.vault-rivals-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.vault-rivals-stage {
  width: min(720px, 100%);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(8, 16, 27, 0.12));
}

.vault-rivals-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.vault-rivals-intel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

.vault-player-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vault-panel {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vault-panel-head strong {
  color: #fff;
}

.vault-panel-head span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.vault-main-actions {
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
}

.vault-dpad {
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.vault-action-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vault-button {
  min-height: 66px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.vault-action-button {
  background: linear-gradient(180deg, rgba(255, 193, 109, 0.28), rgba(255, 255, 255, 0.06));
}

.vault-button.is-held {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 26px rgba(255, 255, 255, 0.12);
}

.arcade-card,
.arcade-head,
.arcade-body,
.arcade-toolbar,
.choice-grid,
.odd-grid,
.pair-grid-pack,
.trajectory-sliders,
.set-grid,
.code-pad,
.code-current,
.code-history {
  display: grid;
  gap: 12px;
}

.arcade-card {
  width: min(680px, 100%);
}

.arcade-head {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.arcade-title {
  margin-bottom: 6px;
}

.arcade-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.arcade-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.arcade-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}

.arcade-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.86);
}

.arcade-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quiz-choice,
.odd-cell,
.pair-card,
.set-card,
.code-slot,
.flight-cell,
.trajectory-track,
.range-field {
  border-radius: 18px;
}

.quiz-choice,
.odd-cell,
.pair-card,
.set-card {
  min-height: 64px;
}

.odd-cell,
.pair-card {
  font-size: 1.35rem;
}

.is-wrong {
  outline: 2px solid rgba(255, 143, 74, 0.8);
}

.pair-card.is-open,
.pair-card.is-matched,
.set-card.is-selected {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.96), rgba(255, 143, 74, 0.96));
  color: #102033;
}

.trajectory-meter {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.trajectory-track {
  position: relative;
  height: 12px;
  background: rgba(255, 255, 255, 0.16);
}

.trajectory-target,
.trajectory-impact {
  position: absolute;
  top: -5px;
  width: 14px;
  height: 22px;
  border-radius: 999px;
  transform: translateX(-50%);
}

.trajectory-target {
  background: #7ae582;
}

.trajectory-impact {
  background: #ffd166;
}

.trajectory-sliders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.range-field {
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.range-label {
  font-weight: 700;
}

.flight-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 10px;
}

.flight-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.45rem;
}

.flight-cell.is-player {
  background: rgba(17, 166, 131, 0.3);
}

.flight-cell.is-hazard {
  background: rgba(255, 255, 255, 0.16);
}

.flight-cell.is-crash {
  background: rgba(255, 143, 74, 0.44);
}

.set-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.set-card {
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.set-face {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.set-mark {
  font-size: 1.35rem;
  line-height: 1;
}

.code-current {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.code-slot {
  display: grid;
  place-items: center;
  min-height: 58px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
}

.code-pad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.code-history {
  max-height: 180px;
  overflow: auto;
}

.code-row {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 860px) {
  .launch-hero,
  .dual-grid,
  .play-layout,
  .admin-grid,
  .section-heading,
  .page-intro {
    grid-template-columns: 1fr;
  }

  .nav-row {
    padding: 10px 0;
  }

  .pagination-bar {
    align-items: flex-start;
  }

  .game-shell {
    min-height: 390px;
  }

  .lane-board,
  .flip-grid,
  .reactor-grid,
  .signal-sprint-board,
  .arcade-card,
  .choice-grid,
  .trajectory-sliders,
  .set-grid,
  .code-pad {
    width: 100%;
  }

  .signal-sprint-hud,
  .signal-pads,
  .steel-bastion-hud,
  .steel-bastion-intel,
  .steel-action-strip,
  .steel-control-grid,
  .vault-rivals-hud,
  .vault-rivals-intel,
  .vault-main-actions,
  .vault-player-panels,
  .vault-action-column,
  .arcade-toolbar,
  .choice-grid,
  .trajectory-sliders,
  .set-grid,
  .code-pad {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
}