/* ========== 基础布局 ========== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:#cfe8ff;
  -webkit-user-select:none; user-select:none; touch-action:none; }
#gameCanvas { position:fixed; inset:0; display:block; }

/* ========== HUD 覆盖层 ========== */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }

/* 中央准星 */
#crosshair { position:absolute; left:50%; top:50%; width:40px; height:40px;
  transform:translate(-50%,-50%); opacity:.85; }
#crosshair::before, #crosshair::after { content:""; position:absolute; background:#7fd8ff;
  box-shadow:0 0 6px #7fd8ff; }
#crosshair::before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%);
  clip-path:polygon(0 0,100% 0,100% 32%,0 32%,0 68%,100% 68%,100% 100%,0 100%); }
#crosshair::after { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%);
  clip-path:polygon(0 0,32% 0,32% 100%,0 100%,68% 0,100% 0,100% 100%,68% 100%); }
#crosshair .dot { position:absolute; left:50%; top:50%; width:4px; height:4px;
  background:#fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 8px #9fe6ff; }

/* 左上状态面板 */
#statusPanel { position:absolute; left:14px; top:14px; font-size:13px;
  text-shadow:0 0 6px rgba(80,180,255,.8); }
#statusPanel .row { margin-bottom:7px; }
#statusPanel .label { display:inline-block; width:64px; color:#8fb8d8; }
#speedVal { font-size:22px; color:#aee6ff; font-weight:bold; letter-spacing:1px; }
#speedUnit { font-size:11px; color:#7fa8c8; margin-left:4px; }
#score { font-size:16px; color:#ffd97f; text-shadow:0 0 8px rgba(255,200,80,.8); }

/* 条状仪表 */
.bar { width:170px; height:10px; background:rgba(20,40,60,.7); border:1px solid rgba(110,190,255,.5);
  border-radius:5px; overflow:hidden; display:inline-block; vertical-align:middle; }
.bar > i { display:block; height:100%; width:100%; transition:width .12s linear; border-radius:4px; }
#shieldBar > i { background:linear-gradient(90deg,#1e6bff,#6fd6ff); box-shadow:0 0 8px #4fb8ff; }
#hullBar   > i { background:linear-gradient(90deg,#1fae5c,#8dff9f); box-shadow:0 0 8px #57e07f; }
#laserBar  > i { background:linear-gradient(90deg,#c33,#ff9a5f); box-shadow:0 0 8px #ff7a5f; }

/* 护盾状态 */
#shieldState { color:#7fa8c8; }
#shieldState.on { color:#6fd6ff; text-shadow:0 0 10px #4fb8ff; }

/* 警告 */
#warning { position:absolute; left:50%; top:18%; transform:translateX(-50%);
  color:#ffb04f; font-size:15px; letter-spacing:2px; text-shadow:0 0 10px rgba(255,150,50,.9);
  opacity:0; transition:opacity .3s; }
#warning.show { opacity:1; animation:blink 0.8s infinite; }
#flightInfo { position:absolute; left:50%; bottom:24%; transform:translateX(-50%);
  font-size:14px; letter-spacing:2px; color:#9fe0c8; white-space:nowrap;
  text-shadow:0 0 8px rgba(80,220,180,.7); display:none; }
#flightInfo.show { display:block; }
@keyframes blink { 50% { opacity:.35; } }

/* ========== 天体 HUD 标记 ========== */
.marker { position:absolute; transform:translate(-50%,-50%); text-align:center;
  font-size:11px; color:#9fd0f0; text-shadow:0 0 6px rgba(90,180,255,.9); white-space:nowrap;
  display:none; pointer-events:none; }
.marker.show { display:block; }
.marker .m-icon { display:block; width:14px; height:14px; margin:0 auto 2px;
  border:1px solid rgba(140,210,255,.9); transform:rotate(45deg);
  box-shadow:0 0 8px rgba(90,180,255,.7), inset 0 0 6px rgba(90,180,255,.4); }
