/* ============================================================
   pathlaid: theme toggle + light mode (prototype)
   theme.js puts .light-mode on <html> for Light, or for Auto on a light device.
   Dark stays exactly as before; everything here only applies in light mode.
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.55rem; margin-left: 0.25rem;
  background: none; border: 1.5px solid var(--border); border-radius: 0.5rem;
  color: var(--text-dim); font-family: inherit; line-height: 1; cursor: pointer;
  transition: all 0.2s ease;
}
body.has-mouse .theme-toggle:hover { border-color: var(--border-hover); color: var(--teal); }
.theme-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

:root.light-mode {
  /* green darkened so it reads on paper; ground colours stay vivid for art */
  --teal: #0a7f45;
  --teal-dim: rgba(10, 127, 69, 0.12);
  --teal-glow: rgba(0, 200, 110, 0.3);
  --purple: #8a2bd6;
  --bg-deep: #f3f4f1;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-body-secondary: rgba(0, 0, 0, 0.03);
  --border: rgba(10, 127, 69, 0.22);
  --border-hover: rgba(10, 127, 69, 0.5);
  --border-section: rgba(10, 127, 69, 0.18);
  --border-secondary: rgba(0, 0, 0, 0.08);
  --text: #171c22;
  --text-dim: #4a515a;
  --text-faint: #6b727b;
  --green-play: #12803f;
  --accent-danger: #c62828;
  --accent-warning: #b45309;
  color-scheme: light;
}

/* Bars */
:root.light-mode .store-bar { background: rgba(243, 244, 241, 0.94); }
:root.light-mode .nav-bar { background: rgba(250, 250, 248, 0.94); }
:root.light-mode .nav-divider { background: rgba(0, 0, 0, 0.12); }

/* Headings and names that were hard-coded white */
:root.light-mode h1,
:root.light-mode h2,
:root.light-mode h3,
:root.light-mode .fp-subheading,
:root.light-mode .release-section h2,
:root.light-mode .release-section strong { color: #12171d; }
:root.light-mode [style*="color:#fff"],
:root.light-mode [style*="color: #fff"] { color: #12171d !important; }

/* Buttons and hovers */
:root.light-mode .store-btn-ios { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.2); color: #12171d; }
:root.light-mode body.has-mouse .store-btn-ios:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.4); }
:root.light-mode body.has-mouse .media-toggle-btn:hover:not(.active),
:root.light-mode body.has-mouse .demo-pick:hover:not(.active) { background: rgba(0, 0, 0, 0.05); }
:root.light-mode .footer-secret { color: rgba(0, 0, 0, 0.04) !important; }

/* The phone stays a dark device in both themes */
:root.light-mode .phone-frame,
:root.light-mode .bench-phone-frame { box-shadow: 0 30px 90px -12px rgba(10, 127, 69, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08); }

