/* Hex Siege — page-local styles. Loaded AFTER /styles.css; composes the shared
   claed3d token set (--violet/--cyan/--ink/…) and only adds what this game's
   build UI needs. Scoped to this page (linked only from hex-siege/index.html). */

/* the TD board is landscape — give it a wider column than the default game-main */
.game-main { width: min(46rem, calc(100vw - var(--page-pad))); }

.board-frame { touch-action: none; }

/* transient toast over the board (blocks-path / not-enough-credits / sold) */
.hs-toast {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translate(-50%, 0.6rem);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--danger);
  border-radius: 100vmax;
  background: rgba(20, 8, 12, 0.86);
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.hs-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* build toolbar */
.hs-build {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0 0.6rem;
  flex-wrap: wrap;
}
.hs-tower {
  flex: 1 1 0;
  min-width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(239, 241, 250, 0.22);
  border-radius: 0.8rem;
  background: rgba(8, 8, 13, 0.52);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.hs-tower:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(168, 140, 255, 0.7); }
.hs-tower:disabled { opacity: 0.42; cursor: not-allowed; }
.hs-tower.is-active { border-color: var(--cyan); background: rgba(20, 40, 54, 0.6); box-shadow: 0 0 0 1px var(--cyan) inset; }
.hs-tower.sell.is-active { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.hs-name { font-weight: 500; }
.hs-cost {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
}
.hs-tower.is-active .hs-cost { color: var(--ink); }

/* tower silhouette marks in the buttons */
.hs-mark { width: 1rem; height: 1rem; display: inline-block; flex: 0 0 auto; }
.hs-mark.pulse { border-radius: 50%; border: 2px solid var(--violet); box-shadow: 0 0 0 3px rgba(121, 87, 255, 0.18) inset; }
.hs-mark.nova {
  width: 0; height: 0; border-left: 0.55rem solid transparent; border-right: 0.55rem solid transparent;
  border-bottom: 0.95rem solid var(--cyan); border-radius: 0;
}
.hs-mark.stasis { border: 2px solid var(--ultraviolet); border-radius: 0.15rem; background: transparent; }

/* wave row: preview strip + start button */
.hs-wave-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.2rem;
}
.hs-preview {
  flex: 1 1 auto;
  min-height: 2.3rem;
  display: flex;
  align-items: center;
}
.prev-tag {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 100vmax;
}
.prev-tag.runner { color: var(--amber, #ffcf6b); border-color: rgba(255, 207, 107, 0.5); }
.hs-wave-btn {
  min-height: 2.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--cyan);
  border-radius: 100vmax;
  background: linear-gradient(rgba(20, 40, 54, 0.6), rgba(10, 20, 28, 0.6));
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.hs-wave-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0.9rem rgba(105, 221, 255, 0.3); }
.hs-wave-btn:disabled { opacity: 0.5; cursor: default; border-color: var(--line); }

.game-over p { margin: 0; }

/* win/lose overlay: a soft flare bloom behind the text (composes the shared
   dark backdrop from styles.css, layering neon radials over it) */
.game-over {
  background:
    radial-gradient(circle at 50% 44%, rgba(105, 221, 255, 0.18), transparent 46%),
    radial-gradient(circle at 50% 44%, rgba(121, 87, 255, 0.15), transparent 68%),
    rgba(7, 7, 11, 0.82);
}
.game-over h2 {
  text-shadow: 0 0 22px rgba(105, 221, 255, 0.45), 0 0 46px rgba(121, 87, 255, 0.3);
}