:root{--bg:#08090d;--panel:#11151d;--panel-2:#171d29;--text:#f7f2df;--muted:#9ea7b8;--gold:#f4c44f;--copper:#c87337;--cyan:#66d9e8;--green:#70e38a;--red:#ff6b73;--line:rgba(255,255,255,.13);--shadow:0 22px 70px rgba(0,0,0,.45);--grad:linear-gradient(135deg,#f4c44f 0%,#c87337 48%,#66d9e8 100%);}
*{box-sizing:border-box;}
html,body{width:100%;min-height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Microsoft JhengHei",sans-serif;overflow:hidden;}
button,input{font:inherit;}
.game-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;width:100vw;height:100svh;background:radial-gradient(circle at 25% 20%,rgba(244,196,79,.16),transparent 28%),radial-gradient(circle at 78% 72%,rgba(102,217,232,.13),transparent 30%),var(--bg);}
.stage-wrap{position:relative;min-width:0;height:100%;overflow:hidden;}
#coinStage{display:block;width:100%;height:100%;touch-action:none;}
.status-badge{position:absolute;left:22px;top:22px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(8,9,13,.66);color:var(--text);font-weight:800;backdrop-filter:blur(12px);box-shadow:var(--shadow);}
.stage-actions{position:absolute;left:22px;bottom:22px;z-index:3;display:flex;gap:10px;align-items:center;}
.stage-actions button{height:42px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:rgba(8,9,13,.72);color:var(--text);backdrop-filter:blur(14px);box-shadow:var(--shadow);}
#clearSceneBtn{background:linear-gradient(135deg,rgba(255,107,115,.92),rgba(244,196,79,.78));color:#130b08;}
#stageMusicBtn.is-on{background:linear-gradient(135deg,rgba(112,227,138,.92),rgba(102,217,232,.82));color:#07110d;}
.tower-hud{position:absolute;right:22px;top:22px;z-index:3;display:grid;gap:7px;width:min(260px,calc(100% - 44px));padding:13px;border:1px solid rgba(244,196,79,.22);border-radius:8px;background:rgba(8,9,13,.72);backdrop-filter:blur(14px);box-shadow:var(--shadow);}
.tower-hud-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tower-hud-title{color:var(--text);font-size:15px;font-weight:900;}
.tower-hud-body{display:grid;gap:7px;}
.tower-hud.is-collapsed .tower-hud-body{display:none;}
#towerHudToggle{width:58px;height:30px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.08);color:var(--text);font-size:12px;}
.award-overlay{position:absolute;left:50%;top:10%;z-index:4;padding:15px 24px;border:1px solid rgba(244,196,79,.5);border-radius:999px;background:linear-gradient(135deg,rgba(244,196,79,.92),rgba(102,217,232,.82));color:#16100a;font-size:28px;font-weight:900;box-shadow:0 16px 55px rgba(244,196,79,.34);opacity:0;transform:translate(-50%,-18px) scale(.92);pointer-events:none;transition:opacity .35s ease,transform .35s ease;}
.award-overlay.is-show{opacity:1;transform:translate(-50%,0) scale(1);}
.control-panel{display:flex;flex-direction:column;gap:18px;height:100%;padding:26px;border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(17,21,29,.96),rgba(8,9,13,.92));box-shadow:var(--shadow);overflow:auto;}
.brand{display:flex;gap:15px;align-items:center;}
.brand-mark{display:grid;place-items:center;width:58px;min-width:58px;height:58px;border-radius:50%;background:var(--grad);color:#16100a;font-size:38px;font-weight:900;box-shadow:0 12px 34px rgba(200,115,55,.25);}
h1{margin:0;font-size:30px;font-weight:900;letter-spacing:0;}
p{margin:7px 0 0;color:var(--muted);font-size:15px;line-height:1.55;}
.panel-tabs{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;padding:5px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035);}
.tab-btn{height:42px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;}
.tab-btn.is-active{background:var(--grad);color:#100d08;}
.tab-panel{display:none;gap:16px;}
.tab-panel.is-active{display:grid;}
.control-row{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035);}
.control-row.mini{gap:8px;padding:12px;}
.control-row label{font-size:15px;font-weight:800;color:var(--muted);}
.control-row label span{float:right;color:var(--gold);}
.depth-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.depth-btn{height:34px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.055);color:var(--muted);font-size:13px;}
.depth-btn.is-active{background:linear-gradient(135deg,#f4c44f 0%,#66d9e8 100%);color:#100d08;}
.style-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);}
.style-btn{height:36px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.055);color:var(--muted);font-size:13px;}
.style-btn.is-active{background:linear-gradient(135deg,#ff8b49 0%,#f4c44f 55%,#66d9e8 100%);color:#100d08;}
.count-line{display:grid;grid-template-columns:1fr 74px;gap:12px;align-items:center;}
input[type=range]{width:100%;accent-color:var(--gold);}
input[type=number]{height:44px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);text-align:center;font-weight:900;}
.button-row{display:grid;grid-template-columns:1fr 104px;gap:12px;}
button{height:50px;border:0;border-radius:8px;color:#100d08;font-weight:900;cursor:pointer;transition:transform .2s ease,filter .2s ease,opacity .2s ease;}
button:hover{transform:translateY(-1px);filter:brightness(1.06);}
button:active{transform:translateY(1px);}
#flipBtn{background:var(--grad);}
#fireBtn{background:linear-gradient(135deg,#e7edf5 0%,#8f9faf 48%,#66d9e8 100%);}
#resetBtn{background:#dfe6ef;color:#10141b;}
#reloadBtn{background:#dfe6ef;color:#10141b;}
.sound-btn{height:42px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);}
.sound-btn.is-muted{color:var(--muted);background:rgba(255,255,255,.025);}
.launcher-panel{display:grid;gap:10px;padding:14px;border:1px solid rgba(102,217,232,.22);border-radius:8px;background:linear-gradient(180deg,rgba(102,217,232,.06),rgba(255,255,255,.025));}
.launcher-panel h2{margin:0 0 2px;font-size:18px;font-weight:900;letter-spacing:0;color:var(--text);}
.animal-panel{display:grid;gap:10px;padding:14px;border:1px solid rgba(244,196,79,.22);border-radius:8px;background:linear-gradient(180deg,rgba(244,196,79,.08),rgba(255,255,255,.025));}
#towerBtn{background:linear-gradient(135deg,#f4c44f 0%,#9ee7d8 100%);}
.ammo-line{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-weight:800;}
.ammo-line b{color:var(--cyan);font-size:24px;}
.tower-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--muted);font-size:13px;font-weight:800;}
.tower-stat b{color:var(--gold);font-size:18px;}
.award-state b{color:var(--cyan);}
button:disabled{opacity:.54;cursor:not-allowed;transform:none;}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.score-grid div{display:grid;gap:5px;place-items:center;min-height:88px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);}
.score-grid span{font-size:34px;font-weight:900;}
.score-grid small{color:var(--muted);font-weight:800;}
.result-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-bottom:4px;}
.result-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);font-size:14px;font-weight:800;}
.result-item b{color:var(--gold);}
.result-item.is-tail b{color:var(--cyan);}
@media (max-width:980px){html,body{overflow:auto;}.game-shell{grid-template-columns:1fr;height:auto;min-height:100svh;}.stage-wrap{height:62svh;min-height:430px;}.control-panel{height:auto;border-left:0;border-top:1px solid var(--line);}.result-list{grid-template-columns:repeat(4,1fr);}}
@media (max-width:620px){.stage-wrap{height:55svh;min-height:360px;}.control-panel{padding:18px;gap:16px;}.brand-mark{width:50px;min-width:50px;height:50px;font-size:32px;}h1{font-size:25px;}.count-line,.button-row{grid-template-columns:1fr;}.score-grid{gap:7px;}.score-grid span{font-size:28px;}.result-list{grid-template-columns:repeat(2,1fr);}.status-badge{left:14px;top:14px;font-size:13px;}.stage-actions{left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;}.stage-actions button{padding:0 8px;font-size:13px;}.tower-hud{left:14px;right:14px;top:58px;width:auto;padding:10px;gap:5px;}.tower-stat{padding:6px 8px;font-size:12px;}.tower-stat b{font-size:15px;}}
