:root {
  color-scheme: dark;
  --cyan: #35d9ff;
  --gold: #ffd35a;
  --red: #ff5260;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; overscroll-behavior: none; background: #01050a; color: white; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.is-hidden { display: none !important; }
.screen { width: var(--app-width, 100vw); height: var(--app-height, 100dvh); }

.menu-screen { --mx: 0px; --my: 0px; position: relative; overflow: hidden; background: #01050a; }
.menu-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(30, 178, 255, .025) 3px 4px); pointer-events: none; }
.menu-art { position: absolute; inset: -1.5%; background: url("assets/main-menu-clean-v2.png") center / cover no-repeat; transform: translate(var(--mx), var(--my)) scale(1.035); transition: transform .2s ease-out; animation: menu-breathe 7s ease-in-out infinite alternate; }
#menuFxCanvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
.menu-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0, 5, 12, .05) 55%, rgba(0, 5, 10, .72) 100%), radial-gradient(circle at 50% 51%, transparent 0 19%, rgba(0, 4, 10, .13) 38%, rgba(0, 3, 8, .38) 100%); pointer-events: none; }
.menu-actions { position: absolute; z-index: 5; left: 50%; bottom: 3.2%; width: clamp(260px, 31vw, 460px); transform: translateX(-50%); display: grid; gap: clamp(5px, .9vh, 9px); }
.menu-button { border: 0; cursor: pointer; transition: transform .16s, filter .16s, box-shadow .16s; }
.menu-button:hover { filter: brightness(1.2); transform: translateY(-2px); }
.menu-button:active { transform: translateY(1px) scale(.99); }
.menu-start { width: 100%; min-height: clamp(48px, 8.6vh, 78px); display: grid; place-items: center; align-content: center; clip-path: polygon(5% 0, 95% 0, 100% 22%, 100% 78%, 95% 100%, 5% 100%, 0 78%, 0 22%); border-block: 2px solid #ffe475; background: linear-gradient(180deg, rgba(118, 76, 9, .97), rgba(43, 28, 3, .98)); box-shadow: inset 0 0 26px rgba(255, 198, 43, .38), 0 0 28px rgba(255, 181, 17, .46); color: #fff0ac; }
.menu-start strong { font-size: clamp(19px, 3vh, 31px); line-height: 1.05; letter-spacing: .16em; text-shadow: 0 0 9px rgba(255, 211, 87, .72); }
.menu-start small { color: #f8d879; font-size: clamp(7px, 1.1vh, 12px); letter-spacing: .24em; }
.menu-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, .7vw, 10px); }
.menu-secondary { min-height: clamp(36px, 6.5vh, 58px); display: flex; align-items: center; justify-content: center; gap: 9%; clip-path: polygon(7% 0, 93% 0, 100% 22%, 100% 78%, 93% 100%, 7% 100%, 0 78%, 0 22%); border-block: 2px solid #45d9ff; background: linear-gradient(180deg, rgba(4, 51, 78, .96), rgba(1, 17, 31, .98)); box-shadow: inset 0 0 20px rgba(37, 177, 228, .27), 0 0 18px rgba(21, 177, 241, .25); color: #c8f5ff; font-size: clamp(14px, 2.1vh, 22px); font-weight: 800; letter-spacing: .12em; }
.menu-secondary i { color: #61ddff; font-size: 1.25em; font-style: normal; text-shadow: 0 0 9px #24bfff; }
.menu-exit { border-color: #6ebfe0; }
.announcement-button { min-height: clamp(30px, 4.6vh, 43px); padding: 7px 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(72, 214, 255, .68); background: linear-gradient(90deg, rgba(3, 27, 43, .96), rgba(7, 58, 78, .96), rgba(3, 27, 43, .96)); color: #bfefff; cursor: pointer; box-shadow: inset 0 0 18px rgba(34, 169, 219, .16), 0 0 15px rgba(21, 169, 226, .18); }
.announcement-button span { font-size: clamp(10px, 1.35vh, 14px); font-weight: 800; letter-spacing: .14em; }
.announcement-button b { color: #ffe386; font-size: clamp(9px, 1.2vh, 13px); letter-spacing: .08em; text-shadow: 0 0 8px rgba(255, 207, 69, .55); }

.menu-dialog { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0, 5, 12, .78); backdrop-filter: blur(8px); }
.menu-dialog-panel { width: min(92vw, 440px); padding: 24px; clip-path: polygon(4% 0, 96% 0, 100% 5%, 100% 95%, 96% 100%, 4% 100%, 0 95%, 0 5%); border: 2px solid #39cfff; background: linear-gradient(160deg, rgba(4, 31, 49, .98), rgba(1, 10, 20, .99)); box-shadow: 0 0 34px rgba(32, 192, 255, .35), inset 0 0 25px rgba(24, 123, 174, .18); }
.menu-dialog-panel header { display: grid; gap: 3px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(67, 208, 255, .35); }
.menu-dialog-panel header small { color: #53cce9; font-size: 10px; letter-spacing: .2em; }
.menu-dialog-panel header strong { color: #e5faff; font-size: 25px; }
.announcement-panel { width: min(94vw, 570px); }
.announcement-lead { margin: 0 0 14px; color: #c8eaf1; line-height: 1.65; }
.announcement-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.announcement-list li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 11px; border: 1px solid rgba(65, 199, 239, .25); background: rgba(5, 28, 43, .72); }
.announcement-list b { color: #65e2ff; }
.announcement-list span { color: #aacdd6; }
.announcement-note { margin-top: 13px; padding: 10px 12px; border-left: 3px solid #ffd75a; background: rgba(64, 42, 4, .42); color: #ffe9a1; }
.announcement-note span { color: #b7cbd0; font-size: 12px; }
.setting-row { width: 100%; display: flex; justify-content: space-between; margin: 8px 0; padding: 13px 15px; border: 1px solid rgba(64, 201, 244, .42); background: rgba(5, 31, 48, .85); cursor: pointer; }
.setting-row b { color: #63e9ff; }
.setting-row.is-off b { color: #788c96; }
.setting-row.sound-test { border-color: rgba(255, 208, 70, .62); background: linear-gradient(90deg, rgba(65, 38, 4, .88), rgba(19, 49, 62, .88)); }
.setting-row.sound-test b { color: #ffe184; }
.audio-runtime { position: fixed; z-index: -1; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: .001; pointer-events: none; }
.dialog-close { min-width: 115px; margin: 16px auto 0; padding: 10px 22px; display: block; border: 1px solid #47d7ff; background: #07314b; color: #dffaff; cursor: pointer; }
.exit-panel p { color: #a9cad5; }
.dialog-actions { display: flex; justify-content: center; gap: 12px; }
.dialog-actions .dialog-close { margin-inline: 0; }
.dialog-close.danger { border-color: #ff5b6f; background: #4a0c18; color: #ffdfe4; }

@keyframes menu-breathe { from { filter: brightness(.96) saturate(.98); } to { filter: brightness(1.08) saturate(1.08); } }

.game-screen { display: grid; width: var(--app-width, 100vw); height: var(--app-height, 100dvh); place-items: center; overflow: hidden; background: radial-gradient(circle, #062038, #01060b 68%); }
.game-stage { position: relative; width: min(var(--app-width, 100vw), calc(var(--app-height, 100dvh) * 1.5)); height: min(var(--app-height, 100dvh), calc(var(--app-width, 100vw) / 1.5)); aspect-ratio: 3 / 2; overflow: hidden; background: #02070d; box-shadow: 0 0 55px rgba(0, 138, 215, .24); user-select: none; }
.hud-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; }
#gameCanvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.build-menu { --anchor-x: 50%; --anchor-y: 50%; position: absolute; z-index: 14; left: var(--anchor-x); top: var(--anchor-y); width: min(62%, 950px); padding: .8% 1%; transform: translate(-50%, -50%); border: 1px solid rgba(75, 222, 255, .82); clip-path: polygon(2% 0, 98% 0, 100% 10%, 100% 90%, 98% 100%, 2% 100%, 0 90%, 0 10%); background: linear-gradient(180deg, rgba(5, 35, 54, .98), rgba(1, 12, 22, .98)); box-shadow: 0 0 28px rgba(24, 194, 255, .38), inset 0 0 28px rgba(28, 153, 207, .15); }
.build-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(76, 220, 255, .08), transparent); }
.build-menu header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 .2% .7%; border-bottom: 1px solid rgba(71, 205, 247, .32); }
.build-menu header div { display: flex; align-items: baseline; gap: .7vw; }
.build-menu header small { color: #45d9ff; font-size: clamp(5px, .55vw, 9px); letter-spacing: .18em; }
.build-menu header strong { color: #e8fbff; font-size: clamp(8px, .95vw, 15px); letter-spacing: .08em; }
.build-menu header button { position: relative; width: clamp(16px, 1.8vw, 28px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(82, 215, 255, .45); background: rgba(2, 21, 34, .88); color: #9deeff; font-size: clamp(10px, 1.2vw, 19px); line-height: 1; cursor: pointer; }
.build-menu-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65vw; padding-top: .7vw; }
.build-option { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(74, 197, 237, .3); background: rgba(3, 19, 31, .96); color: #dffaff; cursor: pointer; transition: border-color .15s, box-shadow .15s, filter .15s, transform .15s; }
.build-option:hover, .build-option:focus-visible { border-color: #b7f5ff; box-shadow: 0 0 16px rgba(31, 191, 247, .5); transform: translateY(-3px); outline: 0; }
.build-option img { width: 100%; height: auto; aspect-ratio: auto; display: block; object-fit: contain; }
.build-option.is-poor { filter: grayscale(.8) brightness(.58); }
.build-menu > p { position: relative; margin: .55% 0 0; color: #6fb4c8; font-size: clamp(5px, .5vw, 8px); text-align: center; letter-spacing: .08em; }

.dynamic { position: absolute; z-index: 4; display: grid; place-items: center; background: transparent; text-shadow: 0 0 11px currentColor; pointer-events: none; }
.coin-dynamic { left: 6.25%; top: 3.15%; width: 6.6%; height: 4.8%; color: #ffd654; font-size: clamp(14px, 2vw, 31px); }
.wave-dynamic { left: 21.35%; top: 3.05%; width: 7%; height: 7.6%; gap: 1px; }
.wave-dynamic strong { font-size: clamp(12px, 1.7vw, 26px); }
.wave-dynamic small { color: #c0dce7; font-size: clamp(5px, .7vw, 11px); }
.alert-dynamic { left: 39%; top: 3.45%; width: 16.2%; height: 6.8%; padding: 4px; color: #b8f0ff; font-size: clamp(9px, 1.55vw, 24px); font-weight: 800; letter-spacing: .04em; text-align: center; }
.alert-dynamic.danger { color: #ff7a88; }
.life-dynamic { left: 63.25%; top: 5.05%; width: 9%; height: 6.7%; grid-template-rows: 1fr auto; align-items: end; color: #eafaff; }
.life-dynamic strong { font-size: clamp(12px, 1.7vw, 26px); }
.life-pips { width: 100%; display: flex; justify-content: center; gap: 3.5%; padding-bottom: 1px; }
.life-pips i { width: 15%; height: clamp(3px, .65vw, 10px); border: 1px solid rgba(63, 217, 255, .9); border-radius: 1px; background: linear-gradient(90deg, #18caff 0 var(--fill), #08263a var(--fill) 100%); box-shadow: 0 0 7px rgba(27, 198, 255, .65); }

.hud-hotspot { position: absolute; z-index: 6; border: 0; background: transparent; cursor: pointer; }
.hud-hotspot:hover { box-shadow: inset 0 0 22px rgba(60, 215, 255, .24); }
.hud-hotspot > span { opacity: 0; }
.speed-hotspot { left: 76.8%; top: 2.2%; width: 15.7%; height: 10.4%; }
.speed-hotspot > span { display: block; opacity: 1; position: absolute; left: 37%; top: 29%; width: 28%; padding: 1px 0; background: transparent; color: #39cfff; font-size: clamp(10px, 1.7vw, 27px); font-weight: 700; text-align: center; text-shadow: 0 0 10px #14bfff; }
.pause-hotspot { left: 94.2%; top: 1.8%; width: 5%; height: 10.7%; }
.next-hotspot { left: 91.75%; top: 75.5%; width: 7.2%; height: 10.5%; }
.next-hotspot:disabled { opacity: .45; cursor: not-allowed; }
.target-hotspot { left: 91.75%; top: 87.4%; width: 7.2%; height: 10.5%; }

.tower-actions { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.upgrade-hotspot, .sell-hotspot { left: .65%; width: 7.15%; height: 11.7%; pointer-events: auto; }
.upgrade-hotspot { top: 69.7%; }
.sell-hotspot { top: 82.2%; }
.tower-actions.is-disabled .upgrade-hotspot, .tower-actions.is-disabled .sell-hotspot { pointer-events: none; }
.upgrade-hotspot > span, .sell-hotspot > span { display: block; opacity: 1; position: absolute; left: 4%; right: 4%; bottom: 4%; color: #a4eaff; font-size: clamp(6px, .72vw, 11px); font-weight: 800; text-shadow: 0 0 7px #000; }
.sell-hotspot > span { color: #ffd771; }
.upgrade-hotspot { transition: filter .16s, box-shadow .16s, background .16s; }
.upgrade-hotspot.is-affordable { border: 1px solid rgba(70, 229, 255, .82); background: linear-gradient(180deg, rgba(17, 155, 205, .36), rgba(0, 54, 83, .54)); box-shadow: inset 0 0 25px rgba(41, 222, 255, .42), 0 0 18px rgba(28, 204, 255, .62); filter: brightness(1.38) saturate(1.25); }
.upgrade-hotspot.is-affordable > span { color: #f5feff; text-shadow: 0 0 8px #10d7ff, 0 2px 3px #000; }
.upgrade-hotspot.is-unaffordable, .upgrade-hotspot.is-maxed { filter: grayscale(.75) brightness(.55); cursor: not-allowed; }
.selection-readout { position: absolute; left: 1%; top: 65%; width: 29%; display: flex; gap: 8px; align-items: center; padding: 5px 10px; border: 1px solid rgba(51, 203, 255, .45); background: rgba(0, 10, 18, .86); color: #9deaff; opacity: 0; transition: opacity .15s; }
.tower-actions:not(.is-disabled) .selection-readout { opacity: 1; }
.selection-readout small, .selection-readout span { font-size: clamp(6px, .72vw, 11px); }
.selection-readout strong { font-size: clamp(7px, .8vw, 13px); }

.battle-tip { display: none; }

.pause-menu { position: absolute; z-index: 17; inset: 12.5% 0 26.5%; display: grid; place-items: center; background: rgba(0, 5, 11, .68); backdrop-filter: blur(4px); }
.pause-panel { width: min(46%, 560px); padding: 3% 4%; display: grid; justify-items: center; gap: 9px; clip-path: polygon(5% 0, 95% 0, 100% 12%, 100% 88%, 95% 100%, 5% 100%, 0 88%, 0 12%); border-block: 2px solid #4bdfff; background: linear-gradient(160deg, rgba(5, 42, 64, .98), rgba(1, 13, 25, .98)); box-shadow: inset 0 0 30px rgba(32, 172, 225, .22), 0 0 38px rgba(32, 195, 255, .32); }
.pause-panel > small { color: #45cceb; font-size: clamp(6px, .68vw, 11px); letter-spacing: .25em; }
.pause-panel > strong { color: #e5fbff; font-size: clamp(20px, 2.6vw, 40px); letter-spacing: .12em; text-shadow: 0 0 15px #21c7f3; }
.pause-panel > p { margin: 0; color: #9fcbd5; font-size: clamp(7px, .76vw, 12px); }
.pause-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4%; margin-top: 2%; }
.pause-action { padding: 4.5% 5%; border: 1px solid #51dcff; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); background: linear-gradient(180deg, #095078, #031d31); color: #e3faff; font-size: clamp(9px, 1.05vw, 17px); font-weight: 900; letter-spacing: .08em; cursor: pointer; box-shadow: inset 0 0 18px rgba(40, 191, 239, .2); }
.pause-action:hover { filter: brightness(1.24); }
.home-action { border-color: #ffd568; background: linear-gradient(180deg, #77500d, #2c1c04); color: #fff1b0; }

.wave-intro { position: absolute; z-index: 10; left: 50%; top: 30%; width: 43%; min-height: 12%; transform: translate(-50%, -12px) scale(.92); display: grid; place-items: center; align-content: center; padding: 1.2% 4%; clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); border-block: 2px solid #4bdfff; background: linear-gradient(90deg, transparent, rgba(0, 19, 34, .94) 12%, rgba(4, 31, 50, .98) 50%, rgba(0, 19, 34, .94) 88%, transparent); box-shadow: 0 0 36px rgba(31, 195, 255, .32); opacity: 0; pointer-events: none; transition: opacity .18s, transform .25s; }
.wave-intro.is-active { opacity: 1; transform: translate(-50%, 0) scale(1); animation: wave-pulse .75s ease-in-out infinite alternate; }
.wave-intro.is-boss { border-color: #ff4165; box-shadow: 0 0 42px rgba(255, 38, 78, .48); background: linear-gradient(90deg, transparent, rgba(42, 0, 16, .96) 12%, rgba(73, 3, 25, .98) 50%, rgba(42, 0, 16, .96) 88%, transparent); }
.wave-intro span { color: #64dcff; font-size: clamp(6px, .72vw, 12px); letter-spacing: .24em; }
.wave-intro strong { color: #eafaff; font-size: clamp(20px, 3.2vw, 50px); line-height: 1; letter-spacing: .12em; text-shadow: 0 0 18px #24c7ff; }
.wave-intro small { color: #a8eaff; font-size: clamp(7px, .86vw, 14px); }
.wave-intro.is-boss span, .wave-intro.is-boss small { color: #ff93a8; }
.wave-intro.is-boss strong { color: #fff1f4; text-shadow: 0 0 20px #ff3159; }

.spawn-tracker { position: absolute; z-index: 7; left: 1.5%; top: 14.2%; width: 20.5%; height: 7.2%; display: grid; grid-template-columns: 18% 1fr 25%; align-items: center; gap: 4%; padding: .55% 1%; clip-path: polygon(4% 0, 96% 0, 100% 24%, 100% 76%, 96% 100%, 4% 100%, 0 76%, 0 24%); border: 1px solid rgba(68, 211, 255, .62); background: linear-gradient(90deg, rgba(0, 14, 26, .95), rgba(5, 31, 47, .9)); box-shadow: inset 0 0 18px rgba(24, 171, 222, .16), 0 0 16px rgba(18, 155, 219, .14); pointer-events: none; }
.spawn-tracker > div { display: grid; align-content: center; min-width: 0; }
.spawn-tracker small { color: #6abbd3; font-size: clamp(5px, .58vw, 9px); letter-spacing: .08em; }
.spawn-tracker strong { overflow: hidden; color: #d9f8ff; font-size: clamp(7px, .82vw, 13px); white-space: nowrap; text-overflow: ellipsis; }
.spawn-tracker > span { display: grid; justify-items: center; border-left: 1px solid rgba(71, 201, 239, .3); }
.spawn-tracker b { color: #73eaff; font-size: clamp(12px, 1.7vw, 27px); line-height: 1; text-shadow: 0 0 10px #16c8ff; }
.spawn-radar { position: relative; width: clamp(18px, 2.5vw, 38px); aspect-ratio: 1; justify-self: center; border: 2px solid #39d8ff; border-radius: 50%; box-shadow: 0 0 12px #1ebee9; animation: radar-spin 1.4s linear infinite; }
.spawn-radar::before, .spawn-radar::after { content: ""; position: absolute; inset: 43% -20%; height: 2px; background: #4be2ff; }
.spawn-radar::after { transform: rotate(90deg); }

.boss-hud { position: absolute; z-index: 9; left: 18%; top: 13.4%; width: 64%; height: 6.8%; display: grid; grid-template-columns: 20% 1fr 8%; align-items: center; gap: 1.2%; padding: .45% 1%; clip-path: polygon(1.5% 0, 98.5% 0, 100% 50%, 98.5% 100%, 1.5% 100%, 0 50%); border: 2px solid #b82c69; background: linear-gradient(180deg, rgba(35, 2, 24, .98), rgba(7, 7, 19, .98)); box-shadow: 0 0 22px rgba(255, 34, 91, .38), inset 0 0 20px rgba(157, 30, 105, .22); pointer-events: none; }
.boss-ident { display: grid; line-height: 1; }
.boss-ident span { color: #ff4267; font-size: clamp(6px, .7vw, 11px); font-weight: 900; letter-spacing: .18em; }
.boss-ident strong { color: #ffeaf0; font-size: clamp(8px, 1vw, 16px); }
.boss-meter { position: relative; height: 40%; overflow: hidden; border: 1px solid #ff4770; background: #210816; box-shadow: inset 0 0 10px #000, 0 0 10px rgba(255, 44, 92, .46); }
.boss-meter i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #8c1237, #ff244f 62%, #ff825a); box-shadow: inset 0 0 10px rgba(255,255,255,.34); transition: width .16s linear; }
.boss-meter em { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9.4%, rgba(4,0,7,.56) 9.4% 10%); }
.boss-hud > b { color: #fff; font-size: clamp(9px, 1.25vw, 20px); text-align: center; text-shadow: 0 0 8px #ff3156; }
.boss-hud.is-low { animation: boss-danger .38s ease-in-out infinite alternate; }

.level-briefing { position: absolute; z-index: 18; inset: 12.8% 0 26.8%; display: grid; place-items: center; background: rgba(0, 6, 12, .7); backdrop-filter: blur(5px); pointer-events: auto; }
.briefing-panel { width: 58%; padding: 2% 2.4%; clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%); border: 2px solid #3cd8ff; background: linear-gradient(145deg, rgba(4, 31, 48, .97), rgba(1, 10, 19, .98)); box-shadow: 0 0 38px rgba(32, 188, 255, .28), inset 0 0 28px rgba(30, 145, 196, .14); }
.briefing-panel header { display: grid; justify-items: center; padding-bottom: 1.2%; border-bottom: 1px solid rgba(73, 211, 255, .35); }
.briefing-panel header span { color: #52dcff; font-size: clamp(6px, .7vw, 11px); letter-spacing: .26em; }
.briefing-panel header strong { color: #e8fbff; font-size: clamp(16px, 2.1vw, 33px); letter-spacing: .1em; text-shadow: 0 0 12px #21bde9; }
.briefing-panel header small { color: #6aaec1; font-size: clamp(5px, .58vw, 9px); letter-spacing: .12em; }
.briefing-objective { margin: 1.2% 0; padding: 1.1% 1.5%; border-left: 3px solid #37d4ff; background: rgba(8, 46, 66, .48); }
.briefing-objective b { color: #76eaff; font-size: clamp(7px, .85vw, 13px); }
.briefing-objective p { margin: .4% 0 0; color: #caeaf1; font-size: clamp(6px, .78vw, 12px); }
.briefing-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1%; }
.briefing-rules span { display: grid; justify-items: center; padding: 5% 2%; border: 1px solid rgba(55, 199, 243, .36); background: rgba(4, 25, 39, .75); }
.briefing-rules b { color: #66e5ff; font-size: clamp(13px, 1.8vw, 28px); line-height: 1; }
.briefing-rules small { color: #8fb9c4; font-size: clamp(5px, .58vw, 9px); }
.briefing-enemies { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 1.5% 0; }
.briefing-enemies span { padding-left: 10px; color: #a7d4df; font-size: clamp(5px, .65vw, 10px); }
.briefing-enemies span::before { content: "◆"; margin-left: -10px; margin-right: 4px; color: #a667ff; }
.briefing-start { min-width: 34%; margin: 0 auto; padding: 1.2% 3%; display: block; border: 1px solid #ffe06b; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); background: linear-gradient(180deg, #7c520c, #332005); color: #fff0aa; font-size: clamp(10px, 1.2vw, 19px); font-weight: 900; letter-spacing: .12em; cursor: pointer; box-shadow: inset 0 0 18px rgba(255, 207, 66, .28), 0 0 18px rgba(255, 188, 33, .24); }
.briefing-start:hover { filter: brightness(1.2); }

@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes wave-pulse { to { filter: brightness(1.18); } }
@keyframes boss-danger { to { box-shadow: 0 0 38px rgba(255, 30, 68, .72), inset 0 0 24px rgba(224, 22, 68, .32); } }

.toast { position: fixed; z-index: 30; left: 50%; top: 4%; transform: translate(-50%, -12px); padding: 10px 18px; border: 1px solid rgba(81, 213, 255, .55); background: rgba(2, 15, 25, .94); color: #b9efff; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.result-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 1vh; background: rgba(0, 4, 9, .88); backdrop-filter: blur(7px); }
.result-panel { position: relative; height: 98vh; max-width: 96vw; aspect-ratio: 770 / 1024; }
.result-panel img { width: 100%; height: 100%; display: block; object-fit: contain; }
.result-live-stats { position: absolute; inset: 0; pointer-events: none; }
.result-live-stats > span, .result-live-stats > strong { position: absolute; left: -9999px; }
.result-live-stats i { position: absolute; left: 40.8%; width: 10%; height: 3.6%; display: grid; place-items: center end; padding-right: 1.2%; background: transparent; color: #f4fcff; font-style: normal; font-size: clamp(11px, 2vh, 20px); font-weight: 700; line-height: 1; text-align: right; text-shadow: 0 0 8px rgba(61, 210, 255, .68), 0 2px 3px #000; }
#resultCoins { top: 36.3%; }
#resultKills { top: 40.9%; }
#resultWave { top: 45.5%; }
#resultLife { top: 50.2%; }
.result-panel.defeat .result-live-stats i { color: #fff3f0; text-shadow: 0 0 8px rgba(255, 72, 55, .72), 0 2px 3px #000; }
.no-reward-panel { position: absolute; z-index: 2; left: 10.2%; top: 57.4%; width: 79.6%; height: 18.8%; display: grid; place-content: center; gap: 1.2vh; border: 1px solid rgba(62, 198, 255, .52); clip-path: polygon(3% 0, 97% 0, 100% 12%, 100% 88%, 97% 100%, 3% 100%, 0 88%, 0 12%); background: radial-gradient(circle at 50% 35%, rgba(21, 91, 130, .3), transparent 55%), linear-gradient(180deg, rgba(4, 25, 40, .99), rgba(2, 12, 23, .99)); box-shadow: inset 0 0 28px rgba(27, 147, 211, .18), 0 0 16px rgba(20, 142, 209, .18); color: #d9f7ff; text-align: center; pointer-events: none; }
.no-reward-panel::before { content: "MISSION COMPLETE"; color: #4acdfb; font-size: clamp(7px, 1.2vh, 12px); letter-spacing: .24em; }
.no-reward-panel b { color: #f1fbff; font-size: clamp(16px, 3vh, 30px); letter-spacing: .08em; text-shadow: 0 0 14px rgba(66, 207, 255, .5); }
.no-reward-panel span { color: #87bed0; font-size: clamp(9px, 1.5vh, 15px); }
.result-panel.defeat .no-reward-panel { display: none; }
.result-hotspot { position: absolute; bottom: 5.5%; height: 7.7%; border: 0; background: transparent; cursor: pointer; }
.result-hotspot:hover { box-shadow: inset 0 0 24px rgba(75, 220, 255, .28); }
.result-menu { left: 8%; width: 25%; }
.result-restart { left: 35%; width: 29%; }

.mobile-fullscreen-button { display: none; position: fixed; z-index: 85; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); min-width: 72px; min-height: 42px; padding: 7px 12px; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(75, 222, 255, .8); clip-path: polygon(8% 0, 92% 0, 100% 22%, 100% 78%, 92% 100%, 8% 100%, 0 78%, 0 22%); background: linear-gradient(180deg, rgba(6, 58, 87, .96), rgba(1, 18, 31, .98)); box-shadow: inset 0 0 16px rgba(54, 205, 255, .2), 0 0 14px rgba(32, 191, 255, .32); color: #dffaff; cursor: pointer; touch-action: manipulation; }
.mobile-fullscreen-button span { color: #55ddff; font-size: 20px; line-height: 1; text-shadow: 0 0 8px #19bfff; }
.mobile-fullscreen-button b { font-size: 12px; letter-spacing: .08em; }
.mobile-fullscreen-button.is-fullscreen { border-color: #ffe07a; color: #fff2b7; }
.mobile-fullscreen-button.is-fullscreen span { color: #ffe071; text-shadow: 0 0 8px #ffbd1f; }
.mobile-performance .mobile-fullscreen-button { display: flex; }
.standalone-mode .mobile-fullscreen-button { display: none !important; }
.game-active .mobile-fullscreen-button { top: auto; right: auto; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); opacity: .82; }

.orientation-prompt { display: none; position: fixed; z-index: 90; inset: 0; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 42%, rgba(8, 55, 82, .98), rgba(0, 6, 13, .995) 72%); }
.orientation-panel { width: min(88vw, 390px); padding: 25px 22px; display: grid; justify-items: center; gap: 11px; border: 1px solid #45d9ff; clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%); background: linear-gradient(160deg, rgba(5, 38, 59, .98), rgba(1, 14, 25, .99)); box-shadow: inset 0 0 28px rgba(35, 174, 224, .18), 0 0 35px rgba(33, 191, 255, .25); text-align: center; }
.orientation-panel > i { color: #56dfff; font-size: 58px; font-style: normal; line-height: 1; text-shadow: 0 0 18px #17bfff; animation: rotate-phone 1.8s ease-in-out infinite; }
.orientation-panel > strong { color: #e7fbff; font-size: 25px; letter-spacing: .1em; }
.orientation-panel > span { color: #a8d5df; font-size: 14px; line-height: 1.6; }
.orientation-panel > button { min-width: 190px; padding: 12px 20px; border: 1px solid #ffe06f; clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); background: linear-gradient(180deg, #85600c, #352204); color: #fff0ad; font-weight: 900; letter-spacing: .1em; box-shadow: inset 0 0 18px rgba(255, 209, 69, .25), 0 0 18px rgba(255, 188, 31, .28); cursor: pointer; touch-action: manipulation; }
.orientation-panel > small { color: #6fa8b8; font-size: 11px; line-height: 1.5; }
@keyframes rotate-phone { 0%, 25% { transform: rotate(0deg); } 58%, 100% { transform: rotate(90deg); } }

.fullscreen-help-dialog { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(0, 5, 12, .94); backdrop-filter: blur(8px); }
.fullscreen-help-panel { width: min(92vw, 480px); padding: 25px 26px; display: grid; gap: 11px; border: 1px solid #45d9ff; clip-path: polygon(4% 0, 96% 0, 100% 7%, 100% 93%, 96% 100%, 4% 100%, 0 93%, 0 7%); background: linear-gradient(155deg, rgba(6, 42, 63, .99), rgba(1, 13, 24, .995)); box-shadow: inset 0 0 28px rgba(35, 174, 224, .18), 0 0 35px rgba(33, 191, 255, .28); }
.fullscreen-help-panel > small { color: #46cfee; font-size: 10px; letter-spacing: .2em; }
.fullscreen-help-panel > strong { color: #e9fbff; font-size: 25px; letter-spacing: .08em; }
.fullscreen-help-panel > p { margin: 0; color: #a8d2dc; font-size: 14px; line-height: 1.6; }
.fullscreen-help-panel > ol { margin: 2px 0; padding-left: 25px; display: grid; gap: 9px; color: #d9f6ff; line-height: 1.55; }
.fullscreen-help-panel > ol b { color: #ffe077; }
.fullscreen-help-panel > button { width: min(230px, 80%); margin: 4px auto 0; padding: 11px 20px; border: 1px solid #ffe06f; clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); background: linear-gradient(180deg, #85600c, #352204); color: #fff0ad; font-weight: 900; letter-spacing: .1em; cursor: pointer; }

@media (orientation: portrait) and (max-width: 900px), (orientation: portrait) and (pointer: coarse) {
  .mobile-performance .game-screen:not(.is-hidden) .orientation-prompt { display: grid; }
  .game-active .mobile-fullscreen-button { display: none; }
}

@media (max-width: 700px) {
  body { overflow: hidden; }
  .game-screen { min-width: 0; min-height: 0; overflow: hidden; place-items: center; }
  .battle-tip { display: none; }
  .menu-art { background-size: auto 100%; }
  #menuFxCanvas { object-fit: contain; }
}

.mobile-performance .menu-screen::after { display: none; }
.mobile-performance .menu-art { animation: none; transition: none; }
.mobile-performance .game-stage { box-shadow: none; }
.mobile-performance .game-stage * { animation: none !important; transition: none !important; }
.mobile-performance .spawn-radar { animation: none; }
.mobile-performance .menu-dialog,
.mobile-performance .level-briefing,
.mobile-performance .result-modal,
.mobile-performance .fullscreen-help-dialog { backdrop-filter: none; }
.mobile-performance .wave-intro.is-active,
.mobile-performance .boss-hud.is-low { animation-duration: 1.4s; }
.mobile-performance .hud-hotspot,
.mobile-performance .build-option,
.mobile-performance .menu-button { transition-duration: .08s; }

@media (max-height: 450px) {
  .mobile-fullscreen-button { min-width: 58px; min-height: 34px; padding: 5px 9px; opacity: .72; }
  .mobile-fullscreen-button span { font-size: 17px; }
  .mobile-fullscreen-button b { font-size: 10px; }
  .menu-actions { bottom: 2.5%; }
  .menu-dialog-panel { padding: 14px 18px; }
  .menu-dialog-panel header { margin-bottom: 8px; padding-bottom: 7px; }
  .setting-row { margin: 5px 0; padding: 8px 12px; }
  .dialog-close { margin-top: 9px; padding-block: 7px; }
}