* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #0a1622; color: #dfeee9;
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif; }
#stage { position: relative; width: 100vw; height: 100vh; }
#game { width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
#backlink { position: absolute; top: 10px; right: 12px; color: #7fd0b8; text-decoration: none;
  font-size: 13px; opacity: .8; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .btn, #hud .tw, #towerpanel button { pointer-events: auto; }
.hudbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; background: linear-gradient(#0a1622cc, #0a162200); }
.stat { background: #12283288; border: 1px solid #2c5a52; border-radius: 8px;
  padding: 6px 10px; font-size: 14px; font-weight: 600; }
#s-gold { color: #ffd54a; } #s-lives { color: #ff5f8a; } #s-score { color: #53e879; }
.btn { background: #1b3a46; border: 1px solid #37706a; color: #dfeee9; border-radius: 8px;
  padding: 6px 10px; font-size: 14px; cursor: pointer; }
.btn:hover { background: #24505f; }
.palette { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.tw { background: #122832cc; border: 1px solid #2c5a52; color: #dfeee9; border-radius: 10px;
  padding: 8px 10px; font-size: 13px; cursor: pointer; }
.tw em { color: #ffd54a; font-style: normal; }
.tw.on { border-color: #53e879; box-shadow: 0 0 12px #53e87955; }
.tw.poor { opacity: .45; }
.camrow { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 8px; }
.camrow .btn { width: 44px; height: 40px; font-size: 18px; background: #122832cc; }
#towerpanel { position: absolute; top: 64px; left: 12px; display: flex; gap: 8px; align-items: center;
  background: #10222bdd; border: 1px solid #2c5a52; border-radius: 10px; padding: 8px 10px;
  pointer-events: auto; }
#tp-name { font-weight: 700; margin-right: 4px; }
#overlay-start, #overlay-end { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; background: #0a1622d9; }
.card { max-width: min(560px, 92vw); text-align: center; padding: 28px 26px;
  border: 1px solid #2c5a52; border-radius: 16px; background: #0e201fdd;
  box-shadow: 0 0 40px #1de0b133; }
.card h1 { font-size: clamp(28px, 7vw, 44px); letter-spacing: 3px;
  color: #53f0c8; text-shadow: 0 0 18px #53f0c888; }
.card h2 { font-size: clamp(22px, 6vw, 34px); color: #53f0c8; letter-spacing: 2px; }
.tag { color: #9ad4c3; margin: 4px 0 14px; }
.card p { font-size: 14px; line-height: 1.55; color: #c8e4da; }
.keys { list-style: none; margin: 14px 0 18px; padding: 0; font-size: 13px; color: #9fd8c8; }
.keys li { margin: 4px 0; }
.keys b { color: #ffd54a; }
.cta { background: linear-gradient(#1de0b1, #12a68a); color: #062018; border: 0;
  font-size: 18px; font-weight: 800; padding: 12px 26px; border-radius: 12px;
  cursor: pointer; letter-spacing: 1px; box-shadow: 0 0 24px #1de0b166; }
#toast { position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: #10222be8; border: 1px solid #37706a; padding: 8px 16px; border-radius: 10px;
  font-size: 14px; opacity: 0; transition: opacity .3s; }
#toast.show { opacity: 1; }
@media (max-width: 480px) {
  .stat { font-size: 12px; padding: 5px 7px; }
  .tw { font-size: 12px; padding: 7px 8px; }
  #btn-wave { font-size: 12px; }
}