/* PR4 Theme system — Dark / Pyonya. Toggled by setting `data-theme="X"`
 * on <body>. Acts as overrides to landing.css ':root' defaults (which are
 * the Dark palette). Apply via <body data-theme="…"> or via static/theme.js
 * which persists the choice in localStorage.
 *
 * 2026-08-06: light mode deleted entirely (spec §7 — dark and PYONYA only).
 * There is deliberately no prefers-color-scheme handling: a light-mode OS
 * gets dark. theme.js migrates any stored "light" preference to "dark". */

body[data-theme="pyonya"] {
  --bg:           #1A0B2E;
  --bg-elev:      #25143F;
  --panel:        #2C1A4A;
  --panel-2:      #361F58;
  --panel-line:   #4A2D70;
  --panel-line-hot: #7A4DB6;
  --fg:           #FBE9C3;
  --fg-muted:     #D9B7E8;
  --fg-dim:       #A18CC0;

  --ton-blue:        #5BB6FF;
  --ton-blue-bright: #FFD562;
  --pyo-yellow:      #FFD562;
  --pyo-orange:      #FF9F4D;
  --pyo-pink:        #FF7EB9;
  --pyo-violet:      #C4A0FF;

  --shadow-soft: 0 8px 24px rgba(255,213,98,0.10);
  --shadow-pop:  0 14px 48px rgba(255,213,98,0.18);
  --shadow-blue: 0 14px 32px rgba(255,176,82,0.32);
}
body[data-theme="pyonya"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 0%,
              rgba(255,176,82,0.10), transparent 60%),
              radial-gradient(ellipse 80% 60% at 0% 100%,
              rgba(255,213,98,0.06), transparent 70%);
}

/* ---------------------------------------------------------------------------
 * Shared theme-toggle component. JS in theme.js builds the markup; the only
 * CSS surface needed here is the pill UI.
 * ------------------------------------------------------------------------- */
.pyo-theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.pyo-theme-toggle button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.pyo-theme-toggle button:hover { color: var(--fg); }
.pyo-theme-toggle button.active {
  color: var(--fg);
  background: rgba(54, 184, 255, 0.16);
}
body[data-theme="pyonya"] .pyo-theme-toggle button.active {
  background: rgba(255, 213, 98, 0.18);
  color: #FFD562;
}

/* Mount the toggle into the nav next to the CTA. Hide on the smallest
 * widths where the nav links collapse — the toggle isn't load-bearing on
 * mobile. */
.lpx-nav-themer { display: inline-flex; margin-left: 14px; }
@media (max-width: 720px) {
  .lpx-nav-themer { display: none; }
}

/* ---------------------------------------------------------------------------
 * Shared DYOR disclaimer block. Mounted on pages that surface wallet-level
 * inference (Cabal Score, Whale Watch, protected KOL activity, NFT whales, etc).
 * ------------------------------------------------------------------------- */
.pyo-dyor-block {
  max-width: 980px;
  margin: 28px auto 18px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.38);
  font: 500 13.5px/1.55 Inter, system-ui, sans-serif;
  color: var(--fg);
}
.pyo-dyor-block strong { color: #fca5a5; }
body[data-theme="pyonya"] .pyo-dyor-block { background: rgba(255, 213, 98, 0.06); border-color: rgba(255, 176, 82, 0.32); }
body[data-theme="pyonya"] .pyo-dyor-block strong { color: #FFD562; }

/* Canonical nav: labels never wrap ("Open Map" / "AI Web ->" were breaking
 * onto two lines on crowded viewports). */
.lpx-nav-links a { white-space: nowrap; }

/* ===== Nav: slightly larger presence ===== */
.lpx-nav-links a{font-size:15px}
.lpx-nav-links{gap:26px}
.lpx-brand-name{font-size:22px}
.lpx-nav-cta .lpx-btn{font-size:14px;padding:11px 18px}

/* Nav CTA uses the ONE flat-cobalt primary now — the animated gold sheen +
   off-cobalt gradient override (btnSheen) was removed 2026-08-22 (spine:
   no gradient-sliding fills). */

/* ===== Footer always bottom-aligned (content pages) =====
   Footer-class-agnostic so BOTH .lpx-foot (one-liner) and .lpx-footer (grid)
   pin to the viewport bottom on short pages — previously only .lpx-foot
   matched, so account/gifts/gifts-detail/login/signup floated mid-page. */
body:has(> footer){min-height:100vh;display:flex;flex-direction:column}
body:has(> footer) > footer{margin-top:auto}

/* Footer: bottom-align the brand block with the (taller) link columns on every page. */
.lpx-foot-inner{align-items:end}

/* ================= LIGHT MODE removed 2026-08-06 =================
 * Two full component sweeps lived here (the 2026 landing sweep and the
 * 2026-07-08 per-page sweep — ~160 lines of body[data-theme="light"]
 * overrides). Deleted with the theme itself: dark and PYONYA are the only
 * palettes now (spec §7). If light ever returns, recover the blocks from
 * the pre-2026-08-06 copy of this file rather than rebuilding by eye —
 * every colour in them was contrast-measured. */


/* ===== Pyonya assistant — PYONYA-mode side-margin popup, ONE rotating tip at a time ===== */
.pyo-assist{position:fixed;right:20px;bottom:20px;z-index:120;width:242px;max-width:calc(100vw - 32px);text-align:center;
  background:linear-gradient(165deg,#1c1235,#0e0a1c);border:1px solid rgba(247,224,138,.32);border-radius:20px;
  box-shadow:0 22px 54px rgba(0,0,0,.55);padding:20px 18px 18px;
  transform:translateY(24px) scale(.96);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.16,.84,.28,1),opacity .38s}
.pyo-assist.show{transform:none;opacity:1;pointer-events:auto}
.pyo-assist-x{position:absolute;top:9px;right:12px;background:none;border:0;color:#9a8fb5;font-size:20px;line-height:1;cursor:pointer;padding:2px 4px}
.pyo-assist-x:hover{color:#fff}
.pyo-assist-av{width:86px;height:86px;border-radius:50%;object-fit:cover;border:3px solid rgba(247,224,138,.6);margin:0 auto;display:block;animation:pyoAvFloat 3s ease-in-out infinite}
@keyframes pyoAvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.pyo-assist-av{animation:none}}
.pyo-assist-name{font:800 16px Inter;color:#fff;margin-top:10px}
.pyo-assist-tip{display:block;margin-top:14px;padding:14px 16px;border-radius:13px;font:800 18px/1.2 Inter;color:#fff;
  background:rgba(247,224,138,.13);border:1px solid rgba(247,224,138,.42);text-decoration:none;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s,background .15s,border-color .15s}
.pyo-assist-tip.in{opacity:1;transform:none}
.pyo-assist-tip::after{content:" \2192";opacity:.7}
.pyo-assist-tip:hover{background:rgba(247,224,138,.24);border-color:rgba(247,224,138,.65)}
@media(max-width:520px){.pyo-assist{right:12px;bottom:12px;width:214px}}