/* =============================================================================
   Scrum Fighter styles
   ============================================================================= */

.sf-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  user-select: none;
}

/* ---- HUD: health bars, round pips, timer, ladder rung ---- */

.sf-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.sf-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sf-bar.p2 {
  flex-direction: row-reverse;
  text-align: right;
}

.sf-bar .name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.sf-bar .track {
  flex: 1 1 auto;
  height: 0.85rem;
  background: var(--bg-overlay, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
}
.sf-bar .track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-cyan);
  transition: width 90ms linear;
}
.sf-bar.p2 .track i {
  margin-left: auto;
}

/* Earned-special meter: a thinner bar under the health track. Fills as the
   fighter lands hits and takes damage; once full it glows and pulses so the
   "special ready" signal is never color-only (it animates and is announced via
   aria-label). */
.sf-bar .meter {
  flex: 1 1 auto;
  height: 0.4rem;
  background: var(--bg-overlay, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
  opacity: 0.75;
}
.sf-bar .meter i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-cyan);
  transition: width 120ms linear;
}
.sf-bar.p2 .meter i {
  margin-left: auto;
}
.sf-bar .meter.is-ready {
  opacity: 1;
  border-color: var(--text-primary);
  box-shadow: 0 0 8px 1px currentColor;
  animation: sf-meter-pulse 700ms ease-in-out infinite;
}
@keyframes sf-meter-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.7);
  }
}

.sf-bar .pips {
  flex: 0 0 auto;
  letter-spacing: 0.1em;
  color: var(--accent-magenta);
}

.sf-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.sf-center .timer {
  font-size: var(--font-size-lg);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.sf-center .rung {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- arena ---- */

.sf-canvas-wrap {
  position: relative;
  width: 100%;
  background: #0a0a0f;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  touch-action: none;
}

.sf-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- overlay: select screen and game-over ---- */

.sf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(2px);
  padding: var(--space-4);
  overflow-y: auto;
}
.sf-overlay[hidden] {
  display: none;
}

/* game-over content is wrapped so celebration mode can reposition it */
.sf-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* celebration: let the dancing winner and the taunt bubble show through.
   The result panel drops to the bottom so it never covers the bubble. */
.sf-overlay.is-celebration {
  background: transparent;
  backdrop-filter: none;
  justify-content: flex-end;
  pointer-events: none;
}
.sf-overlay.is-celebration .sf-result {
  pointer-events: auto;
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.sf-overlay h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}
.sf-overlay .sf-sub {
  color: var(--text-secondary);
  margin: 0;
  max-width: 42ch;
}
.sf-overlay .sf-label {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sf-modes {
  display: inline-flex;
  gap: var(--space-2);
}
.sf-mode {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: 0.4rem 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  min-height: var(--hit-target-min);
}
.sf-mode.is-on {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
  max-width: 32rem;
}
@media (min-width: 30rem) {
  .sf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sf-pick {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 0.45rem 0.3rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  min-height: var(--hit-target-min);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-pick.is-on {
  color: var(--text-primary);
  border-width: 2px;
}

/* ---- difficulty picker (#30) ---- */

.sf-grid.sf-diff {
  grid-template-columns: 1fr;
  max-width: 22rem;
  gap: 0.5rem;
}
@media (min-width: 34rem) {
  .sf-grid.sf-diff {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 34rem;
  }
}
.sf-diff-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  white-space: normal;
  text-align: left;
  padding: 0.6rem 0.7rem;
  min-height: auto;
}
.sf-diff-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}
.sf-diff-thr {
  font-size: var(--font-size-xs);
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
}
.sf-diff-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.25;
}
.sf-diff-pick.is-on .sf-diff-name {
  color: var(--accent-cyan);
}

.sf-play {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-size-md, 1rem);
  margin-top: var(--space-2);
  padding: 0.6rem 1.6rem;
  background: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  color: #0a0a0f;
  font-weight: 700;
  cursor: pointer;
  min-height: var(--hit-target-min);
}
.sf-play:hover {
  filter: brightness(1.08);
}

.sf-submit {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  min-height: 1.2em;
}

/* Touch controls are the universal NERD pad (gamepad.js + .ns-gamepad in
   site.css): a D-pad on the left, a four-face N E R D diamond on the right,
   built by the game and pinned to the screen corners while a fight is live. No
   game-local touch CSS needed. */

.sf-help {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sf-bar .track i,
  .sf-bar .meter i {
    transition: none;
  }
  .sf-bar .meter.is-ready {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Immersive (full-viewport) fit.
   The arena is a fixed 3 / 2 box. By default it sizes off width (width: 100%),
   which is fine on the page where it scrolls, but in the full-viewport lock a
   short landscape phone is wider than it is tall, so a width-driven 3 / 2 box
   overflows the height and the fighters render off the bottom of the screen.
   Here we letterbox instead: the wrap takes the largest 3 / 2 size that fits
   the height left after the HUD, capped to the screen width. The canvas reads
   its size from the wrap (resize() measures getBoundingClientRect), so fixing
   the box is enough; no JS change needed.
   --------------------------------------------------------------------------- */
body.ns-immersive .sf-shell {
  height: 100dvh;
  width: 100dvw;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  box-sizing: border-box;
}
body.ns-immersive .sf-canvas-wrap {
  width: auto;
  height: min(calc(100dvh - 5rem), calc((100dvw - 1rem) * 2 / 3));
  max-width: 100dvw;
  aspect-ratio: 3 / 2;
}
/* The long keyboard-help line is redundant on a phone (the NERD pad is on
   screen) and only eats vertical room in the lock; hide it while immersive. */
body.ns-immersive .sf-help {
  display: none;
}

/* ---------------------------------------------------------------------------
   Portrait phones: the select / game-over overlay holds two full character
   grids, far more than the short 3 / 2 box can show, so it scrolls. Centered,
   the injected rotate nudge (mobile-play.js) lands off the top of the scroll
   and reads as missing. Flow the overlay from the top and float the nudge to
   the very top so "turn your phone sideways" is the first thing seen.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) and (orientation: portrait) {
  .sf-overlay {
    justify-content: flex-start;
  }
  .sf-overlay .ns-rotate-nudge {
    order: -1;
    margin-top: 0;
  }
}