/* Light mode for boginteractive.com, plus the light/dark switch itself. Loaded on every page after style.css.
   Everything under html[data-theme="light"] only applies in light mode, so the dark look in style.css is untouched.
   Light palette: warm paper with an olive tint, dark olive ink. AMBER and MOSS get darker shades so they can still be read as text on paper. */

/* ===== The switch (both themes) ===== */
.theme-switch{
  position:relative; flex:none; align-self:center;
  width:40px; height:22px; padding:0; margin:0 0 0 2px;
  border-radius:99px; border:1px solid var(--line-bright); background: var(--bg-panel-light);
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.theme-switch::before{ content:""; position:absolute; inset:-9px -4px; }   /* bigger tap area */
.theme-knob{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background: var(--amber); box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.3,.7,.3,1);
}
html[data-theme="dark"] .theme-knob{ transform: translateX(18px); }
.theme-ico{
  position:absolute; top:4px; z-index:1; fill:none; stroke: var(--text-muted);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition: stroke .2s;
}
.theme-sun{ left:4px; } .theme-moon{ right:4px; }
html[data-theme="light"] .theme-sun, html[data-theme="dark"] .theme-moon{ stroke:#16190A; }
.theme-switch:hover{ border-color: var(--amber); }
.theme-switch:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.footer-bottom .theme-switch{ margin:0; }
@media (prefers-reduced-motion: reduce){ .theme-knob{ transition:none; } }

/* ===== Light palette ===== */
html[data-theme="light"]{
  --bg: #F2F0E3;
  --bg-panel: #FBFAF3;
  --bg-panel-light: #E8E7D5;
  --line: #D5D3BB;
  --line-bright: #B2B088;
  --text: #1A200F;
  --text-muted: #4F5A3A;
  --amber: #B86A00;
  --amber-dim: #8A5000;
  --moss: #4B7A1C;
  --cyan: #0B8776;
  --blue: #3753C4;
  --pink: #C2377F;
  color-scheme: light;
}

/* page-wide glows: the same two soft colours, on paper */
html[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(255,176,32,0.22), transparent 46%),
    radial-gradient(ellipse at 100% 10%, rgba(143,203,99,0.16), transparent 44%);
}
html[data-theme="light"] body::before{ background: radial-gradient(ellipse at 88% 90%, rgba(79,224,198,0.16), transparent 52%); }

/* buttons */
html[data-theme="light"] .btn-ghost{ color: #0A5C50; border-color: rgba(11,135,118,0.75); background: linear-gradient(135deg, rgba(79,224,198,0.16), rgba(143,203,99,0.10)); }
html[data-theme="light"] .btn-ghost:hover{ color: #06443B; background: linear-gradient(135deg, rgba(79,224,198,0.30), rgba(143,203,99,0.20)); border-color: var(--cyan); box-shadow: 0 0 18px rgba(11,135,118,0.22); }
html[data-theme="light"] .btn-primary{ color:#16190A; }

/* big hero titles: ink into amber */
html[data-theme="light"] .game-title{ background: linear-gradient(90deg, #1A200F 20%, #B86A00); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .game-banner:not(.flagship) .game-title{ background:none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--text); color: var(--text); }
html[data-theme="light"] .legal a:hover{ color: var(--amber); }

/* things that were dark overlays */
html[data-theme="light"] .checkout-modal{ background: rgba(24,28,12,0.62); }
html[data-theme="light"] .ss-overlay{ background: rgba(24,28,12,0.55); }
html[data-theme="light"] .game-card-badge{ background: rgba(251,250,243,0.9); }
html[data-theme="light"] .circuit-fade{ background: radial-gradient(ellipse 62% 75% at center, rgba(242,240,227,0.94) 0%, rgba(242,240,227,0.8) 45%, transparent 78%); }
html[data-theme="light"] .bg-nebula::before{ opacity:0; animation:none; }     /* the white stars only make sense on dark */

/* the dark art tiles (Medieval Hero, Squishbook) stay dark on purpose; their labels keep the bright dark-mode colours */
html[data-theme="light"] .game-card[href="/medieval-hero"] .game-art-placeholder,
html[data-theme="light"] .indev-thumb{ color: #8FCB63; }
html[data-theme="light"] .game-card[href="/squishbook"] .game-art-placeholder,
html[data-theme="light"] .indev-squish .indev-thumb{ color: #4FE0C6; }

/* the amber button keeps its bright look everywhere (Nebula Drift draws its own copy of it) */
html[data-theme="light"] .btn-primary{ background: linear-gradient(135deg, #FFC24A, #FF9A2E); border-color: #FFB020; color:#16190A; }
html[data-theme="light"] .btn-primary:hover{ background: linear-gradient(135deg, #FFD36E, #FFA848); }

/* ===== Polish (both modes) ===== */
/* The logo is a dark teal/olive mark made for a light background: lift it on the dark header so it reads */
html[data-theme="dark"] .wordmark img{ filter: brightness(1.85) saturate(1.15) drop-shadow(0 0 12px rgba(143,203,99,0.16)); }

/* Form fields: a clearer edge on dark, a crisp white field on light (focus keeps the amber edge from style.css) */
html[data-theme="dark"] .notify-form input:not(:focus),
html[data-theme="dark"] .field input:not(:focus),
html[data-theme="dark"] .field textarea:not(:focus),
html[data-theme="dark"] .field select:not(:focus){ border-color: var(--line-bright); }
html[data-theme="light"] .notify-form input,
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select{ background:#FFFFFF; }
html[data-theme="light"] .notify-form input:not(:focus),
html[data-theme="light"] .field input:not(:focus),
html[data-theme="light"] .field textarea:not(:focus),
html[data-theme="light"] .field select:not(:focus){ border-color: var(--line-bright); }

/* "GAME PAGE →": on a phone the button is a flex box, which swallowed the space before the arrow */
a.btn-ghost::after{ content:"\2192"; margin-left:.45em; }