/* ============================================================
   The Dictionary Game — arcade skin
   Per-game overrides on top of the shared chrome.css. Sets --accent
   to the violet tone and styles the arcade topbar that lives ABOVE
   the game's existing .game-shell header.
   ============================================================ */

:root { --accent: var(--tone-violet-fg); --accent-hover: #5b21b6; }
[data-theme="dark"] { --accent: var(--tone-violet-fg); --accent-hover: #a78bfa; }

/* Arcade topbar — sits above the existing game header. Constrained to
   match the game's own header width. The game header stays as-is
   below this — they read as a stacked pair. */
.arcade-topbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px clamp(14px, 4vw, 24px);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

/* Footer (arcade backlink) — slim and centered. */
.arcade-footer {
  padding: 16px clamp(14px, 4vw, 24px) 20px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-subtle);
  border-top: 1px solid var(--border);
}
.arcade-footer a {
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 600;
}
.arcade-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}