/* Presentation adapter for legacy 2D pages and their existing lobby panels.
   No canvas, stage, HUD placement, input binding or game-state changes.
   All source tokens/font/art remain owned by the shared Infin8 kit. */
.arcade-neon-game {
  --bg: var(--i8-base); --panel: var(--i8-panel); --text: var(--i8-text);
  --muted: var(--i8-muted); --cyan: var(--i8-cyan-web); --purple: var(--i8-violet);
}
.arcade-neon-game [hidden] { display: none !important; }
.arcade-neon-game::before { animation: none; }
.arcade-neon-game h1, .arcade-neon-game h2, .arcade-neon-game h3,
.arcade-neon-game :is(.primary-button,.secondary-button,.icon-button,.text-button,.arcade-button) {
  font-family: var(--i8-font-display);
}
.arcade-neon-game .game-topbar { background: var(--i8-glass-bg-strong); border-color: var(--i8-line-soft); }
.arcade-neon-game :is(.overlay-card,.side-card,.lobby-current,.lobby-list) {
  color: var(--i8-text); background: var(--i8-glass-bg-strong);
  border-color: var(--i8-line-soft); border-radius: var(--i8-r-panel);
  box-shadow: var(--i8-inset);
}
.arcade-neon-game .overlay-card { border: 1px solid var(--i8-cyan-web); }
.arcade-neon-game :is(.hud-chip,.control-key,.session-chip) {
  color: var(--i8-text); background: var(--i8-glass-bg-strong);
  border-color: var(--i8-line-soft); border-radius: var(--i8-r-control);
}
.arcade-neon-game .eyebrow { color: var(--i8-cyan-bright); }
.arcade-neon-game :is(.primary-button,.secondary-button,.icon-button,.text-button) {
  border-radius: var(--i8-r-control);
}
.arcade-neon-game .primary-button:not(:disabled) {
  color: var(--i8-text); background: var(--i8-panel-solid);
  border: 1px solid var(--i8-cyan);
  border-image: url("infin8-ui/brand/control-button-plate-galaxy.webp") 56 fill / 22px / 0 stretch;
  box-shadow: var(--i8-inset);
}
.arcade-neon-game .primary-button:not(:disabled):is(:hover,:active,[aria-pressed="true"]) {
  border-image-source: url("infin8-ui/brand/control-button-plate-lit-galaxy.webp");
}
.arcade-neon-game .secondary-button { color: var(--i8-text-soft); background: var(--i8-panel-alt); border-color: var(--i8-line-soft); }
/* Lobby rows (Join) are built by game.js with .arcade-button: same secondary control. */
.arcade-neon-game .arcade-button:not(.primary) {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--i8-touch);
  padding: 0 var(--i8-s4); color: var(--i8-text-soft); background: var(--i8-panel-alt);
  border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-control); cursor: pointer;
}
/* Level choices: wide enough for "Level 10 (Locked · 450,000)" and an undistorted plate. */
.arcade-neon-game .level-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
/* TV header: a long signed-in name must not push Arcade home past the title-safe edge. */
html[data-arcade-layout="console"] .arcade-neon-game .session-chip { max-width: 12em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.arcade-neon-game :is(button,input,select,a):focus-visible,
.arcade-neon-game .gp-focus { outline: 3px solid var(--i8-cyan-bright); outline-offset: 3px; }
.arcade-neon-game :is(.lobby-card input,.lobby-card select) { color: var(--i8-text); background: var(--i8-panel-solid); border-color: var(--i8-line-soft); }
@media (prefers-reduced-motion: reduce) {
  .arcade-neon-game :is(.overlay-card,.side-card,.primary-button,.secondary-button) { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .arcade-neon-game :is(.overlay-card,.side-card,.primary-button,.secondary-button) { border: 1px solid CanvasText; border-image: none; }
}