* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #0D0D1A;
  color: #fff;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  width: 100vw; height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  max-width: 480px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(48,96,255,0.15);
}

/* 桌面端背景装饰 */
@media (min-width: 600px) {
  body {
    background: #0D0D1A radial-gradient(circle at 30% 50%, rgba(48,96,255,0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(255,68,68,0.05) 0%, transparent 50%);
  }
  #app {
    height: min(100vh, 860px);
    border-radius: 12px;
    border: 1px solid rgba(48,96,255,0.2);
  }
}

.page {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  position: absolute; top: 0; left: 0;
  z-index: 1;
}

.hidden { display: none !important; }

/* ===== 星空背景 Canvas ===== */
#star-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== 粒子 Canvas ===== */
#particle-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* ===== 安全区 ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  .warning-bar.top { padding-top: calc(2vw + env(safe-area-inset-top)); }
  .warning-bar.bottom { padding-bottom: calc(2vw + env(safe-area-inset-bottom)); }
}

/* ===== 警示条 ===== */
.warning-bar {
  background: repeating-linear-gradient(90deg, #FF4444 0px, #FF4444 12px, #1A1A2E 12px, #1A1A2E 24px);
  color: #FFD700;
  font-size: 2.4vw;
  text-align: center;
  padding: 1.8vw 1vw;
  letter-spacing: 0.4vw;
  flex-shrink: 0;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
}

/* ===== 页面通用容器 ===== */
.cover-content, .rules-content, .result-content, .prize-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: radial-gradient(ellipse at 50% 30%, rgba(48,96,255,0.08) 0%, transparent 70%);
  position: relative;
  z-index: 1;
}

/* ===== 封面 ===== */
.cover-img {
  width: 48vw; max-width: 220px;
  height: auto; aspect-ratio: 1;
  image-rendering: pixelated;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(48,96,255,0.3));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2vh); }
}

.pixel-title {
  font-size: 5.5vw;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 0.4vw 0.4vw 0 #3060FF, -0.2vw -0.2vw 0 #FF4444;
  text-align: center;
  letter-spacing: 0.5vw;
  margin: 1vh 0;
}

.subtitle {
  font-size: 3vw;
  color: #8899BB;
  letter-spacing: 1vw;
}

/* ===== 按钮 ===== */
.pixel-btn {
  font-family: 'PingFang SC', sans-serif;
  font-size: 3.6vw; font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #3060FF 0%, #1A3A8A 100%);
  border: 0.6vw solid #1A3A8A;
  padding: 3vw 10vw;
  cursor: pointer;
  box-shadow: 0.6vw 0.6vw 0 #0F1A4A, 1vw 1vw 0 rgba(0,0,0,0.3);
  transition: all 0.08s;
  letter-spacing: 0.3vw;
  margin: 1.5vw;
  border-radius: 0;
  touch-action: manipulation;
  position: relative;
}

.pixel-btn:active {
  transform: translate(0.6vw, 0.6vw);
  box-shadow: 0.2vw 0.2vw 0 #0F1A4A;
}

