:root {
  color-scheme: dark;
  --bg: #050407;
  --panel: rgb(15 14 20 / 88%);
  --panel-2: rgb(30 26 36 / 82%);
  --line: rgb(246 201 95 / 30%);
  --text: #fff4d8;
  --muted: #b9ad9f;
  --gold: #ffd66f;
  --teal: #46e7ff;
  --red: #dc2835;
  --blue: #1d6cff;
  --green: #8cffba;
  --violet: #8f67ff;
  --black: #0a0c10;
  --shadow: 0 24px 70px rgb(0 0 0 / 55%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: -9vh -9vw;
  z-index: 0;
  background:
    linear-gradient(rgb(5 4 7 / 58%), rgb(5 4 7 / 86%)),
    radial-gradient(circle at 50% 50%, rgb(255 214 111 / 18%), transparent 38%),
    url("assets/source-orb-reference.png") center / cover no-repeat,
    conic-gradient(from 45deg at 50% 50%, rgb(220 40 53 / 16%), rgb(29 108 255 / 18%), rgb(255 214 111 / 14%), rgb(5 4 7 / 0), rgb(220 40 53 / 16));
  filter: saturate(1.18) contrast(1.1);
  transform: perspective(900px) rotateX(4deg) scale(1.08);
  transform-origin: center;
}

body::after {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 0 38%, rgb(70 231 255 / 10%) 44%, transparent 52% 100%),
    radial-gradient(circle at 15% 10%, rgb(70 231 255 / 18%), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgb(255 214 111 / 14%), transparent 25rem),
    linear-gradient(rgb(0 0 0 / 8%) 50%, rgb(255 214 111 / 3%) 50%);
  background-size: auto, auto, auto, 100% 4px;
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: energySweep 8s linear infinite;
}

body.arcade-gate-pending:not(.arcade-entered) .app-shell,
.source-arcade-wordpress.gate-pending:not(.arcade-entered) .app-shell {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
}

.arcade-gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgb(5 4 7 / 28%), rgb(5 4 7 / 74%)),
    url("assets/source-orb-reference.png") center / cover no-repeat;
  cursor: pointer;
}

.arcade-gate[hidden] {
  display: none;
}

.gate-orb {
  position: absolute;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 28%, #fff8bf 0 3%, #ffd66f 4% 18%, #7a2b10 43%, #07112a 75%, #020205 100%);
  box-shadow:
    0 0 70px rgb(255 214 111 / 34%),
    0 0 120px rgb(70 231 255 / 18%),
    inset 0 18px 32px rgb(255 255 255 / 18%),
    inset 0 -42px 52px rgb(0 0 0 / 50%);
  animation: gateOrbFloat 5s ease-in-out infinite;
}

.gate-orb::before,
.gate-orb::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  pointer-events: none;
}

.gate-orb::before {
  background:
    conic-gradient(from 0deg, transparent, rgb(255 214 111 / 50%), transparent, rgb(70 231 255 / 34%), transparent);
  filter: blur(8px);
  animation: slowSpin 9s linear infinite;
}

.gate-orb::after {
  inset: 12%;
  border: 1px solid rgb(255 244 216 / 20%);
  box-shadow: inset 0 0 50px rgb(70 231 255 / 16%);
}

.gate-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
  text-shadow: 0 0 24px rgb(0 0 0 / 82%), 0 0 32px rgb(255 214 111 / 20%);
}

.gate-copy h1 {
  font-size: clamp(3.4rem, 12vw, 9.5rem);
}

.gate-enter {
  border: 1px solid rgb(255 214 111 / 74%);
  background:
    radial-gradient(circle at 50% 0%, rgb(255 244 216 / 20%), transparent 46%),
    rgb(5 4 7 / 78%);
  color: var(--text);
  min-height: 54px;
  padding: 0 28px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 0 30px rgb(255 214 111 / 24%);
  animation: gatePromptFloat 1.8s ease-in-out infinite;
}

body.arcade-entered .arcade-gate,
.source-arcade-wordpress.arcade-entered .arcade-gate {
  opacity: 0;
  pointer-events: none;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.game-rail {
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgb(255 214 111 / 6%), transparent 35%),
    rgb(5 4 7 / 88%);
  padding: 22px;
  box-shadow: inset -1px 0 0 rgb(70 231 255 / 12%);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 214 111 / 72%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #fff8bf 0 4%, #ffd66f 5% 22%, #7a2b10 44%, #08112a 70%, #020205 100%);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 24px rgb(255 214 111 / 38%), inset 0 0 18px rgb(255 255 255 / 20%);
  animation: orbPulse 3.8s ease-in-out infinite;
}

.brand strong,
.brand small {
  display: block;
}

.brand small,
.eyebrow,
.panel-label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.game-tabs {
  display: grid;
  gap: 8px;
}

.tab-button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 11px;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.tab-button[aria-current="true"],
.tab-button:hover {
  border-color: var(--line);
  background:
    linear-gradient(90deg, rgb(255 214 111 / 10%), rgb(70 231 255 / 6%)),
    var(--panel);
  color: var(--text);
  transform: translateX(3px);
  box-shadow: 0 0 20px rgb(255 214 111 / 12%);
}

.tab-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgb(255 244 216 / 90%), rgb(255 214 111 / 85%) 18%, rgb(101 29 16 / 70%) 46%, rgb(8 17 42 / 96%) 80%);
  color: var(--gold);
  font-size: 0.78rem;
  box-shadow: inset 0 0 10px rgb(255 214 111 / 30%);
  animation: tinyFloat 4.5s ease-in-out infinite;
}

.main-stage {
  min-width: 0;
  padding: 30px;
}

.stage-header,
.play-layout {
  max-width: 1180px;
  margin: 0 auto;
}

.stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

