/* ============================================================
   像素秘密模式（pixel.css · 全站统一）
   ↑↑↓↓←→←→ B A（Konami Code）触发
   - 变量层整体换肤：小窝全站两套变量体系（style.css 体系 +
     单文件页内联体系）一次覆盖，卡片文字自动跟着变
   - CRT 扫描线 + 暗角：像素模式的"显示器"感
   - CRT 开机 / 关机动画（元素由 pixel.js 注入）
   注意：本文件必须在各页所有样式之后引入（</head> 前），
   同优先级时靠加载顺序稳赢 html[data-theme="dark"]。
   ============================================================ */

/* ---------- 1. 变量层：一次换掉全站配色 ---------- */
html[data-pixel="on"] {
  /* 单文件页体系（games / fortune / notes / photos / bookmarks / playlist / 404） */
  --pink: #e94560;
  --pink-deep: #ff6b81;
  --pink-soft: #0f3460;
  --lavender: #7e57c2;
  --lavender-deep: #9d7fe0;
  --ink: #e8e8f4;
  --ink-soft: #a0a0c0;
  --card-bg: #16213e;
  --card: #16213e;
  --bg: #1a1a2e;
  --grid: rgba(233, 69, 96, 0.12);
  --glow: rgba(233, 69, 96, 0.4);
  --paper-line: #0f3460;
  --paper-line2: #16213e;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  --radius: 0;
  --coin-a: #f7c873;
  --coin-b: #d9a441;
  /* style.css 体系（index / music） */
  --bg-alt: #14142a;
  --text: #e8e8f4;
  --text-soft: #a0a0c0;
  --accent: #e94560;
  --accent-deep: #ff6b81;
  --accent-soft: #0f3460;
  --lavender-soft: #241b4d;
  --ring: rgba(233, 69, 96, 0.45);
  --radius-lg: 0;
  --radius-md: 0;
  --shadow-hover: 6px 6px 0 rgba(233, 69, 96, 0.55);
}

/* ---------- 2. 全局底子：深夜蓝 + 红色像素网格 ---------- */
html[data-pixel="on"] body {
  background-color: #1a1a2e;
  background-image:
    linear-gradient(var(--grid) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: "Fusion Pixel 12px Proportional SC", "Courier New", "Consolas", monospace;
}

/* 照片一律马赛克放大，头像秒变像素小人 */
html[data-pixel="on"] img {
  image-rendering: pixelated;
}

/* 像素世界没有圆角：全站归零（花瓣雪片也因此变成小方块） */
html[data-pixel="on"] * {
  border-radius: 0 !important;
}

html[data-pixel="on"] ::selection {
  background: #e94560;
  color: #ffffff;
}

/* ---------- 3. CRT 扫描线 + 暗角（盖在一切之上，不挡点击） ---------- */
html[data-pixel="on"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 12, 0.3) 100%);
  animation: crt-breathe 7s ease-in-out infinite;
}
@keyframes crt-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.93; }
}

