/* ============================================================
   Influence: 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(--gold); }
.theme-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

:root.light-mode {
  /* gold darkened so it reads on paper */
  --gold: #9a6f00;
  --gold-dim: rgba(154, 111, 0, 0.12);
  --gold-glow: rgba(214, 160, 0, 0.35);
  --purple: #7c3aed;
  --bg-deep: #f6f2e7;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --border: rgba(154, 111, 0, 0.22);
  --border-hover: rgba(154, 111, 0, 0.5);
  --border-section: rgba(154, 111, 0, 0.18);
  --border-secondary: rgba(0, 0, 0, 0.08);
  --text: #1c2230;
  --text-dim: #4a5262;
  --text-faint: #6b7280;
  --green-play: #12803f;
  color-scheme: light;
}

/* Bars */
:root.light-mode .store-bar { background: rgba(246, 242, 231, 0.94); }
:root.light-mode .nav-bar { background: rgba(250, 247, 239, 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 .store-bar-brand,
:root.light-mode .landing-brand,
:root.light-mode h1,
:root.light-mode h2,
:root.light-mode .fp-subheading,
:root.light-mode .mode-name,
:root.light-mode .plan-name,
:root.light-mode .release-section h2 { color: #141922; }
:root.light-mode [style*="color:#fff"],
:root.light-mode [style*="color: #fff"] { color: #141922 !important; }

/* Buttons */
:root.light-mode .store-btn-ios { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.2); color: #141922; }
: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) { background: rgba(0, 0, 0, 0.04); }

/* Cards get a soft lift instead of the dark glass */
:root.light-mode .plan-card,
:root.light-mode .mode-card,
:root.light-mode .plans-note { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.25); }

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

/* Updates page: the faint yellow "Coming soon" toggle */
:root.light-mode .future-toggle-btn { color: rgba(154, 111, 0, 0.75); }
:root.light-mode body.has-mouse .future-toggle-btn:hover { color: #9a6f00; }


/* ============================================================
   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='260' height='260'%3E%3Cg fill='%23FFD700' fill-opacity='0.09'%3E%3Cpath d='M40 30l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M190 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M120 160l4 11 11 4-11 4-4 11-4-11-11-4 11-4z'/%3E%3Cpath d='M228 210l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M30 220l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; }
:root.light-mode body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%239a6f00' fill-opacity='0.11'%3E%3Cpath d='M40 30l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M190 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M120 160l4 11 11 4-11 4-4 11-4-11-11-4 11-4z'/%3E%3Cpath d='M228 210l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M30 220l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; }

/* 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(255,215,0,.035), transparent); }
:root.light-mode .latest-section, :root.light-mode .mp-section { background: linear-gradient(180deg, transparent, rgba(154,111,0,.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: #f7f1df; }
:root.light-mode .phone-splash { background: radial-gradient(80% 55% at 50% 45%, rgba(255,215,0,.22), rgba(255,215,0,0) 70%), linear-gradient(160deg, #ffffff 0%, #f7f1df 60%, #ffffff 100%); }
:root.light-mode .phone-splash-title { color: #141a22; text-shadow: 0 0 18px rgba(255,215,0,.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(154,111,0,.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(154,111,0); background: rgba(154,111,0,.12); }
:root.light-mode .phone-notch { background: #0b0b0d; }