h1 {
  margin: 4px 0 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  text-shadow: 0 0 26px rgb(255 214 111 / 26%), 0 0 42px rgb(70 231 255 / 14%);
}

.eyebrow {
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.icon-button,
.command-button,
.choice-button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  min-height: 42px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.icon-button {
  width: 42px;
  font-weight: 800;
}

.command-button,
.choice-button {
  padding: 0 14px;
}

.icon-button:hover,
.command-button:hover,
.choice-button:hover,
.choice-button.active {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 18px rgb(255 214 111 / 18%);
  transform: translateY(-1px);
}

.play-layout {
  display: grid;
  grid-template-columns: minmax(320px, 760px) minmax(260px, 340px);
  gap: 24px;
  align-items: start;
}

.board-zone {
  display: grid;
  place-items: center;
  min-height: 620px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 45%, rgb(255 214 111 / 11%), transparent 19rem),
    linear-gradient(90deg, rgb(70 231 255 / 8%) 1px, transparent 1px 44px),
    linear-gradient(0deg, rgb(255 214 111 / 7%) 1px, transparent 1px 44px),
    linear-gradient(135deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 44px),
    var(--panel);
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.board-zone::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgb(255 214 111 / 12%);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, rgb(255 214 111 / 13%), transparent, rgb(70 231 255 / 13%), transparent);
  opacity: 0.5;
  pointer-events: none;
  animation: slowSpin 28s linear infinite;
}

.board-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 35%, rgb(255 244 216 / 10%) 42%, transparent 52% 100%);
  transform: translateX(-120%);
  animation: panelGlint 5.5s ease-in-out infinite;
  pointer-events: none;
}

.board-zone > * {
  position: relative;
  z-index: 1;
}

.status-panel {
  display: grid;
  gap: 14px;
}

.status-card,
.rules-box,
.score-grid,
.control-stack {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgb(255 214 111 / 7%), transparent 45%),
    var(--panel);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.status-card strong {
  display: block;
  margin-top: 8px;
  line-height: 1.35;
}

.source-points-card {
  border: 1px solid rgb(255 214 111 / 34%);
  background:
    radial-gradient(circle at 12% 15%, rgb(255 214 111 / 15%), transparent 9rem),
    linear-gradient(135deg, rgb(70 231 255 / 8%), transparent 48%),
    var(--panel);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 22px rgb(255 214 111 / 9%);
  position: relative;
  overflow: hidden;
}

.advanced-arcade-wrap {
  width: 100%;
  display: grid;
  gap: 14px;
}

.advanced-arcade-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid rgb(70 231 255 / 22%);
  background:
    radial-gradient(circle at 50% 50%, rgb(70 231 255 / 10%), transparent 46%),
    rgb(5 4 7 / 70%);
  overflow: hidden;
}

.advanced-arcade-stage canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

.advanced-character-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
}

.advanced-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.advanced-character-button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgb(255 214 111 / 18%);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--fighter-accent) 32%, transparent), transparent 50%),
    rgb(5 4 7 / 62%);
  color: var(--text);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.advanced-character-button[aria-pressed="true"],
.advanced-character-button:hover {
  border-color: var(--fighter-accent);
  color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--fighter-accent) 42%, transparent);
}

.advanced-character-button img {
  width: 34px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgb(255 244 216 / 24%);
}

.advanced-character-button span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 800;
}

.source-points-card::after {
  content: "";
  position: absolute;
  inset: 14px 14px auto auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 28%, #fff8bf 0 7%, #ffd66f 8% 26%, #7a2b10 52%, #07112a 84%, #020205 100%);
  box-shadow: 0 0 18px rgb(255 214 111 / 45%), inset 0 0 12px rgb(255 255 255 / 16%);
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
}

.source-points-card > * {
  position: relative;
  z-index: 1;
}

.source-points-card.victory-nudge {
  border-color: var(--gold);
  animation: pointBanked 880ms ease-out;
}

.source-points-card.connected {
  border-color: rgb(70 231 255 / 38%);
}

.source-points-title {
  display: block;
  margin-top: 8px;
  color: var(--text);
  line-height: 1.25;
}

.source-points-copy {
  margin: 8px 0 12px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.source-points-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  padding: 0 10px;
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.source-link:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px rgb(255 214 111 / 16%);
  transform: translateY(-1px);
}

.score-grid,
.control-stack {
  display: grid;
  gap: 10px;
}

.score-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.score-row strong {
  color: var(--text);
}

.rules-box {
  color: var(--text);
  line-height: 1.5;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.affinity-controls {
  display: grid;
  gap: 10px;
}

.affinity-field {
  display: grid;
  gap: 6px;
}

.affinity-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affinity-picker {
  position: relative;
  z-index: 12;
}

.affinity-picker[open] {
  z-index: 30;
}

.affinity-summary,
.affinity-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.affinity-summary {
  padding: 0 10px;
  list-style: none;
}

.affinity-summary::-webkit-details-marker {
  display: none;
}

.affinity-summary::after {
  content: "v";
  margin-left: auto;
  color: var(--gold);
  font-size: 0.8rem;
}

.affinity-menu {
  position: absolute;
  inset: calc(100% + 5px) 0 auto 0;
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: rgb(10 9 13 / 98%);
  box-shadow: 0 18px 42px rgb(0 0 0 / 52%), 0 0 24px rgb(255 214 111 / 12%);
}

.affinity-option {
  border: 0;
  border-bottom: 1px solid rgb(246 201 95 / 16%);
  padding: 8px 10px;
}

.affinity-option:hover {
  background: linear-gradient(90deg, rgb(255 214 111 / 13%), rgb(70 231 255 / 8%));
  color: var(--gold);
}

.affinity-menu-content {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.affinity-menu-content img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgb(255 214 111 / 45%));
}

