:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f4f8ff; background: #101929; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #20375c, #101929 65%); }
button { border: 0; border-radius: 12px; padding: 11px 15px; font: inherit; font-weight: 800; color: #14233b; background: #ffd166; cursor: pointer; transition: transform .15s, filter .15s; }
button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
button:disabled { cursor: not-allowed; opacity: .45; }
.app-shell { max-width: 1280px; margin: auto; padding: 26px; }
.brand { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.brand-copy, .brand-meta { display: flex; align-items: center; gap: 12px; }
.brand-meta { gap: 12px; color: #b7c9e7; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #ffd166; border-radius: 13px; color: #ffd166; background: #14233b; box-shadow: 0 0 0 4px #ffd16616, 0 10px 24px #050b1640; font-size: .78rem; letter-spacing: .1em; cursor: pointer; }
.brand-mark:hover { color: #14233b; background: #ffd166; }
.design-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #73e0bf66; border-radius: 999px; color: #9be8d0; background: #172943aa; font-size: .68rem; letter-spacing: .05em; white-space: nowrap; }
.design-chip:hover { color: #14233b; background: #73e0bf; }
.design-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #73e0bf; box-shadow: 0 0 0 4px #73e0bf20; }
.brand h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.06em; }
.brand p { margin: 6px 0 0; color: #b7c9e7; }
.eyebrow { color: #73e0bf; text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 900; }
.panel { border: 1px solid #3e587d; border-radius: 22px; background: rgba(20, 35, 59, .9); box-shadow: 0 24px 70px #050b16aa; padding: 22px; }
.loadout-header { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 18px; }
.loadout-header h2 { margin: 4px 0; font-size: 1.8rem; }
.loadout-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.slot { min-height: 92px; padding: 10px; border: 1px dashed #7188ad; border-radius: 15px; display: flex; align-items: center; gap: 9px; color: #c7d5ec; }
.slot.filled { border-style: solid; border-color: #73e0bf; background: #203a52; color: #fff; }
.slot button { margin-left: auto; padding: 5px 9px; background: #f28f8f; }
.tower-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.tower-card { text-align: left; padding: 15px; border: 1px solid #405a7c; border-radius: 16px; background: #1a2d4a; color: #f4f8ff; }
.tower-card.selected { outline: 2px solid #73e0bf; opacity: .55; }
.tower-card .tower-icon, .shop-card .tower-icon { float: right; }
.tower-visual { display: inline-block; width: 28px; height: 28px; border-radius: 9px 9px 12px 12px; border: 3px solid #d7f7ff; background: linear-gradient(145deg, #73e0bf, #235c88); box-shadow: inset 0 -6px #14233b66, 0 3px 7px #07111dcc; vertical-align: middle; }
.tower-visual::after { content: ''; display: block; width: 8px; height: 8px; margin: 6px auto; border-radius: 50%; background: #fff4a8; box-shadow: 0 0 7px #fff4a8; }
.tower-science-lab, .tower-science-teacher { background: linear-gradient(145deg, #b879ff, #4c2d8e); }
.tower-watchtower, .tower-tech-club { background: linear-gradient(145deg, #70b8ff, #1b4f9a); }
.tower-sprinkler, .tower-music-teacher { background: linear-gradient(145deg, #54e5ff, #147d9d); }
.tower-student-runner, .tower-sports-captain { background: linear-gradient(145deg, #ffcf62, #d96a42); }
.tower-pe-teacher { background: linear-gradient(145deg, #ff8d9b, #a33f69); }
.tower-hall-monitor { background: linear-gradient(145deg, #8df0c9, #24745e); }
.tower-security-drone { background: linear-gradient(145deg, #ff6b6b, #7a203c); border-color: #ffe1e6; }
.tower-icon.locked { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #44526a; color: #ced8e8; font-weight: 900; }
.tower-card strong, .shop-card strong { display: block; font-size: 1.05rem; }
.tower-card small, .shop-card small { display: block; color: #b7c9e7; line-height: 1.45; margin-top: 8px; }
.price { color: #ffd166; font-weight: 900; }
.test-badge { display: inline-block; margin-left: 8px; padding: 5px 8px; border: 1px solid #73e0bf; border-radius: 999px; color: #14354a; background: #73e0bf; font-size: .72rem; font-weight: 900; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
.map-wrap { position: relative; aspect-ratio: 763 / 507; overflow: hidden; border-radius: 20px; border: 2px solid #6281a9; background: #476e50; }
.map-wrap.boss-wave { border-color: #d890ff; box-shadow: 0 0 0 2px #d890ff22, 0 0 32px #b879ff44; }
.map-wrap > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; }
.design-signal { position: absolute; z-index: 11; top: 5%; left: 50%; width: min(340px, 76%); padding: 10px 14px; border: 1px solid #73e0bf99; border-radius: 13px; background: #14233be8; box-shadow: 0 12px 28px #06101d66; transform: translateX(-50%); text-align: center; animation: design-signal-in .35s ease-out both; }
.design-signal span { display: block; color: #73e0bf; font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.design-signal strong { display: block; margin-top: 4px; color: #fff; font-size: .82rem; }
.boss-wave .design-signal { border-color: #d890ffcc; box-shadow: 0 0 26px #b879ff55, 0 12px 28px #06101d66; }
.boss-wave .design-signal span { color: #f2b4ff; }
@keyframes design-signal-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.track-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.track-line polyline { fill: none; stroke: #ffcf62; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.6 1.2; opacity: .9; }
.blocked-area { position: absolute; border: 2px solid #ef6f6f99; background: #ef6f6f22; border-radius: 8px; pointer-events: none; }
.map-wrap { cursor: crosshair; }
.place { position: absolute; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #73e0bfcc; border: 2px solid #eafff7; color: #14354a; font-size: 1.05rem; pointer-events: auto; }
.place.occupied { background: #ffd166; }
.place.restricted { background: #ef6f6fcc; cursor: not-allowed; }
.enemy { position: absolute; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; transform: translate(-50%, -50%); z-index: 4; will-change: left, top; transition: left .05s linear, top .05s linear; }
.robot-visual { display: block; width: 30px; height: 26px; border: 3px solid #eaf7ff; border-radius: 9px 9px 12px 12px; background: linear-gradient(145deg, #ef6f6f, #8b294b); box-shadow: inset 0 -6px #1a203d88, 0 3px 12px #17213dcc; position: relative; }
.robot-visual::after { content: ''; position: absolute; width: 6px; height: 6px; left: 7px; top: 7px; border-radius: 50%; background: #fff4a8; box-shadow: 10px 0 #fff4a8, 0 0 8px #fff4a8, 10px 0 8px #fff4a8; }
.enemy.fast .robot-visual { background: linear-gradient(145deg, #73e0bf, #16767d); }
.enemy.heavy .robot-visual { width: 40px; height: 34px; background: linear-gradient(145deg, #ffcf62, #aa5b2f); }
.enemy.shield .robot-visual { background: linear-gradient(145deg, #70b8ff, #234d9c); border-color: #bce7ff; box-shadow: 8px 0 0 -2px #a8e7ff, inset 0 -6px #14233b88, 0 3px 12px #17213dcc; }
.enemy.stun .robot-visual { background: linear-gradient(145deg, #d890ff, #692c9d); border-color: #f0c4ff; }
.enemy.repair .robot-visual { background: linear-gradient(145deg, #a8ef83, #28875b); border-color: #e4ffd0; }
.enemy.boss .robot-visual { width: 48px; height: 42px; background: linear-gradient(145deg, #b879ff, #482675); }
.projectile { position: absolute; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #ffd166; box-shadow: 0 0 8px #ffd166; transform: translate(-50%, -50%); z-index: 3; }
.projectile-watchtower { width: 13px; height: 5px; border-radius: 3px; background: #fff2a8; }
.projectile-sprinkler { width: 8px; height: 8px; background: #54e5ff; box-shadow: 0 0 8px #54e5ff; }
.projectile-science-lab, .projectile-science-teacher { width: 13px; height: 13px; background: #b879ff; box-shadow: 0 0 12px #b879ff; }
.projectile-tech-club { border-radius: 2px; background: #73e0bf; transform: translate(-50%, -50%) rotate(45deg); }
.projectile-sports-captain, .projectile-student-runner { background: #ff9d42; }
.projectile-music-teacher { border: 3px double #f2b4ff; background: transparent; box-shadow: 0 0 10px #d890ff; }
.projectile-security-drone { width: 12px; height: 5px; border-radius: 4px; background: #ff4668; box-shadow: 0 0 11px #ff375f; }
.impact { position: absolute; width: 18px; height: 18px; border: 3px solid #ffd166; border-radius: 50%; transform: translate(-50%, -50%); animation: impact-pop .2s ease-out forwards; z-index: 4; pointer-events: none; }
.impact-sprinkler { border-color: #54e5ff; }
.impact-science-lab, .impact-science-teacher { border-color: #b879ff; }
.impact-tech-club { border-color: #73e0bf; border-radius: 2px; }
.impact-music-teacher { border-color: #d890ff; }
.impact-security-drone { border-color: #ff6b86; box-shadow: 0 0 12px #ff375f; }
@keyframes impact-pop { from { opacity: 1; transform: translate(-50%, -50%) scale(.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
.tower-price { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); padding: 2px 5px; border-radius: 6px; background: #14233bee; color: #ffd166; font-size: .62rem; font-weight: 900; white-space: nowrap; pointer-events: none; }
.enemy-hover { display: none; position: absolute; left: 50%; bottom: calc(100% + 7px); width: 130px; padding: 7px 8px; border: 1px solid #9be8d0; border-radius: 9px; background: #14233bf2; color: #fff; transform: translateX(-50%); text-align: left; pointer-events: none; z-index: 10; }
.enemy:hover .enemy-hover { display: block; }
.enemy-hover strong, .enemy-hover span { display: block; font-size: .7rem; }
.enemy-hover span { color: #c5d8ed; margin-top: 2px; }
.enemy-hover i { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #421f2d; }
.enemy-hover i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ef6f6f, #73e0bf); }
.map-stats { position: absolute; z-index: 8; min-width: 150px; max-width: 220px; padding: 8px 10px; border: 1px solid #9be8d0; border-radius: 10px; background: #14233bee; box-shadow: 0 8px 18px #06101dcc; transform: translate(-50%, -100%); pointer-events: none; font-size: .72rem; }
.map-stats strong, .map-stats span { display: block; }
.map-stats strong { color: #fff; font-size: .85rem; }
.map-stats span { margin-top: 3px; color: #c4d7ef; }
.range-preview { position: absolute; transform: translate(-50%, -50%); border: 2px solid #73e0bf; border-radius: 50%; background: #73e0bf22; pointer-events: none; z-index: 2; }
.range-preview.invalid { border-color: #ef6f6f; background: #ef6f6f22; }
.tower-ghost { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 0 5px #73e0bf); pointer-events: none; z-index: 5; }
.tower-ghost.invalid { filter: brightness(.2); }
.inspector { margin: 14px 0; padding: 13px; border: 1px solid #73e0bf88; border-radius: 14px; background: #203a52; }
.inspector h3 { margin: 3px 0 6px; }
.inspector p { margin: 6px 0; color: #c6d6ec; }
.inspector.muted { color: #9fb2cf; font-size: .88rem; }
.inspection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.inspection-grid span { padding: 7px; border-radius: 8px; background: #172943; color: #b7c9e7; font-size: .78rem; }
.inspection-grid b { display: block; color: #ffd166; font-size: .95rem; }
@keyframes shot-flash { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
.enemy.heavy { background: #edaa4a; }
.enemy.boss { width: 48px; height: 48px; background: #a84ae8; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.stat { padding: 10px; border-radius: 12px; background: #1a2d4a; text-align: center; }
.stat b { display: block; font-size: 1.1rem; color: #ffd166; }
.stat span { color: #b7c9e7; font-size: .72rem; }
.side-panel h3 { margin: 0 0 12px; }
.shop-list { display: grid; gap: 10px; }
.shop-card { padding: 12px; border-radius: 14px; border: 1px solid #405a7c; background: #172943; color: #fff; }
.shop-card button { width: 100%; margin-top: 10px; padding: 8px; }
.notice { min-height: 25px; margin: 11px 0; color: #9be8d0; font-weight: 700; }
.result { text-align: center; max-width: 680px; margin: 70px auto; }
.result h2 { font-size: 3rem; margin: 10px 0; }
.result-archive { display: grid; gap: 5px; max-width: 460px; margin: 22px auto; padding: 15px 18px; border: 1px solid #73e0bf66; border-radius: 15px; background: linear-gradient(135deg, #203a52, #172943); text-align: left; }
.result-archive .eyebrow { color: #73e0bf; }
.result-archive strong { color: #f4f8ff; }
.result-archive small { color: #b7c9e7; line-height: 1.5; }
.design-archive-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: #07101dcc; backdrop-filter: blur(7px); }
.design-archive { width: min(520px, 100%); padding: 30px; border: 1px solid #73e0bf88; border-radius: 24px; background: radial-gradient(circle at 50% 0%, #2c5261, #14233b 58%); box-shadow: 0 28px 90px #0009; text-align: center; animation: archive-rise .26s ease-out both; }
.archive-seal { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 15px; border: 1px solid #ffd166; border-radius: 16px; color: #ffd166; background: #ffd16618; font-weight: 900; letter-spacing: .12em; box-shadow: 0 0 0 5px #ffd1660d; }
.design-archive h2 { margin: 8px 0 6px; font-size: clamp(1.6rem, 4vw, 2.35rem); letter-spacing: -.04em; }
.design-archive > p { margin: 0 auto; max-width: 360px; color: #c6d6ec; line-height: 1.6; }
.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0 14px; }
.archive-grid div { padding: 11px 7px; border: 1px solid #405a7c; border-radius: 12px; background: #172943aa; }
.archive-grid strong, .archive-grid span { display: block; }
.archive-grid strong { color: #ffd166; font-size: 1.4rem; }
.archive-grid span { margin-top: 3px; color: #b7c9e7; font-size: .64rem; }
.archive-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 10px 0 17px; }
.archive-notes span { padding: 6px 8px; border: 1px solid #73e0bf55; border-radius: 999px; color: #9be8d0; background: #73e0bf10; font-size: .68rem; }
.design-archive .archive-footnote { color: #90a8c8; font-size: .78rem; }
.archive-close { margin-top: 18px; }
@keyframes archive-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 800px) { .map-layout { grid-template-columns: 1fr; } .loadout-slots { grid-template-columns: repeat(2, 1fr); } .brand, .loadout-header { align-items: start; flex-direction: column; } }
@media (max-width: 600px) { .brand-meta { align-self: stretch; justify-content: space-between; } .design-chip { font-size: .62rem; } .archive-grid { grid-template-columns: repeat(2, 1fr); } .design-archive { padding: 24px 18px; } }