/* NOTE: deliberately no `height:100%` on html/body — this page has real
   below-the-fold SEO content, so body must be allowed to grow taller than
   the viewport. `min-height:100vh` still guarantees #game-stage has a full
   viewport of flex-grow budget to work with when the page content is short.
   (Setting an explicit `height:100%` here caused a real bug during testing:
   it capped body at exactly one viewport tall, so with below-fold content
   already close to that budget, #game-stage's flex-grow share collapsed to
   single-digit pixels — the entire main menu rendered inside an ~8px box
   until Play was pressed. Caught by measuring getBoundingClientRect() in a
   real browser, invisible from reading the CSS/HTML alone.) */
body { display: flex; flex-direction: column; min-height: 100vh; }

#game-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 10px; min-height: 480px;
  touch-action: none; /* the board itself shouldn't pan/zoom on touch */
}

#canvas-wrap {
  position: relative;
  width: 380px; height: 596px; /* overwritten by fitStage() in main.js */
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------------- HUD ---------------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 10px; pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 6px; }
.hud-pill {
  background: rgba(0,0,0,0.55); color: #fff; font-weight: 700; font-size: 0.78rem;
  padding: 5px 10px; border-radius: 999px; letter-spacing: 0.03em;
}
.hud-hp-wrap {
  position: relative; width: 92px; height: 18px; background: rgba(0,0,0,0.5);
  border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.hud-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #4ade80; transition: width 0.25s ease, background 0.25s ease; }
#hud-hp-text { position: relative; font-size: 0.62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.hud-center { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); }
#hud-combo {
  background: rgba(0,0,0,0.55); color: #facc15; font-weight: 800; font-size: 1rem;
  padding: 4px 14px; border-radius: 999px;
}
.btn-icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.55);
  color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.btn-icon:active { transform: scale(0.92); }

/* ---------------- floating text layer ---------------- */
#combo-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float-text {
  position: absolute; transform: translate(-50%, -50%);
  color: #fde68a; font-weight: 800; font-size: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  animation: floatUp 0.9s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.15); }
}
.combo-callout {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: 1.5rem; font-weight: 900; color: #fff;
  text-shadow: 0 0 14px #facc15, 0 2px 6px rgba(0,0,0,0.7);
  animation: comboPop 0.85s ease-out forwards;
}
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* ---------------- countdown ---------------- */
#countdown-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); z-index: 20;
}
#countdown-number {
  font-size: 5rem; font-weight: 900; color: #fff;
  text-shadow: 0 0 30px rgba(250,204,21,0.8);
  animation: countPulse 0.5s ease-out;
}
@keyframes countPulse { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------------- placement bar ---------------- */
#placement-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.55));
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; z-index: 15;
}
.trap-tray { display: flex; gap: 8px; flex: 1 1 0%; min-width: 0; overflow-x: auto; }
/* #btn-start-wave reuses the shared .btn-primary look (ui.css sets
   width:100% for stacked modal buttons), but here it's a flex sibling of
   .trap-tray in a row — width:100% would claim the whole row and crush the
   tray to 0 width. A real bug caught only by measuring live layout: the
   trap icons rendered with a genuine width but their *container* measured
   0, meaning every tap on a trap button was actually landing on this
   button underneath it. */
#placement-bar .btn-primary { width: auto; flex: 0 0 auto; padding: 13px 22px; white-space: nowrap; }
.trap-btn {
  position: relative; min-width: 52px; height: 52px; border-radius: 12px;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.trap-btn .trap-icon { font-size: 1.3rem; }
.trap-btn .trap-count { font-size: 0.65rem; font-weight: 700; position: absolute; bottom: 2px; right: 5px; }
.trap-btn.selected { border-color: #facc15; background: rgba(250,204,21,0.18); transform: translateY(-3px); }
.trap-btn.disabled { opacity: 0.35; }
.trap-btn:active:not(.disabled) { transform: scale(0.94); }

/* ---------------- fullscreen ---------------- */
body.game-fullscreen .site-header,
body.game-fullscreen .ad-slot,
body.game-fullscreen .site-content,
body.game-fullscreen .site-footer { display: none; }
body.game-fullscreen #game-stage { position: fixed; inset: 0; z-index: 999; background: #05080a; padding: 0; }

@media (max-width: 700px) {
  #game-stage { padding: 4px; min-height: 420px; }
  body.in-game #game-stage { position: fixed; inset: 0; z-index: 500; background: #05080a; padding: 0; min-height: 0; }
}