.standalone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.standalone-link:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.rules-title {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.rules-goal,
.rules-summary {
  margin: 0 0 10px;
}

.rules-goal {
  color: var(--text);
  font-weight: 800;
}

.rules-list {
  margin: 10px 0 0;
  padding-left: 20px;
}

.rules-list li + li {
  margin-top: 6px;
}

.grid {
  display: grid;
  gap: 8px;
  width: min(100%, var(--board-size, 540px));
  aspect-ratio: 1;
  align-items: stretch;
  justify-items: stretch;
}

.cell {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 214 111 / 22%);
  background:
    radial-gradient(circle at 50% 50%, rgb(70 231 255 / 8%), transparent 52%),
    #09090f;
  color: var(--text);
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.cell:disabled {
  cursor: default;
}

.cell:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow: inset 0 0 20px rgb(255 214 111 / 12%), 0 0 18px rgb(255 214 111 / 12%);
}

.glyph {
  display: grid;
  place-items: center;
  width: min(74%, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(1.3rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  position: relative;
  background:
    radial-gradient(circle at 48% 32%, #fff8bf 0 5%, var(--orb-core, #ffd66f) 6% 25%, var(--orb-mid, #6f230e) 47%, var(--orb-dark, #07112a) 78%, #020205 100%);
  box-shadow:
    0 0 22px var(--orb-glow, rgb(255 214 111 / 55%)),
    inset 0 0 14px rgb(255 255 255 / 22%),
    inset 0 -16px 24px rgb(0 0 0 / 34%);
  overflow: hidden;
}

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

.glyph::before,
.glyph::after,
.piece::before,
.piece::after,
.disc::before,
.disc::after,
.checker::before,
.checker::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  pointer-events: none;
}

.glyph::before,
.piece::before,
.disc::before,
.checker::before {
  border: 1px solid rgb(255 244 216 / 42%);
  background:
    linear-gradient(30deg, transparent 48%, rgb(255 244 216 / 36%) 49% 51%, transparent 52%),
    linear-gradient(150deg, transparent 48%, rgb(255 244 216 / 26%) 49% 51%, transparent 52%),
    radial-gradient(circle, transparent 45%, rgb(255 244 216 / 24%) 46% 48%, transparent 49%);
}

.glyph::after,
.piece::after,
.disc::after,
.checker::after {
  inset: -12%;
  background: conic-gradient(from 0deg, transparent, rgb(255 214 111 / 42%), transparent, rgb(70 231 255 / 35%), transparent);
  filter: blur(6px);
  opacity: 0.75;
  z-index: -1;
}

.glyph.sun,
.piece.sun {
  color: #fff5b0;
  --orb-core: #ffd66f;
  --orb-mid: #74220f;
  --orb-dark: #07112a;
  --orb-glow: rgb(255 214 111 / 62%);
}

.glyph.rift,
.piece.rift {
  color: #c5fbff;
  --orb-core: #46e7ff;
  --orb-mid: #153f8b;
  --orb-dark: #150616;
  --orb-glow: rgb(70 231 255 / 58%);
}

.connect-grid {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  aspect-ratio: 7 / 6;
  --board-size: 680px;
}

.connect-grid .cell {
  border-radius: 50%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 44%, rgb(255 214 111 / 12%), transparent 46%),
    #07070d;
}

.piece {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 30%, #fff8bf 0 5%, var(--orb-core, currentColor) 6% 24%, var(--orb-mid, #55200b) 44%, var(--orb-dark, #06102b) 76%, #010204 100%);
  box-shadow:
    0 0 20px var(--orb-glow, rgb(255 214 111 / 50%)),
    inset 0 8px 12px rgb(255 255 255 / 24%),
    inset 0 -14px 18px rgb(0 0 0 / 38%);
  position: relative;
  overflow: hidden;
}

.othello-grid,
.checkers-grid {
  grid-template-columns: repeat(8, 1fr);
}

.othello-grid .cell,
.checkers-grid .cell,
.battleship-grid .cell {
  aspect-ratio: 1;
}

.othello-grid .cell.valid::after {
  content: "";
  width: 26%;
  height: 26%;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

.disc {
  display: grid;
  place-items: center;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 20%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px var(--orb-glow, rgb(255 214 111 / 40%)), inset 0 0 18px rgb(255 255 255 / 15%);
}

.disc.light {
  --orb-glow: rgb(70 231 255 / 52%);
  background:
    radial-gradient(circle at 46% 30%, #ffffff 0 6%, #c8fbff 7% 25%, #1d6cff 52%, #06102b 100%);
}

.disc.dark {
  --orb-glow: rgb(255 214 111 / 46%);
  background:
    radial-gradient(circle at 46% 30%, #fff0b6 0 5%, #ffd66f 6% 20%, #721b14 48%, #030307 100%);
}

.battleship-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.battlefield {
  position: relative;
}

.fleet-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.battleship-grid {
  grid-template-columns: repeat(6, 1fr);
  --board-size: 320px;
  padding: 10px;
  gap: 5px;
  border: 1px solid rgb(70 231 255 / 18%);
  background:
    linear-gradient(90deg, rgb(255 244 216 / 4%) 1px, transparent 1px 16.66%),
    linear-gradient(0deg, rgb(255 244 216 / 4%) 1px, transparent 1px 16.66%),
    radial-gradient(circle at 45% 36%, rgb(70 231 255 / 16%), transparent 68%),
    #07121f;
  box-shadow: inset 0 0 30px rgb(29 108 255 / 12%), 0 18px 40px rgb(0 0 0 / 28%);
}

.ship {
  overflow: visible;
}

.hit {
  background:
    radial-gradient(circle at 50% 55%, rgb(255 214 111 / 16%), transparent 42%),
    linear-gradient(135deg, rgb(90 8 12 / 48%), transparent),
    #0a0b11;
  box-shadow: inset 0 0 18px rgb(220 40 53 / 24%), 0 0 24px rgb(220 40 53 / 34%);
}

.water-splash,
.miss::after {
  content: "";
  display: block;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  border: 2px solid rgb(70 231 255 / 72%);
  box-shadow: 0 0 18px rgb(70 231 255 / 34%);
  animation: splashRing 520ms ease-out;
}

.hit-flare {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff8bf 0 9%, #ffd66f 12% 22%, rgb(220 40 53 / 78%) 38%, transparent 70%);
  filter: blur(1px);
  opacity: 0.92;
  pointer-events: none;
  animation: hitFlare 760ms ease-out;
}

.water {
  background:
    linear-gradient(135deg, rgb(29 108 255 / 18%), transparent),
    radial-gradient(circle at 50% 50%, rgb(70 231 255 / 12%), transparent 52%),
    linear-gradient(0deg, rgb(255 255 255 / 4%) 1px, transparent 1px 9px),
    #0f1722;
}

.enemy-water {
  background:
    radial-gradient(circle at 40% 32%, rgb(143 103 255 / 14%), transparent 54%),
    linear-gradient(135deg, rgb(8 8 12 / 76%), rgb(9 20 31 / 92%)),
    #07080d;
}

.ship-sprite {
  position: absolute;
  inset: 10%;
  display: block;
  transform: translateY(3%);
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 42%));
  pointer-events: none;
}

.ki-fleet-token {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  pointer-events: none;
}

.ki-fleet-token.affinity-token img {
  inset: -10%;
  width: 120%;
  height: 120%;
}

.player-fleet-token {
  box-shadow:
    0 0 18px rgb(70 231 255 / 30%),
    inset 0 6px 10px rgb(255 255 255 / 18%),
    inset 0 -12px 18px rgb(0 0 0 / 42%);
}

.enemy-fleet-token {
  filter: saturate(0.92) brightness(0.82) drop-shadow(0 0 12px rgb(143 103 255 / 36%));
  box-shadow:
    0 0 18px rgb(143 103 255 / 34%),
    inset 0 6px 10px rgb(255 255 255 / 12%),
    inset 0 -12px 18px rgb(0 0 0 / 58%);
}

.ship-hull,
.ship-mast,
.ship-sail {
  position: absolute;
  display: block;
}

.ship-hull {
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 28%;
  border-radius: 12% 12% 44% 44%;
  clip-path: polygon(5% 0, 95% 0, 82% 100%, 18% 100%);
}

.ship-mast {
  left: 48%;
  bottom: 31%;
  width: 5%;
  height: 52%;
  border-radius: 999px;
}

.ship-sail {
  bottom: 38%;
  width: 33%;
  height: 42%;
  clip-path: polygon(100% 0, 0 52%, 100% 100%);
}

.sail-main {
  left: 16%;
}

.sail-aft {
  right: 15%;
  transform: scaleX(-1);
}

.wooden-ship .ship-hull {
  background:
    linear-gradient(90deg, rgb(76 35 18 / 96%), rgb(166 94 44 / 96%) 45%, rgb(64 29 14 / 96%)),
    repeating-linear-gradient(0deg, rgb(255 214 111 / 14%) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 -8px 9px rgb(0 0 0 / 35%), 0 0 9px rgb(255 214 111 / 24%);
}

.wooden-ship .ship-mast {
  background: linear-gradient(#ffd66f, #6b371b);
}

.wooden-ship .ship-sail {
  background:
    linear-gradient(135deg, rgb(255 244 216 / 94%), rgb(203 170 103 / 78%)),
    repeating-linear-gradient(90deg, rgb(108 63 31 / 22%) 0 2px, transparent 2px 7px);
  border: 1px solid rgb(255 214 111 / 38%);
}

.cursed-ship {
  filter: drop-shadow(0 0 10px rgb(143 103 255 / 36%)) drop-shadow(0 6px 5px rgb(0 0 0 / 68%));
}

.cursed-ship .ship-hull {
  background:
    linear-gradient(90deg, #050507, #19101d 48%, #020204),
    repeating-linear-gradient(0deg, rgb(143 103 255 / 18%) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 -8px 10px rgb(0 0 0 / 65%), 0 0 14px rgb(143 103 255 / 24%);
}

.cursed-ship .ship-hull::after {
  content: "";
  position: absolute;
  inset: -18% 12% 22%;
  background:
    linear-gradient(60deg, transparent 35%, rgb(220 40 53 / 78%) 36% 39%, transparent 40%),
    linear-gradient(-60deg, transparent 47%, rgb(70 231 255 / 32%) 48% 51%, transparent 52%);
}

.cursed-ship .ship-mast {
  background: linear-gradient(#2c2234, #010102);
  transform: rotate(-8deg);
  transform-origin: bottom;
}

.cursed-ship .ship-sail {
  background:
    linear-gradient(135deg, #07070a, #221027 60%, #030304),
    radial-gradient(circle at 50% 58%, rgb(220 40 53 / 28%), transparent 42%);
  border: 1px solid rgb(143 103 255 / 28%);
  clip-path: polygon(100% 0, 6% 44%, 48% 58%, 0 75%, 100% 100%);
}

.enemy-ship-shadow {
  position: absolute;
  inset: 22% 16%;
  opacity: 0.22;
  filter: drop-shadow(0 0 10px rgb(143 103 255 / 38%));
  pointer-events: none;
}

.enemy-ship-shadow,
.enemy-ship-shadow span {
  display: block;
}

.enemy-ship-shadow::before,
.enemy-ship-shadow::after,
.enemy-ship-shadow span {
  content: "";
  position: absolute;
  background: #030306;
}

.enemy-ship-shadow::before {
  left: 4%;
  right: 4%;
  bottom: 8%;
  height: 34%;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  border-radius: 12% 12% 44% 44%;
}

.enemy-ship-shadow::after {
  left: 48%;
  bottom: 34%;
  width: 5%;
  height: 56%;
  transform: rotate(-10deg);
}

.enemy-ship-shadow span {
  left: 18%;
  bottom: 42%;
  width: 58%;
  height: 42%;
  clip-path: polygon(92% 0, 0 54%, 34% 62%, 4% 100%, 100% 100%);
  background: linear-gradient(135deg, #020204, #180b1d);
}

.checkers-grid .cell.light-square {
  background:
    linear-gradient(135deg, rgb(255 214 111 / 10%), transparent),
    #201a22;
}

.checkers-grid .cell.dark-square {
  background:
    linear-gradient(135deg, rgb(70 231 255 / 8%), transparent),
    #07070d;
}

.checker {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 18%);
  background:
    radial-gradient(circle at 48% 30%, #fff8bf 0 5%, var(--orb-core, currentColor) 6% 24%, var(--orb-mid, #55200b) 44%, var(--orb-dark, #06102b) 76%, #010204 100%);
  box-shadow:
    0 0 20px var(--orb-glow, rgb(255 214 111 / 50%)),
    inset 0 8px 12px rgb(255 255 255 / 22%),
    inset 0 -14px 18px rgb(0 0 0 / 40%);
  position: relative;
  overflow: hidden;
}

.affinity-token img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 7px rgb(255 244 216 / 44%));
  animation: tinyFloat 4.5s ease-in-out infinite;
}

.checker.affinity-token img {
  width: 78%;
  height: 78%;
}

.glyph.affinity-token,
.piece.affinity-token,
.ki-fleet-token.affinity-token {
  background:
    radial-gradient(circle at 34% 22%, rgb(255 255 255 / 48%) 0 5%, transparent 11%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 4%) 0 54%, rgb(0 0 0 / 22%) 78%, rgb(0 0 0 / 52%) 100%),
    rgb(5 5 8 / 38%);
  border: 1px solid rgb(255 244 216 / 22%);
}

.glyph.affinity-token img,
.piece.affinity-token img,
.ki-fleet-token.affinity-token img {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  max-width: none;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  animation: orbSurfaceDrift 7s ease-in-out infinite;
  filter:
    saturate(1.18)
    contrast(1.08)
    drop-shadow(0 0 8px rgb(255 244 216 / 20%));
}

.glyph.affinity-token::before,
.piece.affinity-token::before,
.ki-fleet-token.affinity-token::before {
  inset: 0;
  z-index: 3;
  border: 0;
  background:
    radial-gradient(circle at 31% 20%, rgb(255 255 255 / 52%) 0 7%, rgb(255 255 255 / 18%) 8% 14%, transparent 25%),
    radial-gradient(circle at 62% 70%, transparent 0 48%, rgb(0 0 0 / 24%) 78%, rgb(0 0 0 / 46%) 100%),
    linear-gradient(135deg, rgb(255 255 255 / 14%), transparent 30% 62%, rgb(0 0 0 / 22%));
  mix-blend-mode: screen;
}

.glyph.affinity-token::after,
.piece.affinity-token::after,
.ki-fleet-token.affinity-token::after {
  inset: -9%;
  z-index: 0;
  opacity: 0.88;
}

.disc.affinity-token,
.checker.affinity-token {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 5%), transparent 52%),
    #050507;
  border-color: rgb(255 244 216 / 18%);
}

.disc.affinity-token img,
.checker.affinity-token img {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  max-width: none;
  object-fit: contain;
  border-radius: 50%;
  z-index: 2;
  animation: tinyFloat 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 9px rgb(255 244 216 / 30%));
}

.disc.affinity-token::before,
.checker.affinity-token::before {
  inset: 6%;
  z-index: 3;
  border: 0;
  background:
    radial-gradient(circle at 32% 20%, rgb(255 255 255 / 34%) 0 8%, transparent 24%),
    linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 52%, rgb(0 0 0 / 26%));
}

.connect-grid .piece.affinity-token {
  width: 86%;
}

.checker.sun {
  color: var(--gold);
  --orb-core: #ffd66f;
  --orb-mid: #74220f;
  --orb-dark: #07112a;
  --orb-glow: rgb(255 214 111 / 58%);
}

.checker.rift {
  color: var(--teal);
  --orb-core: #46e7ff;
  --orb-mid: #153f8b;
  --orb-dark: #150616;
  --orb-glow: rgb(70 231 255 / 54%);
}

.cell.selected {
  outline: 3px solid var(--gold);
  outline-offset: -5px;
}

.cell.move-target::after {
  content: "";
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--gold);
}

.minesweeper-grid,
.memory-grid,
.fusion-grid {
  grid-template-columns: repeat(4, 1fr);
}

.minesweeper-grid,
.snake-grid {
  --board-size: 620px;
}

.minesweeper-grid {
  grid-template-columns: repeat(8, 1fr);
}

.relic-cell {
  font-weight: 900;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
}

.relic-cell.revealed {
  background:
    radial-gradient(circle, rgb(255 214 111 / 14%), transparent 62%),
    #16131a;
  color: var(--gold);
  animation: tilePop 180ms ease-out;
}

.relic-cell.flagged {
  color: var(--teal);
  text-shadow: 0 0 14px rgb(70 231 255 / 72%);
}

.relic-cell.mine {
  background:
    radial-gradient(circle, rgb(220 40 53 / 35%), transparent 64%),
    #16060a;
}

.mini-orb {
  display: inline-block;
  width: 52%;
  height: 52%;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 30%, #fff8bf 0 7%, #ffd66f 8% 27%, #7a2b10 48%, #07112a 80%, #020205 100%);
  box-shadow: 0 0 18px rgb(255 214 111 / 58%), inset 0 0 12px rgb(255 255 255 / 22%);
  position: relative;
  animation: orbPulse 2.6s ease-in-out infinite;
}

.mini-orb.danger {
  background:
    radial-gradient(circle at 48% 30%, #fff8bf 0 7%, #ff6f6f 8% 27%, #dc2835 48%, #080208 85%);
  box-shadow: 0 0 22px rgb(220 40 53 / 70%);
}

.anti-relic-orb {
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 22%, rgb(255 255 255 / 72%) 0 7%, transparent 15%),
    radial-gradient(circle at 50% 50%, #ffffff 0 42%, #b7b7b7 68%, #111111 100%);
  box-shadow:
    0 0 24px rgb(255 255 255 / 22%),
    0 0 16px rgb(0 0 0 / 54%),
    inset 0 8px 12px rgb(255 255 255 / 32%),
    inset 0 -18px 24px rgb(0 0 0 / 46%);
  animation: orbPulse 2.6s ease-in-out infinite;
}

.anti-relic-orb img {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  border-radius: 50%;
  filter: contrast(1.12) brightness(1.02) drop-shadow(0 0 8px rgb(255 255 255 / 16%));
}

.anti-relic-orb::before,
.anti-relic-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.anti-relic-orb::before {
  z-index: 2;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 78%) 0 7%, rgb(255 255 255 / 18%) 8% 16%, transparent 26%),
    radial-gradient(circle at 66% 74%, transparent 0 42%, rgb(0 0 0 / 26%) 76%, rgb(0 0 0 / 58%) 100%);
}

