/* static/css/siege-squad.css — Siege Squad arena.
   Colors route through site tokens only; no brand/background custom properties are
   declared here (see the theming rules in CLAUDE.md). Text on a brand-gradient fill
   uses a literal #fff, never a theme-flipping token. */

.ss-stage {
  position: relative;
  /* 900px is the canvas's drawing buffer; wider only upscales it and goes soft. */
  width: 100%;
  max-width: min(100%, 900px);
  margin-inline: auto;
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
}

/* The canvas keeps its 900x420 drawing buffer and scales down to the container. */
#ss-canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;   /* drag-to-aim must not scroll the page */
  cursor: crosshair;
}

.ss-wind {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  background: rgba(2, 6, 23, 0.6);
  color: #fff;
}

.ss-banner {
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  color: var(--text-secondary);
}
.ss-banner.ss-yours {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  animation: ss-pop 320ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.ss-clock { line-height: 1; }
.ss-clock.ss-urgent { color: #f87171; animation: ss-tick 1s steps(1) infinite; }

@keyframes ss-tick {
  0%, 60% { transform: scale(1); }
  70%     { transform: scale(1.08); }
  100%    { transform: scale(1); }
}

.ss-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-block;
}
.ss-dot-a { background: var(--brand-primary); }
.ss-dot-b { background: var(--brand-secondary); }

/* Reinforcement packs are buttons, so they keep a hover and a chosen state. */
.ss-pack { cursor: pointer; transition: transform 90ms ease-out, border-color 120ms ease-out; }
.ss-pack:hover:not(:disabled) { transform: translateY(-2px); }
.ss-pack:disabled { opacity: 0.45; cursor: default; }
.ss-pack.ss-chosen {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.ss-pop { animation: ss-pop 420ms cubic-bezier(0.2, 1.3, 0.4, 1); }

@keyframes ss-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.ss-float { animation: ss-float 2.6s ease-in-out infinite; }

@keyframes ss-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.ss-pulse-ring {
  position: absolute;
  left: 50%;
  top: 3.2rem;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border-radius: 999px;
  border: 2px solid var(--brand-secondary);
  opacity: 0;
  pointer-events: none;
}
#ss-lobby.ss-searching .ss-pulse-ring { animation: ss-pulse 1.6s ease-out infinite; }

@keyframes ss-pulse {
  from { transform: scale(0.5); opacity: 0.5; }
  to   { transform: scale(1.8); opacity: 0; }
}

/* Range inputs: the default look differs wildly per browser, so pin the track. */
.ss-page input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
}
.ss-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--grad-primary);
  border: 2px solid #fff;
  cursor: pointer;
}
.ss-page input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand-primary);
  cursor: pointer;
}

/* The lobby/arena/result panels are static containers, not clickable cards, so the
   sitewide .card-border:hover lift is neutralized. Pack buttons keep their own. */
#ss-app > .card-border:hover,
#ss-app .card-border:not(.ss-pack):not(button):hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .ss-banner { font-size: 0.9rem; }
  #ss-canvas { cursor: default; }
  .ss-stage { margin-top: 0.5rem; }
  #ss-arena > .card-border { padding: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-float,
  .ss-pulse-ring,
  .ss-clock.ss-urgent,
  .ss-banner.ss-yours { animation: none; }
}