.scene-fight {
  display: block;
  padding: 0;
  --gold: #f2c14e;
  --gold-deep: #b8862a;
  --panel: rgba(9, 15, 40, 0.86);
  --cream: #f4e7c8;
  cursor: default;
}

.scene-fight .arena {
  position: absolute;
  inset: var(--bleed-inset);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #243b8a 0%, #0f1c4a 55%, #0b1430 100%);
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  will-change: transform;
}

.scene-fight .arena::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 10, 30, 0.55) 0%, rgba(6, 10, 30, 0) 16%),
    linear-gradient(to top, rgba(6, 10, 30, 0.7) 0%, rgba(6, 10, 30, 0) 24%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 55%, rgba(4, 6, 20, 0.45) 100%);
}

.scene-fight .fight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fight-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fight-hud > * { position: absolute; }
/* On screens taller than the stage the HUD rides to the top edge and the controls to the thumbs. */
.fight-hud .name, .fight-hud .bar-box, .fight-hud .clock, .fight-hud .promise-meter { translate: 0 calc(-1 * var(--lift)); }
.fight-hud .meter, .fight-hud .act { translate: 0 var(--drop); }

/* Names and health */
/* A block, not a flexbox, so a name that still overflows ends in an ellipsis instead of losing its start. */
.fight-hud .name {
  display: block;
  padding-top: max(0px, calc(var(--u) * 40 - 1em));
  color: var(--gold);
  font-size: calc(var(--u) * 30);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) #000, 0 0 calc(var(--u) * 10) rgba(0, 0, 0, 0.6);
}
.fight-hud .name.long { font-size: calc(var(--u) * 19); letter-spacing: 0; }
.fight-hud .name-opponent { text-align: right; }
[data-layout="landscape"] .fight-hud .name { font-size: calc(var(--u) * 32); padding-top: max(0px, calc(var(--u) * 36 - 1em)); }
[data-layout="landscape"] .fight-hud .name.long { font-size: calc(var(--u) * 28); }