.anti-relic-orb::after {
  inset: -10%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent, rgb(255 255 255 / 34%), transparent, rgb(0 0 0 / 50%), transparent);
  filter: blur(7px);
}

.memory-grid,
.fusion-grid,
.lights-grid {
  --board-size: 560px;
}

.memory-card {
  min-height: 96px;
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 180ms ease;
}

.memory-card.face-up,
.memory-card.matched {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 35%, rgb(255 214 111 / 28%), transparent 56%),
    #1d1420;
  box-shadow: inset 0 0 22px rgb(255 214 111 / 16%), 0 0 22px rgb(255 214 111 / 18%);
}

.memory-card span {
  transform: rotateY(180deg);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 16px rgb(255 214 111 / 52%);
}

.memory-card:not(.face-up):not(.matched) span {
  transform: none;
}

.snake-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 214 111 / 10%), transparent 62%),
    linear-gradient(90deg, rgb(255 214 111 / 5%) 1px, transparent 1px 8.33%),
    linear-gradient(0deg, rgb(70 231 255 / 5%) 1px, transparent 1px 8.33%),
    #08090f;
  border: 1px solid rgb(255 214 111 / 18%);
}

.snake-cell {
  border-color: rgb(70 231 255 / 18%);
  background:
    radial-gradient(circle at 50% 50%, rgb(70 231 255 / 5%), transparent 58%),
    #080a10;
}

