/* Cylon Defense: The touch-play layout, the reticle, and the KO and hull readouts.
 * One of the stylesheets index.html links in order; the order is the cascade (README.md, "Stylesheets"). */
/*
 * Touch play: don't pan the document; keep nav / bots tappable.
 * Avoid overflow:hidden here — it jumps scroll and fights sticky nav.
 */
body.cylon-touch-play {
  overscroll-behavior: none;
  touch-action: none;
}


body.cylon-touch-play main {
  /* Page surface was above the pip (z 1058 > 1025) and ate drags as scrolls */
  pointer-events: none !important;
}


body.cylon-touch-play .site-nav,
body.cylon-touch-play .site-nav * {
  touch-action: manipulation;
  pointer-events: auto;
}


body.cylon-touch-play .cylon-bot {
  touch-action: manipulation;
  pointer-events: auto;
}


/*
 * Dodge pip — above main (1058) so it can be grabbed; below nav (2200),
 * help/gameover (2100), and nuke/raptor FX (~1950–2000). Bots stay at 1061
 * so battlefield layering is unchanged; a second finger still hits a bot
 * wherever the pip isn't.
 * Mobile (drag to dodge): green. Desktop (.is-mouse-follow attack cursor): red.
 */
.cylon-reticle {
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  z-index: 1080;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  filter: drop-shadow(0 0 8px rgba(60, 220, 100, 0.55));
}


.cylon-reticle[hidden] {
  display: none !important;
}


/* Desktop: sit on the mouse; let clicks pass through to bots / UI */
.cylon-reticle.is-mouse-follow {
  pointer-events: none;
  cursor: none;
  filter: drop-shadow(0 0 8px rgba(255, 60, 60, 0.55));
}


.cylon-reticle.is-dragging {
  cursor: grabbing;
}


.cylon-reticle-ring {
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(70, 230, 120, 0.95);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(40, 200, 90, 0.35);
}


.cylon-reticle.is-mouse-follow .cylon-reticle-ring {
  border-color: rgba(255, 90, 90, 0.95);
  box-shadow: inset 0 0 10px rgba(255, 40, 40, 0.35);
}


.cylon-reticle-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(60, 230, 110, 0.9);
}


.cylon-reticle.is-mouse-follow .cylon-reticle-core {
  box-shadow: 0 0 10px 3px rgba(255, 80, 60, 0.9);
}


.cylon-score {
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  user-select: none;
  white-space: nowrap;
  border: 1px solid transparent;
  padding: 0 0.15rem;
  /* Match brand: display caps read high without a slight nudge */
  transform: translateY(0.04em);
}


.cylon-score-label {
  text-transform: uppercase;
  opacity: 0.85;
}


.cylon-score-value {
  color: var(--crimson-hot);
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 1.25ch;
  text-shadow: 0 0 8px rgba(255, 40, 40, 0.45);
  transition: transform 0.15s ease, color 0.2s ease, text-shadow 0.2s ease;
}


.cylon-score-value.is-bump {
  transform: scale(1.25);
  color: #fff;
}


/* HP color is set in JS (smooth green↔yellow↔red lerp); heal still flashes */
#cylon-hits-value {
  transition: transform 0.15s ease, color 0.25s ease, text-shadow 0.25s ease;
}


.cylon-score-value.is-heal,
#cylon-hits-value.is-heal {
  transform: scale(1.2);
  color: #b8ffc8 !important;
  text-shadow: 0 0 10px rgba(80, 255, 140, 0.65) !important;
}


.cylon-score-cap {
  color: var(--steel);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}