/* ---------- Global ---------- */
body {
  margin: 0;
  padding: 0;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  color: #f0e6c6;
  background: radial-gradient(circle at center, #001027 0%, #000814 100%);
  overflow-x: hidden;
}

/* Fade-in animation */
.fade-in {
  animation: fadeIn 1.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Intro Page ---------- */
.intro-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.intro-container {
  text-align: center;
  animation: glowPulse 3s infinite alternate;
}
@keyframes glowPulse {
  0% { text-shadow: 0 0 10px #c7a942; }
  100% { text-shadow: 0 0 25px #ffcc33; }
}
.game-title {
  font-size: 2.6em;
  color: #ffda6b;
  letter-spacing: 2px;
  text-shadow: 0 0 20px #ffcc33;
}
.game-desc {
  font-size: 1.1em;
  color: #d9c99a;
  margin: 15px 0 30px;
}
.btn {
  background: linear-gradient(90deg, #1e1b12, #695d26);
  color: #fff8d4;
  border: none;
  padding: 12px 28px;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px #cfa80066;
}
.btn:hover {
  background: linear-gradient(90deg, #7d6a2a, #cfa800);
  box-shadow: 0 0 25px #ffcc33;
}
.sound-toggle {
  margin-top: 30px;
}
.sound-btn {
  background: transparent;
  border: none;
  font-size: 1.3em;
  cursor: pointer;
  color: #ffda6b;
}

/* ---------- Level Page ---------- */
.level-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}
.floor-number {
  font-size: 2em;
  color: #ffda6b;
  text-shadow: 0 0 12px #ffcc33;
}
.score {
  margin-top: 10px;
  font-size: 1.3em;
  color: #ffe57f;
}
.message {
  margin-top: 20px;
  font-size: 1.1em;
  color: #f0e6c6;
}
.plus-five {
  position: absolute;
  font-size: 2em;
  color: #ffcc33;
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  from { opacity: 0.8; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-60px); }
}

/* ---------- Special Floors ---------- */
.special {
  background: linear-gradient(180deg, #000814, #001c3b, #00264f);
  box-shadow: inset 0 0 100px #ffcc3355;
}
.special h2 {
  color: #ffda6b;
  font-size: 2em;
  text-shadow: 0 0 20px #ffcc33;
}
.special .message {
  color: #f4e9ca;
}

/* ---------- Buttons ---------- */
.next-btn {
  margin-top: 30px;
  background: linear-gradient(90deg, #cfa800, #ffcc33);
  color: #000;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}
.next-btn:hover {
  box-shadow: 0 0 20px #ffcc33;
}

/* ---- Dynamic Scan Effects ---- */

/* 光效闪烁背景 */
.flash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, rgba(0,0,0,0.9) 80%);
  animation: flashFade 0.8s ease-out forwards;
  z-index: 999;
  pointer-events: none;
}
@keyframes flashFade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

/* +5 动画升级 */
.plus-five {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  color: #ffcc33;
  text-shadow: 0 0 15px #ffd700;
  animation: floatUpScale 1s ease-out forwards;
}
@keyframes floatUpScale {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  40% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.8); }
}

/* 分数栏闪烁 */
@keyframes scoreFlash {
  0%, 100% { color: #ffe57f; text-shadow: none; }
  50% { color: #fff6b3; text-shadow: 0 0 10px #ffcc33; }
}

/* 烟花粒子（特殊楼层） */
.firework {
  position: fixed;
  width: 4px;
  height: 4px;
  background: #ffcc33;
  border-radius: 50%;
  animation: fireworkAnim 1s ease-out forwards;
}
@keyframes fireworkAnim {
  0% { transform: translate(0,0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)); opacity: 0; }
}

/* ===== Enhanced Animations (Deep Blue + Gold Style) ===== */

/* 入场动画：标题、描述、按钮依次浮现 */
.intro-container h1 {
  opacity: 0;
  transform: translateY(-30px);
  animation: slideFadeIn 1.2s ease-out forwards;
}
.intro-container p {
  opacity: 0;
  transform: translateY(-20px);
  animation: slideFadeIn 1.2s ease-out 0.4s forwards;
}
.intro-container .btn {
  opacity: 0;
  transform: scale(0.9);
  animation: fadeGrowIn 1s ease-out 0.8s forwards;
}

@keyframes slideFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeGrowIn {
  to { opacity: 1; transform: scale(1); }
}

/* 按钮悬停波纹光 */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
}
.btn:hover::after {
  left: 130%;
  transition: left 0.8s ease;
}

/* 扫码动画增强：+5 金色旋转闪光 */
.plus-five {
  animation: floatUpScaleGlow 1.3s ease-out forwards;
}
@keyframes floatUpScaleGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.5) rotate(0deg);
    text-shadow: 0 0 5px #ffcc33;
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.3) rotate(10deg);
    text-shadow: 0 0 20px #ffe57f, 0 0 40px #ffcc33;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -160%) scale(0.8) rotate(-15deg);
    text-shadow: 0 0 10px #ffcc33;
  }
}

/* 特殊楼层背景脉冲 + 烟花升级 */
.special {
  background: linear-gradient(180deg, #000814, #001c3b 50%, #00264f);
  animation: bgPulse 3s infinite alternate;
}
@keyframes bgPulse {
  0% { box-shadow: inset 0 0 50px #ffcc3333; }
  100% { box-shadow: inset 0 0 120px #ffcc33aa; }
}

/* 烟花多色扩散 */
.firework {
  background: radial-gradient(circle, #fff8dc 0%, #ffcc33 60%, transparent 100%);
  width: 6px;
  height: 6px;
}