.snake-cell.snake-body,
.snake-cell.snake-head {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 214 111 / 10%), transparent 62%),
    #080a10;
  box-shadow: inset 0 0 15px rgb(255 214 111 / 10%);
}

.snake-cell.snake-head {
  animation: orbPulse 1.4s ease-in-out infinite;
}

.snake-cell.food {
  box-shadow: inset 0 0 18px rgb(255 214 111 / 14%);
}

.golden-snake {
  position: absolute;
  inset: 8%;
  display: block;
  background:
    radial-gradient(circle at 35% 28%, #fff8bf 0 8%, transparent 9%),
    repeating-linear-gradient(135deg, rgb(97 46 11 / 38%) 0 4px, transparent 4px 9px),
    linear-gradient(145deg, #ffe89a, #d89c2b 42%, #7a3b11 82%);
  box-shadow:
    0 0 16px rgb(255 214 111 / 48%),
    inset 0 5px 8px rgb(255 255 255 / 26%),
    inset 0 -8px 10px rgb(0 0 0 / 24%);
  pointer-events: none;
}

.snake-head-sprite {
  inset: 4%;
  border-radius: 52% 52% 44% 44%;
  transform: rotate(var(--snake-rotate, 90deg));
  transform-origin: center;
}

.snake-head-sprite.dir-up {
  --snake-rotate: 0deg;
}

.snake-head-sprite.dir-right {
  --snake-rotate: 90deg;
}

.snake-head-sprite.dir-down {
  --snake-rotate: 180deg;
}

.snake-head-sprite.dir-left {
  --snake-rotate: -90deg;
}

.snake-body-sprite {
  inset: 14% 8%;
  border-radius: 46%;
}

.snake-tail-sprite {
  inset: 20% 12%;
  border-radius: 50% 50% 56% 56%;
  clip-path: polygon(50% 0, 100% 42%, 76% 100%, 24% 100%, 0 42%);
}

.snake-eye {
  position: absolute;
  top: 20%;
  width: 13%;
  height: 13%;
  border-radius: 50%;
  background: #050407;
  box-shadow: 0 0 5px rgb(70 231 255 / 70%);
}

.eye-left {
  left: 28%;
}

.eye-right {
  right: 28%;
}

.snake-tongue {
  position: absolute;
  top: -10%;
  left: 47%;
  width: 6%;
  height: 20%;
  background: var(--red);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 0 8px rgb(220 40 53 / 72%);
}

.snake-tongue::before,
.snake-tongue::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 90%;
  height: 45%;
  background: var(--red);
  border-radius: 999px;
}

.snake-tongue::before {
  left: -55%;
  transform: rotate(-32deg);
}

.snake-tongue::after {
  right: -55%;
  transform: rotate(32deg);
}

.snake-scale {
  position: absolute;
  inset: 16%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 34%, rgb(255 244 216 / 36%) 0 9%, transparent 10%),
    radial-gradient(circle at 68% 64%, rgb(255 244 216 / 24%) 0 8%, transparent 9%),
    linear-gradient(90deg, transparent 48%, rgb(93 44 12 / 22%) 49% 51%, transparent 52%);
}

