:root { font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #fff5d2; background: #160a30; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { min-width: 320px; min-height: 100dvh; margin: 0; overflow: hidden; }
button { font: inherit; cursor: pointer; }
.game-shell { min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #7152b8, #241044 55%, #11061f); }
.phone-frame { position: relative; width: min(100vw, 500px); height: 100dvh; max-height: 920px; overflow: hidden; isolation: isolate; background: linear-gradient(#8d56df 0 44%, #f0c83d 44%); box-shadow: 0 0 50px #0f061e; }
.hud { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 87px; display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; padding: max(12px, env(safe-area-inset-top)) 12px 5px; background: linear-gradient(#4d249cbb, transparent); text-shadow: 0 2px #402168; }
.commander { width: 39%; display: grid; grid-template-columns: 37px 1fr; gap: 3px; align-items: center; font-size: 9px; }.commander-enemy { grid-template-columns: 1fr 37px; text-align: right; }.commander-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.commander-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.commander-copy i { color: #ffe35a; font-style: normal; font-weight: 900; }.enemy-copy { order: 2; }.avatar { position: relative; width: 36px; height: 36px; overflow: hidden; border: 2px solid #fff0a4; border-radius: 9px; background: #65d6c8; box-shadow: 0 2px #5c2677; }.avatar i { position: absolute; left: 7px; top: 5px; width: 19px; height: 23px; border-radius: 48% 48% 45% 45%; background: #ecfff0; }.avatar i::before, .avatar i::after { content: ""; position: absolute; top: 9px; width: 4px; height: 5px; border-radius: 50%; background: #3d2b54; }.avatar i::before { left: 4px; }.avatar i::after { right: 4px; }.avatar-enemy { order: 3; background: #df6a74; }.avatar-enemy i { background: #a98cff; }.avatar-enemy i::before, .avatar-enemy i::after { background: #fff0bf; }.hp-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; font-weight: 900; }.enemy-hp-group { order: 1; justify-content: flex-end; }.hp-track { flex: 1; height: 9px; overflow: hidden; border: 1px solid #3d1c65; border-radius: 8px; background: #3a215d; box-shadow: 0 1px #d2a9ff; }.hp-track i { display: block; width: 100%; height: 100%; transition: width .25s; }.player-hp i { background: linear-gradient(#6df8ff, #168fcb); }.enemy-hp i { background: linear-gradient(#ffad72, #e43c43); }
.match-clock { align-self: start; min-width: 78px; padding: 5px 7px; border: 2px solid #ffe25b; border-radius: 12px; color: #fff9dc; text-align: center; background: linear-gradient(#6f42b5, #412376); box-shadow: 0 3px #351966; }.match-clock b { font-size: 15px; }.match-clock small { display: block; margin-top: 1px; color: #dcc1ff; font-size: 8px; }
.battle-tip { position: absolute; top: 87px; left: 50%; z-index: 18; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; width: max-content; max-width: 90%; padding: 4px 9px; color: #f8ecff; border: 1px solid #bd83ef; border-radius: 12px; background: #4b297dce; font-size: 10px; white-space: nowrap; transition: opacity .3s; }.battle-tip span { width: 6px; height: 6px; border-radius: 50%; background: #76ffc7; box-shadow: 0 0 8px #76ffc7; }
.battlefield { position: absolute; inset: 67px 0 66px; overflow: hidden; background: linear-gradient(#9a5ce4 0 46%, #efc93f 54%); }.terrain-noise { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, #92db6d 0 16%, transparent 16.5%), radial-gradient(ellipse at 50% 48%, #67b651 0 11%, transparent 11.5%); opacity: .7; }.map-layer, .unit-layer, .effect-layer { position: absolute; inset: 0; }.map-layer { z-index: 2; }.unit-layer { z-index: 8; pointer-events: none; }.effect-layer { z-index: 11; pointer-events: none; }.score-line { position: absolute; z-index: 5; top: 49%; left: 18%; right: 18%; border-top: 2px dashed #f1f3a1a6; text-align: center; pointer-events: none; }.score-line span { position: relative; top: -8px; padding: 1px 6px; color: #757740; background: #98dc6c; font-size: 8px; font-weight: 900; opacity: .75; }
.cell { position: absolute; width: 15.2%; height: 11.2%; padding: 1px; border: 0; background: transparent; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); transition: filter .24s, transform .22s; }.cell::before { content: ""; position: absolute; inset: 1px; clip-path: inherit; background: var(--cell-fill); box-shadow: inset 0 0 0 2px var(--cell-edge), inset 0 -7px 9px #00000018, inset 0 5px 8px #ffffff33; }.cell.player { --cell-fill: #efcf35; --cell-edge: #bb891d; }.cell.enemy { --cell-fill: #9b58de; --cell-edge: #6732ad; }.cell.neutral { --cell-fill: #87cf6e; --cell-edge: #5a9e58; }.cell.buildable::after { content: ""; position: absolute; inset: 7%; clip-path: inherit; border: 2px solid #fff5a5; filter: drop-shadow(0 0 7px #fff882); animation: tile-glow 1.25s ease-in-out infinite alternate; }.cell:hover, .cell:focus-visible { filter: brightness(1.15); transform: scale(1.04); outline: none; }.cell.captured { animation: claim .38s ease-out; }.cell .cost-tag { position: absolute; z-index: 5; left: 50%; bottom: 6%; display: flex; align-items: center; gap: 1px; transform: translateX(-50%); padding: 1px 3px; color: #75442b; border: 1px solid #e2b42d; border-radius: 7px; background: #ffed8a; font-size: 8px; font-weight: 900; white-space: nowrap; }.cell .cost-tag::before { content: "✦"; color: #e9a31d; }.cell .offer-mark { position: absolute; z-index: 4; top: 10%; left: 50%; transform: translateX(-50%); color: #fff8ca; font-size: 22px; font-weight: 900; text-shadow: 0 2px #7a4a70; }.cell .offer-mark.mine-offer { width: 27px; height: 18px; border: 3px solid #fff2a2; border-radius: 50%; color: transparent; background: #d89536; box-shadow: inset 0 0 0 3px #824c3b; }.cell .offer-mark.tower-offer { width: 13px; height: 22px; border: 3px solid #fff4b0; border-radius: 4px 4px 1px 1px; color: transparent; background: #8a74d1; }.cell .offer-mark.barracks-offer { width: 29px; height: 20px; color: transparent; border-radius: 2px; background: #e47549; clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 0 100%); }
.building { position: absolute; z-index: 6; top: 50%; left: 50%; width: 51%; height: 58%; transform: translate(-50%, -54%); pointer-events: none; filter: drop-shadow(0 3px 1px #47265070); }.building::after { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); padding: 1px 3px; color: #fff9d1; border-radius: 5px; background: #482964c9; font-size: 7px; font-weight: 900; white-space: nowrap; }.building.base { width: 66%; height: 72%; border: 3px solid #e9e1b3; border-radius: 42% 42% 39% 39%; background: linear-gradient(135deg, #a8735b 0 45%, #5f433d 46%); box-shadow: inset 0 0 0 4px #c7bd87; }.building.base::before { content: ""; position: absolute; left: 28%; top: -14%; width: 42%; height: 52%; border: 3px solid #f5e5b2; border-radius: 50% 50% 8px 8px; background: linear-gradient(#8b5f43, #563c47); }.building.base::after { content: "基地 +15"; }.building.mine { width: 52%; height: 43%; top: 54%; border: 4px solid #f9d56c; border-radius: 50%; background: radial-gradient(circle, #514568 0 25%, #b66c38 27% 52%, #f0b447 54%); }.building.mine::before { content: ""; position: absolute; top: 36%; left: 15%; width: 68%; border-top: 3px solid #563c61; transform: rotate(-30deg); }.building.mine::after { content: "矿场 +20"; }.building.tower { width: 38%; height: 66%; top: 48%; border: 3px solid #e8e2b6; border-radius: 7px 7px 2px 2px; background: linear-gradient(90deg, #8975bf, #534878); }.building.tower::before { content: ""; position: absolute; left: -30%; top: -10%; width: 160%; height: 25%; border: 3px solid #f7dfa1; border-radius: 50% 50% 4px 4px; background: #7c5bac; }.building.tower::after { content: "箭塔"; }.building.barracks { width: 61%; height: 59%; top: 50%; border: 3px solid #f8dc9a; border-radius: 3px; background: linear-gradient(90deg, #c47146, #8a4a49); clip-path: polygon(0 36%, 50% 0, 100% 36%, 100% 100%, 0 100%); }.building.barracks::before { content: ""; position: absolute; left: 39%; bottom: 4%; width: 22%; height: 38%; border: 2px solid #fbe7a9; border-radius: 8px 8px 0 0; background: #634059; }.building.barracks::after { content: attr(data-level); }.building.barracks.level-2 { filter: drop-shadow(0 0 5px #a9e7ff) drop-shadow(0 3px 1px #47265070); }.building.barracks.level-3 { filter: drop-shadow(0 0 6px #ffcf5b) drop-shadow(0 3px 1px #47265070); }.building.enemy-building { filter: hue-rotate(35deg) saturate(1.2) drop-shadow(0 3px 1px #47265070); }
.unit { position: absolute; width: 27px; height: 35px; transform: translate(-50%, -50%); transition: left .48s cubic-bezier(.2,.7,.2,1), top .48s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 2px 1px #3f245a99); }.unit .animal { position: absolute; left: 2px; top: 0; width: 23px; height: 25px; border: 2px solid #fff3b8; border-radius: 48% 48% 43% 43%; background: var(--fur); }.unit .animal::before, .unit .animal::after { content: ""; position: absolute; top: -7px; width: 9px; height: 12px; border: 2px solid #fff0ba; background: var(--ear); }.unit .animal::before { left: -2px; border-radius: 80% 10% 50% 15%; transform: rotate(-25deg); }.unit .animal::after { right: -2px; border-radius: 10% 80% 15% 50%; transform: rotate(25deg); }.unit .eyes { position: absolute; top: 10px; left: 7px; width: 9px; height: 4px; border-left: 3px solid #312744; border-right: 3px solid #312744; }.unit .health { position: absolute; bottom: 0; left: 1px; width: 25px; height: 4px; overflow: hidden; border: 1px solid #422454; border-radius: 5px; background: #39215b; }.unit .health i { display: block; width: 100%; height: 100%; background: #73f4b1; }.unit.enemy .health i { background: #ff7075; }.unit.elite { transform: translate(-50%, -50%) scale(1.12); }.unit.hit { animation: unit-hit .2s; }
.projectile { position: absolute; width: 8px; height: 8px; border: 2px solid #fff5a5; border-radius: 50%; background: #ff8d4a; box-shadow: 0 0 7px #ff7945; transition: left .18s linear, top .18s linear; }.floating { position: absolute; transform: translate(-50%, -50%); color: #fff5a8; font-size: 12px; font-weight: 900; text-shadow: 0 2px #53285d; animation: float-up .85s ease-out forwards; }.floating.damage { color: #ff827a; }.floating.income { color: #fff08d; }.tower-range { position: absolute; z-index: 4; border: 1px dashed #fff6aab3; border-radius: 50%; background: #fff7b713; animation: range-fade .65s ease-out forwards; pointer-events: none; }
.construction-hint { position: absolute; z-index: 16; bottom: 65px; left: 50%; display: flex; align-items: center; gap: 8px; width: min(86%, 360px); transform: translateX(-50%); padding: 7px 9px; color: #6d4333; border: 2px solid #ffec94; border-radius: 14px; background: #fff0a3; box-shadow: 0 3px #a87530; }.construction-hint p { flex: 1; margin: 0; font-size: 10px; line-height: 1.35; }.construction-hint p span { color: #9b6c36; font-size: 9px; }.construction-hint button { width: 18px; height: 18px; color: #8d603a; border: 0; border-radius: 50%; background: #f3ca64; font-size: 15px; line-height: 1; }.hint-icon { position: relative; width: 29px; height: 28px; border: 2px solid #f7d99a; background: #cf704a; clip-path: polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%); }.hint-icon::before { content: ""; position: absolute; bottom: 3px; left: 10px; width: 8px; height: 12px; border: 1px solid #ffeeb5; border-radius: 5px 5px 0 0; background: #5d3d54; }
.bottom-panel { position: absolute; z-index: 25; bottom: 0; left: 0; right: 0; height: 67px; display: flex; align-items: center; gap: 7px; padding: 8px 11px max(8px, env(safe-area-inset-bottom)); border-top: 2px solid #8954bc; background: linear-gradient(#563387, #321c60); }.round-button { flex: 0 0 34px; height: 34px; color: #fff8cf; border: 2px solid #c792e9; border-radius: 50%; background: #67429a; box-shadow: 0 2px #291548; font-weight: 900; }.round-button.speed { font-size: 11px; }.treasury { display: flex; align-items: center; gap: 4px; min-width: 79px; padding: 4px 7px; color: #6d4b27; border-radius: 13px; background: #fff0a1; box-shadow: inset 0 -2px #cf9528; }.treasury b { display: block; font-size: 14px; line-height: 1; }.treasury small { display: block; width: 99px; color: #936731; font-size: 7px; white-space: nowrap; }.coin-mark { width: 17px; height: 17px; padding-top: 1px; color: #fff39b; border-radius: 50%; text-align: center; background: #e7a728; }.build-key { flex: 1; display: grid; gap: 3px; color: #ebd7ff; font-size: 8px; white-space: nowrap; }.build-key span { display: flex; align-items: center; gap: 3px; }.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }.mine-key { background: #f2b13d; }.barracks-key { background: #df7751; }.tower-key { background: #a78ada; }
dialog { color: #fff1ca; border: 3px solid #ffe271; border-radius: 20px; background: linear-gradient(#6c43a9, #40236f); box-shadow: 0 8px #2c154e, 0 0 0 100vmax #160926ad; }.help-dialog { width: min(85vw, 350px); padding: 19px 23px; }.dialog-close { position: absolute; top: 8px; right: 10px; width: 27px; height: 27px; color: #fff5cb; border: 0; border-radius: 50%; background: #4d2c77; font-size: 20px; }.dialog-kicker { margin: 0; color: #d3baff; font-size: 10px; }.help-dialog h2, .result-dialog h2 { margin: 3px 0 10px; font-size: 27px; }.help-dialog ol { padding-left: 20px; color: #f5e9ff; font-size: 13px; line-height: 1.65; }.help-dialog li + li { margin-top: 5px; }.result-dialog { width: min(82vw, 330px); padding: 22px; text-align: center; }.result-medal { width: 61px; height: 61px; margin: -52px auto 4px; padding-top: 10px; color: #fff5a2; border: 3px solid #fff2ad; border-radius: 50%; background: radial-gradient(#ffe45f, #dc7d2d); box-shadow: 0 4px #9c5040; font-size: 31px; }.result-dialog h2 { margin-bottom: 3px; }.result-dialog > p:not(.dialog-kicker) { margin: 3px 0; color: #eadbff; font-size: 12px; }.land-result { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 16px; padding: 8px; color: #ffed97; border-radius: 10px; background: #2b1755b8; font-size: 12px; }.land-result i { color: #d1b5ff; font-style: normal; }.land-result b { font-size: 17px; }.result-dialog button { width: 100%; margin-top: 14px; padding: 10px; color: #704340; border: 2px solid #fff2a7; border-radius: 10px; background: linear-gradient(#fff279, #f3bb38); box-shadow: 0 3px #a45b36; font-weight: 900; }
@keyframes tile-glow { to { opacity: .35; transform: scale(.91); } } @keyframes claim { 50% { filter: brightness(1.7); transform: scale(1.1); } } @keyframes unit-hit { 50% { filter: brightness(1.9); transform: translate(-50%, -50%) translateX(4px); } } @keyframes float-up { to { opacity: 0; transform: translate(-50%, calc(-50% - 27px)); } } @keyframes range-fade { to { opacity: 0; transform: scale(1.15); } }
.building { width: 77%; height: 73%; transform: translate(-50%, -56%); background: none; border: 0; border-radius: 0; clip-path: none; box-shadow: none; filter: drop-shadow(0 3px 1px #47265085); }.building::before, .building::after { content: none; }.building svg { display: block; width: 100%; height: 100%; overflow: visible; }.building.base { width: 88%; height: 83%; background: none; border: 0; }.building.mine { width: 78%; height: 69%; top: 50%; background: none; border: 0; }.building.tower { width: 64%; height: 85%; top: 47%; background: none; border: 0; }.building.barracks { width: 82%; height: 75%; top: 50%; background: none; border: 0; }.building-title { position: absolute; z-index: 2; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 1px 4px; color: #fff9d2; border: 1px solid #765079; border-radius: 6px; background: #3c2459dc; font-size: 7px; white-space: nowrap; text-shadow: 0 1px #321847; }.building-health { position: absolute; z-index: 3; bottom: -13px; left: 13%; width: 74%; height: 4px; overflow: hidden; border: 1px solid #3b2052; border-radius: 5px; background: #482466; }.building-health i { display: block; height: 100%; background: linear-gradient(90deg, #61e5c0, #e8ff9a); transition: width .22s; }.enemy-building .building-health i { background: linear-gradient(90deg, #ff735d, #ffb179); }.building.level-2 { filter: drop-shadow(0 0 4px #a9e7ff) drop-shadow(0 3px 1px #47265085); }.building.level-3 { filter: drop-shadow(0 0 6px #ffcf5b) drop-shadow(0 3px 1px #47265085); }.building.enemy-building { filter: hue-rotate(34deg) saturate(1.15) drop-shadow(0 3px 1px #47265085); }.building.enemy-building.level-2 { filter: hue-rotate(34deg) saturate(1.15) drop-shadow(0 0 4px #b8dcff) drop-shadow(0 3px 1px #47265085); }.building.enemy-building.level-3 { filter: hue-rotate(34deg) saturate(1.15) drop-shadow(0 0 6px #ffd75f) drop-shadow(0 3px 1px #47265085); }.ruin { position: absolute; z-index: 6; top: 50%; left: 50%; width: 75%; height: 56%; transform: translate(-50%, -45%); pointer-events: none; filter: drop-shadow(0 3px 1px #3c285066); }.ruin svg { width: 100%; height: 100%; }.ruin b { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 4px; color: #e3c8bd; border-radius: 5px; background: #4e3448df; font-size: 7px; white-space: nowrap; }
@media (min-width: 600px) and (min-height: 700px) { .phone-frame { height: min(100dvh, 920px); border-radius: 24px; } }