/* ================================================
   base.css — Design tokens, reset, global setup
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=ZCOOL+XiaoWei&family=Ma+Shan+Zheng&display=swap');

/* ========== Design Tokens ========== */
:root {
  --bg: #f5f0e8; --surface: #fffef9; --border: #d4c8b8;
  --text: #3d3528; --dim: #8a7d6e; --bright: #1a1510;
  --amber: #b8700a; --amber-d: #8a5206;
  --amber-glow: rgba(184,112,10,.08);
  --purple: #6a3fa0; --purple-glow: rgba(106,63,160,.06);
  --green: #3a6a3a;
  --scanline: rgba(0,0,0,.015);
  --pixel-bg: #f0ebe0; --pixel-grid: rgba(180,160,140,.12);
}
[data-theme="dark"] {
  --bg: #0a0806; --surface: #11100d; --border: #2a2320;
  --text: #b8a88a; --dim: #5a4e42; --bright: #e8d5b0;
  --amber: #d4870a; --amber-d: #7a4e06;
  --amber-glow: rgba(212,135,10,.15);
  --purple: #8855cc; --purple-glow: rgba(136,85,204,.12);
  --green: #4a8a4a;
  --scanline: rgba(255,255,255,.015);
  --pixel-bg: #0a0806; --pixel-grid: rgba(255,255,255,.03);
}

/* ========== Reset ========== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);color:var(--text);
  font-family:'Courier New','Microsoft YaHei',monospace;
  min-height:100vh;overflow-x:hidden;
  transition:background .5s,color .5s;
}

/* CRT scanline overlay */
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);
  pointer-events:none;z-index:999;
}

/* Pixel background canvas (shared) */
#pixel-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}

/* ========== Shared Components ========== */

/* Container */
.container{max-width:780px;margin:0 auto;padding:48px 20px 80px;position:relative;z-index:1}

/* Page headings */
.page-title{
  font-family:'Press Start 2P',monospace;font-size:18px;color:var(--amber);
  text-align:center;letter-spacing:.3em;margin-bottom:8px;
}
.page-sub{text-align:center;font-size:14px;color:var(--dim);letter-spacing:.15em;margin-bottom:32px}

.divider{
  width:70px;height:2px;background:var(--amber);
  margin:0 auto 32px;box-shadow:0 0 8px var(--amber-glow);
}

/* Content blocks */
.content-block{
  background:var(--surface);border:1px solid var(--border);
  padding:24px;margin-bottom:14px;
}

/* Footer */
.site-footer{
  text-align:center;padding:24px;font-size:10px;color:var(--dim);
  letter-spacing:.12em;
}
.site-footer .blink{animation:blink 2s infinite}

/* ========== Utilities ========== */
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Scrollbar */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ========== Responsive ========== */
@media(max-width:600px){
  .container{padding:24px 14px 60px}
  .page-title{font-size:14px}
  .content-block{padding:16px}
}