/* GameHub themes — default palette + background art.
   Each theme places three images: left (80% height), right (80% height), top.
   games.css references only these custom properties, never raw colors.
   Canvas games read them from getComputedStyle() at init. */

:root {
  --bg: #0b0d12;
  --card: #151922;
  --fg: #e9ecf2;
  --muted: #97a1b4;
  --line: #232936;
  --accent: #818cf8;
  --board: #1d222d;
  --highlight: #2d3548;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

/* ── Arcade ────────────────────────────────────────────────────────────── */
[data-theme="arcade"] body {
  background-image:
    url("themes/arcade/left.svg"),
    url("themes/arcade/right.svg"),
    url("themes/arcade/top.svg");
  background-position: left center, right center, center top;
  background-size: auto 80vh, auto 80vh, auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Batman ─────────────────────────────────────────────────────────────── */
[data-theme="batman"] body {
  background-image:
    url("themes/batman/left.svg"),
    url("themes/batman/right.svg"),
    url("themes/batman/top.svg");
  background-position: left center, right center, center top;
  background-size: auto 80vh, auto 80vh, auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Iron Man ──────────────────────────────────────────────────────────── */
[data-theme="ironman"] body {
  background-image:
    url("themes/ironman/left.svg"),
    url("themes/ironman/right.svg"),
    url("themes/ironman/top.svg");
  background-position: left center, right center, center top;
  background-size: auto 80vh, auto 80vh, auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Thor ──────────────────────────────────────────────────────────────── */
[data-theme="thor"] body {
  background-image:
    url("themes/thor/left.svg"),
    url("themes/thor/right.svg"),
    url("themes/thor/top.svg");
  background-position: left center, right center, center top;
  background-size: auto 80vh, auto 80vh, auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Prince of Persia ─────────────────────────────────────────────────── */
[data-theme="persia"] body {
  background-image:
    url("themes/persia/left.svg"),
    url("themes/persia/right.svg"),
    url("themes/persia/top.svg");
  background-position: left center, right center, center top;
  background-size: auto 80vh, auto 80vh, auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Hide side art on narrow screens — content fills the width */
@media (max-width: 1100px) {
  [data-theme="arcade"] body,
  [data-theme="batman"] body,
  [data-theme="ironman"] body,
  [data-theme="thor"] body,
  [data-theme="persia"] body {
    background-image:
      url("themes/arcade/top.svg");
    background-size: auto;
    background-position: center top;
  }
  [data-theme="batman"] body  { background-image: url("themes/batman/top.svg"); }
  [data-theme="ironman"] body { background-image: url("themes/ironman/top.svg"); }
  [data-theme="thor"] body    { background-image: url("themes/thor/top.svg"); }
  [data-theme="persia"] body  { background-image: url("themes/persia/top.svg"); }
}