/* ===== 通用 ===== */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif; background: #0a0a0a; color: #fff; overflow: hidden; user-select: none;}
.screen {display: none; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center;}
.screen.active {display: flex;}
h1 {font-size: 3.5rem; margin-bottom: 2rem; background: linear-gradient(45deg, #00ff88, #00d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: glow 2s ease-in-out infinite alternate;}
@keyframes glow {from {text-shadow: 0 0 20px #00ff88;} to {text-shadow: 0 0 30px #00d4ff, 0 0 40px #00ff88;}}
.bigBtn {padding: 1.2rem 4rem; font-size: 1.8rem; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; letter-spacing: 2px; transition: .3s;}
.bigBtn:hover {transform: scale(1.1); box-shadow: 0 5px 20px rgba(255, 255, 255, .3);}
.backBtn {padding: .6rem 2rem; background: rgba(255, 255, 255, .1); border: 2px solid #fff; color: #fff; border-radius: 25px; cursor: pointer; font-size: 1rem; transition: .3s;}
.backBtn:hover {background: rgba(255, 255, 255, .2);}
/* 主菜单 */
#mainMenu .bigBtn {margin: 1rem 0;}
#shopBtn {background: linear-gradient(45deg, #ffd700, #ffaa00);}
#gameBtn {background: linear-gradient(45deg, #00ff88, #00cc66);}
/* 商店 */
#shopScreen .shopDisplay {display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem;}
#shopScreen .coin, #shopScreen .orb {font-size: 2rem; padding: 1rem 2rem; background: rgba(255, 255, 255, 0.1); border-radius: 20px; min-width: 300px; text-align: center;}
#shopScreen .coin {color: #ffd700; border: 2px solid #ffd700;}
#shopScreen .orb {color: #00ff88; border: 2px solid #00ff88;}
#shopScreen .exchange {font-size: 1.5rem; margin-bottom: 2rem; color: #00ff88;}
#shopScreen .exchangeBtn {padding: 1rem 3rem; font-size: 1.5rem; background: linear-gradient(45deg, #00ff88, #00cc66); border: none; border-radius: 50px; cursor: pointer; transition: .3s; margin-bottom: 1rem;}
#shopScreen .exchangeBtn:hover {transform: scale(1.05);}
#shopScreen .backBtn {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
/* 难度选择 */
#diffScreen .difficultyButtons {display: flex; flex-direction: column; gap: 1.5rem;}
.difficultyBtn {padding: 1rem 3rem; font-size: 1.5rem; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; letter-spacing: 2px; transition: .3s;}
.easy {background: linear-gradient(45deg, #00ff88, #00cc66);}
.normal {background: linear-gradient(45deg, #ffd700, #ffaa00);}
.hard {background: linear-gradient(45deg, #ff6b6b, #ff4444);}
.nightmare {background: linear-gradient(45deg, #9b59b6, #8e44ad);}
.hell {background: linear-gradient(45deg, #2c3e50, #34495e);}
.difficultyBtn:hover {transform: scale(1.1);}
#diffScreen .backBtn {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
/* 游戏 */
#gameScreen {position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0a 100%);}
.gameUI {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 3rem; font-size: 1.5rem; z-index: 100;}
.levelDisplay, .scoreDisplay, .timeDisplay {background: rgba(0, 0, 0, .7); padding: .5rem 1.5rem; border-radius: 25px; border: 2px solid #00ff88;}
#gameCanvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.warning {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: #ff0000; background: rgba(255, 0, 0, .8); padding: 2rem 4rem; border-radius: 20px; animation: shake .5s infinite; display: none; z-index: 200;}
@keyframes shake {0%, 100% {transform: translate(-50%, -50%) rotate(0);} 25% {transform: translate(-48%, -50%) rotate(-5deg);} 75% {transform: translate(-52%, -50%) rotate(5deg);}}
/* 03:30 成功提示 */
.successPop {position: absolute; inset: 0; background: rgba(0, 0, 0, .85); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 350;}
.successPop h2 {font-size: 3rem; color: #00ff88; margin-bottom: 1rem;}
.successPop p {font-size: 1.8rem; margin-bottom: 2rem;}
.successPop button {padding: 1rem 3rem; font-size: 1.5rem; background: linear-gradient(45deg, #00ff88, #00cc66); border: none; border-radius: 50px; cursor: pointer;}
/* 惩罚遮罩 */
.punishment {position: absolute; inset: 0; background: rgba(0, 0, 0, .95); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 300;}
.punishment h2 {font-size: 4rem; color: #ff0000; margin-bottom: 2rem; animation: pulse .5s infinite;}
@keyframes pulse {0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);}}
.punishment p {font-size: 2rem; margin-bottom: 3rem; text-align: center; color: #fff;}
.punishment button {padding: 1rem 3rem; font-size: 1.5rem; background: linear-gradient(45deg, #ff4444, #cc0000); border: none; border-radius: 50px; color: #fff; cursor: pointer; transition: .3s;}
.punishment button:hover {transform: scale(1.1); box-shadow: 0 5px 20px rgba(255, 0, 0, .5);}
/* 游戏界面返回按钮 - 左上角 */
#gameScreen .backBtn {position: absolute; top: 20px; left: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.7); border: 2px solid #00ff88; color: #00ff88; padding: 0.5rem 1.5rem;}
/* 摇杆控制（右下角） */
.joystick-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  z-index: 100;
  touch-action: none;
}
.joystick-base {
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 136, 0.2);
  border: 3px solid #00ff88;
  border-radius: 50%;
  position: relative;
}
.joystick-handle {
  width: 40px;
  height: 40px;
  background: #00ff88;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: move;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  transition: transform 0.1s;
}