/* ---------- 4. 像素卡片的通用画法：硬边框 + 偏移色块阴影 ---------- */
html[data-pixel="on"] .corner__entry,
html[data-pixel="on"] .corner__card,
html[data-pixel="on"] .contact__item,
html[data-pixel="on"] .quote,
html[data-pixel="on"] .btn--ghost {
  background: #16213e;
  border: 2px solid #0f3460;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
html[data-pixel="on"] .corner__entry:hover,
html[data-pixel="on"] .corner__card:hover,
html[data-pixel="on"] .contact__item:hover,
html[data-pixel="on"] .btn--ghost:hover {
  box-shadow: 6px 6px 0 #e94560;
  transform: translate(-2px, -2px);
}

/* 首页 hero：让星空渐变让位给纯网格夜色，标题加 FC 式落影 */
html[data-pixel="on"] .hero { background: transparent; }
html[data-pixel="on"] .hero__name {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #e94560;
  text-shadow: 3px 3px 0 #533483;
}
html[data-pixel="on"] .hero__subtitle { color: #ff6b81; }
html[data-pixel="on"] .hero__weather { color: #a0a0c0; }
html[data-pixel="on"] .hero__avatar-ring { border: 3px solid #e94560; }

/* 导航：像素面板 */
html[data-pixel="on"] .nav {
  background: #16213e;
  border-right: 3px solid #0f3460;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-pixel="on"] .nav__logo,
html[data-pixel="on"] .nav__logo-text { color: #e94560; }
html[data-pixel="on"] .nav__links a { color: #a0a0c0; }
html[data-pixel="on"] .nav__links a:hover {
  color: #ff6b81;
  background: #0f3460;
}
html[data-pixel="on"] .star-toggle,
html[data-pixel="on"] .theme-toggle,
html[data-pixel="on"] .nav__collapse {
  background: #16213e;
  border: 2px solid #0f3460;
  box-shadow: none;
}

/* 区块标题：下划线改纯色块，像 FC 关卡名 */
html[data-pixel="on"] .section__title::after {
  background: #e94560;
  border-radius: 0;
}
/* 星空模式与像素模式同开时：夜空交给像素网格 */
html[data-pixel="on"] .sheng-star-bg { display: none; }

/* 花瓣 → 像素方块雨（保留四季颜色，只是形状变方） */
html[data-pixel="on"] .petal {
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}

/* 页面过渡纱幕跟着入夜 */
html[data-pixel="on"] .page-veil { background: #1a1a2e; }

/* 占卜扑克牌：红框硬影 */
html[data-pixel="on"] .cards__card {
  background: #16213e;
  border: 2px solid #0f3460;
  box-shadow: 4px 4px 0 #e94560;
}
html[data-pixel="on"] .cards__label { color: #e94560; }

/* ---------- 5. 单文件页点名（内联样式的部分补漏） ---------- */
/* 左上角"回家"头像（notes / photos / bookmarks / playlist）与占卜返回键 */
html[data-pixel="on"] .back-home,
html[data-pixel="on"] .f-back {
  box-shadow: 3px 3px 0 #e94560;
  border: 2px solid #0f3460;
}

/* 各页大标题：红色 + 紫色落影 */
html[data-pixel="on"] .f-title,
html[data-pixel="on"] .notes-title,
html[data-pixel="on"] .bm-title,
html[data-pixel="on"] .pl-title,
html[data-pixel="on"] .book-title {
  color: #e94560;
  text-shadow: 3px 3px 0 #533483;
}

/* 对弈页：侧栏与棋盘外框 */
html[data-pixel="on"] .side-nav {
  background: #16213e;
  border-right: 3px solid #0f3460;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-pixel="on"] .side-nav__logo { color: #e8e8f4; }
html[data-pixel="on"] .side-nav__logo span { color: #e94560; }

/* 404：大数字色差 */
html[data-pixel="on"] .error-code {
  color: #e94560;
  text-shadow: 4px 4px 0 #533483, -2px -2px 0 rgba(126, 87, 194, 0.6);
}

/* 星星 tooltip / 许愿气泡：像素世界里的方框告示 */
html[data-pixel="on"] .star-tooltip {
  border: 2px solid #f7c873;
  background: #16213e;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
html[data-pixel="on"] .star-tooltip--wish {
  border-color: #ff6b81;
  color: #ffc4e1;
}

/* ---------- 6. 像素模式提示弹窗（两行：标题 + 小字） ---------- */
.pixel-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 34px;
  border: 4px solid #e94560;
  background: #16213e;
  color: #e94560;
  font-family: "Fusion Pixel 12px Proportional SC", "Courier New", monospace;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 6px 6px 0 #533483;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s steps(5);
}
.pixel-toast.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pixel-toast .pt-sub {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #a0a0c0;
}

/* ---------- 7. CRT 开机 / 关机动画（元素由 pixel.js 注入） ---------- */
.crt-anim {
  position: fixed;
  inset: 0;
  z-index: 100002;
  pointer-events: none;
  background: #000;
}
.crt-anim::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #ffffff;
  box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.9);
}
/* 开机：黑幕中一条白线展开 → 撑满亮起 → 淡出露出像素小窝 */
.crt-anim--on { animation: crt-black-out 0.28s 0.62s both; }
.crt-anim--on::before {
  animation: crt-line-in 0.3s steps(6) both, crt-fill-in 0.34s 0.3s both;
}
@keyframes crt-line-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes crt-fill-in {
  0% { transform: scaleY(1); opacity: 1; }
  60% { transform: scaleY(60); opacity: 1; }
  100% { transform: scaleY(140); opacity: 0; }
}
@keyframes crt-black-out {
  to { opacity: 0; }
}
/* 关机：白幕从满屏塌缩回一条线 → 熄灭成黑 → 淡出露出原样 */
.crt-anim--off { animation: crt-black-in 0.28s both, crt-black-out 0.26s 0.72s both; }
.crt-anim--off::before {
  animation: crt-fill-out 0.3s both, crt-line-out 0.32s 0.3s both;
}
@keyframes crt-fill-out {
  0% { transform: scaleY(140); opacity: 0; }
  40% { transform: scaleY(60); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes crt-line-out {
  0% { transform: scaleX(1); opacity: 1; }
  60% { transform: scaleX(0.6); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}
@keyframes crt-black-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 8. 减少动态偏好：安静地换装 ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-pixel="on"] body::after { animation: none; }
}