.marker .m-label { display:block; font-weight:bold; }
.marker .m-dist { font-size:10px; color:#7fa8c8; }

/* 特殊天体标记分色 */
.marker.sun { color:#ffe080; }
.marker.sun .m-icon { border-color:#ffcc33; box-shadow:0 0 10px #ffaa00; }
.marker.blackhole { color:#ff66cc; }
.marker.blackhole .m-icon { border-color:#ff33aa; box-shadow:0 0 12px #ff0088; border-radius:50%; }
.marker.pulsar { color:#66ffff; }
.marker.pulsar .m-icon { border-color:#33ffff; box-shadow:0 0 10px #00e5ff; }
.marker.station { color:#55ffcc; }
.marker.station .m-icon { border-color:#00ffaa; box-shadow:0 0 8px #00ffaa; transform:none; }
.marker.comet { color:#7fd8ff; }
.marker.comet .m-icon { border-color:#50c8ff; box-shadow:0 0 10px #38b0ff; }

/* 雷达小地图 */
#radar { position:absolute; right:14px; bottom:14px; width:150px; height:150px;
  border:1px solid rgba(110,190,255,.5); border-radius:50%;
  background:rgba(8,18,30,.55); box-shadow:0 0 14px rgba(60,140,255,.25); }

/* 按键说明（桌面端） */
#keyHints { position:absolute; left:14px; bottom:14px; font-size:12px; line-height:1.8;
  color:#7fa8c8; text-shadow:0 0 4px rgba(80,160,255,.6); }
#keyHints b { color:#aee0ff; font-weight:normal; }

/* 帮助按钮 */
#helpBtn { position:absolute; right:14px; top:14px; width:34px; height:34px; pointer-events:auto;
  border:1px solid rgba(110,190,255,.6); border-radius:50%; background:rgba(10,25,45,.6);
  color:#9fd8ff; font-size:17px; cursor:pointer; }
#helpBtn:hover { background:rgba(30,60,100,.7); }

/* 横屏 / 全屏按钮 */
#fsBtn { position:absolute; right:56px; top:14px; width:34px; height:34px; pointer-events:auto;
  border:1px solid rgba(110,190,255,.6); border-radius:50%; background:rgba(10,25,45,.6);
  color:#9fd8ff; font-size:15px; cursor:pointer; }
#fsBtn:hover { background:rgba(30,60,100,.7); }

/* 竖屏提示条（仅触屏设备竖屏时显示） */
#rotateHint { display:none; position:fixed; left:50%; top:14px; transform:translateX(-50%);
  z-index:30; pointer-events:auto; cursor:pointer; white-space:nowrap;
  padding:8px 18px; font-size:13px; color:#ffd97f; letter-spacing:1px;
  border:1px solid rgba(255,200,110,.55); border-radius:20px; background:rgba(30,22,8,.75);
  text-shadow:0 0 8px rgba(255,190,80,.8); }
@media (orientation:portrait) {
  body.touch #rotateHint { display:block; }
}

/* ========== 移动端控件 ========== */
#touchUI { display:none; }
body.touch #touchUI { display:block; }
body.touch #keyHints { display:none; }
#joystick { position:absolute; left:5%; bottom:8%; width:120px; height:120px; pointer-events:auto;
  border:2px solid rgba(110,190,255,.4); border-radius:50%; background:rgba(15,35,60,.35); }
#joyKnob { position:absolute; left:50%; top:50%; width:48px; height:48px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(150,220,255,.8), rgba(40,90,150,.7));
  box-shadow:0 0 12px rgba(90,180,255,.6); }
.tbtn { position:absolute; pointer-events:auto; width:64px; height:64px; border-radius:50%;
  border:2px solid rgba(110,190,255,.55); background:rgba(15,35,60,.5); color:#aee0ff;
  font-size:13px; display:flex; align-items:center; justify-content:center; }
.tbtn:active, .tbtn.active { background:rgba(60,130,220,.6); box-shadow:0 0 16px rgba(90,180,255,.8); }
#btnFire   { right:5%;  bottom:8%;  width:76px; height:76px; border-color:rgba(255,120,110,.6); color:#ffb0a0; }
#btnBoost  { right:22%; bottom:5%; }
#btnShield { right:6%;  bottom:30%; }
#btnView   { right:23%; bottom:27%; }

/* 竖屏微调 */
@media (orientation:portrait) {
  #radar { width:110px; height:110px; }
  #joystick { width:100px; height:100px; bottom:10%; }
  .tbtn { width:56px; height:56px; font-size:12px; }
  #btnFire { width:68px; height:68px; }
  #statusPanel { font-size:12px; }
  .bar { width:130px; }
}

/* ========== 开始 / 结束界面 ========== */
.overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:rgba(2,6,14,.88);
  text-align:center; padding:20px; }
.overlay h1 { font-size:44px; letter-spacing:14px; color:#aee6ff; margin-bottom:8px;
  text-shadow:0 0 24px rgba(90,190,255,.9), 0 0 60px rgba(60,140,255,.5); }
.overlay h2 { font-size:13px; letter-spacing:6px; color:#5f88a8; margin-bottom:30px; font-weight:normal; }
.overlay .help { font-size:13px; line-height:2.1; color:#8fb8d8; margin-bottom:30px; }
.overlay .help b { color:#cfe8ff; font-weight:normal;
  background:rgba(60,120,200,.25); border:1px solid rgba(110,190,255,.4);
  border-radius:4px; padding:1px 7px; margin:0 2px; }
.bigbtn { pointer-events:auto; font-size:18px; letter-spacing:6px; color:#dff2ff; cursor:pointer;
  padding:13px 52px; border:1px solid rgba(120,200,255,.7); border-radius:30px;
  background:linear-gradient(180deg, rgba(40,100,180,.5), rgba(15,40,80,.6));
  box-shadow:0 0 20px rgba(80,170,255,.4); }
.bigbtn:hover { box-shadow:0 0 32px rgba(110,200,255,.7); background:linear-gradient(180deg, rgba(60,130,220,.6), rgba(20,50,100,.7)); }
#gameOverScreen { display:none; }
#gameOverScreen h1 { color:#ff8a7a; text-shadow:0 0 24px rgba(255,90,70,.8); }
#finalScore { color:#ffd97f; font-size:20px; margin-bottom:26px; }