.fight-hud .bar {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #0a0f26;
  border: calc(var(--u) * 3) solid var(--gold);
  box-shadow: 0 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.6), 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.fight-hud .bar-fill, .fight-hud .bar-ghost {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  will-change: transform;
}
.fight-hud .bar-opponent .bar-fill, .fight-hud .bar-opponent .bar-ghost { transform-origin: right center; }
.fight-hud .bar-ghost { background: #fff1c2; }
.fight-hud .bar-player .bar-fill { background: linear-gradient(to right, #139c8e, #3ee08a); }
.fight-hud .bar-opponent .bar-fill { background: linear-gradient(to left, #e8352b, #ff6a3d); }
.fight-hud .bar.low .bar-fill { animation: bar-low 0.6s ease-in-out infinite alternate; }
.fight-hud .bar-shine {
  position: absolute;
  left: 4%; right: 4%; top: 12%;
  height: 30%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.fight-hud .bar.hurt { animation: bar-hurt 0.25s ease-out; }

@keyframes bar-low { from { filter: brightness(1); } to { filter: brightness(1.5); } }
@keyframes bar-hurt {
  0% { transform: translateX(calc(var(--u) * -5)); }
  35% { transform: translateX(calc(var(--u) * 5)); }
  100% { transform: none; }
}

/* Round clock */
.fight-hud .clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--u) * 18);
  background: var(--panel);
  border: calc(var(--u) * 3) solid var(--gold);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 0, 0, 0.55);
}
.fight-hud .clock-round { color: var(--gold); font-size: calc(var(--u) * 20); }
.fight-hud .clock-time { color: #fff; font-size: calc(var(--u) * 46); line-height: 1.05; font-variant-numeric: tabular-nums; }
[data-layout="landscape"] .fight-hud .clock-time { font-size: calc(var(--u) * 36); }
[data-layout="landscape"] .fight-hud .clock-round { font-size: calc(var(--u) * 17); }
.fight-hud .clock.hurry .clock-time { color: #ff6a3d; animation: pulse 0.5s ease-in-out infinite alternate; }

/* Promise pips, one set per fighter, under its health bar */
.fight-hud .promise-meter {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}
.fight-hud .promise-opponent { flex-direction: row-reverse; }
.fight-hud .promise-icon { width: calc(var(--u) * 38); height: calc(var(--u) * 38); flex: none; filter: grayscale(0.7) brightness(0.8); transition: filter 0.2s; }
[data-layout="landscape"] .fight-hud .promise-icon { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
[data-layout="landscape"] .fight-hud .pip { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.fight-hud .promise-icon svg, .fight-hud .promise-icon img, .fight-hud .act-icon svg, .fight-hud .act-icon img { width: 100%; height: 100%; display: block; }
.fight-hud .pip {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border-radius: 50%;
  background: rgba(10, 15, 38, 0.85);
  border: calc(var(--u) * 3) solid var(--gold-deep);
  transition: background 0.15s, transform 0.15s;
}
.fight-hud .pip.on { background: var(--gold); border-color: #fff4c8; transform: scale(1.15); box-shadow: 0 0 calc(var(--u) * 12) var(--gold); }
.fight-hud .promise-meter.ready .promise-icon { filter: none; animation: pulse 0.45s ease-in-out infinite alternate; }

/* The player's timing meter */
.fight-hud .meter { display: flex; align-items: center; }
.fight-hud .track {
  position: relative;
  width: 100%;
  height: 58%;
  border-radius: 999px;
  background: linear-gradient(to right, #2a0c16, #16163a 22%, #16163a 78%, #2a0c16);
  border: calc(var(--u) * 3) solid var(--gold);
  box-shadow: 0 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.6), 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0, 0, 0, 0.5);
}
.fight-hud .track .zone {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(to right, rgba(46, 204, 113, 0.25), #2ecc71 30%, #f7d046 50%, #2ecc71 70%, rgba(46, 204, 113, 0.25));
}
.fight-hud .track .sweet {
  position: absolute;
  top: -18%; bottom: -18%;
  background: #fff4c8;
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 0 calc(var(--u) * 10) #ffd35a;
}
.fight-hud .needle-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.fight-hud .needle {
  position: absolute;
  left: calc(var(--u) * -5);
  top: -45%;
  bottom: -45%;
  width: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 5);
  background: #fff;
  box-shadow: 0 0 calc(var(--u) * 12) #fff, 0 0 calc(var(--u) * 4) #ffd35a;
}
.fight-hud .meter[data-hot="perfect"] .needle { background: #ffd35a; box-shadow: 0 0 calc(var(--u) * 18) #ffd35a; }
.fight-hud .meter .needle-wrap { transition: opacity 0.12s; }
.fight-hud .meter.busy .needle-wrap { opacity: 0.35; }
.fight-hud .meter.open .track { border-color: #ff9f2e; box-shadow: 0 0 calc(var(--u) * 20) #ff9f2e; }
.fight-hud .meter.charged .track { border-color: #fff4c8; box-shadow: 0 0 calc(var(--u) * 22) var(--gold); }
.fight-hud .meter.thrown .track { animation: thrown 0.22s ease-out; }

@keyframes thrown {
  0% { transform: scaleY(1.45); filter: brightness(1.8); }
  100% { transform: none; filter: none; }
}

/* Buttons */
.fight-hud .act {
  pointer-events: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1d2a5e, #0a1030 70%);
  border: calc(var(--u) * 5) solid var(--gold);
  box-shadow: 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.55), 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, 0.55);
  color: var(--cream);
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
}
.fight-hud .act:active { transform: none; }
.fight-hud .act-icon { position: absolute; inset: 20%; }
.fight-hud .act-cool {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 24, 0.55);
  transform-origin: bottom center;
  transform: scaleY(var(--cool, 0));
}
.fight-hud .act.press { animation: press 0.16s ease-out; }
.fight-hud .act-punch.charged { border-color: #fff4c8; box-shadow: 0 0 calc(var(--u) * 24) var(--gold), 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.55); animation: pulse 0.45s ease-in-out infinite alternate; }
.fight-hud .act-dodge.warn { border-color: #ff5a3d; animation: warn 0.18s ease-out forwards; }
.fight-hud.locked .act { filter: grayscale(0.8) brightness(0.6); }

@keyframes press { 0% { transform: scale(0.88); } 100% { transform: scale(1); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes warn {
  0% { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.55), 0 0 calc(var(--u) * 6) #ff5a3d; }
  100% { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.55), 0 0 calc(var(--u) * 36) #ff5a3d; transform: scale(1.08); }
}

.fight-hud .hint {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(var(--u) * 24);
  border-radius: calc(var(--u) * 20);
  background: var(--panel);
  border: calc(var(--u) * 2) solid var(--gold-deep);
  color: var(--cream);
  font-size: calc(var(--u) * 26);
  font-weight: 700;
  text-transform: none;
  line-height: 1.25;
  opacity: 0;
  transition: opacity 0.3s;
}
.fight-hud .hint.show { opacity: 1; }

/* Floaters and banners */
.fight-hud .floaters { inset: 0; }
.fight-hud .floater {
  position: absolute;
  display: none;
  transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 44);
  font-style: italic;
  color: #fff;
  white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * 2) #1a1405;
  text-shadow: 0 calc(var(--u) * 4) 0 #1a1405;
}
.fight-hud .floater.show { display: block; animation: float-up 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.fight-hud .floater.perfect { color: var(--gold); font-size: calc(var(--u) * 60); }
.fight-hud .floater.promise { color: #ffd35a; font-size: calc(var(--u) * 76); }
.fight-hud .floater.opening { color: #ffae3d; font-size: calc(var(--u) * 54); }
.fight-hud .floater.taken { color: #ff5a4d; font-size: calc(var(--u) * 50); }
.fight-hud .floater.dodge { color: #6ff0ff; font-size: calc(var(--u) * 46); }
.fight-hud .floater.miss { color: #c9cbe0; font-size: calc(var(--u) * 34); }
.fight-hud .floater.info { color: #ffe7a0; font-size: calc(var(--u) * 34); }

@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  30% { transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-70% - var(--u) * 90)) scale(1); }
}

.fight-hud .banner {
  display: flex;
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fight-hud .banner.show { visibility: visible; animation: banner var(--ms, 900ms) ease-out forwards; }
.fight-hud .banner-text {
  font-size: calc(var(--u) * 92);
  line-height: 1;
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * 3) #1a1405;
  text-shadow: 0 calc(var(--u) * 6) 0 #1a1405, 0 0 calc(var(--u) * 30) rgba(0, 0, 0, 0.5);
}
.fight-hud .banner.round .banner-text { font-size: calc(var(--u) * 76); color: var(--cream); }
.fight-hud .banner.count .banner-text { font-size: calc(var(--u) * 150); color: var(--gold); }
.fight-hud .banner.go .banner-text { font-size: calc(var(--u) * 120); color: var(--gold); }
.fight-hud .banner.perfect .banner-text { color: var(--gold); }
.fight-hud .banner.promise .banner-text { color: #ffd35a; font-size: calc(var(--u) * 70); }
.fight-hud .banner.ko .banner-text { font-size: calc(var(--u) * 170); color: #ff4a3d; }
.fight-hud .banner.win .banner-text { color: var(--gold); }
.fight-hud .banner.lose .banner-text { color: #c9cbe0; }

@keyframes banner {
  0% { opacity: 0; transform: scale(1.8); }
  12% { opacity: 1; transform: scale(0.95); }
  20% { transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

.scene-fight .flash {
  position: absolute;
  inset: var(--bleed-inset);
  pointer-events: none;
  opacity: 0;
}
.scene-fight .flash.show.taken {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 40, 0) 45%, rgba(255, 40, 40, 0.45) 100%);
  animation: flash 0.35s ease-out forwards;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* Pause veil: information only, never a control. */
.scene-fight .veil {
  position: absolute;
  inset: var(--bleed-inset);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 24, 0.62);
  pointer-events: none;
}
.scene-fight.is-paused .veil { display: flex; }
.scene-fight .veil-text {
  color: var(--cream);
  font-size: calc(var(--u) * 64);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.scene-fight.is-paused * { animation-play-state: paused !important; }

/* Campaign fighter: level, stats and perks under the player's own HUD */
.fight-hud .profile, .fight-hud .perks { translate: 0 calc(-1 * var(--lift)); }
.fight-hud .profile {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  color: var(--cream);
  font-size: calc(var(--u) * 22);
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) #000;
}
.fight-hud .profile-level {
  padding: calc(var(--u) * 3) calc(var(--u) * 12);
  border-radius: 999px;
  background: var(--gold);
  color: #1a1405;
  text-shadow: none;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, 0.5);
}
.fight-hud .profile-stat { display: flex; align-items: center; gap: calc(var(--u) * 4); font-variant-numeric: tabular-nums; }
.fight-hud .profile-icon { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: none; }
.fight-hud .profile-icon svg { width: 100%; height: 100%; display: block; }
.fight-hud .perks {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(var(--u) * 6);
}
.fight-hud .perk-chip {
  padding: calc(var(--u) * 3) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 8);
  background: rgba(9, 15, 40, 0.78);
  border: calc(var(--u) * 2) solid var(--gold-deep);
  color: var(--gold);
  font-size: calc(var(--u) * 15);
  line-height: 1.2;
  white-space: nowrap;
}
[data-layout="landscape"] .fight-hud .profile { font-size: calc(var(--u) * 20); }

/* Tutorial card: one lesson at a time, above the controls it points at; never takes a tap */
.fight-hud .tut {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 14) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 22);
  background: rgba(9, 15, 40, 0.9);
  border: calc(var(--u) * 3) solid var(--gold);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, 0.55);
  color: var(--cream);
  text-transform: none;
  translate: 0 var(--drop);
  opacity: 0;
  visibility: hidden;
}
.fight-hud .tut.show { visibility: visible; animation: tut-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.fight-hud .tut-count {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  background: var(--gold);
  color: #1a1405;
  font-size: calc(var(--u) * 24);
  font-weight: 900;
}
.fight-hud .tut-text { font-size: calc(var(--u) * 30); font-weight: 800; line-height: 1.2; }
.fight-hud .tut.praise { border-color: #3ee08a; }
.fight-hud .tut.praise .tut-count { background: #3ee08a; font-size: calc(var(--u) * 34); }
.fight-hud .tut.praise .tut-text { color: #3ee08a; font-size: calc(var(--u) * 44); font-style: italic; text-transform: uppercase; }
[data-layout="landscape"] .fight-hud .tut { gap: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 16); }
[data-layout="landscape"] .fight-hud .tut-count { width: calc(var(--u) * 50); height: calc(var(--u) * 50); font-size: calc(var(--u) * 20); }
[data-layout="landscape"] .fight-hud .tut-text { font-size: calc(var(--u) * 22); }
[data-layout="landscape"] .fight-hud .tut.praise .tut-text { font-size: calc(var(--u) * 34); }

@keyframes tut-in {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 30)) scale(0.92); }
  100% { opacity: 1; transform: none; }
}

/* What the current lesson is about glows; an outline never moves the layout. */
.fight-hud .meter.tut-target, .fight-hud .promise-meter.tut-target {
  border-radius: calc(var(--u) * 20);
  outline: calc(var(--u) * 4) solid #6ff0ff;
  outline-offset: calc(var(--u) * 4);
  animation: tut-ring 0.7s ease-in-out infinite alternate;
}
.fight-hud .act.tut-target { outline: calc(var(--u) * 4) solid #6ff0ff; outline-offset: calc(var(--u) * 6); }
/* The lesson that teaches reading his wind-up rings the opponent himself. */
.fight-hud .spot { display: none; }
.fight-hud .spot.tut-target {
  display: block;
  border-radius: calc(var(--u) * 48);
  outline: calc(var(--u) * 4) dashed #6ff0ff;
  outline-offset: 0;
  box-shadow: inset 0 0 calc(var(--u) * 40) rgba(111, 240, 255, 0.18);
  animation: tut-ring 0.7s ease-in-out infinite alternate;
}
@keyframes tut-ring {
  from { outline-color: rgba(111, 240, 255, 0.35); }
  to { outline-color: #6ff0ff; }
}

/* Speech bubble over a fighter's head */
.fight-hud .quip {
  position: absolute;
  display: none;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: calc(var(--u) * 320);
  padding: calc(var(--u) * 14) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 26);
  background: #fffaf0;
  border: calc(var(--u) * 4) solid #1a1405;
  color: #1a1405;
  font-size: calc(var(--u) * 28);
  font-style: italic;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  box-shadow: 0 calc(var(--u) * 8) 0 rgba(26, 20, 5, 0.45);
}
.fight-hud .quip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -17);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  background: #fffaf0;
  border-right: calc(var(--u) * 4) solid #1a1405;
  border-bottom: calc(var(--u) * 4) solid #1a1405;
  transform: translateX(-50%) rotate(45deg);
}
.fight-hud .quip.show { display: block; animation: quip var(--ms, 1600ms) ease-out forwards; }
@keyframes quip {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(0.4); }
  10% { opacity: 1; transform: translate(-50%, -104%) scale(1.06); }
  16% { transform: translate(-50%, -100%) scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -100%) scale(1); }
}

.fight-hud .quip.side { transform: translate(-100%, -50%); }
.fight-hud .quip.side::after { left: auto; right: calc(var(--u) * -17); bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
.fight-hud .quip.side.show { animation-name: quip-side; }
@keyframes quip-side {
  0% { opacity: 0; transform: translate(-80%, -50%) scale(0.4); }
  10% { opacity: 1; transform: translate(-104%, -50%) scale(1.06); }
  16% { transform: translate(-100%, -50%) scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(-100%, -50%) scale(1); }
}

/* The prologue's ending is staged: the controls sit it out. */
.scene-fight.scripted .fight-hud .meter { opacity: 0.45; transition: opacity 0.3s; }