/* Highway yellow used as text (Coming soon tags, links) darkened for paper; art keeps the bright yellow */
:root.light-mode .release-tag.future,
:root.light-mode [style*="color:#ffc233"] { color: #a86b00 !important; }


/* ============================================================
   Polish (GameDings-style), both themes
   ============================================================ */

/* Page background: one subtle pattern that suits the app, behind the whole page
   (landing and main area). The glows behind the icon and phone are the page's own. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='420'%3E%3Cdefs%3E%3CradialGradient id='o0'%3E%3Cstop offset='0' stop-color='%234dff7a' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%234dff7a' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%234dff7a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o1'%3E%3Cstop offset='0' stop-color='%23c24dff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23c24dff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23c24dff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o2'%3E%3Cstop offset='0' stop-color='%23ffc233' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23ffc233' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23ffc233' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o3'%3E%3Cstop offset='0' stop-color='%232fe0ff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%232fe0ff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%232fe0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o4'%3E%3Cstop offset='0' stop-color='%234dff7a' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%234dff7a' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%234dff7a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o5'%3E%3Cstop offset='0' stop-color='%23ffc233' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23ffc233' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23ffc233' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o6'%3E%3Cstop offset='0' stop-color='%232fe0ff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%232fe0ff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%232fe0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='60' r='12' fill='url(%23o0)'/%3E%3Ccircle cx='50' cy='60' r='2.4' fill='%234dff7a' fill-opacity='0.20'/%3E%3Ccircle cx='330' cy='110' r='13.5' fill='url(%23o1)'/%3E%3Ccircle cx='330' cy='110' r='2.7' fill='%23c24dff' fill-opacity='0.20'/%3E%3Ccircle cx='170' cy='190' r='10.5' fill='url(%23o2)'/%3E%3Ccircle cx='170' cy='190' r='2.1' fill='%23ffc233' fill-opacity='0.20'/%3E%3Ccircle cx='400' cy='300' r='12' fill='url(%23o3)'/%3E%3Ccircle cx='400' cy='300' r='2.4' fill='%232fe0ff' fill-opacity='0.20'/%3E%3Ccircle cx='250' cy='380' r='9' fill='url(%23o4)'/%3E%3Ccircle cx='250' cy='380' r='1.8' fill='%234dff7a' fill-opacity='0.20'/%3E%3Ccircle cx='70' cy='330' r='10.5' fill='url(%23o5)'/%3E%3Ccircle cx='70' cy='330' r='2.1' fill='%23ffc233' fill-opacity='0.20'/%3E%3Ccircle cx='200' cy='40' r='9' fill='url(%23o6)'/%3E%3Ccircle cx='200' cy='40' r='1.8' fill='%232fe0ff' fill-opacity='0.20'/%3E%3C/svg%3E"); background-size: 460px 420px; }
:root.light-mode body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='420'%3E%3Cdefs%3E%3CradialGradient id='o0'%3E%3Cstop offset='0' stop-color='%2312a046' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%2312a046' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%2312a046' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o1'%3E%3Cstop offset='0' stop-color='%238c32d2' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%238c32d2' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%238c32d2' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o2'%3E%3Cstop offset='0' stop-color='%23d69600' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%23d69600' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%23d69600' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o3'%3E%3Cstop offset='0' stop-color='%230096c8' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%230096c8' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%230096c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o4'%3E%3Cstop offset='0' stop-color='%2312a046' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%2312a046' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%2312a046' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o5'%3E%3Cstop offset='0' stop-color='%23d69600' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%23d69600' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%23d69600' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o6'%3E%3Cstop offset='0' stop-color='%230096c8' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%230096c8' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%230096c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='60' r='12' fill='url(%23o0)'/%3E%3Ccircle cx='50' cy='60' r='2.4' fill='%2312a046' fill-opacity='0.22'/%3E%3Ccircle cx='330' cy='110' r='13.5' fill='url(%23o1)'/%3E%3Ccircle cx='330' cy='110' r='2.7' fill='%238c32d2' fill-opacity='0.22'/%3E%3Ccircle cx='170' cy='190' r='10.5' fill='url(%23o2)'/%3E%3Ccircle cx='170' cy='190' r='2.1' fill='%23d69600' fill-opacity='0.22'/%3E%3Ccircle cx='400' cy='300' r='12' fill='url(%23o3)'/%3E%3Ccircle cx='400' cy='300' r='2.4' fill='%230096c8' fill-opacity='0.22'/%3E%3Ccircle cx='250' cy='380' r='9' fill='url(%23o4)'/%3E%3Ccircle cx='250' cy='380' r='1.8' fill='%2312a046' fill-opacity='0.22'/%3E%3Ccircle cx='70' cy='330' r='10.5' fill='url(%23o5)'/%3E%3Ccircle cx='70' cy='330' r='2.1' fill='%23d69600' fill-opacity='0.22'/%3E%3Ccircle cx='200' cy='40' r='9' fill='url(%23o6)'/%3E%3Ccircle cx='200' cy='40' r='1.8' fill='%230096c8' fill-opacity='0.22'/%3E%3C/svg%3E"); background-size: 460px 420px; }

/* Card lift (light mode only) */
:root { --lift: 0 0 0 transparent; }
:root.light-mode { --lift: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -16px rgba(0,0,0,.28); }

/* Brand pops in once (still for reduced motion) */
.landing-brand { animation: brandPop .35s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes brandPop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

/* Menu bars get a crisp edge and soft shadow */
.nav-bar { box-shadow: 0 8px 20px -16px rgba(0,0,0,.6); }
:root.light-mode .nav-bar { box-shadow: 0 8px 20px -16px rgba(0,0,0,.3); }

/* Cards and tiles lift on hover; light mode gives them edges */
.plan-card, .mode-card, .calc-card, .cat-card, .store-btn, .media-toggle { box-shadow: var(--lift); }
:root.light-mode .plan-card, :root.light-mode .mode-card, :root.light-mode .calc-card, :root.light-mode .cat-card { border-color: rgba(0,0,0,.1); }
body.has-mouse .store-btn:hover { transform: translateY(-1px); }

/* Tabs: a clearer active underline */
.features-tab.active::after { height: 3px; border-radius: 2px; }

/* Section bands (latest, multiplayer, release notes) get a faint tint */
.latest-section, .mp-section { background: linear-gradient(180deg, transparent, rgba(0,255,136,.035), transparent); }
:root.light-mode .latest-section, :root.light-mode .mp-section { background: linear-gradient(180deg, transparent, rgba(10,127,69,.05), transparent); }

@media (prefers-reduced-motion: reduce) { .landing-brand { animation: none; } body.has-mouse .store-btn:hover { transform: none; } }


/* ============================================================
   Phone splash in light mode (the HTML splash, not screenshots)
   ============================================================ */
:root.light-mode .phone-screen { background: #eef6f0; }
:root.light-mode .phone-splash { background: radial-gradient(80% 55% at 50% 45%, rgba(0,255,136,.22), rgba(0,255,136,0) 70%), linear-gradient(160deg, #ffffff 0%, #eef6f0 60%, #ffffff 100%); }
:root.light-mode .phone-splash-title { color: #141a22; text-shadow: 0 0 18px rgba(0,255,136,.35); }
:root.light-mode .phone-splash-subtitle { color: rgba(20,26,34,.55); }
:root.light-mode .phone-strip { background: rgba(255,255,255,.8); border-top-color: rgba(10,127,69,.2); }
:root.light-mode .phone-strip-label, :root.light-mode .phone-strip-btn { color: #48525f; }
:root.light-mode .phone-strip-btn.active, :root.light-mode body.has-mouse .phone-strip-btn:hover { color: rgb(10,127,69); background: rgba(10,127,69,.12); }
:root.light-mode .phone-notch { background: #0b0b0d; }
/* The cast view: the night sky becomes a soft morning sky */
:root.light-mode .phone-view-main { background: radial-gradient(120% 80% at 50% 32%, #ffffff 0%, #e4f3ea 72%) !important; }
:root.light-mode .phone-view-main svg circle[fill="#cfe2ff"] { fill: #9fb7d6; }
:root.light-mode .phone-view-main svg path[fill="#dffbe9"], :root.light-mode .phone-view-main svg path[fill="#cffbe0"], :root.light-mode .phone-view-main svg circle[fill="#dffbe9"] { fill: #6cc795; }