/* game.css — HUD, command bar, camera pad, toast. */
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; touch-action: none; }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 10px 12px; pointer-events: none;
  font-size: 0.8rem;
  background: linear-gradient(rgba(5, 10, 18, 0.85), rgba(5, 10, 18, 0));
}
.hud-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 999px;
  padding: 4px 10px; letter-spacing: 0.08em; font-size: 0.72rem; white-space: nowrap;
}
.chip.dew b { color: var(--dew); }
.chip.kill b { color: var(--crystal); }
.chip.score b { color: var(--amber); }
.bars { margin-top: 6px; gap: 8px; }
.bar-label { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--ink-dim); }
.bar { width: min(26vw, 180px); height: 8px; border-radius: 4px;
  background: rgba(20, 34, 44, 0.9); border: 1px solid var(--edge); overflow: hidden; }
.fill { height: 100%; width: 100%; border-radius: 4px; transition: width 0.25s; }
.fill.spore { background: linear-gradient(90deg, #1c7d66, var(--spore)); }
.fill.crystal { background: linear-gradient(90deg, #8c2a68, var(--crystal)); }
.sel-line { margin-top: 4px; font-size: 0.7rem; color: var(--ink-dim); }

#msg {
  position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: var(--panel); border: 1px solid var(--edge); color: var(--ink);
  padding: 8px 18px; border-radius: 999px; font-size: 0.85rem;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#msg.show { opacity: 1; }

#cmd-bar, #cam-pad { position: fixed; bottom: 10px; z-index: 15; }
#cmd-bar { left: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 62vw; }
#cam-pad { right: 10px; display: grid;
  grid-template-areas: ". up ." "left down right" "zi . zo";
  grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 4px; }
#cmd-bar button, #cam-pad button {
  pointer-events: auto; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 12px;
  font-family: inherit; font-size: 0.68rem; letter-spacing: 0.05em;
  padding: 7px 10px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
#cmd-bar button small { color: var(--ink-dim); font-size: 0.58rem; letter-spacing: 0; }
#cmd-bar button.active { border-color: var(--dew); box-shadow: 0 0 14px rgba(89, 230, 255, 0.4); }
#cmd-bar button:active, #cam-pad button:active { filter: brightness(1.4); }
#cam-pad button { font-size: 1rem; padding: 0; align-items: center; justify-content: center; }
#btn-cam-up { grid-area: up; } #btn-cam-left { grid-area: left; }
#btn-cam-right { grid-area: right; } #btn-cam-down { grid-area: down; }
#btn-zoom-in { grid-area: zi; } #btn-zoom-out { grid-area: zo; }

#overlay-start #controls-help { text-align: left; font-size: 0.85rem; line-height: 1.55; }
#overlay-start #controls-help p { margin: 0.45em 0; color: var(--ink); }
#overlay-start #controls-help b { color: var(--spore); }
#overlay-end .panel h1 { color: var(--crystal); }
#overlay-end .panel #end-title { color: var(--spore); }
#overlay-end .tag { color: var(--ink); font-size: 0.95rem; line-height: 1.5; }

@media (max-width: 640px) {
  .hud-row .chip.wave { display: none; }
  #cmd-bar button { padding: 6px 7px; font-size: 0.6rem; }
  #cmd-bar button small { font-size: 0.52rem; }
  #cam-pad { grid-template-columns: repeat(3, 40px); grid-auto-rows: 40px; }
  #stat-sel { display: none; }
}