/* ============ 国庆长空保卫战 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0e1a; touch-action:none;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif; user-select:none; -webkit-user-select:none; }

#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; }
#game { display:block; background:#123; box-shadow:0 0 60px rgba(255,80,40,.15); touch-action:none; }
.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; }
#hudTop { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:10px; right:10px;
  display:flex; justify-content:space-between; align-items:flex-start; }
#hudLeft { display:flex; flex-direction:column; gap:5px; }
.hearts { font-size:17px; letter-spacing:2px; text-shadow:0 1px 3px #000; line-height:1; }
.xpWrap { position:relative; width:130px; height:13px; background:rgba(0,0,0,.55);
  border:1px solid rgba(255,215,90,.7); border-radius:7px; overflow:hidden; }
.xpBar { height:100%; width:0%; border-radius:7px;
  background:linear-gradient(90deg,#ffb300,#ffe066); transition:width .18s ease-out; }
#xpText { position:absolute; inset:0; text-align:center; font-size:9px; line-height:13px; color:#fff;
  text-shadow:0 0 3px #000; font-weight:700; }
#hudRight { display:flex; align-items:center; gap:8px; color:#ffe9c9; font-size:12px;
  text-shadow:0 1px 2px #000; }
#hudRight b { color:#ffd75e; font-size:14px; }
.iconBtn { pointer-events:auto; position:relative; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,220,150,.5);
  background:rgba(20,10,5,.6); color:#ffd75e; font-size:13px; cursor:pointer; }
.iconBtn::after { content:""; position:absolute; inset:-8px; border-radius:50%; }  /* 扩大触控热区 */
.iconBtn:active { transform:scale(.9); }

#bossHud { position:absolute; top:calc(52px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:min(74%, 340px); text-align:center; }
.bossName { color:#ff6b5e; font-size:13px; font-weight:800; letter-spacing:3px; text-shadow:0 0 6px #f00,0 1px 2px #000;
  margin-bottom:3px; animation:bossPulse 1s infinite alternate; }
@keyframes bossPulse { from{opacity:.7} to{opacity:1} }
.bossBar { height:10px; background:rgba(0,0,0,.6); border:1px solid #a33; border-radius:5px; overflow:hidden; }
.bossFill { height:100%; width:100%; transform-origin:0 50%; background:linear-gradient(90deg,#7a1f1f,#e63946,#ff8f6b);
  border-radius:5px; transition:transform .12s linear; }

#btnBomb { position:absolute; right:16px; bottom:calc(26px + env(safe-area-inset-bottom)); width:64px; height:64px;
  border-radius:50%; border:2px solid rgba(255,200,80,.8); background:radial-gradient(circle at 35% 30%, rgba(255,140,40,.5), rgba(60,20,0,.75));
  color:#fff; font-size:26px; pointer-events:auto; cursor:pointer;
  box-shadow:0 0 18px rgba(255,120,30,.45), inset 0 0 12px rgba(255,180,60,.25); }
#btnBomb:active { transform:scale(.88); }
#btnBomb span { position:absolute; right:-2px; top:-4px; min-width:20px; height:20px; border-radius:10px;
  background:#e63946; font-size:12px; font-weight:800; line-height:20px; text-align:center; border:1px solid #fff3; }

/* ---------- 通用 overlay ---------- */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(60,10,10,.85), rgba(5,5,12,.95));
  z-index:10; overflow:hidden; }
#pause, #cert { backdrop-filter:blur(3px); }

/* ---------- 横屏提示 ---------- */
#rotateTip { display:none; position:absolute; inset:0; z-index:99; background:#0a0e1a;
  align-items:center; justify-content:center; text-align:center; color:#ffd75e; }
