/* ============================================================
   vflower · 共用：字体、三套主题的配色、壁纸、基础字号
   主题由视口宽高比决定：
     雨夜 RAIN   ≥ 17:10        16:9、21:9 横屏（博丽灵梦 & 宇佐见莲子）
     绘梨衣 ERII  3:5 ~ 17:10    4:3 / 16:10 平板横竖屏（上杉绘梨衣）
       └ 横向 ≥ 6:5 左文右图；竖向 < 6:5 壁纸铺满、内容上滑
     幽香 YUUKA  < 3:5          手机 9:16 ~ 9:21（风见幽香）
   设备类型：绘梨衣只给触屏设备（pointer: coarse，平板）。电脑（pointer: fine，鼠标/触控板）
     横向窗口一律雨夜，竖向窗口一律幽香，所以 16:10 的电脑不会显示绘梨衣
   所有尺寸用 rem，html 的字号随画幅等比缩放
   ============================================================ */

@font-face { font-family: "Cormorant Deco"; font-style: italic; font-weight: 600; font-display: swap;
  src: url(../fonts-latin/cormorant-600i.woff2) format("woff2"); }
@font-face { font-family: "Caveat Deco"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts-latin/caveat-700.woff2) format("woff2"); }

:root {
  --font: "RHR Heavy", "Resource Han Rounded CN Heavy", "Resource Han Rounded CN", "PingFang SC", "Hiragino Maru Gothic ProN",
          "Microsoft YaHei UI", "Microsoft YaHei", "Yu Gothic UI", "Noto Sans CJK SC", system-ui, sans-serif;
  --serif: "Cormorant Deco", "Times New Roman", serif;
  --hand: "Caveat Deco", "RHR Heavy", "Resource Han Rounded CN Heavy", "Microsoft YaHei", cursive;

  /* —— 幽香（默认）：向日葵黄、叶绿、奶油白 —— */
  --text: #2B2416;
  --muted: #6E6250;
  --accent: #E9A100;
  --accent-2: #4E7D31;
  --accent-3: #C2412D;
  --card-bg: rgba(255, 250, 232, .1);
  --card-line: rgba(255, 255, 255, .7);
  --page-bg: #F4F1E6;
  --focus: #E9A100;
  color-scheme: light;
  font-size: clamp(13.5px, 3.6vw + .1vh, 17px);
}

/* —— 绘梨衣：灰白纸面、墨黑排版、红发的红 —— */
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 17/10) {
  :root {
    --text: #111;
    --muted: #4A4A4A;
    --accent: #C8102E;
    --accent-2: #111;
    --accent-3: #FFD43B;
    --card-bg: rgba(255, 255, 255, .14);
    --card-line: #111;
    --page-bg: #E4E2E3;
    --focus: #C8102E;
    font-size: clamp(14px, 1.2vw + .5vh, 20px);
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 17/10) {
  :root { font-size: clamp(16px, .55vw + 1vh, 22px); }
}

/* —— 雨夜：深蓝夜色玻璃、窗灯琥珀、围巾的红 —— */
@media (min-aspect-ratio: 17/10), (pointer: fine) and (min-aspect-ratio: 6/5) {
  :root {
    --text: #F2EEE8;
    --muted: #C3BCB3;
    --accent: #F2C46D;
    --accent-2: #C7372F;
    --accent-3: #9FB4D8;
    --card-bg: rgba(18, 20, 30, .06);
    --card-line: rgba(255, 255, 255, .16);
    --page-bg: #1A1D26;
    --focus: #F2C46D;
    color-scheme: dark;
    font-size: clamp(16px, .4vw + 1.15vh, 24px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-weight: 900;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: .6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 壁纸 ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--page-bg); }
.page, .wrap, .top { position: relative; z-index: 1; }
.bg picture, .bg img { width: 100%; height: 100%; }
.bg img { object-fit: cover; object-position: 50% 0%; }

/* 雨夜：16:9 等比原图窄 → 裁两侧（保住左下角署名）；21:9 等比原图宽 → 原图完整显示，两侧用模糊版补齐 */
@media (min-aspect-ratio: 17/10), (pointer: fine) and (min-aspect-ratio: 6/5) {
  .bg img { object-position: 8% 50%; }
}
@media (min-aspect-ratio: 329/160) {
  .bg { background: #14161D url(../img/wall-wide-blur.webp) center / cover no-repeat; }
  .bg img {
    object-fit: contain; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  }
}

/* 绘梨衣横屏：程序扩展出的 16:10 横版全屏铺满；4:3 等更方的屏幕从左侧裁，人物始终完整 */
@media (pointer: coarse) and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 17/10) {
  .bg { background: #DCDADB; }
  .bg img { object-position: 100% 50%; }
}
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 6/5) {
  .bg img { object-position: 50% 20%; }
}

/* 语言切换（各主题在 home.css 里换皮） */
.lang-switch { display: inline-flex; gap: .1rem; padding: .18rem; border-radius: 999px; }
.lang-switch button {
  border: 0; background: transparent; cursor: pointer;
  font-size: .75rem; line-height: 1; padding: .42rem .6rem; border-radius: 999px; color: var(--muted);
}
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}