:root { --long:#21d477; --short:#ff425f; --gold:#ffc85a; --panel:rgba(8,17,25,.86); --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#071017; color:#eef7f3; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
button,select,a { font:inherit; } button { cursor:pointer; }
.battle-root { position:fixed; inset:0; min-height:100dvh; overflow:hidden; background:#071017; }
.battle-canvas { position:absolute; inset:0; touch-action:none; }
.battle-canvas canvas { display:block; width:100%; height:100%; }
.battle-top { position:absolute; z-index:20; top:0; left:0; right:0; min-height:66px; display:flex; align-items:center; gap:18px; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); background:linear-gradient(180deg,rgba(2,8,12,.96),rgba(4,11,16,.66)); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.battle-brand { display:flex; align-items:center; gap:10px; min-width:205px; }
.crest { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:linear-gradient(145deg,var(--long),var(--short)); color:white; font-weight:900; box-shadow:0 0 22px rgba(255,200,90,.3); }
.battle-brand b { display:block; font-size:18px; letter-spacing:2px; }.battle-brand small { color:#93a6ad; }
.symbol-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.28); }
.symbol-switch button { border:0; color:#91a3aa; background:transparent; padding:8px 13px; border-radius:7px; }.symbol-switch button.active { color:#071017; background:var(--gold); font-weight:800; }
.step-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.28); }
.step-switch button { border:0; color:#7d9097; background:transparent; padding:6px 9px; border-radius:6px; font-size:11px; white-space:nowrap; }
.step-switch button.active { color:#ffd05b; background:rgba(255,208,91,.14); font-weight:700; }
.top-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }.top-actions a,.top-actions button { color:#dce8e4; text-decoration:none; border:1px solid var(--line); background:rgba(10,23,31,.8); border-radius:8px; padding:8px 12px; }.top-actions a:hover,.top-actions button:hover { border-color:var(--gold); color:var(--gold); }
.battle-score { position:absolute; z-index:18; top:82px; left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 330px)); display:grid; grid-template-columns:1fr 1.45fr 1fr; gap:8px; pointer-events:none; }
.army-card,.round-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 14px; backdrop-filter:blur(8px); box-shadow:0 12px 35px rgba(0,0,0,.28); }.army-card { display:flex; flex-direction:column; }.army-card span { font-weight:900; letter-spacing:3px; }.army-card b { font-size:19px; }.army-card small { color:#a4b4b8; }
.army-card.long { border-left:4px solid var(--long); }.army-card.long span,.army-card.long b { color:var(--long); }.army-card.short { text-align:right; border-right:4px solid var(--short); }.army-card.short span,.army-card.short b { color:var(--short); }
.round-card { text-align:center; }.round-card small { color:#96a7ac; }.round-card b { display:block; color:var(--gold); font-size:17px; }.round-card span { color:#bdc9cc; font-size:11px; }
.defense-progress { height:5px; margin:5px 0; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.1); }.defense-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--gold),#fff1a8); transition:width .5s; }
.price-rail { position:absolute; z-index:16; right:18px; top:145px; display:flex; flex-direction:column; gap:8px; width:142px; }.price-rail>div { padding:9px 12px; text-align:right; border-radius:9px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(7px); }.price-rail small { display:block; color:#879aa1; }.price-rail b { font-size:17px; font-variant-numeric:tabular-nums; }.price-rail .current { border-color:var(--gold); box-shadow:0 0 18px rgba(255,200,90,.18); }.price-rail .current b { color:var(--gold); font-size:21px; }.price-rail span { display:block; font-size:11px; }
.battle-log { position:absolute; z-index:16; left:16px; top:145px; width:250px; max-height:42vh; border:1px solid var(--line); border-radius:11px; background:var(--panel); overflow:hidden; backdrop-filter:blur(8px); }.panel-head { display:flex; justify-content:space-between; align-items:center; padding:9px 11px; border-bottom:1px solid var(--line); }.panel-head span { color:#91a3aa; font-size:11px; }.log-list { max-height:calc(42vh - 40px); overflow:hidden; padding:5px 10px 9px; }.log-item { display:grid; grid-template-columns:44px 1fr; gap:7px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.09); font-size:11px; }.log-item time { color:#809198; }.log-item.long p { color:#8ff0bd; }.log-item.short p { color:#ff9bac; }.log-item p { margin:0; }
.settings-panel { display:none; position:absolute; z-index:30; right:16px; top:76px; width:280px; padding-bottom:12px; border:1px solid var(--line); border-radius:12px; background:rgba(5,14,20,.96); box-shadow:0 18px 55px rgba(0,0,0,.5); }.settings-panel.open { display:block; }.settings-panel label { display:flex; justify-content:space-between; align-items:center; padding:8px 13px; color:#c2d0d2; border-bottom:1px solid rgba(255,255,255,.06); }.settings-panel select { color:white; background:#14232c; border:1px solid var(--line); border-radius:5px; padding:4px; }.settings-panel small { display:block; color:#7f9298; padding:8px 13px 0; }.settings-panel .panel-head button { color:#9eb0b4; border:0; background:none; }.zoom-actions { display:grid; grid-template-columns:48px 1fr 48px; gap:6px; padding:10px 12px 0; }.zoom-actions button { border:1px solid var(--line); color:white; background:#14232c; border-radius:7px; padding:7px; }
.battle-history { position:absolute; z-index:18; left:50%; bottom:max(15px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(700px,calc(100% - 330px)); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); backdrop-filter:blur(8px); }.battle-history b { display:block; font-size:12px; }.battle-history span { color:#8fa2a7; font-size:11px; }.history-dots { display:flex; gap:6px; flex-direction:row-reverse; }.history-dot { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:#071017; font-size:10px; font-weight:900; }.history-dot.long { background:var(--long); }.history-dot.short { background:var(--short); color:white; }
.event-banner { position:absolute; z-index:40; left:50%; top:29%; transform:translate(-50%,-20px); min-width:270px; opacity:0; pointer-events:none; text-align:center; font-size:28px; font-weight:1000; letter-spacing:5px; color:white; text-shadow:0 0 20px currentColor; transition:.3s; }.event-banner.show { opacity:1; transform:translate(-50%,0); }.event-banner.long { color:var(--long); }.event-banner.short { color:var(--short); }
.loading-mask { position:absolute; z-index:50; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:radial-gradient(circle,rgba(13,31,39,.83),rgba(3,8,12,.98)); transition:opacity .5s; }.loading-mask.hide { opacity:0; pointer-events:none; }.loading-mask span { color:#84979c; }.loading-mask a { color:var(--gold); }.radar { width:70px; height:70px; border:2px solid var(--long); border-radius:50%; box-shadow:0 0 30px rgba(33,212,119,.25); position:relative; overflow:hidden; }.radar:before { content:""; position:absolute; left:50%; top:50%; width:50%; height:2px; background:var(--long); transform-origin:left; animation:scan 1.2s linear infinite; }@keyframes scan { to { transform:rotate(360deg); } }
@media(max-width:900px){.battle-top{min-height:104px;align-items:flex-start;flex-wrap:wrap;gap:6px;padding:7px 8px}.battle-brand{min-width:150px}.crest{width:34px;height:34px}.battle-brand b{font-size:15px}.symbol-switch{order:3;width:100%}.symbol-switch button{flex:1;padding:6px}.top-actions{gap:4px}.top-actions a,.top-actions button{padding:6px 8px;font-size:11px}#soundToggle{display:none}.battle-score{top:112px;width:calc(100% - 16px);grid-template-columns:1fr 1.4fr 1fr;gap:4px}.army-card,.round-card{padding:6px 7px}.army-card b{font-size:14px}.army-card small{display:none}.round-card b{font-size:13px}.round-card span{font-size:9px}.price-rail{top:194px;right:8px;width:112px}.price-rail>div{padding:6px 8px}.price-rail b{font-size:14px}.price-rail .current b{font-size:17px}.battle-log{left:8px;top:194px;width:145px;max-height:25vh}.log-list{max-height:calc(25vh - 40px)}.log-item{grid-template-columns:1fr;gap:1px;padding:4px 0}.log-item time{display:none}.battle-history{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 16px);padding:7px 9px}.battle-history span{display:none}.history-dots{gap:3px}.history-dot{width:19px;height:19px;border-radius:5px}.settings-panel{top:108px;right:8px;width:calc(100% - 16px)}.event-banner{font-size:20px;min-width:240px;top:36%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}