/* The Cosmic Camp — shared day/night lighting styles (used with js/theme.js) */

/* ---------- night palette: every page reads these variables ---------- */
html[data-theme="night"]{
  --snow:#070D2B; --paper:rgba(18,28,74,.78); --sky:#86B6FF; --sky-soft:rgba(46,70,150,.42);
  --ink:#EEF2FF; --ink-2:#B6C3EA; --line:rgba(255,255,255,.14); --night:#0B1546; --flake:#EEF4FF;
  color-scheme:dark;
  /* the Milky Way over the camp, dimmed, behind everything */
  background:linear-gradient(180deg,rgba(7,13,43,.35),rgba(7,13,43,.78) 60%,rgba(7,13,43,.92)),
             url("../images/galaxy-sky.webp") center top / cover fixed,#070D2B;
}
html[data-theme="night"] body{background:transparent;color:var(--ink)}

/* twinkling stars + shooting stars (drawn by theme.js), only at night */
.starsky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:none}
html[data-theme="night"] .starsky{display:block}

/* ---------- sunlight: a soft tint that follows the sun in Langza ---------- */
.sunlight{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;mix-blend-mode:soft-light;transition:opacity 2s ease}
html[data-phase="dawn"] .sunlight{opacity:1;background:
  radial-gradient(ellipse 70% 55% at 0% 0%,rgba(255,150,190,.75),transparent 70%),
  linear-gradient(180deg,rgba(150,110,230,.45),rgba(255,170,160,.25))}
html[data-phase="sunrise"] .sunlight{opacity:1;background:
  radial-gradient(ellipse 70% 60% at 0% 0%,rgba(255,190,120,.8),transparent 70%),
  linear-gradient(180deg,rgba(255,200,150,.35),transparent 70%)}
html[data-phase="golden"] .sunlight{opacity:1;background:
  radial-gradient(ellipse 80% 65% at 100% 0%,rgba(255,150,30,1),transparent 72%),
  linear-gradient(180deg,rgba(255,165,50,.6),rgba(255,205,130,.3))}
html[data-phase="dusk"] .sunlight{opacity:1;background:
  radial-gradient(ellipse 75% 55% at 100% 0%,rgba(255,110,90,.6),transparent 70%),
  linear-gradient(180deg,rgba(90,60,190,.8),rgba(40,40,120,.5))}
@media (prefers-reduced-motion:reduce){.sunlight{transition:none}}

/* ---------- Auto / Day / Night switch ---------- */
.theme-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px 8px 11px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(14,30,74,.08);color:var(--ink,#0E1E4A);font:600 .92rem/1 var(--body,system-ui,sans-serif);margin-right:8px;transition:background .2s ease}
.theme-btn:hover{background:rgba(14,30,74,.14)}
.theme-btn svg{width:20px;height:20px;flex-shrink:0}
.theme-btn:focus-visible{outline:3px solid #FF7A1A;outline-offset:3px}
html[data-theme="night"] .theme-btn{background:rgba(255,255,255,.12);color:#FFE6A3}
html[data-theme="night"] .theme-btn:hover{background:rgba(255,255,255,.2)}
.theme-btn.floating{position:fixed;right:18px;top:84px;z-index:61;box-shadow:0 0 0 2px currentColor}
@media (max-width:480px){.theme-btn span{display:none}.theme-btn{padding:8px 11px;margin-right:6px}}