* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: #dff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at top, #12123a 0%, #06060f 70%);
}
header { text-align: center; padding: 14px 10px 4px; }
h1 { margin: 0; font-size: 34px; letter-spacing: 10px; color: #4dffea; text-shadow: 0 0 14px #00ffd5, 0 0 34px #0070ff; }
.sub { margin: 4px 0 0; font-size: 13px; color: #8ab; }

main { display: flex; gap: 16px; justify-content: center; align-items: flex-start; padding: 10px 16px 24px; flex-wrap: wrap; }
.stage { position: relative; }
canvas { display: block; background: #07071a; border: 2px solid #1d3b6b; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 170, 255, .3); max-width: 100%; cursor: crosshair; }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 3, 12, .82); border-radius: 10px; }
.overlay.hidden { display: none; }
.card { max-width: 440px; padding: 22px 26px; background: #0e1030; border: 1px solid #2c4a8c; border-radius: 12px; text-align: center; box-shadow: 0 0 40px rgba(0, 120, 255, .35); }
.card h2 { margin: 0 0 8px; color: #ffd34d; }
.card ul { text-align: left; padding-left: 22px; line-height: 1.7; }
.card p { line-height: 1.45; }

.panel { width: 290px; background: #0b0d28; border: 1px solid #22386b; border-radius: 10px; padding: 14px; }
.panel h3 { margin: 14px 0 6px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #7aa7ff; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats div { background: #121642; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: #8ab; }
.stats b { display: block; font-size: 20px; color: #fff; }
.stats div:nth-child(1) b { color: #ffd34d; }
.stats div:nth-child(2) b { color: #ff6b8a; }

#shop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tower-btn { text-align: left; padding: 8px; border: 2px solid #26407a; background: #101442; color: #dff; border-radius: 8px; cursor: pointer; font-size: 12px; transition: transform .1s, border-color .1s; }
.tower-btn:hover:not(:disabled) { transform: translateY(-2px); }
.tower-btn.sel { border-color: #ffd34d; box-shadow: 0 0 12px rgba(255, 211, 77, .4); }
.tower-btn:disabled { opacity: .4; cursor: not-allowed; }
.tower-btn b { display: block; font-size: 14px; }
.tower-btn small { color: #ffd34d; }

.info { min-height: 76px; background: #121642; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.row { display: flex; gap: 8px; margin-top: 8px; }
button { flex: 1; font: inherit; font-size: 13px; padding: 8px; border: 0; border-radius: 8px; cursor: pointer; background: #2c6bff; color: #fff; }
button:hover:not(:disabled) { filter: brightness(1.2); }
button:disabled { background: #2a2f55; color: #778; cursor: not-allowed; }
#startBtn { font-size: 16px; padding: 10px 28px; background: #00c7a8; color: #012; font-weight: 700; }
#sellBtn { background: #b13a55; }
.hint { font-size: 11px; color: #789; }
.log { font-size: 12px; color: #9cf; min-height: 36px; }