*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0e17;--panel:rgba(12,18,36,.85);--border:rgba(255,255,255,.08);
  --red:#e94560;--gold:#ffd700;--blue:#4fc3f7;--green:#66bb6a;
  --text:#e0e0e0;--dim:#777;
}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;width:100vw;height:100vh}
#game-container{width:100vw;height:100vh;position:relative;overflow:hidden}

/* === Screens === */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s;z-index:1;padding:20px}
.screen.active{display:flex;opacity:1}

/* === Start === */
.parallax-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg-layer{position:absolute;inset:0}
.stars{background:radial-gradient(1px 1px at 10% 20%,#fff 50%,transparent 100%),radial-gradient(1px 1px at 40% 60%,#fff 50%,transparent 100%),radial-gradient(1.5px 1.5px at 70% 30%,#ffd 50%,transparent 100%),radial-gradient(1px 1px at 85% 75%,#fff 50%,transparent 100%),radial-gradient(1px 1px at 25% 85%,#fff 50%,transparent 100%),radial-gradient(1.5px 1.5px at 55% 15%,#ffd 50%,transparent 100%);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.6}100%{opacity:1}}
.mountains{background:linear-gradient(transparent 55%,#1a2744 55%,#1a2744 70%,#0f1a30 70%)}
.start-content,.levels-content{position:relative;z-index:1;text-align:center}
.title-art{margin-bottom:20px}
.island-icon{font-size:72px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
h1{font-size:clamp(28px,5vw,48px);color:var(--red);margin:8px 0;letter-spacing:2px}
.subtitle{color:var(--dim);font-size:15px}
.story-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px 26px;margin:18px auto 24px;max-width:520px;line-height:2;font-size:14px;text-align:left;backdrop-filter:blur(10px)}
.hl{color:var(--red);font-weight:700}

.btn-primary{background:linear-gradient(135deg,var(--red),#c23152);color:#fff;border:none;padding:13px 40px;font-size:17px;border-radius:30px;cursor:pointer;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(233,69,96,.4)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);padding:10px 28px;font-size:15px;border-radius:25px;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--text);background:rgba(255,255,255,.05)}
.btn-icon{font-size:18px}

/* === Level Select === */
.levels-title{font-size:30px;margin-bottom:24px;color:var(--gold)}
.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:600px;margin:0 auto 24px}
.level-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:left;cursor:pointer;transition:all .25s;backdrop-filter:blur(8px);position:relative;overflow:hidden}
.level-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.level-card.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.level-card.locked:hover{transform:none;border-color:var(--border);box-shadow:none}
.level-num{font-size:13px;color:var(--red);font-weight:700;margin-bottom:4px}
.level-name{font-size:18px;font-weight:700;margin-bottom:6px}
.level-desc{font-size:12px;color:var(--dim);line-height:1.6}
.level-meta{display:flex;gap:12px;margin-top:8px;font-size:11px;color:var(--blue)}
.level-lock{position:absolute;top:12px;right:14px;font-size:20px}
.level-star{position:absolute;top:12px;right:14px;font-size:18px;color:var(--gold)}

/* === Shop === */
.shop-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0d1b2a,#1b2838 50%,#0d1b2a)}
.shop-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:540px}
.shop-header{text-align:center;margin-bottom:12px}
.shop-header h2{font-size:28px;margin-bottom:6px}
.level-badge{font-size:13px;color:var(--blue);margin-bottom:6px}
.points-display{font-size:21px;color:var(--gold)}
.shop-tip{font-size:13px;color:var(--dim);margin-bottom:14px;text-align:center;max-width:400px;line-height:1.6}
.shop-items{display:flex;flex-direction:column;gap:14px;width:100%;margin-bottom:14px}
.shop-item{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 20px;transition:transform .2s,border-color .2s;backdrop-filter:blur(8px)}
.shop-item:hover{border-color:var(--red);transform:translateX(4px)}
.item-emoji{font-size:38px}
.item-info{flex:1}
.item-name{font-size:17px;font-weight:700}
.item-price{color:var(--gold);font-size:13px;margin-top:2px}
.item-desc{color:var(--dim);font-size:12px;margin-top:2px}
.item-controls{display:flex;align-items:center;gap:12px}
.btn-qty{width:36px;height:36px;border-radius:50%;border:2px solid var(--red);background:transparent;color:var(--red);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.btn-qty:hover{background:var(--red);color:#fff}
.item-count{font-size:22px;font-weight:700;min-width:28px;text-align:center}
.shop-summary{color:var(--dim);font-size:14px;margin-bottom:14px}
.purchase-fly{position:fixed;font-size:32px;pointer-events:none;z-index:999;animation:flyUp .6s ease-out forwards}
@keyframes flyUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(1.4)}}

/* === Battle === */
#screen-battle{justify-content:flex-start;padding:0;background:linear-gradient(180deg,#0a0f1e,#162447 40%,#1f4068 70%,#1b3a4b)}
#battle-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.battle-hud{width:100%;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);z-index:10;flex-shrink:0;border-bottom:1px solid var(--border)}
.hud-group{display:flex;gap:20px}
.hud-item{font-size:14px;white-space:nowrap}
.hud-item span{color:var(--gold);font-weight:700}
.hud-level{color:var(--blue);font-weight:700}

.battle-scene{flex:1;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:relative;z-index:5;min-height:0}
.char{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.char-body{font-size:clamp(48px,7vw,76px);transition:transform .3s}
.char-name{font-size:12px;color:var(--dim)}
.gun-indicator{position:absolute;bottom:-8px;right:-16px;font-size:20px;animation:gunBob 2s ease-in-out infinite}
@keyframes gunBob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.monster-field{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:55vw}
.monster{display:flex;flex-direction:column;align-items:center;position:relative;transition:all .5s;cursor:pointer;padding:4px 6px;border-radius:10px;border:2px solid transparent}
.monster:hover:not(.dead):not(.fled){border-color:rgba(233,69,96,.4);background:rgba(233,69,96,.06)}
.monster.selected{border-color:var(--red);background:rgba(233,69,96,.12);box-shadow:0 0 12px rgba(233,69,96,.3)}
.m-body{font-size:clamp(32px,4.5vw,52px);transition:transform .5s,opacity .5s,filter .3s}
.m-vest{font-size:10px;color:var(--blue);margin-top:-4px;transition:opacity .3s}
.m-status{font-size:10px;margin-top:2px;min-height:14px;color:var(--dim)}
.m-hp{font-size:9px;color:var(--green);margin-top:1px}
.monster.active{z-index:20}
.monster.active .m-body{filter:drop-shadow(0 0 8px rgba(233,69,96,.5))}
.monster.no-vest .m-vest{opacity:0}
.monster.dead .m-body{opacity:.15;transform:rotate(90deg) scale(.6);filter:grayscale(1)}
.monster.dead{cursor:default;pointer-events:none}
.monster.fled .m-body{opacity:0;transform:translateX(100px) scale(.5)}
.monster.fled .m-vest,.monster.fled .m-status,.monster.fled .m-hp{opacity:0}
.monster.fled{cursor:default;pointer-events:none}
.monster.scared .m-body{animation:mShake .4s ease-in-out infinite}
@keyframes mShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.monster.obeying .m-body{filter:brightness(.65) hue-rotate(40deg)}

.m-bubble{position:absolute;top:-40px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);color:#222;padding:5px 12px;border-radius:10px;font-size:12px;white-space:nowrap;z-index:30;pointer-events:none;animation:bubbleIn .25s ease-out;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.m-bubble::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(255,255,255,.92);border-bottom:none}
@keyframes bubbleIn{0%{transform:translateX(-50%) scale(0);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* Target indicator */
.target-indicator{z-index:10;flex-shrink:0;background:rgba(233,69,96,.15);border:1px solid var(--red);border-radius:20px;padding:6px 18px;font-size:14px;display:flex;align-items:center;gap:10px;margin:4px 0}
.btn-cancel-target{background:none;border:none;color:var(--red);font-size:16px;cursor:pointer;padding:2px 6px}

/* === Dialog === */
.dialog-panel{width:100%;max-width:720px;margin:0 auto;padding:0 20px 6px;z-index:10;flex-shrink:0}
.dialog-log{background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:12px;padding:10px 14px;height:130px;overflow-y:auto;margin-bottom:6px;font-size:13px;line-height:1.7;backdrop-filter:blur(6px);scroll-behavior:smooth}
.dialog-log .msg{margin-bottom:3px;animation:msgIn .3s ease-out}
@keyframes msgIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.msg-system{color:var(--dim);font-style:italic}
.msg-player{color:var(--green)}
.msg-player::before{content:'🧑 你: ';font-weight:700}
.msg-monster{color:var(--red)}
.msg-monster::before{content:'👾 怪物: ';font-weight:700}
.dialog-input-row{display:flex;gap:8px}
.chat-input{flex:1;padding:10px 16px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:14px;outline:none;transition:border-color .2s}
.chat-input:focus{border-color:var(--green)}
.chat-input::placeholder{color:#555}
.btn-send{padding:10px 20px;background:var(--green);color:#111;border:none;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.btn-send:hover{background:#81c784;transform:scale(1.05)}
.btn-send:disabled{opacity:.4;cursor:not-allowed}

/* === Battle Actions === */
.battle-actions{display:flex;gap:14px;padding:6px 0 14px;z-index:10;flex-shrink:0}
.btn-action{padding:10px 28px;border:2px solid;border-radius:25px;font-size:15px;cursor:pointer;background:transparent;transition:all .2s}
.btn-shoot{color:var(--red);border-color:var(--red)}
.btn-shoot:hover:not(:disabled){background:var(--red);color:#fff}
.btn-shoot:disabled{opacity:.3;cursor:not-allowed}
.btn-next{color:var(--green);border-color:var(--green)}
.btn-next:hover{background:var(--green);color:#111}

/* === FX === */
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:50}
.muzzle-flash{position:absolute;width:20px;height:20px;background:radial-gradient(circle,#fff,#ffd700 40%,transparent 70%);border-radius:50%;pointer-events:none;animation:flashPop .15s ease-out forwards}
@keyframes flashPop{0%{transform:scale(0);opacity:1}100%{transform:scale(3);opacity:0}}
.bullet-trail{position:absolute;width:10px;height:3px;background:linear-gradient(90deg,#ffd700,transparent);border-radius:2px;pointer-events:none}
.hit-spark{position:absolute;font-size:28px;pointer-events:none;animation:sparkPop .5s ease-out forwards}
@keyframes sparkPop{0%{transform:scale(0);opacity:1}100%{transform:scale(1.5);opacity:0}}
.player-shoot .char-body{animation:recoil .25s ease-out}
@keyframes recoil{0%{transform:translateX(0)}30%{transform:translateX(8px)}100%{transform:translateX(0)}}
.player-talk .char-body{animation:talkPulse .3s ease-in-out}
@keyframes talkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Monster attack animation */
.monster-attack .m-body{animation:monsterLunge .4s ease-in-out}
@keyframes monsterLunge{0%{transform:translateX(0)}50%{transform:translateX(-40px) scale(1.2)}100%{transform:translateX(0)}}

/* === End === */
#screen-end{background:radial-gradient(ellipse at center,#162447,#0b0e17)}
.end-content{text-align:center}
.end-icon{font-size:90px;margin-bottom:16px}
.end-content h2{font-size:32px;margin-bottom:12px}
.end-content p{font-size:15px;color:#bbb;margin-bottom:18px;max-width:440px;line-height:1.7}
.end-stats{font-size:13px;color:var(--dim);margin-bottom:24px;line-height:2}
.end-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.victory .end-icon{animation:heliFloat 2.5s ease-in-out infinite}
@keyframes heliFloat{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(-2deg)}75%{transform:translateY(-6px) rotate(2deg)}}
.defeat .end-icon{animation:skullPulse 1.5s ease-in-out infinite}
@keyframes skullPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
@media(max-width:768px){.battle-scene{padding:0 3vw}.dialog-log{height:90px}.monster-field{max-width:65vw}.hud-group{gap:10px}.hud-item{font-size:12px}.level-grid{grid-template-columns:1fr}}