/* ===== 基础 ===== */
:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#eefcff;background:#050a14}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 20%,#14223f,#050914 65%);touch-action:manipulation}
#game{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
canvas{display:block;width:100%;height:100%;touch-action:none}

/* ===== 受击红色闪烁边框 ===== */
.damage-flash{position:fixed;z-index:99;inset:0;pointer-events:none;border:0 solid transparent;border-radius:0;opacity:0;transition:opacity .05s}
.damage-flash.active{animation:dmgFlash .45s ease-out;opacity:1}
@keyframes dmgFlash{
  0%{border:8px solid rgba(255,30,60,.9);box-shadow:inset 0 0 80px rgba(255,20,50,.5)}
  30%{border:6px solid rgba(255,40,70,.6);box-shadow:inset 0 0 50px rgba(255,20,50,.3)}
  60%{border:3px solid rgba(255,60,90,.25);box-shadow:inset 0 0 20px rgba(255,20,50,.1)}
  100%{border:0 solid rgba(255,60,90,0);box-shadow:inset 0 0 0 rgba(255,20,50,0)}
}

/* ===== 星空粒子 ===== */
.stars-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.star.s1{top:5%;left:10%;width:2px;height:2px;--d:2.5s;--delay:0s}
.star.s2{top:12%;left:25%;width:1.5px;height:1.5px;--d:3.1s;--delay:.3s}
.star.s3{top:8%;left:42%;width:2.5px;height:2.5px;--d:2.8s;--delay:.7s}
.star.s4{top:3%;left:60%;width:1px;height:1px;--d:3.5s;--delay:1.1s}
.star.s5{top:18%;left:78%;width:2px;height:2px;--d:2.2s;--delay:.5s}
.star.s6{top:6%;left:90%;width:1.5px;height:1.5px;--d:3.8s;--delay:1.5s}
.star.s7{top:22%;left:5%;width:1px;height:1px;--d:2.7s;--delay:.8s}
.star.s8{top:15%;left:35%;width:2px;height:2px;--d:3.3s;--delay:1.8s}
.star.s9{top:10%;left:55%;width:1.5px;height:1.5px;--d:2.4s;--delay:.2s}
.star.s10{top:25%;left:70%;width:2.5px;height:2.5px;--d:3.6s;--delay:1.3s}
.star.s11{top:2%;left:48%;width:1.5px;height:1.5px;--d:2.9s;--delay:.9s}
.star.s12{top:20%;left:15%;width:2px;height:2px;--d:3.2s;--delay:1.6s}
.star.s13{top:28%;left:82%;width:1px;height:1px;--d:2.6s;--delay:.4s}
.star.s14{top:7%;left:32%;width:2px;height:2px;--d:3.7s;--delay:2.1s}
.star.s15{top:14%;left:67%;width:1.5px;height:1.5px;--d:2.3s;--delay:1.9s}
.star.s16{top:4%;left:20%;width:2.5px;height:2.5px;--d:4s;--delay:2.4s}
.star.s17{top:9%;left:74%;width:1px;height:1px;--d:2.1s;--delay:.6s}
.star.s18{top:24%;left:44%;width:2px;height:2px;--d:3.4s;--delay:1.2s}
.star.s19{top:30%;left:8%;width:1.5px;height:1.5px;--d:2.5s;--delay:1.7s}
.star.s20{top:27%;left:93%;width:2px;height:2px;--d:3.1s;--delay:.1s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

/* 游戏中隐藏首页粒子 */
body.playing .stars-bg,body.playing .home-flows{opacity:0;pointer-events:none}
body.playing .home-flows .flow-orb,body.playing .stars-bg .star{animation-play-state:paused}

/* ===== 首页流光粒子 ===== */
.home-flows{position:fixed;inset:0;pointer-events:none;z-index:0;transition:opacity .5s}
.flow-orb{position:absolute;border-radius:50%;filter:blur(24px);animation:floatO var(--t,14s) ease-in-out infinite;animation-delay:var(--d,0s)}
.flow-orb.f1{width:120px;height:120px;top:15%;left:10%;background:radial-gradient(circle,rgba(100,200,255,.5),transparent);--t:14s;--d:0s}
.flow-orb.f2{width:160px;height:160px;top:40%;right:5%;background:radial-gradient(circle,rgba(180,140,255,.4),transparent);--t:18s;--d:3s}
.flow-orb.f3{width:100px;height:100px;bottom:25%;left:20%;background:radial-gradient(circle,rgba(100,240,200,.45),transparent);--t:16s;--d:6s}
.flow-orb.f4{width:90px;height:90px;top:55%;left:60%;background:radial-gradient(circle,rgba(255,180,100,.35),transparent);--t:20s;--d:9s}
.flow-orb.f5{width:140px;height:140px;bottom:10%;right:15%;background:radial-gradient(circle,rgba(120,180,255,.4),transparent);--t:17s;--d:12s}
.flow-orb.f6{width:110px;height:110px;top:70%;left:40%;background:radial-gradient(circle,rgba(255,150,200,.35),transparent);--t:19s;--d:15s}
@keyframes floatO{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.12)}50%{transform:translate(-15px,-40px) scale(.92)}75%{transform:translate(-25px,10px) scale(1.08)}}

