:root{
    --bg:#071124; --panel:#0d1b34; --panel2:#122543; --line:#274368;
    --text:#eef7ff; --muted:#9db1ca; --accent:#59d7ff; --gold:#ffd45c;
    --danger:#ff6876; --ok:#61e6a4; --purple:#a889ff;
  }
  *{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% 0%,#18355f 0,#081225 42%,#030813 100%);font-family:"Microsoft YaHei",system-ui,sans-serif;color:var(--text)}
  button{font:inherit;color:inherit}
  #app{height:100%;display:flex;align-items:center;justify-content:center;padding:10px}
  #phone{position:relative;width:min(100vw,440px);height:min(100vh,820px);aspect-ratio:9/16;max-height:100vh;background:linear-gradient(180deg,#0b1930,#07101f);border:1px solid #2d4f78;border-radius:24px;overflow:hidden;box-shadow:0 25px 70px #000a}
  .screen{position:absolute;inset:0;display:none;flex-direction:column;background:linear-gradient(180deg,#102544 0%,#07111f 100%)}
  .screen.active{display:flex}
  .topbar{height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;background:#071326dd;border-bottom:1px solid #243e61;backdrop-filter:blur(8px)}
  .brand{font-weight:900;letter-spacing:1px;font-size:18px}
  .brand small{display:block;font-size:10px;color:#7fdcff;font-weight:600;letter-spacing:2px}
  .wallet{display:flex;gap:7px}.pill{padding:7px 9px;border-radius:12px;background:#122746;border:1px solid #29496f;font-size:12px;font-weight:800}
  .coin-img{width:18px;height:18px;vertical-align:-4px;filter:drop-shadow(0 1px 2px #0008)}
  .small-btn .coin-img,.claim .coin-img{width:15px;height:15px;vertical-align:-3px}
  .content{flex:1;overflow:auto;padding:14px;padding-bottom:82px}
  .hero{position:relative;min-height:278px;border-radius:22px;padding:20px;overflow:hidden;background:
    radial-gradient(circle at 65% 30%,#1e8ec055 0 14%,transparent 15%),
    linear-gradient(145deg,#143862,#0b1930 65%);border:1px solid #315682;box-shadow:inset 0 0 50px #1b6d9950}
  .hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:#ffffffcc;box-shadow:70px 30px #fff8,140px -10px #fff7,-55px 80px #fff6,180px 100px #fff7;width:2px;height:2px}
  .hero:before{left:35px;top:50px}.hero:after{right:80px;top:120px;transform:scale(1.5)}
  .hero h1{margin:0;font-size:34px;line-height:1.05;text-shadow:0 3px 14px #000}
  .hero p{color:#b7c9df;font-size:13px;max-width:210px;line-height:1.6}
  .ship-art{position:absolute;right:26px;bottom:42px;width:110px;height:135px;filter:drop-shadow(0 0 18px #5ddcff80)}
  .ship-art .body{position:absolute;left:38px;top:12px;width:34px;height:100px;background:linear-gradient(90deg,#62cfff,#dffaff,#2588d4);clip-path:polygon(50% 0,100% 70%,78% 100%,22% 100%,0 70%)}
  .ship-art .wing{position:absolute;top:63px;width:58px;height:42px;background:linear-gradient(#7ceaff,#1679bc);clip-path:polygon(100% 0,100% 100%,0 80%)}
  .ship-art .wing.l{left:0}.ship-art .wing.r{right:0;transform:scaleX(-1)}
  .ship-art .fire{position:absolute;left:46px;bottom:0;width:18px;height:35px;background:linear-gradient(#fff,#63e7ff,#2f6cff00);clip-path:polygon(50% 100%,0 0,100% 0);animation:flame .25s infinite alternate}
  @keyframes flame{to{height:48px;filter:brightness(1.5)}}
  .primary{border:0;border-radius:15px;padding:14px 20px;font-weight:900;background:linear-gradient(135deg,#59d7ff,#317be8);box-shadow:0 8px 22px #2475c965;cursor:pointer}
  .primary:active{transform:scale(.98)}
  .hero .primary{position:absolute;left:20px;bottom:22px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .card{background:linear-gradient(145deg,#122541,#0b192e);border:1px solid #27476b;border-radius:17px;padding:14px}
  .card h3{margin:0 0 6px}.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
  .statline{display:flex;justify-content:space-between;margin-top:10px;font-size:12px}
  .progress{height:7px;background:#061020;border-radius:9px;overflow:hidden;margin-top:7px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#55d9ff,#817cff);border-radius:9px}
  .bottom-nav{position:absolute;left:0;right:0;bottom:0;height:70px;display:grid;grid-template-columns:repeat(5,1fr);background:#071326ee;border-top:1px solid #29486e;backdrop-filter:blur(12px);z-index:10}
  .nav-btn{border:0;background:transparent;color:#8fa7c2;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.nav-btn span{font-size:22px}.nav-btn.active{color:#62dcff}
  .section-title{display:flex;justify-content:space-between;align-items:center;margin:2px 0 12px}.section-title h2{margin:0;font-size:20px}.section-title small{color:var(--muted)}
  .chapter{margin-bottom:20px}.chapter-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.chapter-head h3{margin:0}.chapter-head span{font-size:11px;color:#9bb0c9}
  .level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
  .level{position:relative;aspect-ratio:1;border-radius:16px;border:1px solid #3d6892;background:linear-gradient(145deg,#1a426d,#0b1b31 68%);font-weight:900;cursor:pointer;box-shadow:inset 0 1px #ffffff22,0 5px 12px #02091688;color:#eefaff;overflow:hidden}
  .level:before{content:"";position:absolute;left:12%;right:12%;top:8%;height:36%;border-radius:50%;background:radial-gradient(circle,#74dfff33,transparent 70%)}
  .level.current{border-color:#6ce7ff;box-shadow:0 0 0 2px #46d9ff44,0 0 18px #38bcff66;animation:currentPulse 1.5s infinite alternate}
  @keyframes currentPulse{to{filter:brightness(1.18)}}
  .level-num{position:relative;display:block;font-size:17px;line-height:1}
  .level-kind{position:relative;display:block;margin-top:4px;font-size:8px;color:#8fb4d2;font-weight:700}
  .level.boss{background:linear-gradient(145deg,#6b2b55,#25122e 70%);border-color:#d06494;box-shadow:inset 0 1px #ffffff22,0 5px 14px #180512aa}
  .level.boss .level-kind{color:#ffadd0}
  .level.locked{filter:grayscale(1);opacity:.42;cursor:not-allowed}
  .stars{position:absolute;left:0;right:0;bottom:3px;color:#ffd866;font-size:8px;letter-spacing:-1px}
  .hangar-ship{display:flex;gap:12px;align-items:center;margin-bottom:12px}
  .mini-ship{width:78px;height:78px;border-radius:18px;display:grid;place-items:center;font-size:42px;background:radial-gradient(circle,#235a84,#0b192e);border:1px solid #31577e}
  .hangar-info{flex:1}.hangar-info h3{margin:0 0 4px}.tag{display:inline-block;font-size:10px;padding:3px 7px;border-radius:20px;background:#244a70;color:#aee7ff}
  .row-actions{display:flex;gap:8px;margin-top:9px}.small-btn{flex:1;border:1px solid #36597f;background:#142a48;border-radius:10px;padding:8px;font-size:12px;font-weight:800;cursor:pointer}.small-btn.gold{background:#6b4e12;border-color:#a47a22;color:#ffe399}.small-btn:disabled{opacity:.45}
  .task{display:flex;align-items:center;gap:10px;margin-bottom:10px}.task-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#173151;font-size:23px}.task-main{flex:1}.task-main b{font-size:13px}.task-main small{display:block;color:var(--muted);margin-top:4px}.claim{border:0;border-radius:10px;padding:9px 10px;background:#23527a;font-size:11px;font-weight:900}.claim.ready{background:linear-gradient(135deg,#ffb938,#ff7a38)}
  #gameScreen{background:#020713}
  #gameCanvas{width:100%;height:100%;display:block;touch-action:none}
  #hud{position:absolute;inset:0;pointer-events:none}
  .hud-top{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .hud-chip{background:#051225cc;border:1px solid #2e537d;border-radius:12px;padding:7px 9px;font-size:11px;font-weight:900;backdrop-filter:blur(5px)}
  .hpbox{position:absolute;left:12px;top:52px;width:180px}.hptext{display:flex;justify-content:space-between;font-size:10px;font-weight:900}.hpbar{height:10px;margin-top:4px;background:#1b2638;border:1px solid #46546a;border-radius:10px;overflow:hidden}.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#ff465d,#ffb64a)}
  #pauseBtn{pointer-events:auto;border:0;width:38px;height:38px;border-radius:12px;background:#07172dcc;border:1px solid #32567d;font-size:18px;cursor:pointer}
  #dungeonSkillBtn{display:none;pointer-events:auto;position:absolute;right:12px;top:57px;border:1px solid #775db0;border-radius:11px;padding:7px 10px;background:#2b1f49dd;color:#eadfff;font-size:10px;font-weight:900}
  #missionHud{position:absolute;top:91px;left:12px;right:12px;padding:8px 10px;border-radius:12px;background:#051225d9;border:1px solid #31577f;backdrop-filter:blur(6px)}
  .mission-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:900}
  .mission-line span:last-child{color:#77e5ff}
  .mission-progress{height:6px;margin-top:6px;border-radius:8px;background:#15243a;overflow:hidden}
  .mission-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#53d8ff,#5e82ff);transition:width .18s}
  #bossHud{display:none;position:absolute;top:135px;left:34px;right:34px;text-align:center;font-size:10px;font-weight:900}.bossbar{height:12px;background:#211321;border:1px solid #8b4a68;border-radius:10px;overflow:hidden;margin-top:4px}.bossbar i{display:block;height:100%;background:linear-gradient(90deg,#ff4d73,#9c54ff)}
  #combo{position:absolute;right:14px;top:60px;font-style:italic;font-weight:900;color:#ffe467;text-shadow:0 2px 10px #000;font-size:17px}
  #missionBanner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.92);width:82%;padding:16px 18px;border-radius:18px;text-align:center;background:#07182bea;border:1px solid #59d7ff;box-shadow:0 14px 45px #000b,0 0 28px #4bcdf94a;opacity:0;transition:.22s;z-index:20}
  #missionBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  #missionBanner b{display:block;font-size:22px;color:#eefbff;margin-bottom:5px}
  #missionBanner span{display:block;font-size:12px;color:#a9cae3;line-height:1.5}
  .ship-preview{width:66px;height:66px;display:block;filter:drop-shadow(0 0 9px #5fdcff66)}
  .overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#020713cc;backdrop-filter:blur(8px);z-index:30}.overlay.show{display:flex}
  .modal{width:100%;max-width:390px;border-radius:22px;background:linear-gradient(160deg,#132946,#081527);border:1px solid #39628d;padding:18px;box-shadow:0 20px 60px #000}
  .modal h2,.modal h3{text-align:center;margin:0 0 8px}.modal>p{text-align:center;color:var(--muted);font-size:12px}
  .upgrade-list{display:grid;gap:10px;margin-top:14px}.upgrade{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #31567d;background:#0f223c;border-radius:15px;padding:12px;cursor:pointer}.upgrade:active{transform:scale(.99)}.up-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#17385f;font-size:25px}.upgrade b{display:block}.upgrade small{color:#a9bdd3;line-height:1.45}
  .modal.skill-shop{max-height:92%;overflow:auto}.upgrade-list.skill-catalog{grid-template-columns:1fr 1fr}.skill-catalog .upgrade{padding:9px;gap:8px;min-height:76px}.skill-catalog .up-icon{width:38px;height:38px;font-size:20px;flex:0 0 auto}.skill-cost{display:block;margin-top:4px;color:#ffe073!important;font-weight:900}
  .result-stars{text-align:center;color:#ffd65c;font-size:38px;letter-spacing:6px;margin:10px 0}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid div{text-align:center;background:#0b1b31;border-radius:12px;padding:10px;font-size:11px}.result-grid b{display:block;font-size:18px;color:#6bddff}
  .modal-actions{display:flex;gap:9px;margin-top:14px}.modal-actions button{flex:1;border:0;border-radius:12px;padding:12px;font-weight:900;background:#183452}.modal-actions .accent{background:linear-gradient(135deg,#54d7ff,#3f76e8)}
  #resultOverlay .modal-actions button{min-width:0;padding-left:6px;padding-right:6px;font-size:12px}
  .toast{position:absolute;left:50%;top:76px;transform:translateX(-50%) translateY(-20px);background:#071326e8;border:1px solid #395f86;padding:9px 14px;border-radius:20px;font-size:12px;font-weight:900;opacity:0;transition:.25s;z-index:60;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .empty-note{text-align:center;color:var(--muted);font-size:12px;padding:14px}
  .switch{border:1px solid #355b83;background:#132946;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}
  .version-badge{display:inline-block;margin-top:8px;padding:4px 8px;border-radius:20px;background:#17395d;border:1px solid #3c6b96;color:#8de8ff;font-size:10px;font-weight:900}
  .modifier{display:inline-block;margin:6px 4px 0 0;padding:3px 7px;border-radius:9px;background:#4b315f;color:#f0d8ff;font-size:10px}
  .chapter-reward{border:0;border-radius:9px;padding:6px 9px;background:#6e5018;color:#ffe7a0;font-weight:900;font-size:10px}
  .chapter-reward:disabled{opacity:.45}
  .reroll{width:100%;margin-top:10px;border:1px solid #725a9d;background:#2a1f42;border-radius:12px;padding:10px;color:#e8dcff;font-weight:900}
  .skip-upgrade{width:100%;margin-top:8px;border:1px solid #3c5978;background:#101f34;border-radius:12px;padding:10px;color:#b8cbe0;font-weight:900}
  .skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .skin-card{position:relative;text-align:center;border:1px solid #31567d;background:#0d2038;border-radius:15px;padding:12px 8px}
  .skin-card.selected{border-color:#65e2ff;box-shadow:0 0 16px #4ed8ff44}
  .skin-swatch{width:52px;height:52px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--skin) 0 24%,#10233a 68%);font-size:11px;font-weight:900}
  .skin-card b{display:block;font-size:12px}.skin-card small{display:block;color:#91a9c2;margin:4px 0 8px;font-size:9px}
  .skin-card button{width:100%;border:0;border-radius:9px;padding:7px;background:#24486d;color:#eaf7ff;font-weight:900;font-size:10px}
  .skin-card button.gold{background:#654818;color:#ffe7a2}
  .economy-note{margin-top:12px;padding:10px;border-radius:12px;background:#151d38;border:1px solid #493f75;color:#cabef1;font-size:10px;line-height:1.6}
  .dungeon-card{position:relative;margin-bottom:12px;padding:15px;border-radius:18px;border:1px solid #315a82;background:linear-gradient(145deg,#143354,#09172b);overflow:hidden}
  .dungeon-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-55px;top:-55px;background:var(--dungeon-color,#59d7ff);opacity:.09}
  .dungeon-head{position:relative;display:flex;align-items:center;gap:11px}.dungeon-symbol{width:47px;height:47px;border-radius:14px;display:grid;place-items:center;background:#173a5e;border:1px solid #3c6d98;font-size:24px;color:#8ce9ff}
  .dungeon-head h3{margin:0}.dungeon-head small{color:#91abc4}.dungeon-card p{position:relative;color:#a6bad0;font-size:11px;line-height:1.55;margin:10px 0}
  .dungeon-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#d5e8f8}.dungeon-meta b{color:#ffe080}
  .difficulty-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}.difficulty-btn{border:1px solid #315475;border-radius:8px;padding:6px 2px;background:#10243b;color:#8fa8bf;font-size:9px;font-weight:900}.difficulty-btn.selected{border-color:var(--diff-color,#62dcff);color:#fff;box-shadow:inset 0 0 10px #54d7ff33}.difficulty-btn:disabled{opacity:.3}
  .dungeon-actions{display:flex;gap:8px;margin-top:11px}.dungeon-actions button{flex:1;border:0;border-radius:11px;padding:10px;font-weight:900;color:#eef9ff;background:#1c3d5d}.dungeon-actions .start{background:linear-gradient(135deg,#47cdf4,#416fe0)}
  .record-line{margin-top:8px;padding-top:8px;border-top:1px solid #294765;color:#7fa0bd;font-size:10px}
  @media(max-height:700px){#phone{border-radius:0}.hero{min-height:240px}.hero h1{font-size:29px}}