.pixel-btn.secondary {
  background: linear-gradient(180deg, #555 0%, #333 100%);
  border-color: #333;
  box-shadow: 0.6vw 0.6vw 0 #222;
  font-size: 2.8vw;
}

.pixel-btn.small {
  font-size: 2.8vw;
  padding: 2vw 5vw;
}

/* ===== 规则页 ===== */
.pixel-subtitle {
  font-size: 4.2vw; font-weight: 900;
  color: #FFD700;
  text-shadow: 0.3vw 0.3vw 0 #3060FF;
  text-align: center;
}

.rules-box {
  background: rgba(255,255,255,0.04);
  border: 0.5vw solid rgba(48,96,255,0.4);
  padding: 4vw;
  width: 88vw;
  max-width: 340px;
  position: relative;
}

.rules-box::before {
  content: '';
  position: absolute;
  top: -0.5vw; left: -0.5vw;
  right: -0.5vw; bottom: -0.5vw;
  border: 0.2vw solid rgba(255,215,0,0.2);
  pointer-events: none;
}

.rules-box p {
  font-size: 2.8vw;
  line-height: 2.2;
  color: #ddd;
  letter-spacing: 0.2vw;
}

.rules-box p strong { color: #FFD700; }

.rules-chest {
  width: 18vw; max-width: 70px;
  height: auto; aspect-ratio: 1;
  image-rendering: pixelated;
  animation: float 3s ease-in-out infinite 1s;
}

/* ===== 答题页 ===== */
.quiz-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5vw 3.5vw;
  background: radial-gradient(ellipse at 50% 30%, rgba(48,96,255,0.06) 0%, transparent 70%);
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* 顶部 hud */
.quiz-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vw 0;
  flex-shrink: 0;
}

.hud-lives { font-size: 4vw; letter-spacing: 0.5vw; }
.hud-combo { font-size: 3.5vw; font-weight: 700; color: #FF6B35; transition: all 0.3s; }
.combo-show { opacity: 1; transform: scale(1); }
.combo-hide { opacity: 0; transform: scale(0.5); }

.hud-timer {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

#timer-text {
  font-size: 3.5vw;
  font-weight: 700;
  color: #FFD700;
  min-width: 8vw;
  text-align: right;
}

.timer-bar-wrap {
  width: 20vw;
  max-width: 80px;
  height: 2.5vw;
  max-height: 10px;
  background: #333;
  border: 0.3vw solid #555;
}

#timer-fill {
  height: 100%; width: 100%;
  background: #3060FF;
  transition: width 0.3s, background 0.3s;
}

/* 蛋糕区域 */
.cake-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  height: 28vw;
  max-height: 130px;
}

#cake-canvas {
  width: 28vw;
  max-width: 130px;
  height: 28vw;
  max-height: 130px;
  image-rendering: pixelated;
}

.cake-overlay-img {
  position: absolute;
  width: 28vw;
  max-width: 130px;
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
  opacity: 0.6;
  pointer-events: none;
}

.cake-step-label {
  text-align: center;
  font-size: 2.6vw;
  color: #FFD700;
  letter-spacing: 0.3vw;
  flex-shrink: 0;
}

/* 进度条 */
.progress-wrap {
  width: 100%;
  padding: 1vw 0;
  flex-shrink: 0;
}

.progress-bar {
  width: 100%;
  height: 2.5vw;
  max-height: 10px;
  background: #222;
  border: 0.3vw solid #444;
  position: relative;
}

.progress-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #FFD700 0px, #FFD700 6px, #DAA520 6px, #DAA520 12px);
  transition: width 0.5s;
}

/* 题目区 */
.question-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  padding-top: 1.5vw;
  min-height: 0;
}

.q-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question-number {
  font-size: 2.6vw;
  color: #8899BB;
  letter-spacing: 0.3vw;
}

#hint-btn {
  font-size: 2.6vw;
  color: #FFD700;
  background: rgba(255,215,0,0.1);
  border: 0.3vw solid rgba(255,215,0,0.3);
  padding: 0.6vw 2.5vw;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
}

.question-text {
  font-size: 3.3vw;
  line-height: 1.8;
  text-align: center;
  padding: 2.5vw;
  background: rgba(255,255,255,0.03);
  border: 0.4vw solid rgba(48,96,255,0.3);
  flex-shrink: 0;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 1.8vw;
  flex: 1;
  justify-content: center;
}

.option-btn {
  font-family: 'PingFang SC', sans-serif;
  font-size: 3vw;
  font-weight: 500;
  color: #fff;
  background: rgba(34,34,34,0.8);
  border: 0.5vw solid #555;
  padding: 2.8vw 3.5vw;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
  letter-spacing: 0.2vw;
  line-height: 1.5;
  width: 100%;
  border-radius: 0;
  touch-action: manipulation;
}

