:root{font-family:system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:#fff6db;background:#10281f;font-synthesis:none;font-weight:600;-webkit-tap-highlight-color:transparent;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}button{font:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff2aa;outline-offset:3px}button:active{transform:translateY(2px)}button:disabled{cursor:default;filter:saturate(.4);opacity:.6}button:disabled:active{transform:none}
#app{width:100%;max-width:480px;height:100vh;height:100dvh;margin:auto;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#1d3a2b;box-shadow:0 0 80px #06180d80;padding-top:env(safe-area-inset-top);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.topbar{height:72px;min-height:72px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #6e865136;background:linear-gradient(100deg,#203e2e,#142d24);z-index:2}.brand{display:flex;align-items:center;gap:8px;margin-right:auto}.brand-mark{font-size:32px;color:#f9ca6c;text-shadow:0 0 20px #ffa83b33}.brand h1{font-size:19px;letter-spacing:2px;margin:0;line-height:1.4}.brand div>span{font-size:8px;letter-spacing:2.8px;color:#a8b79b}.resources{display:flex;gap:10px;font-size:14px}.resource{display:flex;gap:5px;align-items:center}.resource strong{font-variant-numeric:tabular-nums}.coin-icon{display:inline-block;width:14px;height:14px;background:#f6c54d;border:2px solid #ffe391;border-radius:50%;box-shadow:inset 0 0 0 2px #d79933,0 2px 0 #91652b;flex-shrink:0}.life span{color:#f18872;font-size:19px}.icon-button{width:34px;height:36px;border:1px solid #58724e;border-radius:10px;background:#314b35;color:#e2e9d0;font-size:18px}
.battle{position:relative;flex:1;min-height:0;overflow:hidden;background:#719d37}.battle>canvas{width:100%;height:100%;display:block;touch-action:none}.wave-hud{position:absolute;left:82px;right:63px;top:14px;background:#173422ed;padding:9px 13px 10px;border:1px solid #b6d17448;border-radius:13px;box-shadow:0 4px 10px #1f3f222a;pointer-events:none}.chapter{font-size:9px;color:#a7bd92;letter-spacing:1.5px}.wave-hud>div:nth-child(2){display:flex;align-items:center;gap:6px;margin:3px 0 7px}.wave-hud strong{font-size:13px;letter-spacing:1px}.wave-hud #wave-count{font-size:10px;margin-left:auto;color:#bdcc9e;font-variant-numeric:tabular-nums}.live-dot{width:5px;height:5px;border-radius:50%;background:#cde398;box-shadow:0 0 6px #d9ef9a}.wave-track{height:3px;background:#ffffff13;border-radius:5px;overflow:hidden}.wave-track i{display:block;width:0;height:100%;background:#ecc65e;transition:width .2s}.speed-button{position:absolute;right:15px;top:24px;height:34px;width:36px;border-radius:10px;color:#d9e6b5;background:#294327e6;border:1px solid #9eb86665;font-size:13px}.entry-label{position:absolute;left:12px;top:12px;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px;color:#eee6ba;text-shadow:0 1px 3px #0008;pointer-events:none}.entry-label span{font-size:18px;letter-spacing:0;margin-top:5px}.field-note{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:20px;padding:7px 13px;font-size:10px;background:#1c3f28cf;color:#e6eaca;pointer-events:none;backdrop-filter:blur(5px)}.field-note>span{color:#ffda76;margin-right:4px}.toast{position:absolute;left:50%;top:30%;transform:translate(-50%,8px);color:#fff3d3;font-size:12px;padding:11px 17px;border:1px solid #e7c16b5c;border-radius:12px;background:#193324ee;pointer-events:none;white-space:nowrap;opacity:0;transition:.2s;z-index:3}.toast.show{transform:translate(-50%,0);opacity:1}.wave-banner{position:absolute;left:0;right:0;top:38%;text-align:center;color:#fff8d7;font-size:27px;font-weight:900;text-shadow:0 3px 0 #2a451f,0 0 30px #fae5a6;pointer-events:none;opacity:0;transition:opacity .3s;letter-spacing:4px}.wave-banner.show{opacity:1}
.controls{z-index:2;padding:14px 17px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(#23432f,#142e23);border-top:2px solid #afc66b55;box-shadow:0 -6px 20px #11251426}.squad-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:12px;letter-spacing:1px}.tiny-diamond{font-size:9px;color:#e2be6a;margin-right:4px}#unit-count{font-size:10px;letter-spacing:0;color:#9bb293;margin-left:7px}.squad-heading button{background:transparent;color:#b5c6a3;font-size:10px;display:flex;gap:5px;align-items:center}.squad-heading button span{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;border:1px solid #8da681;border-radius:50%;font-size:9px}.action-row{display:flex;gap:11px}.summon-button{position:relative;flex:1;height:88px;display:flex;align-items:center;text-align:left;border:1px solid #cde18d85;border-bottom:4px solid #375d33;border-radius:15px;background:linear-gradient(115deg,#587749,#344e35);color:#fff3ce;overflow:hidden;box-shadow:inset 0 1px #dceaad30}.summon-button.placing{border-color:#ffe793;box-shadow:0 0 15px #ffd16755}.summon-button canvas{width:80px;height:80px;flex-shrink:0}.summon-button>div{display:flex;flex-direction:column;gap:3px}.button-eyebrow{font-size:9px;color:#c4d4b0;letter-spacing:1px}.summon-button strong{font-size:16px;letter-spacing:1px}.button-cost{display:flex;align-items:center;gap:6px;font-size:13px;color:#ffdf8c}.button-cost .coin-icon{width:11px;height:11px}.plus{color:#bacd9e;position:absolute;right:9px;font-size:20px;font-weight:400}.start-button{width:113px;border-radius:15px;border:1px solid #ffe199;border-bottom:4px solid #9a662b;background:linear-gradient(#f5ce73,#dfaa4c);color:#463820;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 1px #fff3c6}.start-icon{font-size:23px;line-height:1.1}.start-button strong{font-size:14px;letter-spacing:1px}.start-button small{font-size:9px;opacity:.75;letter-spacing:1px}.bottom-hint{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:10px;font-size:9px;color:#9db28e;letter-spacing:.4px}.merge-symbol{font-size:13px;color:#d7dcb0}.hint-star{color:#d1ad61;margin-left:3px}
.overlay{position:absolute;inset:0;z-index:10;background:#08180ed9;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px}.overlay[hidden]{display:none}.modal{position:relative;width:100%;max-height:100%;overflow:auto;text-align:center;border:1px solid #a6bd6e70;border-radius:26px;background:radial-gradient(ellipse at top,#3c5735,#1c3427 68%);padding:30px 22px;box-shadow:0 20px 60px #0006}.modal .eyebrow{color:#dbc47e;letter-spacing:4px;font-size:9px}.modal h2{font-size:27px;letter-spacing:3px;margin:8px 0 12px}.modal p{font-size:12px;line-height:1.9;color:#becdad;margin:12px 0 22px}.modal .modal-art{width:130px;height:130px;margin:3px auto;display:block}.modal .primary{width:100%;padding:14px;border-radius:12px;background:linear-gradient(#f5d27a,#dba84a);color:#44331e;border-bottom:3px solid #966b2c;font-size:14px;letter-spacing:2px}.modal .secondary{width:100%;padding:12px;border-radius:12px;background:#ffffff0a;border:1px solid #93ab6644;color:#cad5b6;margin-top:10px;font-size:12px}.help-steps{text-align:left;margin:24px 0;display:grid;gap:17px}.help-steps>div{display:flex;align-items:center;gap:12px}.step-no{width:31px;height:31px;border-radius:10px;border:1px solid #85935e80;display:grid;place-items:center;color:#f1d987;flex-shrink:0}.help-steps strong{font-size:13px}.help-steps small{display:block;color:#aebf9b;font-size:11px;margin-top:4px;line-height:1.65}.rewards{display:flex;gap:10px;margin:22px -7px}.reward{flex:1;min-width:0;border:1px solid #c5a75e;border-bottom:4px solid #9b7437;border-radius:18px;padding:14px 5px;background:linear-gradient(#535739,#283d2e);color:#fff2cc}.reward.dragon{border-color:#a59bf0;background:linear-gradient(#4d486d,#293449)}.reward canvas{width:100%;aspect-ratio:1}.reward strong{display:block;font-size:15px}.reward span{font-size:9px;color:#f2d594;display:block;margin:8px 0}.reward small{font-size:10px;font-weight:400;line-height:1.7;display:block;color:#d2d9bc}.stats{display:flex;justify-content:space-around;margin:20px 0 28px}.stats strong{display:block;color:#f1d389;font-size:25px}.stats small{font-size:10px;color:#b5c7a5}.audio-option{display:flex!important;align-items:center;justify-content:center;gap:10px}
.entry-label span{writing-mode:horizontal-tb;display:block;text-align:center}.icon-button,.speed-button,.squad-heading button{position:relative}.speed-button{position:absolute}.icon-button::after,.speed-button::after{content:"";position:absolute;inset:-5px}.squad-heading button::after{content:"";position:absolute;inset:-12px -4px}.modal{touch-action:pan-y;overscroll-behavior:contain}.toast{max-width:calc(100% - 32px);white-space:normal;text-align:center;line-height:1.7}
@media(max-width:360px){.topbar{padding:0 12px;gap:8px}.brand h1{font-size:17px}.brand-mark{font-size:25px}.resources{gap:7px;font-size:12px}.controls{padding-left:12px;padding-right:12px}.summon-button canvas{width:68px;height:74px}.summon-button strong{font-size:14px}.start-button{width:100px}.wave-hud{left:75px;right:58px}.bottom-hint{font-size:8px}}
@media(max-height:700px){.topbar{height:60px;min-height:60px}.controls{padding-top:10px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}.summon-button{height:74px}.summon-button canvas{height:70px;width:70px}.squad-heading{margin-bottom:7px}.bottom-hint{margin-top:6px}.wave-hud{top:8px;padding:6px 11px}.field-note{bottom:6px;padding:5px 10px;font-size:9px}.modal{padding:20px}.modal .modal-art{width:95px;height:95px}}