/* ============================================================
   ARCADE STYLES — shared between lobby (arcade/lobby.html) and
   play (arcade/play.html).

   PHASE 1 STATUS: empty stub. Real styles ship once Portuga
   shares the lobby background + gameplay loop video.

   CONTRACT (will be honored as styles fill in):
     - Page-local tokens declared inside [data-page="arcade"] /
       [data-page="play"] selectors so they don't leak into the
       rest of NoBS (which uses purple/lime/pink — the arcade
       has its own palette, TBD per assets).
     - Pixel-art rendering: image-rendering: pixelated on every
       sprite/background. NEVER inherit smoothing from base.css.
     - The lobby loads partials (nav/menu/footer); the play
       page does NOT. Both pages are scoped via [data-page] so
       partial chrome that DOES appear on the lobby gets visually
       neutralized inside .arcade-stage if needed.

   PHASE 2 NOTES:
     - When sprite count grows past ~20, consider sprite sheets.
     - For audio, prefer Howler.js (CDN) over raw Audio() —
       handles autoplay policy correctly across browsers.
     - Mobile-first guards live in CSS (hide PLAY button under
       (max-width: 1023px) AND (pointer: coarse)) as belt-and-
       suspenders to the JS check in arcade-engine.js.
============================================================ */

/* Pixel-perfect rendering when sprites + backgrounds land. */
.arcade-bg,
.arcade-bg img,
.arcade-sprite,
.arcade-sprite img {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox fallback */
}

/* Mobile guard (CSS layer). The lobby's PLAY button gets hidden
   here as a fallback; arcade-ui.js does the same check in JS so
   the desktop-only blurb appears in place of PLAY rather than
   leaving a blank space. Both layers are needed:
     - CSS hides PLAY before JS runs (prevents flash)
     - JS swaps in the blurb (CSS can't do that)
*/
@media (max-width: 1023px) and (pointer: coarse) {
  .arcade-play-cta { display: none !important; }
  .arcade-mobile-blurb { display: block !important; }
}
.arcade-mobile-blurb { display: none; }