/* ============================================================================
   Pikahans Design Tokens
   Game SaaS / RPG arena visual language. Loaded BEFORE other Pikahans styles.
   ========================================================================== */

:root {
  /* Backgrounds */
  --pk-bg-0: #080b1a;
  --pk-bg-1: #101936;
  --pk-bg-2: #18264f;

  /* Surfaces & borders (glassmorphism) */
  --pk-surface-1: rgba(255, 255, 255, .08);
  --pk-surface-2: rgba(255, 255, 255, .12);
  --pk-surface-3: rgba(255, 255, 255, .16);
  --pk-border: rgba(255, 255, 255, .16);
  --pk-border-strong: rgba(255, 255, 255, .28);

  /* Brand / accents */
  --pk-primary: #6d5dfc;
  --pk-primary-2: #2f8cff;
  --pk-gold: #f7b733;
  --pk-gold-2: #ffd166;
  --pk-danger: #ff4d5e;
  --pk-success: #34d399;
  --pk-info: #38bdf8;

  /* Text */
  --pk-text: #f8fafc;
  --pk-muted: rgba(248, 250, 252, .68);
  --pk-faint: rgba(248, 250, 252, .42);

  /* Radii */
  --pk-radius-lg: 24px;
  --pk-radius-md: 16px;
  --pk-radius-sm: 10px;
  --pk-radius-pill: 999px;

  /* Shadows / glow */
  --pk-shadow-glow: 0 0 32px rgba(109, 93, 252, .35);
  --pk-shadow-gold: 0 0 28px rgba(247, 183, 51, .35);
  --pk-shadow-danger: 0 0 30px rgba(255, 77, 94, .35);
  --pk-shadow-card: 0 18px 48px rgba(0, 0, 0, .45);
  --pk-shadow-soft: 0 10px 24px rgba(0, 0, 0, .22);

  /* Gradients */
  --pk-grad-primary: linear-gradient(135deg, #6d5dfc 0%, #2f8cff 100%);
  --pk-grad-gold: linear-gradient(135deg, #f7b733 0%, #ffd166 100%);
  --pk-grad-danger: linear-gradient(135deg, #ff4d5e 0%, #ff7b54 100%);
  --pk-grad-surface: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));

  /* Layout */
  --pk-hud-height: 84px;
  --pk-maxw: 1360px;

  /* Motion */
  --pk-ease: cubic-bezier(.22, .61, .36, 1);
  --pk-fast: 140ms;
  --pk-med: 240ms;
}

/* Deep, atmospheric app background with very faint rune/energy texture. */
.pk-scope,
body.pk-themed {
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(109, 93, 252, .22), transparent 60%),
    radial-gradient(1000px 620px at 92% 6%, rgba(47, 140, 255, .18), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(247, 183, 51, .10), transparent 60%),
    linear-gradient(180deg, var(--pk-bg-1) 0%, var(--pk-bg-0) 60%, #05070f 100%);
  background-attachment: fixed;
  color: var(--pk-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans SC", "Noto Sans TC", sans-serif;
}

/* Faint floating particles / energy grid overlay. */
body.pk-themed::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px, 92px 92px;
  background-position: 0 0, 23px 23px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 85%);
}

/* Decorative blurred Hanzi watermark for arena/game ambience. */
body.pk-themed::after {
  content: "汉 字 学 习 师 生 日";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(120px, 22vw, 360px);
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .025);
  filter: blur(2px);
  white-space: nowrap;
  overflow: hidden;
}

/* Custom scrollbar to match theme. */
.pk-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.pk-scroll::-webkit-scrollbar-track { background: transparent; }
.pk-scroll::-webkit-scrollbar-thumb {
  background: var(--pk-surface-3);
  border-radius: var(--pk-radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pk-scroll::-webkit-scrollbar-thumb:hover { background: var(--pk-surface-2); }

/* Respect reduced motion globally for Pikahans. */
@media (prefers-reduced-motion: reduce) {
  body.pk-themed *,
  .pk-scope * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}