/* spiders.css - the Spiders game (twin-stick run-and-gun). Reuses tokens
   from styles.css, game-shell.css's shell/bar/pause chrome, and
   .course-primary/.puzzle-hint-style classes already defined elsewhere. */

.spiders-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

.spiders-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Real bug found & fixed (caught via a live screenshot after the shared
   settings gear button was added to game-shell's button cluster): on
   real mobile, the shell's pause/mute/settings/close buttons float as an
   overlay directly on top of this row (see game-shell.css's own
   comment), and this stats row never reserved any clearance for them at
   all -- unlike Slither's own equivalent fix, this game never got one.
   Same treatment as Slither's .slither-stats, pulling both numbers from
   game-shell.css's shared --gs-bar-left-clear/--gs-bar-right-clear so
   all three games stay in sync automatically if the button cluster ever
   changes again. */
@media (max-width: 480px) {
  .spiders-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
  }
}

.spiders-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.spiders-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.spiders-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Health -- per explicit instruction ("make health a scale line under
   the hearts ... in a permanent small rectangle representing 100%"):
   a fixed-size outlined rectangle sits directly under the Lives hearts
   (the rectangle itself IS the permanent "100%" reference -- it never
   changes size), with an inner fill bar scaling to the current health
   percentage. Colored in three bands, per the literal instruction ("a
   nice green line over 75%, green under 75 and red flashing under
   25%") -- spidersHealthFill's own base color is the ">75%" band;
   .is-mid and .is-critical (JS-toggled, see updateHealthBar()) override
   it for the lower two bands. */
.spiders-health-bar {
  width: 64px;
  height: 8px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}

.spiders-health-bar-fill {
  height: 100%;
  width: 100%;
  background: #22c55e; /* "a nice green line over 75%" */
  transition: width .2s linear, background-color .2s linear;
}

.spiders-health-bar-fill.is-mid {
  background: #65a30d; /* "green under 75" -- a plainer, duller green */
}

.spiders-health-bar-fill.is-critical {
  background: #ef4444; /* "red flashing under 25%" */
  animation: spiders-health-flash 1s ease-in-out infinite;
}

@keyframes spiders-health-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.spiders-arena-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Level progress -- per explicit instruction ("change the level counter
   to a line showing the percent along the top of the play window"):
   replaces the old separate Level/Kills text stats with a single slim
   bar overlaid on the arena's own top edge, filled left-to-right by
   kills/levelTarget(level) (see updateLevelBar()). A small "Lv N" label
   is kept alongside it so the level number itself isn't lost, just no
   longer its own stat block. */
.spiders-level-bar-wrap {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;
}

.spiders-level-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.spiders-level-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .15);
  overflow: hidden;
}

.spiders-level-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .2s linear;
}

.spiders-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* The arena background: a dot-grid plus a vignette, so the playfield
     is not a flat dark void. Same amplified values as Slither's
     background (dots 0.45 alpha, vignette 0.65) -- the first version
     of Slither's was too faint to see, and these measured clearly
     visible. The JS draw() clears the canvas transparent every frame,
     so this CSS background shows through. Layer order: vignette on
     top, dots in the middle, base surface colour underneath. */
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.65) 100%),
    radial-gradient(circle, rgba(148, 163, 184, 0.45) 2px, transparent 3px),
    var(--surface);
  background-size: auto, 20px 20px, auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
}

/* -- Twin-stick joysticks --------------------------------------------------
   Right side = move, always. Left side = fire (this game has firing).
   Fixed near the bottom corners -- natural thumb reach in portrait play,
   and clear of the top-corner pause/close buttons on mobile. */

.spiders-joystick {
  position: absolute;
  bottom: 22px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(23, 30, 37, .55);
  border: 2px solid rgba(255, 255, 255, .18);
  touch-action: none;
  z-index: 10;
}

.spiders-joystick-move {
  right: 18px;
}

.spiders-joystick-fire {
  left: 18px;
}

.spiders-joy-nub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
  transition: background .15s ease;
}

.spiders-joystick-move.is-active .spiders-joy-nub {
  background: var(--accent);
}

.spiders-joystick-fire.is-active .spiders-joy-nub {
  background: #f0806a;
}

.spiders-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .78);
  border-radius: var(--radius);
  z-index: 12;
}

/* The start overlay is lighter than the game-over overlay so the
   attract-mode scene behind it (see drawAttract() in spiders.js)
   reads through it instead of a black void. Same treatment as
   Slither's .slither-overlay--start. */
#spidersStart {
  background: rgba(10, 13, 16, .55);
}

.spiders-overlay[hidden] {
  display: none;
}

.spiders-overlay-card {
  text-align: center;
  padding: 24px;
}

.spiders-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.spiders-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.spiders-level-up {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .92);
  color: #06170f;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
}

.spiders-level-up[hidden] {
  display: none;
}

.spiders-level-up.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* The level-clear score bonus (level * 100, see SCORE_LEVEL_BONUS_PER_LEVEL
   in spiders.js) "flashes on screen" within the level-up toast, per
   explicit instruction -- a blink rather than a static number, so it
   reads as a bonus payout, not just more toast text. */
.spiders-bonus-flash {
  display: inline-block;
  margin-left: 6px;
  color: #ffb000;
  font-weight: 800;
  animation: spiders-bonus-blink .4s steps(1) infinite;
}

@keyframes spiders-bonus-blink {
  50% { opacity: .25; }
}