/* 伤感咩吖 — base reset & shared primitives */

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  color: #2c1f15;
  background: #1c130c;
  overflow-x: hidden;
  /* iOS Safari 安全区 + 动态视口 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::selection {
  background: var(--theme-strong, #8B6B4A);
  color: #fff8e8;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:root {
  --font-display: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-serif-cn: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-ui: 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-hand-en: var(--font-display);
  --font-hand-cn: var(--font-serif-cn);
}

.hand-en {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}

.hand-cn {
  font-family: var(--font-serif-cn);
}

/* —— 皮革笔记本卡片（默认蛾棕皮，主体页另接主题色覆盖）—— */
.notebook {
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 220, 180, 0.2), transparent 60%),
    radial-gradient(140% 90% at 80% 90%, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(135deg, var(--theme-strong, #8B6B4A) 0%, var(--theme-deep, #5b4530) 100%);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 2px 0 rgba(255, 220, 180, 0.18) inset;
  overflow: hidden;
}

.notebook::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/paper.svg');
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

.notebook::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/noise.svg');
  background-size: 220px 220px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* —— 通用的磨砂底色（主题最浅色 + 噪点）—— */
.frosted {
  position: relative;
  background-color: var(--theme-soft, #f5e8d4);
  overflow: hidden;
}

.frosted::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/noise.svg');
  background-size: 220px 220px;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* —— 三个洞孔 —— */
.holes {
  position: absolute;
  top: 14px;
  left: 22px;
  width: 60px;
  height: 24px;
  background: url('../img/hole.svg') center/contain no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

/* —— 选中态边框 —— */
:focus-visible {
  outline: 2px dashed var(--theme-strong, #f5e8d4);
  outline-offset: 3px;
  border-radius: 4px;
}

/* —— 隐藏原生光标 (entry 页用气球替代；触屏不隐藏) —— */
[data-pointer='fine'] .balloon-cursor *,
[data-pointer='fine'] .balloon-cursor {
  cursor: none !important;
}

/* —— 触摸下统一的按压反馈 —— */
[data-pointer='coarse'] button:active,
[data-pointer='coarse'] .tile:active,
[data-pointer='coarse'] .swatch:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* —— 极光背景层（仅高端机启用动画，中端静态淡彩，低端不渲染） —— */
.aurora-bg {
  position: fixed;
  inset: -10vmax;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px) saturate(1.1);
  opacity: 0.55;
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb, var(--theme-strong, #8B6B4A) 58%, #4a78c8) 0%, transparent 65%),
    radial-gradient(34% 28% at 80% 30%, color-mix(in srgb, var(--theme-strong, #8B6B4A) 62%, #a8334c) 0%, transparent 65%),
    radial-gradient(40% 30% at 30% 78%, color-mix(in srgb, var(--theme-deep, #5b4530) 64%, #3b5a8c) 0%, transparent 70%),
    radial-gradient(32% 26% at 78% 80%, var(--theme-strong, #8B6B4A) 0%, transparent 70%);
  transition: background-image 0.6s ease;
}

[data-perf='high'] .aurora-bg {
  animation: auroraDrift 28s ease-in-out infinite;
}

[data-perf='low'] .aurora-bg {
  display: none;
}

@keyframes auroraDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(2vmax, -1.5vmax, 0) scale(1.04); }
  66%      { transform: translate3d(-1.5vmax, 2vmax, 0) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-bg { animation: none !important; }
}