/* Each theme sets page bg via --bg and optional --bg-art (gradients/images) */

/* Pastel (light) */
:root[data-theme="pastel"]{
  --bg:#fff7fc;
  --bg-art: radial-gradient(1200px 600px at 20% -10%, #f472b62b, transparent 60%),
            radial-gradient(1200px 600px at 120% 10%, #a78bfa1f, transparent 60%);
  --card:#ffffff; --text:#2b2b2b; --muted:#6b7280; --border:#f1e6f2;
  --brand:#f472b6; --brand-2:#a78bfa; --ring:rgba(244,114,182,.35);
}

/* White (bright, clean) */
:root[data-theme="white"]{
  --bg:#ffffff;
  --bg-art:none;
  --card:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;
  --brand:#2563eb; --brand-2:#22d3ee; --ring:rgba(37,99,235,.25);
}

/* Plushie (warm cream) */
:root[data-theme="plushie"]{
  --bg:#fff9f2; --bg-art:none;
  --card:#fffdf9; --text:#3b2f2f; --muted:#8b6f6f; --border:#ffe7d1;
  --brand:#ffb3ba; --brand-2:#bae1ff; --ring:rgba(255,179,186,.35);
}

/* Mint (soft green) */
:root[data-theme="mint"]{
  --bg:#f5fff9; --bg-art:none;
  --card:#ffffff; --text:#1f2d2b; --muted:#6b7a78; --border:#d6f5e7;
  --brand:#34d399; --brand-2:#a7f3d0; --ring:rgba(52,211,153,.35);
}

/* Bedtime (dark) */
:root[data-theme="bedtime"]{
  --bg:#0f1220;
  --bg-art: radial-gradient(900px 500px at 10% -10%, #a78bfa33, transparent 60%),
            radial-gradient(900px 500px at 110% 10%, #60a5fa26, transparent 60%);
  --card:#14172a; --text:#e8e9f1; --muted:#a6adbb; --border:#23263a;
  --brand:#a78bfa; --brand-2:#60a5fa; --ring:rgba(96,165,250,.35);
}

/* Midnight (very dark) */
:root[data-theme="midnight"]{
  --bg:#0a0f15; --bg-art:none;
  --card:#0f1620; --text:#e6f0ff; --muted:#9bb0c8; --border:#1a2430;
  --brand:#4f46e5; --brand-2:#22d3ee; --ring:rgba(79,70,229,.35);
}

/* Theater stays large across themes */
.theater-embed{ margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden; height:75vh; }
.theater-embed iframe{ width:100%; height:100%; border:0; }

/* Rainbow (pastel gradient ribbons) */
:root[data-theme="rainbow"]{
  --bg: #fff7ff;
  --bg-art:
    radial-gradient(1200px 500px at 10% -10%, #ff9ad433, transparent 60%),
    radial-gradient(1000px 500px at 120% 0%, #a1c4fd33, transparent 60%),
    radial-gradient(900px 480px at 50% 120%, #baffc933, transparent 60%);
  --card:#ffffff; --text:#2b2b2b; --muted:#6b7280; --border:#f2eaf6;
  --brand:#ff7ac6; --brand-2:#7aa2ff; --ring:rgba(255,122,198,.35);
}

/* Clouds (soft blue with cloud swirls) */
:root[data-theme="clouds"]{
  --bg:#f5fbff;
  --bg-art:
    radial-gradient(800px 360px at -10% 10%, #ffffffcc 0 60%, transparent 61%),
    radial-gradient(900px 420px at 110% 0%, #ffffffcc 0 60%, transparent 61%),
    radial-gradient(1200px 600px at 50% 120%, #d6ecff55 0 50%, transparent 51%);
  --card:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#dbeafe;
  --brand:#60a5fa; --brand-2:#22d3ee; --ring:rgba(96,165,250,.35);
}
/* CSS "Theater mode" — fills viewport without Fullscreen API */
.theater-embed.theater-mode {
  position: fixed;
  inset: 0;
  height: 100vh !important;
  width: 100vw !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 9999;
  box-shadow: none !important;
}
.theater-embed.theater-mode iframe { height: 100%; width: 100%; }
.theater-embed.hide-cursor,
.theater-embed.hide-cursor iframe { cursor: none !important; }