/* ==========================================================
 * base.css — 字体 / 变量 / 重置 / 像素工具类 / 关键帧
 * 调色板：Sweetie-16 (by GrafxKid)
 * ========================================================== */
/* Press Start 2P / VT323：SIL OFL 1.1，本地托管（国内无法稳定访问 Google Fonts） */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p-latin-ext.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin-ext.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}
/* Zpix 中文像素字体体积较大（≈1MB），走 CDN；加载失败时回退系统字体 */
@font-face {
  font-family: 'Zpix';
  src: url('https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font@3.1.11/website/zpix.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Sweetie-16 */
  --k: #1a1c2c;  --p: #5d275d;  --r: #b13e53;  --o: #ef7d57;
  --y: #ffcd75;  --l: #a7f070;  --g: #38b764;  --t: #257179;
  --n: #29366f;  --b: #3b5dc9;  --c: #41a6f6;  --a: #73eff7;
  --w: #f4f4f4;  --s: #94b0c2;  --d: #566c86;  --e: #333c57;

  --panel: #222640;
  --panel-2: #2b3152;
  --ink: var(--w);
  --ink-2: var(--s);
  --ink-3: var(--d);

  --font-pixel: 'Press Start 2P', 'Zpix', monospace;
  --font-cn: 'Zpix', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-en: 'VT323', 'Zpix', monospace;

  --px: 4px;
  --nav-w: 240px;
  --hud-h: 76px;
  --cursor: auto;
  --cursor-pointer: pointer;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--k);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: optimizeSpeed;
  cursor: var(--cursor);
  overflow-x: hidden;
}

a, button, [role="button"], label, select, .clickable { cursor: var(--cursor-pointer); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
::selection { background: var(--y); color: var(--k); }

.pixel { font-family: var(--font-pixel); letter-spacing: 0; line-height: 1.5; }
.en { font-family: var(--font-en); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 精灵 */
.spr {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  vertical-align: middle;
  animation: var(--spr-anim, none);
}

/* ---------- 像素边框：缺角描边 ---------- */
.pbox {
  --out: var(--k);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--out),
    0 var(--px) 0 0 var(--out),
    calc(var(--px) * -1) 0 0 0 var(--out),
    var(--px) 0 0 0 var(--out);
}

/* JRPG 窗口：亮色内框 + 暗色阶梯外框 */
.win {
  --frame: var(--d);
  --out: var(--k);
  --bg: var(--panel);
  position: relative;
  background: var(--bg);
  margin: 8px;
  box-shadow:
    0 -4px 0 0 var(--frame), 0 4px 0 0 var(--frame),
    -4px 0 0 0 var(--frame), 4px 0 0 0 var(--frame),
    -4px -4px 0 0 var(--out), 4px -4px 0 0 var(--out),
    -4px 4px 0 0 var(--out), 4px 4px 0 0 var(--out),
    0 -8px 0 0 var(--out), 0 8px 0 0 var(--out),
    -8px 0 0 0 var(--out), 8px 0 0 0 var(--out),
    inset 0 4px 0 0 rgba(255, 255, 255, .05),
    inset 0 -4px 0 0 rgba(0, 0, 0, .18);
}
.win.drop { filter: drop-shadow(8px 8px 0 rgba(10, 10, 20, .55)); }
.win.gold  { --frame: var(--y); }
.win.blue  { --frame: var(--c); }
.win.green { --frame: var(--g); }
.win.red   { --frame: var(--r); }
.win.plum  { --frame: var(--p); }
.win.light { --frame: var(--s); }

/* 抖动网格背景纹理 */
.dither {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .025) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .025) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--k); }
::-webkit-scrollbar-thumb {
  background: var(--d);
  border: 3px solid var(--k);
  box-shadow: inset -3px -3px 0 var(--e), inset 3px 3px 0 var(--s);
}
::-webkit-scrollbar-thumb:hover { background: var(--s); }
* { scrollbar-color: var(--d) var(--k); }

/* ---------- 全屏层 ---------- */
#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}
#fx, #wipe {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#fx { z-index: 800; }
#wipe { z-index: 950; }
#float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 850; overflow: hidden; }

/* CRT 扫描线 + 暗角 */
#crt {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45) 100%);
  animation: crt-flicker 6s steps(1) infinite;
}
body.crt-off #crt { display: none; }

#flash {
  position: fixed; inset: 0; z-index: 870; pointer-events: none;
  opacity: 0; background: var(--w);
}
#flash.on { animation: flash .32s steps(4) forwards; }

/* ---------- 关键帧 ---------- */
@keyframes spr-play { to { background-position: var(--sheet) 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes bob-sm { 50% { transform: translateY(-2px); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes nudge-x { 50% { transform: translateX(4px); } }
@keyframes squish {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.08, .92); }
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: .92; }
  48% { opacity: 1; }
  83% { opacity: .96; }
}
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-8px, 4px); }
  25% { transform: translate(8px, -4px); }
  37% { transform: translate(-6px, -4px); }
  50% { transform: translate(6px, 4px); }
  62% { transform: translate(-4px, 2px); }
  75% { transform: translate(4px, -2px); }
  87% { transform: translate(-2px, 0); }
}
@keyframes shake-sm {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes pop-in {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes drop-in {
  0% { transform: translateY(-40px); opacity: 0; }
  70% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes rise-in {
  0% { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes slide-in-r { 0% { transform: translateX(120%); } 100% { transform: translateX(0); } }
@keyframes slide-out-r { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  15% { transform: translate(-50%, -12px) scale(1.15); opacity: 1; }
  30% { transform: translate(-50%, -20px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80px) scale(1); opacity: 0; }
}
@keyframes hue-cycle {
  0% { color: var(--y); } 25% { color: var(--o); } 50% { color: var(--m, #e04f8a); } 75% { color: var(--a); } 100% { color: var(--y); }
}
@keyframes shine {
  0% { background-position: -120% 0; }
  60%, 100% { background-position: 220% 0; }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 205, 117, .7); }
  100% { box-shadow: 0 0 0 12px rgba(255, 205, 117, 0); }
}
@keyframes stamp {
  0% { transform: scale(2.4) rotate(-12deg); opacity: 0; }
  60% { transform: scale(.9) rotate(-12deg); opacity: 1; }
  100% { transform: scale(1) rotate(-12deg); opacity: 1; }
}
@keyframes march { to { background-position: 16px 0; } }

.anim-bob { animation: bob 1.2s steps(2) infinite; }
.anim-float { animation: float-y 2.4s steps(6) infinite; }
.anim-blink { animation: blink 1s steps(1) infinite; }
.anim-squish { animation: squish 1s steps(2) infinite; transform-origin: 50% 100%; }
.shake { animation: shake .4s steps(8); }
.shake-sm { animation: shake-sm .35s steps(5); }
.pop-in { animation: pop-in .35s steps(5) backwards; }
.rise-in { animation: rise-in .4s steps(5) backwards; }
/* 多帧精灵：帧动画与位移动画叠加 */
.spr.anim-bob { animation: var(--spr-anim, none), bob 1.2s steps(2) infinite; }
.spr.anim-float { animation: var(--spr-anim, none), float-y 2.4s steps(6) infinite; }
.spr.anim-squish { animation: var(--spr-anim, none), squish 1s steps(2) infinite; }
.spr.pop-in { animation: var(--spr-anim, none), pop-in .35s steps(5) backwards; }

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