/* ===========================================================================
   Infin8 Brawler — title-specific styling only.

   The page frame, overlays, level pickers, information rail and every mobile
   hardening rule now come from ../assets/game-shell.css. What remains is this
   title's own furniture: a versus HUD (two health bars flanking a round chip
   and an XP readout) instead of the shared chip row, the lobby panel, and the
   directional pad + six-action cluster its combat needs.
   =========================================================================== */

/* --- versus HUD ---------------------------------------------------------- */

.fight-hud {
  /* A versus HUD reads as a matchup: your bar top-left, the round chip between,
     the opponent's bar top-right. Placement is explicit rather than relying on
     source order, because a fourth child (the XP readout) would otherwise wrap
     into the second row's first column and drop the enemy bar under the player.
     The XP block is player info, not part of the matchup, so it tucks under the
     player's own bar on the second row rather than sitting opposite it. Centring
     it would drop it straight onto the arena's centre billboard. */
  inset: 17px 20px auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 18px;
  align-items: start;
}
.fighter-hud { display: grid; gap: 5px; grid-row: 1; }
.fighter-hud:not(.enemy) { grid-column: 1; }
.round-chip { grid-column: 2; grid-row: 1; }
.fighter-hud.enemy { grid-column: 3; grid-row: 1; text-align: right; }
.xp-hud { grid-column: 1; grid-row: 2; }
.fighter-hud span { font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 2px 6px #000; }
.fighter-hud small { color: #c5eafa; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

.health-track { height: 17px; padding: 2px; background: rgba(2, 5, 11, 0.85); }
.health-track .progress-fill { width: 100%; background: linear-gradient(90deg, #5dffd0, #8efa65, #ffe46b); }
.enemy .health-track .progress-fill { margin-left: auto; background: linear-gradient(90deg, #ff467e, #ff745b, #ffd46a); }

.round-chip { justify-self: center; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 999px; background: rgba(4, 7, 18, 0.85); color: #d8faff; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; box-shadow: 0 5px 22px rgba(0, 0, 0, 0.5); }
/* Compact enough to sit inside the player's column without crowding the bar
   above it: level line, meter, then the two projection figures side by side. */
.xp-hud { display: grid; gap: 3px; justify-items: start; max-width: 300px; text-shadow: 0 2px 6px #000; }
.xp-hud small { font-size: 0.66rem; color: #c5eafa; letter-spacing: 0.04em; }
.xp-hud #xp-line { font-weight: 900; text-transform: uppercase; }
.xp-hud .progress-track { width: 100%; height: 6px; }
.xp-hud #xp-run { grid-column: 1; }
.xp-hud #xp-total { grid-column: 1; opacity: 0.75; }

.stage-callout#combo-pop { top: 22%; color: #fff; text-shadow: 0 3px 0 #59258e, 0 0 24px #bd62ff; }

/* --- lobby + progression rail -------------------------------------------- */

.lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lobby-list { display: grid; gap: 8px; margin-top: 12px; max-height: 260px; overflow: auto; }
.lobby-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 13px; background: #050913; }
.lobby-row small { display: block; color: #8da5ba; }
.lobby-current { margin: 12px 0; padding: 12px; border: 1px solid rgba(103, 231, 255, 0.22); border-radius: 13px; background: #071321; }
.lobby-current code { font-weight: 900; color: #8ef5ff; }

.progress-list { display: grid; gap: 8px; margin-top: 10px; }
.progress-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.progress-row:last-child { border-bottom: 0; }
.progress-row b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #152039; color: #7cecff; font-size: 0.72rem; }
.progress-row span { font-size: 0.83rem; }
.progress-row small { color: #8398ad; }
.progress-row.unlocked b { background: #173a36; color: #79ffc7; }
.progress-row.current { color: #fff; }
.progress-row.current span { font-weight: 900; }

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

/* Movement is a cross-shaped dpad so the thumb can find diagonals by feel,
   and the six combat actions sit in a fixed 3x2 block on the other hand. */
.touch-pad { position: relative; display: block; width: 178px; height: 135px; }
.touch-pad button { position: absolute; width: 58px; height: 52px; border-radius: 15px; font-size: 1.2rem; }
.touch-pad [data-fight="up"] { left: 60px; top: 0; }
.touch-pad [data-fight="left"] { left: 0; top: 56px; }
.touch-pad [data-fight="down"] { left: 60px; top: 75px; }
.touch-pad [data-fight="right"] { left: 120px; top: 56px; }

.touch-cluster { display: grid; grid-template-columns: repeat(3, minmax(58px, 74px)); gap: 7px; align-items: end; }
.touch-cluster button { display: grid; place-items: center; border-radius: 16px; padding: 7px 6px; line-height: 1; }
.touch-cluster b { font-size: 1.1rem; }
.touch-cluster span { margin-top: 4px; font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; }
.touch-cluster .special { background: linear-gradient(145deg, rgba(69, 24, 88, 0.87), rgba(13, 23, 48, 0.93)); border-color: rgba(214, 124, 255, 0.53); }
.touch-cluster .block { background: rgba(8, 27, 34, 0.9); }
.touch-cluster .pause-touch { border-color: rgba(255,255,255,.48); color: #f5f7ff; }

.touch-pad button, .touch-cluster button {
  min-width: 54px; min-height: 48px;
  border: 1px solid rgba(183, 245, 255, 0.33);
  background: rgba(6, 16, 27, 0.85);
  color: #edfdff; font-weight: 900;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(85, 232, 255, 0.07);
}
.touch-pad button.active, .touch-cluster button.active { transform: scale(0.94); background: rgba(22, 76, 97, 0.93); box-shadow: inset 0 0 0 2px rgba(122, 244, 255, 0.53), 0 4px 15px rgba(0, 0, 0, 0.65); }

@media (max-width: 760px) {
  .fight-hud { inset: 9px 10px auto 10px; gap: 8px; }
  .fighter-hud span { font-size: 0.72rem; }
  .fighter-hud small, .xp-hud small { display: none; }
  .health-track { height: 12px; }
  .round-chip { font-size: 0.55rem; padding: 5px 8px; }
  .touch-pad { transform-origin: left bottom; transform: scale(0.84); }
  .touch-cluster { transform-origin: right bottom; transform: scale(0.84); grid-template-columns: repeat(3, 60px); }
}
@media (max-width: 480px) {
  .touch-pad { transform: scale(0.74); }
  .touch-cluster { transform: scale(0.75); }
}