/* ===== HUD ===== */
.hud{position:absolute;z-index:3;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));pointer-events:none;opacity:0;transition:opacity .35s linear}
.hud.on{opacity:1}.topline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:13px;letter-spacing:.08em;color:#b8dded}.topline #timer{color:#fff0a0;font-size:12px}.topline #score{justify-self:end;font-size:22px;color:white;font-weight:700;text-shadow:0 0 18px #5be9ff}
.bar{height:4px;margin-top:9px;border-radius:4px;background:#ffffff18;overflow:hidden}.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#62e5ff,#fff3a0);box-shadow:0 0 12px #65eaff}
.status{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.life{width:92px;height:4px;background:#ffffff18;border-radius:4px;overflow:hidden}.life i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5d8d,#8ff8ff);box-shadow:0 0 10px #ff73a7}.status span{font-size:11px;color:#fff0a0;letter-spacing:.06em;text-shadow:0 0 10px #ffe16b}
.hint{text-align:center;margin-top:16px;color:#91a5ba;font-size:12px;transition:opacity .8s}

/* ===== 面板 ===== */
.panel{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px;background:linear-gradient(180deg,#050b18ee,#050914f2);transition:opacity .25s ease,transform .25s ease}
.panel.hidden{opacity:0;pointer-events:none;transform:scale(1.02)}
.eyebrow{font-size:11px;letter-spacing:.36em;color:#75e9ff;margin:0 0 16px}
.glow-text{text-shadow:0 0 20px #75e9ff,0 0 40px #75e9ff88}
.panel h1{font-size:clamp(42px,13vw,70px);font-weight:300;letter-spacing:.12em;margin:0}
.title-glow{text-shadow:0 0 32px #58ddff88,0 0 64px #58ddff44,0 0 8px #fff;animation:titlePulse 3s ease-in-out infinite}
@keyframes titlePulse{0%,100%{text-shadow:0 0 32px #58ddff88,0 0 64px #58ddff44,0 0 8px #fff}50%{text-shadow:0 0 48px #58ddff,0 0 96px #58ddff66,0 0 16px #ffffffcc}}
.panel h2{font-size:29px;font-weight:400;letter-spacing:.08em;margin:0 0 22px}
.panel>p:not(.eyebrow){max-width:320px;color:#a9bacb;line-height:1.8;font-size:14px}
.subtitle{animation:fadeInUp .8s ease-out}

/* ===== 按钮 ===== */
button{border:0;color:#06111d;background:linear-gradient(135deg,#ecffff,#78e9ff);font:inherit;font-weight:700;letter-spacing:.08em;border-radius:99px;padding:15px 34px;margin-top:28px;box-shadow:0 10px 40px #4edfff35,0 0 22px #b9f7ff55;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none;user-select:none}
button:active{transform:scale(.97)}
.panel small{margin-top:18px;color:#63778b;font-size:11px}

.start-btn{padding:18px 52px;font-size:18px;box-shadow:0 10px 50px #4edfff55,0 0 36px #b9f7ff77;animation:btnGlow 2.5s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 10px 50px #4edfff55,0 0 36px #b9f7ff77}50%{box-shadow:0 10px 60px #4edfff88,0 0 52px #b9f7ffaa}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

/* ===== 升级选择 ===== */
#choices{display:grid;gap:10px;width:min(100%,360px)}#choices button{position:relative;margin:0;border-radius:18px;text-align:left;padding:16px 18px;background:#101d30dd;color:#e8fbff;border:1px solid #6de9ff33;box-shadow:none}#choices b{display:block;font-size:15px;margin-bottom:4px}#choices b em{float:right;color:#ffe37e;font-size:10px;font-style:normal;font-weight:500}#choices span{font-size:12px;color:#91aabd;font-weight:400;letter-spacing:0}

/* ===== 难度 ===== */
.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,340px);margin-top:18px}.difficulty button{margin:0;padding:12px 8px;border-radius:14px;background:#0d1929;color:#aabccb;border:1px solid #ffffff12;box-shadow:none;letter-spacing:0}.difficulty button b,.difficulty button span{display:block}.difficulty button b{font-size:13px}.difficulty button span{margin-top:4px;font-size:10px;font-weight:400;color:#73899d}.difficulty button.selected{color:#06111d;background:linear-gradient(135deg,#efffff,#78e9ff);border-color:transparent}.difficulty button.selected span{color:#255469}
.difficulty button.hidden{display:none}.difficulty.rookie-unlocked{grid-template-columns:repeat(2,1fr)}.difficulty .rookie-difficulty{border-color:#8cecff55}

/* ===== 结算 ===== */
.resultScore{display:flex;flex-direction:column;margin:12px 0}.resultScore b{font-size:56px;font-weight:300;color:#fff6bf;text-shadow:0 0 24px #ffe87999}.resultScore span{font-size:12px;color:#8ba0b5;letter-spacing:.18em}
.result-message{margin:-8px 0 8px!important;color:#d8f8ff!important;font-size:14px!important;line-height:1.7!important}.result:not(.hidden) h2{animation:resultGlow 1.5s ease-in-out infinite alternate}@keyframes resultGlow{to{text-shadow:0 0 28px #75e9ff,0 0 52px #ffe87988;transform:scale(1.04)}}

/* ===== 暂停面板 ===== */
.pause-panel{z-index:6}
.pause-actions{display:flex;flex-direction:column;gap:12px;width:min(100%,300px);margin-top:8px}
.pause-actions button{padding:16px 20px;margin:0;font-size:17px;border-radius:16px}
.resume-btn{background:linear-gradient(135deg,#ecffff,#78e9ff);box-shadow:0 8px 32px #4edfff44,0 0 20px #b9f7ff66}
.home-btn{margin-top:24px!important;background:#ffffff15;color:#c8dae6;border:1px solid #ffffff22;box-shadow:none;font-size:13px;padding:12px 28px}

/* ===== 暂停钮 ===== */
.pause-btn{position:absolute;z-index:4;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:36px;height:36px;padding:0;margin:0;border-radius:50%;background:#0c1726cc;border:1px solid #ffffff20;box-shadow:0 0 12px #0006;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:opacity .2s linear}
.pause-btn.hidden{opacity:0;pointer-events:none}
.pause-btn span{display:block;width:14px;height:3px;background:#c8e2f0;border-radius:1px}

/* ===== 退出 ===== */
.exit-btn{position:fixed;z-index:10;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:38px;height:38px;padding:0;margin:0;border-radius:50%;background:#0c1726cc;color:#b7d4df;border:1px solid #ffffff20;font-size:18px;font-weight:300;cursor:pointer;box-shadow:0 0 16px #0004;display:flex;align-items:center;justify-content:center}
.exit-btn:active{background:#1a2740;color:#fff;box-shadow:0 0 24px #ff555566}

/* ===== 声音 ===== */

/* ===== 首页音乐按钮 ===== */
.home-music-btn{position:fixed;z-index:10;right:max(16px,env(safe-area-inset-right));bottom:max(82px,env(safe-area-inset-bottom));width:44px;height:44px;padding:0;margin:0;border-radius:50%;background:#0c1726cc;color:#b7d4df;border:1px solid #ffffff20;box-shadow:0 0 16px #0004;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.home-music-btn.off{color:#ff5555cc}
.home-music-btn.off::after{content:'';position:absolute;width:2px;height:20px;background:#ff5555aa;border-radius:1px;transform:rotate(45deg)}
.home-music-btn[data-sound="on"]{background:#0c1726ee!important;color:#dffaff!important;border-color:#8cecff55!important}.home-music-btn[data-sound="off"]{background:#35111bee!important;color:#ff6b7d!important;border-color:#ff536b99!important}

/* ===== 快捷操作 ===== */
.quick-actions{position:fixed;z-index:10;left:16px;bottom:max(82px,env(safe-area-inset-bottom));display:flex;gap:8px}
.quick-actions button{width:40px;height:40px;padding:0;margin:0;border-radius:50%;color:#b7d4df;background:#0c1726cc;border:1px solid #ffffff18;box-shadow:0 0 14px #0004;font-size:17px}
.home-music-btn.hidden,.quick-actions.hidden{opacity:0;visibility:hidden;pointer-events:none}

/* ===== 确认弹窗 ===== */
.confirm-overlay{position:fixed;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;background:#000000cc;transition:opacity .2s ease}
.confirm-overlay.hidden{opacity:0;pointer-events:none}
.confirm-card{width:min(86%,300px);background:linear-gradient(160deg,#14223ff8,#091120f8);border:1px solid #6de9ff33;border-radius:20px;padding:28px 22px 20px;text-align:center;box-shadow:0 12px 48px #000a}
.confirm-card p{color:#dcefff;font-size:15px;line-height:1.6;margin:0 0 22px}
.confirm-btns{display:flex;gap:10px;justify-content:center}
.confirm-btns button{margin:0;padding:12px 32px;border-radius:14px;font-size:15px;box-shadow:none}
.confirm-yes{background:linear-gradient(135deg,#ecffff,#78e9ff);color:#06111d}
.confirm-no{background:#ffffff15;color:#c8dae6;border:1px solid #ffffff22}
.difficulty-card h2{margin:6px 0 10px;color:#eefcff}.difficulty-card>button{margin-top:4px}.difficulty-emoji{font-size:44px;margin-bottom:2px}

/* ===== 信息/设置面板 ===== */
.info-sheet{position:fixed;z-index:20;inset:0;display:flex;align-items:flex-end;background:#020611cc;padding:14px;transition:opacity .25s}
.info-sheet.hidden{opacity:0;pointer-events:none}
.sheet-card{position:relative;width:100%;max-height:86%;overflow:auto;border:1px solid #70eaff33;border-radius:24px;padding:26px 22px 28px;background:linear-gradient(160deg,#102442f5,#07111ff5);box-shadow:0 -14px 50px #0008;color:#dcefff;text-align:left}
.sheet-card h2{margin:0 0 14px;font-weight:400}
.sheet-card h3{margin:20px 0 6px;color:#fff0a0;font-size:14px}
.sheet-card p:not(.eyebrow){color:#a9bacb;line-height:1.75;font-size:13px}
.sheet-close{position:absolute;right:12px;top:10px;margin:0;padding:4px 12px;background:transparent;color:#bcd1df;box-shadow:none;font-size:26px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff14;color:#e9f7ff;font-size:14px}
.setting-row input{width:20px;height:20px;accent-color:#75e9ff}
.setting-note{margin-top:18px!important;font-size:11px!important;color:#71889c!important}

/* ===== 开发者信息 ===== */
.dev-info{display:flex;gap:16px;align-items:flex-start}
.dev-text{flex:1;min-width:0}
.dev-text p{margin:3px 0;font-size:12px!important}
.dev-text a{color:#75e9ff;text-decoration:none}
.dev-qr{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.dev-qr img{border-radius:8px;background:#fff;padding:4px;width:96px;height:96px}
.dev-qr span{font-size:10px;color:#91aabd}

/* ===== 响应式 ===== */
@media (min-width:700px){
  #game{max-width:480px;margin:auto;box-shadow:0 0 100px #000}.panel{border-inline:1px solid #ffffff0b}
  .exit-btn{right:calc(50% - 240px + 16px)}
  .home-music-btn{right:calc(50% - 240px + 16px)}
  .quick-actions{left:calc(50% - 240px + 16px)}
}

/* ===== 减少动效 ===== */
.reduced-motion .star,.reduced-motion .flow-orb,.reduced-motion .title-glow,.reduced-motion .start-btn{animation:none!important}
.reduced-motion .damage-flash.active{animation:none!important}