:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #05060a;
  color: #cfe9ff;
  font: 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* no double-tap-to-zoom anywhere in the game */
  touch-action: manipulation;
}
#wrap {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: .6rem;
}
#hud {
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
#hud .stat b { color: #fff; font-size: 1.1rem; }
#hud .stat span { opacity: .5; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.shop { display: flex; gap: .5rem; }
/* touch-action:none so a press-drag off the button builds instead of scrolling */
.shop button { display: inline-flex; align-items: center; gap: .4rem; touch-action: none; }
/* the tower art that follows the finger while dragging out of the shop */
.drag-ghost {
  position: fixed; z-index: 50; pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px #000a);
}
.shop button canvas { flex: none; }
.shop button .lbl { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.shop button .pr { opacity: .6; }
.shop button .pr::before { content: "· "; }
button {
  font: inherit; cursor: pointer;
  background: #0c1526; color: #7fdfff;
  border: 1px solid #1d3a5f; border-radius: 8px;
  padding: .6rem .9rem; transition: all .12s;
  -webkit-tap-highlight-color: transparent;
}
button:hover:not(:disabled) { border-color: #46b4ff; box-shadow: 0 0 12px #1e6fff66; }
button:disabled { opacity: .35; cursor: not-allowed; }
button.sel { border-color: #46ffd1; color: #46ffd1; box-shadow: 0 0 14px #12ffcf55; }
button.go { background: #10361f; color: #6bff9e; border-color: #1f7a45; }
#ff { display: inline-flex; align-items: center; gap: .4rem; }
/* custom double-chevron fast-forward icon — inherits the button colour, so it
   turns gold along with the text when fast-forward is engaged */
.ff-ico { width: 1.15em; height: 1em; flex: none; fill: currentColor; display: block; }
#ff.fast { border-color: #ffd36b; color: #ffd36b; box-shadow: 0 0 14px #ffb43355; }
#ff.fast .ff-ico { filter: drop-shadow(0 0 4px #ffb43399); }
canvas {
  border: 1px solid #142744; border-radius: 12px;
  box-shadow: 0 0 60px #0a1e4033, inset 0 0 60px #0009;
  touch-action: none;
  /* portrait board: fit within the viewport width and the height left
     over after the message row + bottom controls */
  aspect-ratio: 2 / 3;
  width: min(440px, 96vw, calc((100dvh - 180px) * 2 / 3));
  height: auto;
}
#msg {
  min-height: 2.4em; max-width: 440px; padding: 0 .5rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #ffd36b;
  text-shadow: 0 0 10px #ffb43355;
}
kbd { background: #0c1526; border: 1px solid #1d3a5f; border-radius: 4px; padding: 0 .3em; }
#board { position: relative; display: flex; }
/* upgrade card — floats over the bottom of the board when a tower is picked */
#panel {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: min(300px, 90%);
  background: #081426f2; border: 1px solid #46b4ff; border-radius: 12px;
  padding: .6rem .7rem; z-index: 5;
  box-shadow: 0 10px 34px #000b, 0 0 18px #1e6fff44;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#panel[hidden] { display: none; }
#panel .phead { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
#panel .phead span { color: #fff; font-size: 1rem; }
#panel .phead b { color: #ffd36b; font-size: .8rem; letter-spacing: .05em; }
#pstats { opacity: .8; margin: .3rem 0; }
#pnext { color: #6bff9e; min-height: 1.2em; font-size: .82rem; }
#panel .prow { display: flex; gap: .4rem; margin-top: .5rem; }
#panel #upg { flex: 1; padding: .5rem; }
#panel #pclose { padding: .5rem .7rem; }
/* On phones the three shop buttons won't fit in one row — give the shop the
   full width, let the buttons share it equally, and stack name over price. */
@media (max-width: 520px) {
  #hud { gap: .5rem .75rem; }
  .shop { flex: 1 1 100%; gap: .4rem; }
  .shop button { flex: 1 1 0; min-width: 0; justify-content: center; padding: .45rem .3rem; gap: .35rem; }
  .shop button canvas { width: 26px !important; height: 26px !important; }
  .shop button .lbl { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .shop button .nm { color: #fff; font-size: .82rem; }
  .shop button .pr { font-size: .72rem; }
  .shop button .pr::before { content: ""; }
}