/* ============================================================
   FILE: css/light-theme.css
   JOB: Light colors for Home, Game, and Admin.
        Phone browsers must use these colors as written.
   ============================================================ */

:root {
  color-scheme: light;
  color-scheme: only light;

  --deep: #8ecae6;
  --forest: #c4ded5;
  --moss: #225642;
  --sage: #1e6753;
  --mist: #244d3d;
  --dawn: #0d261e;
  --gold: #8a5a0a;
  --gold-light: #734704;
  --warm: #f4faf7;

  --body-gradient: linear-gradient(
    to bottom,
    #163e72 0%,
    #2a629e 16%,
    #8ecceb 40%,
    #d2f0f8 62%,
    #d7efe8 100%
  );
  --ground-start: 58vh;
  --night-wash: linear-gradient(to bottom, transparent, transparent);
  --ground-fade: linear-gradient(
    to bottom,
    rgba(244, 232, 196, 0) 0%,
    rgba(228, 208, 156, 0.28) 7%,
    rgba(243, 224, 180, 0.78) 16%,
    #f6e7c6 30%,
    #f3e0b4 100%
  );
  /* Short pages paint this tall, so the first screen matches Home. */
  --fade-span: 340vh;
  --bg-gradient-1: rgba(8, 24, 52, 0.45);
  --bg-gradient-2: transparent;
  --bg-gradient-3: transparent;
  --bg-gradient-4: transparent;

  --nav-bg: linear-gradient(to bottom, rgba(14, 40, 78, 0.96), rgba(28, 72, 128, 0.5), transparent);
  --nav-logo: #f3e2a4;
  --nav-link: #f4efe4;
  --nav-hover: #fff8e6;

  --card-bg: linear-gradient(165deg, rgba(255, 252, 244, 0.96), rgba(244, 228, 196, 0.94));
  --card-border: rgba(138, 90, 10, 0.32);
  --card-hover-bg: linear-gradient(165deg, rgba(255, 253, 248, 0.98), rgba(236, 214, 168, 0.96));
  --card-shadow: rgba(92, 58, 12, 0.14);
  --card-glow: rgba(171, 120, 22, 0.22);

  --lads-bg: rgba(168, 122, 48, 0.1);
  --lads-border: rgba(138, 90, 10, 0.2);
  --device-bg: rgba(255, 252, 244, 0.96);
  --device-border: rgba(143, 97, 14, 0.38);

  --footer-border: rgba(138, 90, 10, 0.18);
  --mobile-menu-bg: rgba(218, 235, 230, 0.98);

  --toggle-bg: rgba(36, 95, 78, 0.12);
  --toggle-border: rgba(143, 97, 14, 0.42);
  --toggle-hover-bg: rgba(143, 97, 14, 0.2);
}

body {
  position: relative;
  background-color: var(--deep);
  background-image: var(--ground-fade), var(--night-wash), var(--body-gradient);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left var(--ground-start), left top, left top;
  background-size:
    100% max(calc(100% - var(--ground-start)), calc(var(--fade-span) - var(--ground-start))),
    100% 100vh,
    100% max(100%, var(--fade-span));
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--bg-gradient-1) 0%, transparent 46%);
  pointer-events: none;
  z-index: 0;
}