/* ==========================================================================
   JeffBase — visual identity, ported from PandaChess (css/style.css).
   Radial ambient glow, glass panels, piece shadows, premium board ring.
   These are the "PandaChess look" the game window inherits (chess-app-design
   source rule). Plain CSS + CSS variables — no Tailwind, no build step.
   ========================================================================== */

:root {
  color-scheme: light dark;
  --bg: #eef2ff;
  --fg: #1e293b;
  --muted: #64748b;
  --panel: rgba(255, 255, 255, 0.65);
  --panel-border: rgba(255, 255, 255, 0.6);
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --line: rgba(15, 23, 42, 0.08);
  --board-light: #DFE3E8;   /* Ocean Blue — JeffBase default board */
  --board-dark:  #4A73A2;
  --ring: rgba(59, 130, 246, 0.15);
}

:root[data-theme="dark"], .dark {
  --bg: #0b1020;
  --fg: #e2e8f0;
  --muted: #94a3b8;
  --panel: rgba(19, 21, 26, 0.65);
  --panel-border: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020;
    --fg: #e2e8f0;
    --muted: #94a3b8;
    --panel: rgba(19, 21, 26, 0.65);
    --panel-border: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- Glass panels ---- */
.glass-panel {
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 40px -10px rgba(31, 38, 135, 0.15);
  border-radius: 18px;
}
:root[data-theme="dark"] .glass-panel,
.dark .glass-panel { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6); }
.glass-panel::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); }

/* ---- Ambient radial glow background (opacity-only animation, GPU-composited) ---- */
@keyframes ambientGlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.8; }
}
body.glow::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(99, 102, 241, 0.45) 0%,
      rgba(139, 92, 246, 0.35) 25%,
      rgba(59, 130, 246, 0.25) 50%,
      transparent 70%);
  animation: ambientGlow 12s ease-in-out infinite alternate;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}
:root[data-theme="dark"] body.glow::before,
.dark body.glow::before {
  background: radial-gradient(ellipse at center,
      rgba(99, 102, 241, 0.6) 0%,
      rgba(139, 92, 246, 0.45) 25%,
      rgba(59, 130, 246, 0.3) 50%,
      transparent 70%);
}

/* ---- Resting piece shadows ---- */
.piece-shadow {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  transform: translateZ(0);
  transition: opacity 0.5s ease-in-out;
}
:root[data-theme="dark"] .piece-shadow,
.dark .piece-shadow { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.8)); }

/* ---- Premium physical board ring ---- */
.premium-board-ring {
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5),
              0 0 60px var(--ring),
              inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
}

/* ---- Small shared bits ---- */
a { color: var(--accent); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  padding: 8px 14px;
  transition: filter 0.15s ease;
}
button:hover { filter: brightness(1.08); }
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
}