:root{
  --sky:#4aa3ff;
  --panel:#ffffff;
  --accent:#ff5da2;
  --gold:#ffcf3f;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Baloo 2', system-ui, sans-serif;
  background:linear-gradient(160deg,#2f7fd6,#4aa3ff 55%,#7cc4ff);
  color:#123;
  display:flex; flex-direction:column;
  min-height:100vh;
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}

#game-wrap{
  flex:1;
  display:grid;
  grid-template-columns:1fr 200px;
  grid-template-rows:auto 1fr;
  gap:8px;
  padding:8px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  min-height:0;
}

#hud{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.92);
  border-radius:16px;
  padding:8px 12px;
  box-shadow:0 4px 0 rgba(0,0,0,0.15);
  flex-wrap:wrap;
}
.hud-item{
  font-weight:800; font-size:1.05rem;
  background:#f4f8ff; padding:6px 12px; border-radius:12px;
  border:2px solid #dce7f7;
}
.hud-item span{color:#1565c0;}
#hud-lives span{color:#e63946;}
#hud-cash span{color:#2e9e4a;}
.hud-btn{
  margin-left:auto;
  font-family:inherit; font-weight:800; font-size:1rem;
  background:var(--accent); color:#fff; border:none;
  padding:8px 18px; border-radius:12px; cursor:pointer;
  box-shadow:0 4px 0 #c73d7e; transition:transform .08s;
}
.hud-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #c73d7e; }
.hud-btn.ghost{ margin-left:0; background:#e9f0fb; color:#1565c0; box-shadow:0 4px 0 #b8ccec; padding:8px 12px; }
.hud-btn.ff{ background:var(--gold); color:#5a4200; box-shadow:0 4px 0 #c79f1a; }

#stage{
  position:relative;
  background:#7cb342;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 0 rgba(0,0,0,0.18), inset 0 0 0 4px rgba(255,255,255,0.4);
  min-height:0;
}
#canvas{ display:block; width:100%; height:100%; }

#overlay{
  position:absolute; inset:0;
  background:rgba(20,50,90,0.55);
  backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  z-index:10; padding:16px;
}
.panel{
  background:#fff; border-radius:24px; padding:26px 28px;
  text-align:center; max-width:380px; width:100%;
  box-shadow:0 10px 0 rgba(0,0,0,0.2);
  animation:pop .35s cubic-bezier(.3,1.5,.5,1);
  max-height:90%; overflow:auto;
}
@keyframes pop{ from{transform:scale(.6);opacity:0;} to{transform:scale(1);opacity:1;} }
.panel h1{ font-size:2rem; color:#1565c0; line-height:1.1; margin-bottom:8px; }
.panel h1 .seven{ color:var(--accent); }
.tag{ color:#456; font-weight:600; margin-bottom:14px; }
.hiscore{ background:#fff6d8; border:2px solid var(--gold); border-radius:12px; padding:8px; font-weight:700; margin-bottom:14px; }
.hiscore b{ color:#e6900f; }
.big-btn{
  font-family:inherit; font-weight:800; font-size:1.2rem;
  background:var(--accent); color:#fff; border:none;
  padding:12px 34px; border-radius:16px; cursor:pointer; margin:4px;
  box-shadow:0 5px 0 #c73d7e; transition:transform .08s;
}
.big-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #c73d7e; }
.big-btn.ghost{ background:#e9f0fb; color:#1565c0; box-shadow:0 5px 0 #b8ccec; }
.lb{ margin-top:16px; text-align:left; }
.lb-title{ font-weight:800; color:#1565c0; text-align:center; margin-bottom:6px; }
.lb-row{ display:flex; justify-content:space-between; padding:3px 8px; border-radius:8px; font-weight:600; }
.lb-row:nth-child(even){ background:#f2f7ff; }
.lb-row b{ color:var(--accent); }

#shop{
  background:rgba(255,255,255,0.92);
  border-radius:16px;
  padding:10px;
  overflow-y:auto;
  box-shadow:0 4px 0 rgba(0,0,0,0.15);
  display:flex; flex-direction:column; gap:6px;
  min-height:0;
}
.shop-title{ font-weight:800; color:#1565c0; text-align:center; font-size:1rem; margin-bottom:2px; }
.shop-card{
  font-family:inherit; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:0 8px; align-items:center;
  background:#f4f8ff; border:2px solid #dce7f7; border-radius:12px;
  padding:8px 10px; text-align:left; transition:transform .08s;
}
.shop-card .ic{ grid-row:1 / 3; font-size:1.6rem; }
.shop-card .nm{ font-weight:700; font-size:.9rem; color:#123; }
.shop-card .ct{ font-weight:800; font-size:.8rem; color:#2e9e4a; }
.shop-card:active{ transform:scale(.97); }
.shop-card.active{ border-color:var(--accent); background:#fff0f7; box-shadow:0 0 0 2px var(--accent); }
.shop-card.locked{ opacity:.5; }
.shop-card.locked .ct{ color:#c00; }
.shake{ animation:shk .3s; }
@keyframes shk{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

.tower-panel{
  margin-top:6px; padding:8px; border-radius:12px;
  background:#eef6ff; border:2px solid #cfe2fb;
  display:flex; flex-direction:column; gap:6px;
}
.tp-head{ font-weight:800; color:#1565c0; text-align:center; font-size:.9rem; }
.tp-btn{
  font-family:inherit; font-weight:700; font-size:.85rem;
  background:var(--gold); color:#5a4200; border:none;
  padding:8px; border-radius:10px; cursor:pointer;
  box-shadow:0 3px 0 #c79f1a; transition:transform .08s;
}
.tp-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #c79f1a; }
.tp-btn.locked{ opacity:.5; }
.tp-btn.sell{ background:#ffdada; color:#a11; box-shadow:0 3px 0 #e59a9a; }
.tp-max{ text-align:center; font-weight:800; color:#e6900f; }

footer{
  text-align:center; padding:6px; font-size:.85rem;
  color:rgba(255,255,255,0.9); font-weight:600;
}
footer em{ color:var(--gold); }
footer a{ color:#fff; text-decoration:underline; }

@media(max-width:640px){
  #game-wrap{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  #stage{ min-height:340px; }
  #shop{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    max-height:none;
  }
  .shop-title{ display:none; }
  .shop-card{ min-width:130px; flex-shrink:0; }
  .tower-panel{ min-width:160px; flex-shrink:0; margin-top:0; }
  .panel h1{ font-size:1.6rem; }
}
</style>