:root{--navy:#172b62;--blue:#1768d4;--sky:#63c9f0;--gold:#ffc52d;--red:#e95454;--cream:#fff7df;--ink:#20325b}*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);font-family:"Avenir Next","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;background:#cfeef7}.game-shell{min-height:100vh;background:linear-gradient(#f9f7e8 0 25%,#bfe8f5 25% 76%,#f4dfab 76%);overflow:hidden}.topbar{height:82px;padding:0 max(22px,4vw);display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:white;border-bottom:5px solid var(--gold);box-shadow:0 5px 18px #18285b55}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#4294ef,#1450b6);border:3px solid white;box-shadow:0 5px 0 #0b3b91;font-size:25px;font-weight:950;transform:rotate(-4deg)}.brand p,.brand h1{margin:0}.brand p{font-size:9px;letter-spacing:.18em;color:#9fd8ff;font-weight:900}.brand h1{font-size:25px;letter-spacing:.06em}.match-state{display:flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid #ffffff2a;border-radius:999px;background:#08173b66;font-size:13px}.match-state #timer{font-size:20px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}.live-dot{width:9px;height:9px;border-radius:50%;background:#54e798;box-shadow:0 0 0 5px #54e79822;animation:pulse 1.5s infinite}.top-actions{display:flex;gap:9px}.round-btn{width:42px;height:42px;border:2px solid #ffffff55;border-radius:14px;color:white;background:#ffffff12;font-weight:900;cursor:pointer}.scoreboard{height:120px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1120px;margin:auto;padding:10px 24px}.team{display:flex;align-items:center;gap:14px}.team>img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 4px #24386c33)}.team>div{flex:1}.team span{font-size:9px;letter-spacing:.18em;font-weight:900;color:#66718b}.team h2{margin:1px 0 6px;font-size:18px}.red-team{text-align:right}.hp{height:13px;padding:3px;border-radius:20px;background:#d9d5c8;box-shadow:inset 0 2px 3px #0002}.hp i{display:block;width:100%;height:100%;border-radius:10px;background:linear-gradient(90deg,#2e8cf0,#2ec9dd);transition:width .3s}.red-team .hp i{margin-left:auto;background:linear-gradient(90deg,#ff9864,#e74b55)}.team small{font-size:10px;color:#6c7280}.versus{display:flex;align-items:center;gap:8px}.versus b{font-size:25px}.versus span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:white;background:var(--navy);font-size:12px;font-weight:950;box-shadow:0 4px 0 #091943}.battlefield{position:relative;height:min(50vh,470px);min-height:330px;overflow:hidden;border-top:5px solid white;border-bottom:5px solid white;background:linear-gradient(#72c9ea 0 49%,#6fb04e 49% 58%,#e6ca81 58% 100%);box-shadow:inset 0 7px 22px #17346a2e}.battlefield:before{position:absolute;inset:49% 0 auto;height:36px;background:radial-gradient(ellipse at 20% 100%,#67a847 0 35%,transparent 37%) 0 0/110px 44px repeat-x;content:""}.cloud{position:absolute;top:35px;width:100px;height:28px;border-radius:40px;background:#ffffff9c;filter:blur(.2px)}.cloud:before,.cloud:after{position:absolute;bottom:0;border-radius:50%;background:inherit;content:""}.cloud:before{left:18px;width:44px;height:44px}.cloud:after{right:13px;width:35px;height:35px}.cloud-a{left:20%;animation:drift 20s linear infinite}.cloud-b{right:17%;top:75px;transform:scale(.65);animation:drift 25s linear infinite reverse}.lane{position:absolute;left:7%;right:7%;bottom:11%;height:42%;border-radius:50%;background:#ebd38c;border:4px solid #ffe8af;box-shadow:inset 0 0 0 4px #c6a65d55}.lane i{position:absolute;width:9px;height:9px;border-radius:50%;background:#c4a35d55}.lane i:nth-child(1){left:27%;top:25%}.lane i:nth-child(2){left:52%;bottom:18%}.lane i:nth-child(3){right:22%;top:35%}.center-mark{position:absolute;left:50%;top:50%;width:55px;height:55px;display:grid;place-items:center;border:4px solid #ffffff88;border-radius:50%;color:#ffffffaa;font-weight:950;font-size:26px;transform:translate(-50%,-50%) rotate(-7deg)}.base{position:absolute;z-index:4;bottom:15%;width:130px;height:170px;text-align:center}.base strong{display:inline-block;margin-top:4px;padding:4px 9px;border-radius:10px;color:white;background:#172b62;font-size:10px}.blue-base{left:2%}.red-base{right:2%}.red-base strong{background:#a62d3b}.base-core{width:95px;height:115px;margin:2px auto;border:8px solid white;border-radius:50% 50% 18px 18px;background:linear-gradient(145deg,#2f8ae6,#164ea7);box-shadow:0 9px 0 #23477a,0 14px 20px #20315b55}.red-base .base-core{background:linear-gradient(145deg,#ff7965,#bd3448);box-shadow:0 9px 0 #7e2937,0 14px 20px #20315b55}.flag{display:block;font-size:28px;color:var(--gold);filter:drop-shadow(0 3px #9b681e)}.units{position:absolute;z-index:6;inset:0}.unit{position:absolute;bottom:21%;width:66px;height:78px;transform:translateX(-50%);transition:filter .2s}.unit img{width:100%;height:64px;object-fit:contain;filter:drop-shadow(0 5px 3px #23345a66)}.unit.red img{transform:scaleX(-1);filter:hue-rotate(128deg) saturate(1.2) drop-shadow(0 5px 3px #23345a66)}.unit-hp{position:absolute;left:9px;right:9px;top:0;height:6px;padding:1px;border-radius:5px;background:#fff}.unit-hp i{display:block;height:100%;border-radius:4px;background:#34bb75}.unit.red .unit-hp i{background:#ef5a60}.unit.hit{animation:hit .18s}.unit.attack img{animation:bump .22s}.effects{position:absolute;z-index:8;inset:0;pointer-events:none}.damage{position:absolute;color:white;font-size:18px;font-weight:950;text-shadow:0 3px 0 #b43333,-1px 0 #b43333,1px 0 #b43333;animation:damage .7s forwards}.announcement{position:absolute;z-index:20;left:50%;top:25%;padding:12px 25px;border:3px solid white;border-radius:18px;color:white;background:#172b62e8;box-shadow:0 7px 0 #0b1739;font-weight:950;font-size:20px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.announcement.show{animation:announce 1.3s}.command-deck{min-height:150px;padding:14px max(20px,4vw);display:grid;grid-template-columns:200px 1fr 230px;align-items:center;gap:18px;background:#fffaf0;border-bottom:1px solid #d9c99c}.energy-panel{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px}.energy-icon{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#7b4c00;background:var(--gold);box-shadow:0 5px 0 #d89713}.energy-panel span,.skill-button small{display:block;font-size:9px;letter-spacing:.12em;color:#697086;font-weight:900}.energy-panel strong{font-size:17px}.energy-bar{grid-column:1/3;height:9px;border-radius:8px;background:#d8dde7;overflow:hidden}.energy-bar i{display:block;width:60%;height:100%;background:linear-gradient(90deg,#ffc72c,#ff8c30);transition:width .2s}.unit-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.unit-card,.skill-button{position:relative;min-width:0;border:2px solid #e0d7bc;border-radius:18px;background:white;box-shadow:0 5px 0 #c8b98d;cursor:pointer;transition:.15s}.unit-card{height:92px;padding:8px 8px 8px 78px;text-align:left}.unit-card img{position:absolute;left:8px;bottom:5px;width:65px;height:75px;object-fit:contain}.unit-card strong{display:block;font-size:13px}.unit-card small{display:block;margin-top:3px;color:#7a7d86;font-size:9px}.unit-card:hover,.skill-button:hover{transform:translateY(-3px)}.unit-card:active,.skill-button:active{transform:translateY(2px);box-shadow:0 2px 0 #c8b98d}.unit-card:disabled,.skill-button:disabled{filter:grayscale(.7);opacity:.52;cursor:not-allowed;transform:none}.cost{position:absolute;z-index:2;left:5px;top:5px;padding:3px 7px;border-radius:10px;color:#754600;background:var(--gold);font-size:10px;font-weight:900}.unit-card kbd,.skill-button kbd{position:absolute;right:8px;bottom:6px;border:0;border-radius:6px;color:#70798d;background:#edf0f5;font-size:9px}.skill-button{height:96px;padding:8px 8px 8px 88px;text-align:left;border-color:#f4be25;background:linear-gradient(145deg,#fffef7,#fff2bd);box-shadow:0 5px 0 #d99a16}.skill-button img{position:absolute;z-index:2;left:2px;bottom:0;width:86px;height:90px;object-fit:contain}.skill-button strong{display:block;color:#9b5100;font-size:16px}.skill-button em{font-style:normal;font-size:10px;color:#777}.skill-glow{position:absolute;left:15px;top:15px;width:55px;height:55px;border-radius:50%;background:#ffd94f;filter:blur(10px);animation:pulse 1.2s infinite}footer{height:45px;padding:0 max(20px,4vw);display:flex;align-items:center;gap:28px;color:#647084;background:#fffaf0;font-size:10px}footer span:before{content:"✦";margin-right:6px;color:#e4a30d}footer button{margin-left:auto;border:0;color:#174fa8;background:transparent;font-weight:900;cursor:pointer}.modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:#0b173ab8;backdrop-filter:blur(5px)}.modal[hidden]{display:none}.modal-card{width:min(390px,calc(100% - 36px));padding:22px 28px 28px;text-align:center;border:5px solid white;border-radius:30px;background:#fff9e8;box-shadow:0 15px 0 #0c183d}.modal-card img{width:160px;height:150px;object-fit:contain}.modal-card p{margin:4px 0;color:#6d7180}.modal-card h2{margin:0;color:#164fae;font-size:40px}.modal-card button{margin-top:17px;padding:13px 30px;border:0;border-radius:14px;color:white;background:#1759c7;box-shadow:0 5px 0 #0c3b91;font-weight:900;cursor:pointer}@keyframes pulse{50%{opacity:.45;transform:scale(.9)}}@keyframes drift{50%{transform:translateX(80px)}}@keyframes hit{50%{filter:brightness(2) saturate(2)}}@keyframes bump{50%{transform:translateX(8px) scale(1.08)}}@keyframes damage{to{transform:translateY(-45px);opacity:0}}@keyframes announce{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:900px){.match-state strong{display:none}.scoreboard{height:105px}.team>img{width:58px;height:58px}.team h2{font-size:14px}.battlefield{min-height:350px}.command-deck{grid-template-columns:1fr}.energy-panel{grid-template-columns:44px auto 1fr}.energy-panel .energy-bar{grid-column:3}.skill-button{position:fixed;z-index:30;right:13px;bottom:12px;width:180px}.unit-cards{padding-right:0}footer{padding-right:200px}.base{transform:scale(.75)}.blue-base{left:-18px}.red-base{right:-18px}}@media(max-width:620px){.topbar{height:70px;padding:0 12px}.brand p{display:none}.brand h1{font-size:20px}.match-state{padding:7px 10px}.top-actions .round-btn:first-child{display:none}.scoreboard{padding:7px 10px;gap:6px}.team>img{display:none}.versus span{width:30px;height:30px}.battlefield{height:390px}.unit{width:55px}.command-deck{padding:10px}.unit-card{height:82px;padding:58px 3px 2px;text-align:center}.unit-card img{left:50%;bottom:20px;width:60px;transform:translateX(-50%)}.unit-card small{display:none}.skill-button{width:150px;height:80px;padding-left:72px}.skill-button img{width:72px;height:75px}.skill-button strong{font-size:13px}footer{height:38px;padding:0 165px 0 12px}footer span{display:none}}