.ki-mote {
  position: absolute;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff8bf 0 8%, #ffd66f 12% 28%, #dc2835 52%, #040205 92%);
  box-shadow: 0 0 22px rgb(255 214 111 / 72%), 0 0 36px rgb(220 40 53 / 28%);
  animation: orbPulse 1.8s ease-in-out infinite;
}

.fusion-tile {
  font-weight: 900;
  font-size: clamp(1.1rem, 4vw, 2.6rem);
  text-shadow: 0 0 16px rgb(255 214 111 / 45%);
}

.fusion-tile span {
  display: grid;
  place-items: center;
  width: 76%;
  height: 76%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 45% 28%, rgb(255 244 216 / 80%), transparent 18%),
    linear-gradient(145deg, rgb(255 214 111 / 78%), rgb(220 40 53 / 42%)),
    #140b12;
  box-shadow: 0 0 22px rgb(255 214 111 / 34%), inset 0 -12px 20px rgb(0 0 0 / 28%);
  animation: tilePop 180ms ease-out;
}

.fusion-tile.v-0 {
  opacity: 0.72;
}

.fusion-tile.v-128 span,
.fusion-tile.v-256 span,
.fusion-tile.v-512 span,
.fusion-tile.v-1024 span,
.fusion-tile.v-2048 span {
  background:
    radial-gradient(circle at 45% 28%, rgb(255 244 216 / 86%), transparent 18%),
    linear-gradient(145deg, rgb(70 231 255 / 72%), rgb(143 103 255 / 62%)),
    #08112a;
}

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

