/* =========================================================================
   The arena. Loaded only on the game page, on top of site.css.

   The canvas fills the viewport and everything else floats above it, so the
   simulation never has to know the UI exists.
   ========================================================================= */

.page-game,
.page-game body { margin: 0; }

.page-game {
  overflow: hidden;
  /* Light background: the fighters are dark line art, per the visual brief
     in PROJECT.md section 20. The dark chrome elsewhere on the site is for
     the admin and status pages, not the game. */
  background: #f6f2ea;
}

.arena {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;      /* the pointer layer owns gestures */
  user-select: none;
  -webkit-user-select: none;
}

.stage {
  display: block;
  width: 100%;
  height: 100%;
  /* The pointer tools mean the cursor is always doing something. */
  cursor: grab;
}
.stage.is-dragging { cursor: grabbing; }

/* --------------------------------------------------------------- boot --- */

.boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  background: #0e1016;
  color: var(--ink);
  font-family: var(--font);
  text-align: center;
  padding: 2rem;
  transition: opacity .45s ease, visibility .45s;
}
.boot.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot p { margin: 0; color: var(--ink-mute); font-size: .95rem; }
.boot h1 { margin: 0; font-size: 1.4rem; }
.boot-static { position: absolute; }

/* ---------------------------------------------------------------- hud --- */

.sfa-hud {
  position: absolute;
  inset: 0 0 auto 0;
  padding: .7rem clamp(.6rem, 2vw, 1.2rem) 0;
  pointer-events: none;    /* the fight is underneath and must stay clickable */
  font-family: var(--font);
}

.sfa-hud-bar {
  display: flex;
  align-items: flex-start;
  gap: clamp(.5rem, 2vw, 1.4rem);
  max-width: 62rem;
  margin: 0 auto;
}

.sfa-fighter {
  flex: 1 1 0;
  min-width: 0;
  --accent: #ff5a3c;
}
.sfa-fighter.is-right { text-align: right; }

.sfa-name {
  font-size: clamp(.72rem, 2.2vw, .88rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: #1d2028;
  margin-bottom: .28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sfa-track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(29, 32, 40, .13);
  overflow: hidden;
}
.sfa-track + .sfa-track { margin-top: 3px; height: 4px; }

.sfa-track > span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  /* Eased so a hit reads as a drop rather than a jump, and so the 12Hz
     update rate is invisible. */
  transition: width .22s cubic-bezier(.22, 1, .36, 1);
}
.sfa-fighter.is-right .sfa-track > span { margin-left: auto; }
.sfa-stamina > span { background: rgba(29, 32, 40, .32); }

.sfa-fighter.is-hurt .sfa-health > span { animation: sfa-pulse 1.1s ease-in-out infinite; }
@keyframes sfa-pulse { 50% { opacity: .55; } }

.sfa-meta {
  display: flex;
  gap: .5rem;
  margin-top: .25rem;
  font-size: .68rem;
  color: #5d6577;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.sfa-fighter.is-right .sfa-meta { justify-content: flex-end; }
.sfa-wins { color: var(--accent); letter-spacing: 0; }

.sfa-round {
  flex: none;
  align-self: center;
  padding: .18rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5d6577;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(29, 32, 40, .12);
  border-radius: 999px;
  white-space: nowrap;
}

.sfa-banner {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #1d2028;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1.4, .36, 1);
}
.sfa-banner.is-visible { opacity: 1; transform: scale(1); }

/* ----------------------------------------------------------- controls --- */

.sfa-controls {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(.4rem, 2vw, 1rem);
  padding: .6rem clamp(.5rem, 2vw, 1rem) max(.6rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(246, 242, 234, .96), rgba(246, 242, 234, 0));
  font-family: var(--font);
}

.sfa-group { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

.sfa-palette {
  max-width: 44rem;
  justify-content: center;
  /* On a narrow screen the palette is the part worth scrolling, not the
     tools, so it gets its own scroll container rather than wrapping to
     four rows and eating the arena. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.sfa-btn, .sfa-chip {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .7rem;
  color: #2a2f3a;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(29, 32, 40, .16);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.sfa-btn:hover, .sfa-chip:hover { background: #fff; border-color: rgba(29, 32, 40, .3); }

.sfa-btn.is-on {
  color: #fff;
  background: #ff5a3c;
  border-color: #ff5a3c;
}

.sfa-btn-quiet { background: transparent; border-color: rgba(29, 32, 40, .12); color: #5d6577; }
.sfa-btn-quiet:hover { color: #2a2f3a; }

.sfa-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 500;
  padding: .28rem .6rem;
  border-radius: 999px;
}
.sfa-chip.is-on { border-color: #39c7ff; box-shadow: inset 0 0 0 1px #39c7ff; }

.sfa-chip-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.sfa-btn:focus-visible, .sfa-chip:focus-visible {
  outline: 2px solid #39c7ff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------- misc --- */

/* A warning strip when the config could not be fetched, so it is obvious the
   game is running on defaults rather than mysteriously ignoring the admin. */
.sfa-warning {
  position: absolute;
  top: auto;
  bottom: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(38rem, 92vw);
  padding: .45rem .8rem;
  font-family: var(--font);
  font-size: .76rem;
  color: #6a4a12;
  background: rgba(255, 212, 128, .95);
  border: 1px solid rgba(160, 110, 20, .4);
  border-radius: 8px;
  text-align: center;
}

@media (max-width: 560px) {
  .sfa-controls { gap: .3rem; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
  .sfa-actions .sfa-btn { padding: .3rem .55rem; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sfa-track > span, .sfa-banner, .boot { transition: none; }
  .sfa-fighter.is-hurt .sfa-health > span { animation: none; }
}

/* A quiet way back to the build log. Bottom-left, out of the fight. */
.arena-about {
  position: absolute;
  left: clamp(.5rem, 2vw, 1rem);
  bottom: max(.6rem, env(safe-area-inset-bottom));
  font-family: var(--font);
  font-size: .72rem;
  color: #7b8496;
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 132, 150, .35);
  padding-bottom: 1px;
}
.arena-about:hover { color: #2a2f3a; border-bottom-color: #2a2f3a; }

@media (max-width: 700px) {
  /* No room beside the toolbar on a phone; the link is not worth the clash. */
  .arena-about { display: none; }
}

/* ---------------------------------------------------------------- speed --- */

.sfa-speed {
  align-items: center;
  gap: .4rem;
  padding-right: .5rem;
  border-right: 1px solid rgba(29, 32, 40, .12);
}

.sfa-speed-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5d6577;
}

.sfa-slider {
  width: clamp(80px, 14vw, 150px);
  accent-color: #ff5a3c;
  cursor: pointer;
}

.sfa-speed-out {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  color: #2a2f3a;
  min-width: 3.1rem;
  text-align: right;
}

/* Past 8x the fight is a blur on purpose; say so rather than letting it look
   like a rendering fault. */
.sfa-speed.is-fast .sfa-speed-out { color: #ff5a3c; }
.sfa-speed.is-fast .sfa-slider { accent-color: #ff2d00; }

.sfa-speed-reset { padding: .22rem .45rem; font-size: .7rem; }

@media (max-width: 700px) {
  .sfa-speed-label, .sfa-speed-reset { display: none; }
  .sfa-slider { width: 72px; }
}