/* ============================================================
   Room themes — the variables, and nothing else.
   ============================================================

   These used to live in game.css, which is loaded by the PLAY screen alone.
   That was fine while a theme only restyled the caller ball and the card,
   because those only exist while you are playing. It stopped being fine the
   moment a theme repainted the room itself: a Halloween room's own page —
   the one people land on, share and arrive at from search — had no
   `data-room-theme` and no access to these rules, so it rendered in the
   generic brand purple while the play screen behind it was a graveyard.

   So this file holds the declarations and is loaded by both layouts. Every
   rule that USES them (the ball's artwork, the card, the critter, the snow)
   stays in game.css, because those elements only exist on the play screen.
   Nothing here paints anything on its own.
   ============================================================ */

[data-room-theme="soccer"]{
  --ball-art:url('/assets/img/room-themes/soccer/ball.webp') center/contain no-repeat;
  --ball-shadow:0 8px 22px rgba(0,0,0,0.45);
  /* A referee's whistle, deliberately not a football: the caller ball is
     already one, and the same object twice on a screen reads as a mistake
     rather than a theme. */
  --free-art:url('/assets/img/room-themes/soccer/whistle.webp');
  --free-art-inset:17%;
  --dab:radial-gradient(circle at 40% 35%, #5fd98a, #1f9a4e 68%);
  --dab-edge:rgba(31,154,78,0.75);
  --on-dab:#ffffff;
  /* Five kits, every one measured against the pale card rather than picked by
     eye. A bright kit yellow came out at 1.78 contrast against the teamsheet,
     so the I column was barely a shape at all; this one is 2.68, in line with
     the rest, and still reads at 6.3 on the dark panel where the draw chips
     live. O is a silver-grey, not white, for the same reason. */
  --col-b:#d8322f; --col-i:#c99302; --col-n:#1f9a4e; --col-g:#2f6fd0; --col-o:#8e9aa3;
  /* Two floodlights burning in from the top corners, and the glow off the
     grass. The stand falls away dark behind. */
  --page-backdrop:
    radial-gradient(26% 20% at 16% -4%, rgba(226,245,255,0.30), transparent 70%),
    radial-gradient(26% 20% at 84% -4%, rgba(226,245,255,0.30), transparent 70%),
    radial-gradient(70% 42% at 50% 104%, rgba(60,190,110,0.22), transparent 74%),
    linear-gradient(180deg, #0d3b22, #05180f 62%);
}

[data-room-theme="christmas"]{
  --free-art-inset:20%;
  --ball-art:url('/assets/img/room-themes/christmas/ball.webp') center/contain no-repeat;
  --ball-shadow:0 8px 22px rgba(0,0,0,0.45);
  --free-art:url('/assets/img/room-themes/christmas/star.webp');
  --dab:radial-gradient(circle at 40% 35%, #f06b58, #cf2b28 72%);
  --dab-edge:rgba(216,50,47,0.75);
  --on-dab:#fff6e8;
  --col-b:#d8322f; --col-i:#c28a12; --col-n:#1f9d63; --col-g:#2f6fd0; --col-o:#8d9aa6;
  /* Candlelight, not a photograph: four soft glows over deep forest green. */
  --page-backdrop:
    radial-gradient(34% 28% at 18% 18%, rgba(245,196,81,0.16), transparent 70%),
    radial-gradient(30% 24% at 82% 14%, rgba(216,50,47,0.16), transparent 70%),
    radial-gradient(48% 40% at 50% 2%, rgba(255,244,220,0.10), transparent 66%),
    radial-gradient(56% 50% at 76% 90%, rgba(31,157,99,0.26), transparent 72%),
    linear-gradient(180deg, #13452f, #07251a 60%);
}

[data-room-theme="halloween"]{
  --ball-art:url('/assets/img/room-themes/halloween/ball.webp') center/contain no-repeat;
  --ball-shadow:0 8px 22px rgba(0,0,0,0.45);
  --free-art:url('/assets/img/room-themes/halloween/web.webp');
  --critter-art:url('/assets/img/room-themes/halloween/spider.webp');
  --dab:radial-gradient(circle at 40% 35%, #ffb45a, #e8600d 72%);
  --dab-edge:rgba(255,148,38,0.75);
  --on-dab:#fff6e8;
  --col-b:#d6342f; --col-i:#e08a12; --col-n:#4f9e2a; --col-g:#8b4dff; --col-o:#b4823c;
  /* There was a moon up here — a hard pale disc at 82%/14% with a halo
     round it. It worked on an empty page and not in the room: the panels
     are translucent, so it showed THROUGH the chat as a bright smudge
     floating behind the messages rather than as anything in a sky. A fixed
     light source only reads as a moon when nothing is laid over it, and
     this layout lays a panel over exactly that corner. Gone; the ground
     glow and the purple do the work. */
  --page-backdrop:
    radial-gradient(70% 45% at 50% 104%, rgba(255,120,20,0.20), transparent 72%),
    radial-gradient(44% 36% at 14% 30%, rgba(122,60,190,0.22), transparent 74%),
    linear-gradient(180deg, #1d0b2b, #0b0512 58%);
}

[data-room-theme="easter"]{
  --ball-art:url('/assets/img/room-themes/easter/ball.webp') center/contain no-repeat;
  --ball-shadow:0 8px 22px rgba(0,0,0,0.45);
  --free-art:url('/assets/img/room-themes/easter/flower.webp');
  --free-art-inset:15%;
  /* The one place a pastel will not do. The dab has to be a decisive mark on
     a pale card, so it is a saturated blossom pink rather than the washed
     version that would suit the rest of the palette. */
  --dab:radial-gradient(circle at 40% 35%, #ff9ad1, #d6399b 68%);
  --dab-edge:rgba(214,57,155,0.75);
  --on-dab:#fff;
  --col-b:#d6399b; --col-i:#c99302; --col-n:#2fa87e; --col-g:#8b5bd6; --col-o:#e0734a;
  /* Bluebell dusk, NOT heather. The first pass was heather violet, which put
     this within a few degrees of the house aubergine — side by side in the
     room list, Easter read as the default theme with a different ball. */
  --page-backdrop:
    radial-gradient(34% 28% at 14% 12%, rgba(186,152,236,0.26), transparent 70%),
    radial-gradient(30% 24% at 86% 8%, rgba(126,226,196,0.22), transparent 70%),
    radial-gradient(48% 38% at 50% 0%, rgba(255,236,248,0.13), transparent 66%),
    radial-gradient(62% 50% at 74% 96%, rgba(255,166,210,0.22), transparent 74%),
    linear-gradient(180deg, #27386f, #101a38 60%);
}

[data-room-theme="summer"]{
  --ball-art:url('/assets/img/room-themes/summer/ball.webp') center/contain no-repeat;
  --ball-shadow:0 8px 22px rgba(0,0,0,0.45);
  --free-art:url('/assets/img/room-themes/summer/starfish.webp');
  --free-art-inset:15%;
  --dab:radial-gradient(circle at 40% 35%, #ff9a6e, #e4502a 68%);
  --dab-edge:rgba(228,80,42,0.75);
  --on-dab:#fff6ee;
  --col-b:#e4502a; --col-i:#c08416; --col-n:#14a08f; --col-g:#2f7fd0; --col-o:#b08b63;
  /* Late evening, not midday. A bright room would break this layout in two
     places at once: the UI's light text has nothing to sit on, and a pale
     card loses the contrast that makes the numbers the clearest thing on
     screen. Teal rather than blue, because Easter already owns dusk blue. */
  --page-backdrop:
    radial-gradient(30% 24% at 78% 8%, rgba(255,186,96,0.30), transparent 68%),
    radial-gradient(52% 34% at 78% 8%, rgba(255,122,74,0.18), transparent 72%),
    radial-gradient(64% 40% at 44% 100%, rgba(40,200,190,0.22), transparent 74%),
    linear-gradient(180deg, #0a4a4a, #03201f 62%);
}