.ley-cell {
  border-radius: 50%;
}

.ley-cell.lit {
  background:
    radial-gradient(circle, rgb(255 244 216 / 52%), rgb(255 214 111 / 30%) 42%, #111018 76%);
  box-shadow: 0 0 26px rgb(255 214 111 / 42%), inset 0 0 18px rgb(255 244 216 / 18%);
}

.hanoi-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(100%, 680px);
  min-height: 460px;
}

.pylon {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgb(255 214 111 / 8%), transparent),
    rgb(7 7 13 / 72%);
  min-height: 440px;
  padding: 18px 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pylon.selected {
  border-color: var(--gold);
  box-shadow: 0 0 26px rgb(255 214 111 / 22%);
}

.pylon-core {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 84%;
  background: linear-gradient(var(--gold), rgb(70 231 255 / 50%), transparent);
  box-shadow: 0 0 18px rgb(255 214 111 / 32%);
}

.hanoi-disc {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 999px;
  color: #fff8bf;
  font-weight: 900;
  background:
    radial-gradient(circle at 44% 22%, rgb(255 244 216 / 70%), transparent 18%),
    linear-gradient(145deg, rgb(255 214 111 / 72%), rgb(29 108 255 / 42%)),
    #180b12;
  box-shadow: 0 0 18px rgb(255 214 111 / 28%), inset 0 -10px 20px rgb(0 0 0 / 28%);
  z-index: 1;
}

.disc-1 { width: 42%; }
.disc-2 { width: 58%; }
.disc-3 { width: 74%; }
.disc-4 { width: 90%; }

.dots-board {
  display: grid;
  width: min(100%, 560px);
  aspect-ratio: 1;
  gap: 4px;
}

.dot-node,
.circuit-line,
.circuit-box {
  border: 0;
  min-width: 0;
  min-height: 0;
  background: transparent;
  color: var(--text);
}

.dot-node {
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff8bf 0 12%, #ffd66f 26%, #7a2b10 62%, #020205 100%);
  box-shadow: 0 0 16px rgb(255 214 111 / 48%);
}

.circuit-line {
  cursor: pointer;
  border: 1px solid rgb(255 214 111 / 18%);
  background: rgb(255 214 111 / 8%);
}

.circuit-line.horizontal {
  align-self: center;
  height: 16px;
}

.circuit-line.vertical {
  justify-self: center;
  width: 16px;
}

.circuit-line:hover:not(:disabled) {
  background: rgb(255 214 111 / 42%);
  box-shadow: 0 0 18px rgb(255 214 111 / 42%);
}

.circuit-line.claimed.sun,
.circuit-box.sun {
  background: rgb(255 214 111 / 72%);
  box-shadow: 0 0 18px rgb(255 214 111 / 42%);
}

.circuit-line.claimed.rift,
.circuit-box.rift {
  background: rgb(70 231 255 / 66%);
  box-shadow: 0 0 18px rgb(70 231 255 / 42%);
}

.circuit-box {
  display: grid;
  place-items: center;
  font-weight: 900;
  border: 1px solid rgb(255 214 111 / 12%);
  background: rgb(7 7 13 / 58%);
}

.fx-particle {
  position: fixed;
  z-index: 20;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--gold);
  box-shadow: 0 0 18px rgb(255 214 111 / 80%);
  animation: particleBurst 850ms cubic-bezier(0.12, 0.78, 0.22, 1) forwards;
}

.fx-particle.rift {
  background: var(--teal);
  box-shadow: 0 0 18px rgb(70 231 255 / 82%);
}

.fx-particle.danger {
  background: var(--red);
  box-shadow: 0 0 18px rgb(220 40 53 / 82%);
}

.board-zone.move-pulse {
  animation: boardPulse 520ms ease-out;
}

.board-zone.win-burst {
  animation: victorySurge 760ms ease-out;
}

.board-zone.loss-burst {
  animation: dangerSurge 760ms ease-out;
}

.arcade-toast {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 10%, rgb(255 214 111 / 18%), transparent 45%),
    rgb(7 7 13 / 92%);
  color: var(--text);
  padding: 14px 16px;
  box-shadow: 0 0 28px rgb(255 214 111 / 24%), 0 18px 42px rgb(0 0 0 / 44%);
  animation: toastIn 2400ms ease forwards;
}

