@font-face {
  font-family: 'FZXIANGSU';
  src: url('/assets/fonts/FZXIANGSU24.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* swap: 先显示系统字体，字体下载完成后无缝切换，避免文字不可见 */
  font-display: swap;
}

:root {
  --bg-color: #1a1a1d;
  --pixel-yellow: #fff585;
  --pixel-green: #76ff34;
  --pixel-red: #ff4d4d;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: #fff;
  font-family: 'FZXIANGSU', sans-serif;
  overflow: hidden;
  touch-action: none;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
}

.font-pixel {
  font-family: 'FZXIANGSU', sans-serif;
}

/* 4px 黑色描边 - 针对像素游戏优化 */
.pixel-stroke-4 {
  text-shadow: 
    4px 0 0 #000, -4px 0 0 #000, 
    0 4px 0 #000, 0 -4px 0 #000,
    3px 3px 0 #000, -3px -3px 0 #000,
    3px -3px 0 #000, -3px 3px 0 #000,
    4px 4px 0 #000;
}

/* 4px 特定深色描边 (#1f1f1f) */
.pixel-stroke-dark-4 {
  text-shadow: 
    4px 0 0 #1f1f1f, -4px 0 0 #1f1f1f, 
    0 4px 0 #1f1f1f, 0 -4px 0 #1f1f1f,
    3px 3px 0 #1f1f1f, -3px -3px 0 #1f1f1f,
    4px 4px 0 #1f1f1f;
}

.pixel-text-shadow-light {
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     2px  2px 0 #000;
}

.pixel-text-shadow-yellow {
  text-shadow: 
    -2px -2px 0 #1f1f1f,
     2px -2px 0 #1f1f1f,
    -2px  2px 0 #1f1f1f,
     2px  2px 0 #1f1f1f,
     3px  3px 0 #1f1f1f;
}

/* 强制所有文本去除默认平滑以保持像素感 */
* {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
}

/* 自定义滚动条（保持像素风格） */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a1a1d;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border: 2px solid #000;
}

.pixelated {
  image-rendering: pixelated;
}

/* 移动端安全区域适配 */
.safe-top { padding-top: max(env(safe-area-inset-top), var(--status-bar-height, 0px)); }
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), var(--nav-bar-height, 0px)); }
.safe-left { padding-left: env(safe-area-inset-left); }
.safe-right { padding-right: env(safe-area-inset-right); }

@keyframes bounce-in {
  0% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -20%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -33%) scale(1); opacity: 1; }
}

.animate-bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}