.rotateInner .phoneIcon { font-size:52px; display:inline-block; animation:swing 2s ease-in-out infinite; }
.rotateInner p { margin-top:12px; font-size:18px; letter-spacing:2px; line-height:1.7; }
.rotateInner small { color:#c9a878; font-size:12px; }
@media (orientation:landscape) and (max-height:520px) { #rotateTip { display:flex; } }

/* ---------- 主菜单 ---------- */
.menuInner { text-align:center; padding:24px 18px; width:min(92%,400px); animation:fadeUp .6s ease-out; }
@keyframes fadeUp { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
.lanterns { display:flex; justify-content:center; gap:60px; margin-bottom:2px; }
.lanterns span { font-size:34px; display:inline-block; animation:swing 2.6s ease-in-out infinite;
  transform-origin:top center; filter:drop-shadow(0 0 10px rgba(255,60,30,.7)); }
.lanterns span:nth-child(2) { animation-delay:.7s; }
@keyframes swing { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)} }
.gameTitle { font-size:34px; font-weight:900; letter-spacing:4px; margin:6px 0 4px;
  background:linear-gradient(180deg,#ffe9a0 10%,#ffb703 45%,#e5383b 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #5c1010) drop-shadow(0 0 18px rgba(255,150,40,.45)); }
.subtitle { color:#e8c39e; font-size:12px; letter-spacing:2px; margin-bottom:20px; }
.nameRow { margin-bottom:16px; }
#nameInput { width:min(80%,260px); padding:10px 14px; font-size:16px; text-align:center; color:#ffe9c9;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,200,120,.55); border-radius:24px; outline:none; }
#nameInput::placeholder { color:#b98d5f; }
#nameInput:focus { border-color:#ffd75e; box-shadow:0 0 12px rgba(255,200,80,.35); }

.bigBtn { display:block; width:min(80%,280px); margin:10px auto; padding:13px 20px; font-size:18px; font-weight:800;
  letter-spacing:6px; color:#fff3d6; border:none; border-radius:30px; cursor:pointer;
  background:linear-gradient(180deg,#b58b2a,#7d5a12); border:1px solid #ffe9a066;
  box-shadow:0 4px 0 #4a3408, 0 8px 22px rgba(0,0,0,.5); transition:transform .08s, box-shadow .08s; }
.bigBtn:active { transform:translateY(3px); box-shadow:0 1px 0 #4a3408, 0 4px 10px rgba(0,0,0,.5); }
.bigBtn.red { position:relative; background:linear-gradient(180deg,#e5383b,#8d1418);
  box-shadow:0 4px 0 #5c0d10, 0 8px 24px rgba(229,56,59,.4); }
.bigBtn.red::after { content:""; position:absolute; inset:0; border-radius:30px; pointer-events:none;
  box-shadow:0 0 26px rgba(255,90,60,.6); opacity:.3; animation:btnGlow 1.6s ease-in-out infinite alternate; }
@keyframes btnGlow { from{opacity:.25} to{opacity:.85} }
.bigBtn.ghost { background:transparent; border:1px solid #ffd75e88; color:#ffd75e; box-shadow:none; }
.bigBtn.small { width:auto; display:inline-block; padding:11px 22px; font-size:15px; letter-spacing:2px; margin:6px; min-height:44px; }

.tips { margin-top:18px; color:#cbb28d; font-size:12.5px; line-height:2; }
.flagline { margin-top:14px; font-size:11.5px; letter-spacing:2px; color:#ff9e8a; animation:flagShine 2.4s infinite; }
@keyframes flagShine { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ---------- 升级三选一 ---------- */
.upInner { width:min(94%,420px); text-align:center; padding:10px; }
.upTitle { color:#ffd75e; font-size:21px; letter-spacing:3px; margin-bottom:4px;
  text-shadow:0 0 14px rgba(255,200,60,.7); animation:fadeUp .35s ease-out; }
.upSub { color:#d8b98a; font-size:13px; margin-bottom:16px; }
.cards { display:flex; flex-direction:column; gap:12px; }
.card { pointer-events:auto; position:relative; display:flex; align-items:center; gap:14px; width:100%;
  padding:15px 18px; border-radius:14px; cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(135deg, rgba(30,34,52,.96), rgba(16,18,30,.96));
  border:1.5px solid #556; box-shadow:0 6px 18px rgba(0,0,0,.5);
  animation:cardIn .4s cubic-bezier(.2,1.4,.4,1) backwards; transform-style:preserve-3d; transition:transform .12s; }
.card:nth-child(1){ animation-delay:.05s } .card:nth-child(2){ animation-delay:.17s } .card:nth-child(3){ animation-delay:.29s }
@keyframes cardIn { from{ opacity:0; transform:translateY(40px) rotateX(70deg) scale(.8) } to{ opacity:1; transform:none } }
.card:active { transform:scale(.96); }
.card.blue { border-color:#4d8dff; box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 14px rgba(77,141,255,.35); }
.card.gold { border-color:#ffd75e; box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 18px rgba(255,215,94,.45); }
.card.gold::after { content:""; position:absolute; top:0; bottom:0; left:0; width:55%; pointer-events:none;
  background:linear-gradient(110deg, transparent, rgba(255,235,160,.28), transparent);
  transform:translateX(-140%) skewX(-18deg); animation:shine 1.9s linear infinite; }
@keyframes shine { from{ transform:translateX(-140%) skewX(-18deg) } to{ transform:translateX(320%) skewX(-18deg) } }
.cardIcon { font-size:34px; width:52px; height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(255,255,255,.07); }
.cardInfo { flex:1; }
.cardName { font-size:17px; font-weight:800; letter-spacing:1px; margin-bottom:3px; }
.card.blue .cardName { color:#8fb8ff } .card.gold .cardName { color:#ffd75e }
.cardDesc { font-size:12.5px; color:#b9c0d4; line-height:1.45; }
.cardRarity { position:absolute; top:8px; right:12px; font-size:10px; padding:1px 8px; border-radius:8px;
  background:#444a5e; color:#ccd; font-weight:700; letter-spacing:1px; }
.card.blue .cardRarity { background:#22487e; color:#9fc4ff }
.card.gold .cardRarity { background:#7e5c17; color:#ffe9a0 }

/* ---------- 暂停 / 失败 ---------- */
.pauseInner, .overInner { text-align:center; width:min(90%,340px); animation:fadeUp .3s ease-out; }
.pauseInner h2 { color:#ffd75e; font-size:28px; letter-spacing:8px; margin-bottom:22px; }
.overTitle { color:#ff6b5e; font-size:30px; letter-spacing:4px; margin-bottom:14px;
  text-shadow:0 0 16px rgba(255,60,40,.6); }
.overScore { color:#fff3d6; font-size:15px; margin-bottom:6px; }
.overScore b { color:#ffd75e; font-size:24px; }
.overStage { color:#c9a878; font-size:13px; margin-bottom:20px; }

/* ---------- 通关证书 ---------- */
#cert { background:radial-gradient(ellipse at 50% 20%, rgba(90,20,15,.9), rgba(8,4,10,.97));
  flex-direction:column; gap:6px; padding:12px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#confetti { position:absolute; inset:0; pointer-events:none; }
.certPaper { position:relative; z-index:2; width:min(94%,400px); max-height:calc(100dvh - 130px); overflow-y:auto;
  animation:certIn .9s cubic-bezier(.2,1.2,.35,1) backwards; }
@keyframes certIn { from{ opacity:0; transform:scale(.5) rotateX(40deg) } to{ opacity:1; transform:none } }
.certBorder { border:3px double #c9973b; outline:6px solid #7a1414; outline-offset:0; border-radius:6px;
  background:linear-gradient(160deg,#fff8ec,#fdeed2 55%,#f9e3bd); padding:20px 18px 14px; color:#5a2b12;
  box-shadow:0 18px 50px rgba(0,0,0,.65), inset 0 0 40px rgba(201,151,59,.18); position:relative; }
.certHead { text-align:center; border-bottom:1px dashed #c9973b; padding-bottom:10px; margin-bottom:12px; }
.certStar { color:#d32029; font-size:30px; text-shadow:0 0 10px rgba(211,32,41,.5); animation:starPulse 1.8s infinite alternate; }
@keyframes starPulse { from{transform:scale(1)} to{transform:scale(1.14); text-shadow:0 0 18px rgba(255,60,50,.8)} }
.certHead h2 { font-size:clamp(17px, 5.6vw, 24px); letter-spacing:.28em; color:#7a1414; margin:2px 0; font-weight:900; }
.certSub { font-size:8.5px; letter-spacing:2.5px; color:#b08d4f; }
.certBody { font-size:13.5px; line-height:1.9; text-align:center; }
.certLine b { font-size:17px; color:#7a1414; border-bottom:2px solid #c9973b; padding:0 8px; letter-spacing:2px; }
.certStats { display:flex; justify-content:center; gap:14px; margin:10px 0; font-size:12px; color:#8a6a35; }
.certStats b { color:#d32029; font-size:15px; }
.certGift { margin-top:4px; font-size:15px; color:#7a1414; letter-spacing:1px; font-weight:800;
  animation:giftBlink 1.2s infinite alternate; }
@keyframes giftBlink { from{ opacity:.75; transform:scale(1) } to{ opacity:1; transform:scale(1.05) } }
.certFoot { display:flex; justify-content:space-between; align-items:flex-end; margin-top:10px; }
.certDate { font-size:11px; color:#8a6a35; padding-left:4px; }
.sealSlot { width:104px; height:104px; margin-right:2px; }
#seal { width:104px; height:104px; }
.certBtns { position:relative; z-index:3; margin-top:4px; }

@media (max-height: 640px) {
  .gameTitle { font-size:27px; }
  .tips { display:none; }
  .certBody { font-size:12px; line-height:1.7; }
  .card { padding:11px 14px; }
}
@media (max-width: 360px) {
  #stageBox { display:none; }
  #hudRight { font-size:11px; gap:5px; }
  .xpWrap { width:104px; }
  #xpText { font-size:10px; }
}