@keyframes energySweep {
  0% { transform: translateX(-4%); }
  50% { transform: translateX(4%); }
  100% { transform: translateX(-4%); }
}

@keyframes orbPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.18); transform: scale(1.035); }
}

@keyframes tinyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes gateOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.025); }
}

@keyframes gatePromptFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes orbSurfaceDrift {
  0%, 100% { transform: scale(1.03) rotate(0deg); }
  50% { transform: scale(1.1) rotate(2deg); }
}

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

@keyframes panelGlint {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes tilePop {
  0% { transform: scale(0.82); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pointBanked {
  0% { transform: translateY(0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 12px rgb(255 214 111 / 10%); }
  34% { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 34px rgb(255 214 111 / 32%); }
  100% { transform: translateY(0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 22px rgb(255 214 111 / 9%); }
}

@keyframes splashRing {
  0% { opacity: 0; transform: scale(0.36); }
  25% { opacity: 1; }
  100% { opacity: 0.55; transform: scale(1); }
}

@keyframes hitFlare {
  0% { opacity: 0; transform: scale(0.45); }
  30% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.78; transform: scale(1); }
}

@keyframes particleBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx-x)), calc(-50% + var(--fx-y))) scale(0.1);
  }
}

@keyframes boardPulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.22) saturate(1.18); }
  100% { filter: brightness(1); }
}

@keyframes victorySurge {
  0% { filter: brightness(1); box-shadow: var(--shadow); }
  35% { filter: brightness(1.35) saturate(1.35); box-shadow: 0 0 80px rgb(255 214 111 / 46%); }
  100% { filter: brightness(1); box-shadow: var(--shadow); }
}

@keyframes dangerSurge {
  0% { transform: translateX(0); filter: brightness(1); }
  18% { transform: translateX(-7px); filter: brightness(1.25) saturate(1.35); }
  36% { transform: translateX(7px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes toastIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  10%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.98); }
}

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

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .game-rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .play-layout {
    grid-template-columns: 1fr;
  }

  .board-zone {
    min-height: auto;
  }

  .battleship-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .main-stage,
  .game-rail {
    padding: 16px;
  }

  .stage-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-tabs {
    grid-template-columns: 1fr;
  }

  .board-zone {
    padding: 12px;
  }

  .grid {
    gap: 5px;
  }
}

.source-arcade-wordpress {
  color-scheme: dark;
  --bg: #050407;
  --panel: rgb(15 14 20 / 88%);
  --panel-2: rgb(30 26 36 / 82%);
  --line: rgb(246 201 95 / 30%);
  --text: #fff4d8;
  --muted: #b9ad9f;
  --gold: #ffd66f;
  --teal: #46e7ff;
  --red: #dc2835;
  --blue: #1d6cff;
  --green: #8cffba;
  --violet: #8f67ff;
  --black: #0a0c10;
  --shadow: 0 24px 70px rgb(0 0 0 / 55%);
  position: relative;
  isolation: isolate;
  min-height: 780px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.source-arcade-wordpress,
.source-arcade-wordpress * {
  box-sizing: border-box;
}

.source-arcade-wordpress::before,
.source-arcade-wordpress::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.source-arcade-wordpress::before {
  inset: -9vh -9vw;
  z-index: 0;
  background:
    linear-gradient(rgb(5 4 7 / 58%), rgb(5 4 7 / 86%)),
    radial-gradient(circle at 50% 50%, rgb(255 214 111 / 18%), transparent 38%),
    url("assets/source-orb-reference.png") center / cover no-repeat,
    conic-gradient(from 45deg at 50% 50%, rgb(220 40 53 / 16%), rgb(29 108 255 / 18%), rgb(255 214 111 / 14%), rgb(5 4 7 / 0), rgb(220 40 53 / 16%));
  filter: saturate(1.18) contrast(1.1);
  transform: perspective(900px) rotateX(4deg) scale(1.08);
  transform-origin: center;
}

.source-arcade-wordpress::after {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 0 38%, rgb(70 231 255 / 10%) 44%, transparent 52% 100%),
    radial-gradient(circle at 15% 10%, rgb(70 231 255 / 18%), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgb(255 214 111 / 14%), transparent 25rem),
    linear-gradient(rgb(0 0 0 / 8%) 50%, rgb(255 214 111 / 3%) 50%);
  background-size: auto, auto, auto, 100% 4px;
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: energySweep 8s linear infinite;
}

.source-arcade-wordpress .app-shell {
  min-height: 780px;
  z-index: 2;
}

.source-arcade-wordpress h1,
.source-arcade-wordpress h2,
.source-arcade-wordpress h3,
.source-arcade-wordpress p,
.source-arcade-wordpress strong,
.source-arcade-wordpress span,
.source-arcade-wordpress button,
.source-arcade-wordpress a {
  color: inherit;
  font-family: inherit;
}

.source-arcade-wordpress .stage-header h1,
.source-arcade-wordpress .status-panel strong,
.source-arcade-wordpress .tab-button,
.source-arcade-wordpress .choice-button,
.source-arcade-wordpress .command-button,
.source-arcade-wordpress .icon-button {
  color: var(--text) !important;
}

.source-arcade-wordpress .stage-header h1 {
  margin: 4px 0 0;
}

.source-arcade-wordpress button {
  appearance: none;
  font: inherit;
}

.source-arcade-wordpress .board-zone {
  color: var(--text);
}

.source-arcade-wordpress .source-points-card .source-points-copy,
.source-arcade-wordpress .rules-box .rules-goal,
.source-arcade-wordpress .rules-box .rules-summary,
.source-arcade-wordpress .rules-box p {
  color: var(--text) !important;
  opacity: 1 !important;
}