/* Game-screen skins, chosen per activity (data-skin on .stage or on a preview element). All artwork is
   our own CSS gradients and small inline SVG patterns. Every skin defines:
   --stage-bg / --skin-image   background colour and artwork
   --stage-text / --stage-muted   text drawn directly on the background
   --stage-surface / --stage-on-surface / --stage-surface-2 / --stage-border   cards, buttons, panels
   --stage-answer   colour for revealed answers on surfaces
   Text/background pairs meet WCAG AA. "classic" has no skin and follows the site's light/dark theme. */

[data-skin="sky"] {
  --stage-bg: #9ad7ff;
  --skin-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='%23ffffff' fill-opacity='.55'%3E%3Cellipse cx='80' cy='60' rx='60' ry='18'/%3E%3Cellipse cx='110' cy='48' rx='34' ry='20'/%3E%3Cellipse cx='360' cy='170' rx='70' ry='20'/%3E%3Cellipse cx='390' cy='156' rx='38' ry='22'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #74c3ff 0%, #b9e4ff 55%, #eaf7ff 100%);
  --stage-text: #0b2545; --stage-muted: #24476b;
  --stage-surface: #ffffff; --stage-on-surface: #0b2545; --stage-surface-2: #e2f1ff; --stage-border: #a9d4f2;
  --stage-answer: #11743a; --sbtn-shadow: #6fa6cf;
}
[data-skin="ocean"] {
  --stage-bg: #0a5c8a;
  --skin-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cpath d='M0 40 Q25 25 50 40 T100 40 T150 40 T200 40' fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='4'/%3E%3C/svg%3E"), linear-gradient(180deg, #08466e 0%, #0b6d9c 60%, #0e93b8 100%);
  --stage-text: #ffffff; --stage-muted: #d5efff;
  --stage-surface: #ffffff; --stage-on-surface: #0a2a3f; --stage-surface-2: #d7eef9; --stage-border: #8fcbe4;
  --stage-answer: #0d6e3a; --sbtn-shadow: #06324f;
}
[data-skin="jungle"] {
  --stage-bg: #22703f;
  --skin-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23ffffff' fill-opacity='.08'%3E%3Cpath d='M20 60 C40 20 80 20 90 50 C60 45 40 55 20 60Z'/%3E%3Cpath d='M100 140 C120 100 160 100 160 130 C140 124 120 132 100 140Z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(160deg, #175c33 0%, #2a8a4c 70%, #3aa35c 100%);
  --stage-text: #ffffff; --stage-muted: #e1f6e5;
  --stage-surface: #fffdf2; --stage-on-surface: #1b3820; --stage-surface-2: #e7f3da; --stage-border: #b4d79f;
  --stage-answer: #12703a; --sbtn-shadow: #0f4224;
}
[data-skin="space"] {
  --stage-bg: #0d1238;
  --skin-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='1.6'/%3E%3Ccircle cx='120' cy='80' r='1.2'/%3E%3Ccircle cx='200' cy='20' r='1'/%3E%3Ccircle cx='60' cy='160' r='1.4'/%3E%3Ccircle cx='170' cy='190' r='1.8'/%3E%3Ccircle cx='95' cy='210' r='.9'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 75% 20%, #3b2b8f 0%, transparent 45%), linear-gradient(180deg, #090d2c 0%, #151a52 100%);
  --stage-text: #ffffff; --stage-muted: #cdd2fa;
  --stage-surface: #1f2563; --stage-on-surface: #ffffff; --stage-surface-2: #2b3285; --stage-border: #4a53b8;
  --stage-answer: #7cf0b0; --sbtn-shadow: #05081f;
}
[data-skin="candy"] {
  --stage-bg: #ffd7ee;
  --skin-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill-opacity='.35'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23ffffff'/%3E%3Ccircle cx='50' cy='45' r='4' fill='%23ff8fcf'/%3E%3Ccircle cx='70' cy='15' r='3' fill='%23b48cff'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, #ffd1ea 0%, #f1dcff 55%, #d9e4ff 100%);
  --stage-text: #4a1442; --stage-muted: #6b2a61;
  --stage-surface: #ffffff; --stage-on-surface: #4a1442; --stage-surface-2: #ffe8f5; --stage-border: #f3b4d8;
  --stage-answer: #11743a; --sbtn-shadow: #d98fbb;
}
[data-skin="sports"] {
  --stage-bg: #2c8a3e;
  --skin-image: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)), repeating-linear-gradient(90deg, #2c8a3e 0 80px, #33984a 80px 160px);
  --stage-text: #ffffff; --stage-muted: #e7fbe9;
  --stage-surface: #ffffff; --stage-on-surface: #12301a; --stage-surface-2: #e2f4e5; --stage-border: #a3d8ad;
  --stage-answer: #0f6b33; --sbtn-shadow: #145424;
}
[data-skin="chalkboard"] {
  --stage-bg: #2c3d34;
  --skin-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.04), transparent 45%), linear-gradient(180deg, #2a3b32, #26352d);
  --stage-text: #f7f4e8; --stage-muted: #dcd8c6;
  --stage-surface: #37493f; --stage-on-surface: #f7f4e8; --stage-surface-2: #415549; --stage-border: #7e9488;
  --stage-answer: #b8f5a6; --sbtn-shadow: #18231d;
}
[data-skin="neon"] {
  --stage-bg: #08040f;
  --skin-image: linear-gradient(rgba(255,61,242,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(61,232,255,.08) 1px, transparent 1px), radial-gradient(circle at 50% 110%, #3a0b5e, #08040f 60%);
  --stage-text: #ffffff; --stage-muted: #dccfff;
  --stage-surface: #170d2f; --stage-on-surface: #ffffff; --stage-surface-2: #241650; --stage-border: #ff3df2;
  --stage-answer: #5dffb0; --sbtn-shadow: #6a0f86; --skin-size: 40px 40px, 40px 40px, auto;
}
[data-skin="classic"] {
  --stage-bg: #eef1f6; --skin-image: none;
  --stage-text: #0e121a; --stage-muted: #4b5566;
  --stage-surface: #ffffff; --stage-on-surface: #0e121a; --stage-surface-2: #e3e8f0; --stage-border: #cfd6e2;
  --stage-answer: #1a8a4a; --sbtn-shadow: #b9c2d3;
}
[data-skin="contrast"] {
  --stage-bg: #000000; --skin-image: none;
  --stage-text: #ffffff; --stage-muted: #ffffff;
  --stage-surface: #000000; --stage-on-surface: #ffffff; --stage-surface-2: #1a1a1a; --stage-border: #ffe600;
  --stage-answer: #ffe600; --sbtn-shadow: #ffe600;
}
[data-skin="contrast"] .sbtn, [data-skin="contrast"] .wcard, [data-skin="contrast"] .panel-s, [data-skin="contrast"] .option { border-width: 3px; }

/* Small preview swatch used by the theme picker and template tiles. */
.skin-swatch { background-color: var(--stage-bg, #eef1f6); background-image: var(--skin-image, none); background-size: var(--skin-size, auto); color: var(--stage-text, #111); }