/* Game art and battle canvases retain their own palette. These colors belong
   to the station's lobby and navigation, with the same light/dark preference. */
:root[data-oua-theme='dark'] {
  --ink: #e4e8ef;
  --muted: #b1bdca;
  --line: #444d59;
  --paper: #282c34;
  --mint: #304c47;
  --peach: #493d32;
  --accent: #93cfed;
  --navy: #2d6689;
}
[data-oua-theme='dark'] body {
  background:
    radial-gradient(ellipse at 8% 0%, #273d43, transparent 38%), var(--paper);
}
[data-oua-theme='dark'] .game-card,
[data-oua-theme='dark'] .panel,
[data-oua-theme='dark'] .nav .external {
  background: #30363f;
}
[data-oua-theme='dark'] .game-card.fish,
[data-oua-theme='dark'] .weekly {
  background: linear-gradient(110deg, #30363f 60%, #30443e);
}
[data-oua-theme='dark'] .game-card.arena {
  background: linear-gradient(110deg, #30363f 60%, #493d32);
}
[data-oua-theme='dark'] .art-stage::before {
  background: #36534c;
}
[data-oua-theme='dark'] .arena .art-stage::before {
  background: #5b4434;
}
[data-oua-theme='dark'] .button.secondary {
  background: #3a494b;
}
[data-oua-theme='dark'] .button:hover {
  background: #3d7495;
  color: #fff;
}
[data-oua-theme='dark'] .stamp {
  color: var(--muted);
}
.brand {
  color: var(--ink);
  text-decoration: none;
}
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.nav .external,
.button {
  min-height: 44px;
}
.weekly-action {
  margin-top: 16px;
}
.art-stage::before,
.arena .art-stage::before {
  display: none;
}
.game-icon {
  width: min(100%, 200px);
  aspect-ratio: 1;
  flex: none;
  background-image: url('/game-icons/fat-fish-atlas.png');
  background-size: 200% 200%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 14px #15293424);
}
.game-icon--merge {
  background-position: 0% 0%;
}
.game-icon--arena {
  background-position: 100% 0%;
}
.game-icon--survivor {
  background-position: 0% 100%;
}
.game-icon--tower {
  background-position: 100% 100%;
}
@media (max-width: 420px) {
  .topbar {
    gap: 12px;
    flex-wrap: wrap;
  }
  .nav {
    margin-left: auto;
  }
  .game-card {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 6px;
  }
  .game-card h2 {
    font-size: 21px;
  }
  .art-stage img {
    max-width: 76px;
  }
}