.ft-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgb(0 0 0 / 42%) 100%);
  pointer-events: none;
}

.ft-hud {
  position: fixed;
  top: 2.5vh;
  left: 3vw;
  right: 3vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2vw;
  color: #fff;
  pointer-events: none;
}

.ft-name {
  font-size: 2.8vh;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 0.3vh 0 rgb(0 0 0 / 55%);
}

.ft-life {
  position: relative;
  height: 3.2vh;
  border: 0.3vh solid rgb(255 255 255 / 85%);
  border-radius: 0.6vh;
  background: #141829;
  overflow: hidden;
  box-shadow: 0 0.4vh 1vh rgb(0 0 0 / 45%);
}

.ft-life i {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ft-lag {
  background: #d9394f;
}

.ft-fill {
  background: linear-gradient(#ffe48a, #f4b400 60%, #cf8f00);
}

.ft-low {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-top: 0.7vh;
}

/* La barra se divide en tres cargas: cada habilidad gasta una. */
.ft-meter {
  position: relative;
  flex: 1;
  height: 1.3vh;
  border-radius: 0.3vh;
  background: rgb(255 255 255 / 18%);
  overflow: hidden;
}

.ft-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #4cc9f0;
}

.ft-meter i.full {
  background: #06d6a0;
}

.ft-meter u {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.25vh;
  background: #141829;
}

.ft-meter u:nth-of-type(1) {
  left: 33%;
}

.ft-meter u:nth-of-type(2) {
  left: 66%;
}

.ft-stamina {
  position: relative;
  height: 0.9vh;
  margin-top: 0.5vh;
  border-radius: 0.3vh;
  background: rgb(255 255 255 / 18%);
  overflow: hidden;
}

.ft-stamina i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #8ad66b;
}

.ft-stamina i.tired {
  background: #e0533f;
}

.ft-side.right .ft-stamina i {
  right: 0;
}

.ft-note {
  margin-top: 0.4vh;
  font-size: 2.6vh;
  font-weight: 600;
  color: #9fe8ff;
  text-shadow: 0 0.3vh 0 rgb(0 0 0 / 60%);
}

.ft-pips {
  display: flex;
  gap: 0.4vw;
}

.ft-pips b {
  width: 1.7vh;
  height: 1.7vh;
  border: 0.25vh solid #fff;
  border-radius: 50%;
}

.ft-pips b.won {
  background: #ffd166;
}

.ft-combo {
  margin-top: 0.8vh;
  font-size: 3.2vh;
  font-weight: 700;
  color: #ffd166;
  text-shadow: 0 0.3vh 0 rgb(0 0 0 / 60%);
}

.ft-side.left .ft-life i {
  right: 0;
}

.ft-side.right .ft-life i {
  left: 0;
}

.ft-side.right {
  text-align: right;
}

.ft-side.right .ft-low {
  flex-direction: row-reverse;
}

.ft-side.right .ft-meter i {
  right: 0;
}

.ft-timer {
  font-size: 6.4vh;
  font-weight: 700;
  line-height: 1.1;
  min-width: 2.2ch;
  text-align: center;
  text-shadow: 0 0.4vh 0 rgb(0 0 0 / 55%);
}

.ft-select {
  position: fixed;
  left: 0;
  right: 0;
  top: 7vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 6vw;
  color: #fff;
  pointer-events: none;
}

.ft-pick.right {
  text-align: right;
}

.ft-who {
  font-size: 3vh;
  font-weight: 600;
  text-shadow: 0 0.3vh 0 rgb(0 0 0 / 60%);
}

.ft-char {
  font-size: 8vh;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 0.5vh 0 rgb(0 0 0 / 60%);
}

.ft-style {
  font-size: 2.6vh;
  color: #dfe6f3;
}

.ft-vs {
  font-size: 3.6vh;
  font-weight: 600;
  color: #dfe6f3;
}

#hud .ft-hud[hidden],
#hud .ft-select[hidden] {
  display: none;
}