/* ── 设计令牌 ──────────────────────────────────────────────
   配色取自角色本身：绀（深蓝紫）是海，蓝是白希儿，红是黑希儿。
   不用「紫发萌妹」那套通用配色。
   ──────────────────────────────────────────────────────── */
:root {
  /* 底色：量子之海的三层深度（整体调亮过，绀蓝而不是近黑） */
  --abyss: #121c44;
  --deep: #1c2a5e;
  --shelf: #2a3b7d;

  /* 两个声音 */
  --azure: #8cc4ff;
  --azure-soft: #c2dcff;
  --azure-dim: #5c88c8;
  --crimson: #ff5c78;
  --crimson-soft: #ff9dae;
  --crimson-dim: #b53c56;

  /* 文字 */
  --silk: #eef3ff;
  --ash: #a8b3d8;
  --faint: #7d88b2;

  /* 线 */
  --line: rgba(140, 196, 255, 0.2);
  --line-strong: rgba(140, 196, 255, 0.42);

  /* 字体：高对比衬线（宋体/Cormorant）负责抒情，无衬线负责干活 */
  --f-display: 'Cormorant Garamond', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC',
    'SimSun', 'Georgia', serif;
  --f-body: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Segoe UI', system-ui,
    -apple-system, sans-serif;
  --f-mono: 'Cascadia Mono', 'JetBrains Mono', Consolas, ui-monospace, monospace;

  /* 尺度 */
  --page: min(1180px, 100% - 2.5rem);
  --r: 2px;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--abyss);
  color: var(--silk);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 深处的绀色光晕，固定不动，构成「海」的空间感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(120, 170, 235, 0.22), transparent 55%),
    radial-gradient(90% 60% at 8% 8%, rgba(220, 130, 155, 0.1), transparent 60%),
    radial-gradient(140% 90% at 50% 118%, rgba(56, 76, 150, 0.75), transparent 70%),
    linear-gradient(180deg, #1a2549 0%, #131d40 45%, #0e1636 100%);
}

/* 缓慢流动的极光，给页面一点呼吸感（只用 transform，手机也扛得住） */
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(140, 196, 255, 0.12), transparent 70%),
    radial-gradient(30% 26% at 78% 62%, rgba(255, 140, 170, 0.07), transparent 70%),
    radial-gradient(30% 30% at 55% 88%, rgba(120, 160, 255, 0.09), transparent 70%);
  filter: blur(8px);
  animation: aurora 26s ease-in-out infinite;
}
@keyframes aurora {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(-2.5%, 1.8%, 0) scale(1.06);
  }
  66% {
    transform: translate3d(2.2%, -2%, 0) scale(1.03);
  }
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--azure);
  text-decoration-color: var(--azure-dim);
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* hidden 属性必须压过一切 display 规则，否则遮罩类元素隐藏不掉 */
[hidden] {
  display: none !important;
}

::selection {
  background: rgba(116, 180, 255, 0.3);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a1026;
}
::-webkit-scrollbar-thumb {
  background: #26336b;
  border: 2px solid #0a1026;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #35469a;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* 装饰性动效（极光、蝴蝶、浮尘、粒子）在「减弱动态」下一律停掉 */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* 例外：翻牌与发牌是用户主动操作后的结果反馈，保留一个短版本。
     很多手机默认开着「减弱动态」，一刀切会让这两个效果完全看不见。 */
  .card.is-open .card__front,
  .card.is-open .card__back {
    animation-duration: 0.3s !important;
    animation-iteration-count: 1 !important;
  }
  .gallery__item.is-dealt {
    animation-duration: 0.36s !important;
    animation-iteration-count: 1 !important;
  }
}