* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #161a14; /* A3: near the canvas tone (#1c2418) — leftover space no longer reads as black bars */
  color: #f5e6c8;
  font-family: "Segoe UI", Tahoma, sans-serif;
  min-height: 100vh;
  overflow: hidden; /* A1: game is viewport-locked; no page scroll on phones */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.game-wrapper { width: 100%; max-width: 1100px; } /* B3: wider field on desktop */

/* ---------- HUD ---------- */
.hud-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #1e1a14;
  border: 2px solid #8a5a2a;
  border-radius: 10px 10px 0 0;
  padding: 8px 12px;
}
.hud-left { display: flex; gap: 14px; flex-wrap: wrap; }
.hud-item { font-size: 13px; letter-spacing: 1px; color: #b9a77e; }
.hud-item b { color: #ffd23c; font-size: 15px; }
.hud-item.lives b { color: #ff6b5a; }
.hud-right { display: flex; gap: 6px; }
.hud-btn {
  background: #2a2419;
  color: #f5e6c8;
  border: 2px solid #8a5a2a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.hud-btn:hover { background: #3a3122; }
.hud-btn.wave-btn { border-color: #ffd23c; color: #ffd23c; }
.hud-btn.wave-btn:disabled { opacity: 0.4; cursor: default; }
.hud-btn.spell-btn { border-color: #ff8a3c; color: #ff8a3c; }
.hud-btn.spell-btn:disabled { opacity: 0.4; cursor: default; }
.hud-btn.active { background: #ffd23c; color: #141418; }

/* ---------- Canvas ---------- */
.canvas-wrap { position: relative; border: 2px solid #8a5a2a; border-top: none; overflow: hidden; }
/* A1: cap canvas height so HUD + palette + bottom bar never overflow the viewport
   (was: landscape phone scrolled — canvas alone was taller than the screen).
   --chrome is measured live by game.js (measureChrome): the old hardcoded 190px
   under-reserved by 10px (real chrome = HUD 75 + palette 72 + canvas-wrap border 2
   + bottom-bar margin 12 + bottom-bar 15 + body padding 24 = 200), which is exactly
   why body/html came out 422 in a 412 viewport. */
canvas { display: block; width: 100%; height: auto; max-height: calc(100dvh - var(--chrome, 200px)); background: #1c2418; }
/* B1: portrait backing store is 540x960 (set by applyOrientation in game.js,
   which publishes the active logical size as --gw/--gh). width:100% +
   height:auto would make a 9:16 canvas taller than the screen in portrait,
   so aspect-fit the WIDTH from the available height there. Landscape rule
   above is untouched (gate: landscape fill stays 78%). */
@media (orientation: portrait) and (max-width: 900px) {
  /* B3: landscape-only now (game.js pins 960x540) — the 9:16 width-fit would
     letterbox the landscape canvas into a narrow tall strip. Fit by width. */
  canvas { width: 100%; }
}

/* ---------- Tower palette ---------- */
.tower-palette {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #1e1a14;
  border: 2px solid #8a5a2a;
  border-top: none;
  border-radius: 0 0 10px 10px;
  flex-wrap: wrap;
}
.tower-btn {
  flex: 1;
  min-width: 130px;
  background: #241f16;
  border: 2px solid #5c4222;
  border-radius: 8px;
  padding: 8px 10px;
  color: #f5e6c8;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}
.tower-btn .t-name { display: block; font-weight: 700; letter-spacing: 0.5px; }
.tower-btn .t-cost { display: block; color: #ffd23c; font-size: 12px; margin-top: 2px; }
.tower-btn:hover { border-color: #ffd23c; }
.tower-btn.selected { border-color: #ffd23c; background: #33291a; box-shadow: 0 0 8px rgba(255, 210, 60, 0.35); }
.tower-btn.unaffordable { opacity: 0.45; }

/* ---------- Tower menu (upgrade/sell) ---------- */
.tower-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.tower-menu.hidden { display: none; }
.menu-btn {
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid;
  white-space: nowrap;
}
.menu-btn.upgrade { background: #2a3a20; border-color: #2d7a3a; color: #b9e6a8; }
.menu-btn.upgrade:disabled { opacity: 0.45; cursor: default; }
.menu-btn.sell { background: #3a2020; border-color: #a04030; color: #ffb9a8; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 16, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* Mobile fix: overlay content is taller than the letterboxed canvas area.
     Without scroll the START button sat below the clip boundary (canvas-wrap
     has overflow:hidden) and was unreachable. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.overlay.hidden { display: none; }
.overlay-content { text-align: center; max-width: 640px; padding: 20px; }
.overlay-content h1 {
  font-size: 34px;
  color: #ffd23c;
  letter-spacing: 3px;
  text-shadow: 0 2px 0 #8a5a2a;
  margin-bottom: 6px;
}
.tagline { color: #b9a77e; font-style: italic; margin-bottom: 16px; }
.info-grid {
  display: flex;
  gap: 24px;
  text-align: left;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.info-col h3 { color: #ff8a3c; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; }
.info-col p { font-size: 13px; color: #d8c9a3; margin: 4px 0; }
.info-col b { color: #f5e6c8; }
.controls { font-size: 12px; color: #9a8a66; margin-bottom: 18px; line-height: 1.6; }
.flavor { color: #ff8a3c; font-style: italic; margin-bottom: 10px; }
.score-line { font-size: 15px; margin-bottom: 18px; }
.score-line b { color: #ffd23c; }
.big-btn {
  background: #ffd23c;
  color: #141418;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
}
.big-btn:hover { background: #ffe273; }

/* ---------- Bottom bar ---------- */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
}
.bottom-bar a { color: #b9a77e; text-decoration: none; }
.bottom-bar a:hover { color: #ffd23c; }

@media (max-width: 700px) {
  body { padding: 6px; align-items: flex-start; }
  /* Mobile fix: start overlay must fit the viewport and keep the START button
     visible — compact text, scrollable, sticky bottom padding so the button
     is never below the fold. */
  .overlay { align-items: flex-start; padding: 10px 8px 18px; }
  .overlay-content { max-width: 100%; padding: 10px 6px 6px; }
  .overlay-content h1 { font-size: 20px; letter-spacing: 2px; }
  .tagline { margin-bottom: 8px; font-size: 12px; }
  .info-grid { gap: 10px; margin-bottom: 8px; }
  .info-col h3 { font-size: 12px; margin-bottom: 3px; }
  .info-col p { font-size: 11px; margin: 2px 0; }
  .controls { display: none; } /* keyboard hints are useless on touch */
  .big-btn { padding: 12px 28px; font-size: 15px; position: sticky; bottom: 0; }
  /* Mobile space budget: every px of chrome (HUD/palette/bottom-bar) is a px
     stolen from the canvas. Ted: "canvas is very hard to see, it's so small".
     Hide the bottom bar, tighten HUD + palette so the canvas gets max-height. */
  .bottom-bar { display: none; }
  .hud-bar { flex-direction: column; align-items: stretch; padding: 4px 6px; gap: 4px; border-width: 1px; }
  .hud-left { gap: 8px; }
  .hud-item { font-size: 10px; }
  .hud-item b { font-size: 12px; }
  .hud-right { flex-wrap: wrap; gap: 4px; }
  .hud-btn { flex: 1 1 auto; padding: 4px 6px; font-size: 10px; text-align: center; border-width: 1px; }
  .info-grid { flex-direction: column; }
  .overlay-content h1 { font-size: 24px; }
  .overlay-content { padding: 14px; }
  .overlay-content p, .overlay-content .controls { font-size: 12px; }
  .tower-palette { padding: 5px 6px; gap: 4px; border-width: 1px; }
  .tower-btn { min-width: 0; flex: 1 1 0; font-size: 10px; padding: 4px 5px; border-width: 1px; }
  .tower-btn .t-name { letter-spacing: 0; }
  .tower-btn .t-cost { font-size: 10px; margin-top: 0; }
  /* BEST + GUARD status are nice-to-know, not touch-critical — drop them so
     the HUD left side fits one row and the canvas gains height. */
  .hud-item.best, .hud-item.hero { display: none; }
  .tower-menu { max-width: 92%; }
  .menu-btn { white-space: normal; font-size: 11px; }
}

/* ---------- A2: portrait rotate hint (landscape already fills ~90%) ---------- */
.rotate-hint {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(12, 12, 16, 0.82);
  border: 1px solid #8a5a2a;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffd23c;
  z-index: 9;
  pointer-events: none;
  white-space: nowrap;
}
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-hint { display: block; }
}
body.started .rotate-hint { display: none; }

/* ---------- Phase 2: hero / spell / endless / forks ---------- */
.hud-item.hero { color: #8fd0ff; }
.hud-item.hero.hero-down { color: #ff6b5a; }

.big-btn.endless-btn {
  background: #3a2f14;
  border: 2px solid #ffd23c;
  color: #ffd23c;
  margin-top: 14px;
}
.big-btn.endless-btn:hover { background: #4a3d1c; color: #ffe273; }

.fork-menu { display: flex; flex-direction: column; gap: 4px; }
.menu-btn.fork {
  background: #241f18;
  border: 2px solid #5a4a2a;
  color: #e8d9b0;
  text-align: left;
  white-space: normal;
}
.menu-btn.fork:hover:not(:disabled) { background: #32291c; border-color: #ffd23c; color: #ffe273; }
.menu-btn.fork:disabled { opacity: 0.4; cursor: default; }
.fork-label {
  font-size: 11px;
  letter-spacing: 1px;
  color: #ffd23c;
  padding: 4px 2px;
}

/* ---------- Short-viewport (landscape phone) compact chrome ----------
   A 844x390 landscape phone is >700px wide, so the max-width:700px rules above
   never fired — HUD 75px + palette 72px + bottom bar left the canvas only
   188px tall. On any short viewport, compact the chrome the same way so the
   canvas gets the remaining height. */
@media (max-height: 520px) {
  body { padding: 4px; }
  .bottom-bar { display: none; }
  .hud-bar { padding: 4px 8px; gap: 6px; border-width: 1px; }
  .hud-left { gap: 8px; }
  .hud-item { font-size: 10px; }
  .hud-item b { font-size: 12px; }
  .hud-item.best, .hud-item.hero { display: none; }
  .hud-right { gap: 4px; }
  .hud-btn { padding: 4px 8px; font-size: 10px; border-width: 1px; }
  .tower-palette { padding: 5px 8px; gap: 5px; border-width: 1px; }
  .tower-btn { min-width: 0; flex: 1 1 0; font-size: 10px; padding: 4px 6px; border-width: 1px; }
  .tower-btn .t-name { letter-spacing: 0; }
  .tower-btn .t-cost { font-size: 10px; margin-top: 0; }
}