/* NONOKA 共用主题：对齐桌面端亮色模式（浅紫底 + 紫→品红渐变 + 立绘） */

:root {
  color-scheme: light;
  --bg: #f7f4fd;
  --panel: #fff;
  --raised: #f0ecf8;
  --line: #ded8ea;
  --line-soft: #ebe7f1;
  --text: #383344;
  --mut: #5f5a6e;
  --faint: #79738a;
  /* 亮色下强调色同时当文字色和填充色用，取的是纯白上能过 4.5:1 的那一档紫 */
  --accent: #6b4fd0;
  --accent2: #9a6a12;
  --accent-pink: #b74d78;
  --info: #7156ce;
  --accent-dim: rgba(107, 79, 208, .10);
  --accent-line: rgba(107, 79, 208, .32);
  --accent-border: rgba(107, 79, 208, .50);
  --grad: linear-gradient(120deg, #6d5bd6, #9c4fb6);
  --on-grad: #fff;
  --glow: rgba(183, 77, 120, .16);
  --ok: #18796b;
  --warn: #bd4670;
  --danger: #bd4670;
  --shadow: rgba(75, 61, 94, .12);
  /* 压在封面/画面上的深色：浅色模式下也必须保持深，白字才读得出来 */
  --scrim: rgba(28, 20, 54, .72);
  --page-bg:
    radial-gradient(660px 360px at 8% 112%, rgba(107, 79, 208, .13), transparent 70%),
    radial-gradient(680px 380px at 94% 116%, rgba(216, 111, 155, .11), transparent 70%),
    radial-gradient(720px 320px at 54% -18%, rgba(133, 115, 212, .09), transparent 72%),
    var(--bg);
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
}

body {
  scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent;
}

/* 渐变字：标题与强调数字 */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 立绘：透明底 PNG 脚下垫一圈落地光，免得像贴上去的 */
.mascot-stage {
  position: relative;
  display: grid;
  place-items: end center;
  margin: 0 auto;
}

.mascot-stage::before {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 68%;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
}

.mascot {
  position: relative;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(70, 54, 100, .18));
  animation: mascot-float 4.2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes mascot-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot {
    animation: none;
  }
}