.option-btn:active { transform: scale(0.97); background: rgba(50,50,50,0.9); }
.option-btn.correct { background: #00AA55; border-color: #00DD77; animation: pulse-green 0.3s; }
.option-btn.wrong { background: #CC3333; border-color: #FF4444; animation: shake 0.3s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2vw); }
  75% { transform: translateX(2vw); }
}

@keyframes pulse-green {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ===== 反馈弹窗 ===== */
.feedback-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.feedback-box {
  background: #1A1A2E;
  border: 1vw solid #FFD700;
  padding: 6vw 8vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  animation: pop-in 0.25s;
  width: 70vw; max-width: 290px;
}

@keyframes pop-in {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.feedback-icon { font-size: 10vw; }
.feedback-text { font-size: 3.2vw; color: #fff; letter-spacing: 0.3vw; }

#feedback-gameover {
  color: #FF4444;
  font-size: 3.5vw;
  font-weight: 700;
  letter-spacing: 0.3vw;
}

/* ===== 错误全屏警告 ===== */
.wrong-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  animation: flash-red 0.6s;
  pointer-events: none;
}

.warning-flash { font-size: 18vw; }

@keyframes flash-red {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

/* ===== 结果页 ===== */
.result-content { gap: 2vw; }

#result-canvas {
  width: 35vw; max-width: 150px;
  height: 35vw; max-height: 150px;
  image-rendering: pixelated;
  animation: float 3s ease-in-out infinite;
}

.result-img {
  display: none;
}

.result-score {
  font-size: 4vw; color: #FFD700;
  letter-spacing: 0.5vw;
}

#result-stars {
  font-size: 5vw;
  letter-spacing: 1vw;
}

#result-combo {
  font-size: 2.8vw;
  color: #FF6B35;
  letter-spacing: 0.3vw;
}

.result-rank {
  font-size: 3.2vw;
  color: #3060FF;
  letter-spacing: 0.3vw;
}

.result-desc {
  font-size: 2.8vw;
  color: #aaa;
  text-align: center;
  line-height: 1.6;
  max-width: 70vw;
}

/* 结果页特效 */
.result-perfect .result-content {
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.08) 0%, transparent 70%);
}
.result-good .result-content {
  background: radial-gradient(ellipse at center, rgba(48,96,255,0.06) 0%, transparent 70%);
}
.result-bad .result-content {
  background: radial-gradient(ellipse at center, rgba(255,68,68,0.06) 0%, transparent 70%);
}

/* ===== 抽奖页 ===== */
.prize-content { gap: 3vw; }

.prize-chest {
  width: 35vw; max-width: 140px;
  height: auto; aspect-ratio: 1;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.2s;
}

.prize-chest.shake {
  animation: chest-shake 0.5s;
}

@keyframes chest-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.prize-text {
  font-size: 3.2vw;
  color: #FFD700;
  letter-spacing: 0.3vw;
  animation: pop-in 0.3s;
}

/* ===== 加载中标记 ===== */
.preload-img { display: none; }

/* ===== 桌面端缩放限制 ===== */
@media (min-width: 600px) {
  .pixel-title { font-size: 26px; }
  .pixel-subtitle { font-size: 20px; }
  .subtitle { font-size: 14px; }
  .pixel-btn { font-size: 17px; padding: 14px 48px; border-width: 3px; }
  .pixel-btn.secondary { font-size: 13px; }
  .pixel-btn.small { font-size: 13px; padding: 10px 24px; }
  .warning-bar { font-size: 12px; padding: 8px 4px; }
  .rules-box p { font-size: 14px; }
  .rules-chest { width: 80px; }
  .quiz-hud { padding: 4px 0; }
  .hud-lives { font-size: 22px; }
  .hud-combo { font-size: 18px; }
  #timer-text { font-size: 18px; }
  .timer-bar-wrap { height: 10px; max-width: 80px; }
  .cake-area { height: 130px; }
  #cake-canvas { width: 120px; height: 120px; }
  .cake-overlay-img { width: 120px; }
  .cake-step-label { font-size: 13px; }
  .progress-bar { height: 10px; }
  .question-number { font-size: 13px; }
  #hint-btn { font-size: 13px; }
  .question-text { font-size: 16px; padding: 12px; }
  .option-btn { font-size: 15px; padding: 14px 16px; }
  .feedback-box { padding: 30px 40px; border-width: 4px; }
  .feedback-icon { font-size: 48px; }
  .feedback-text { font-size: 16px; }
  #feedback-gameover { font-size: 16px; }
  .result-score { font-size: 20px; }
  #result-stars { font-size: 28px; }
  #result-combo { font-size: 14px; }
  .result-rank { font-size: 16px; }
  .result-desc { font-size: 14px; }
  #result-canvas { width: 150px; height: 150px; }
  .prize-chest { width: 140px; }
  .prize-text { font-size: 16px; }
  .step-indicator { font-size: 14px; }
}