:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #091018;
  color: #eaf8ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  position: relative;
}

#lobbyBackdrop {
  background:
    radial-gradient(circle at 50% 72%, rgba(125, 196, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(12, 24, 36, 0.12) 0%, rgba(7, 15, 24, 0.62) 100%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 180ms ease;
  z-index: 1;
}

#lobbyBackdrop.visible {
  opacity: 1;
}

.backdropGlow,
.backdropRunway,
.backdropGrid,
.backdropHorizon,
.backdropSelectedFighter,
.backdropJet {
  position: absolute;
}

.backdropGlow {
  background:
    radial-gradient(circle at center, rgba(135, 206, 255, 0.24), transparent 42%),
    radial-gradient(circle at center, rgba(255, 182, 96, 0.1), transparent 58%);
  inset: 0;
}

.backdropRunway {
  background:
    linear-gradient(180deg, rgba(145, 237, 255, 0.18), rgba(145, 237, 255, 0)),
    linear-gradient(90deg, transparent 0%, rgba(190, 240, 255, 0.18) 48%, rgba(190, 240, 255, 0.34) 50%, rgba(190, 240, 255, 0.18) 52%, transparent 100%);
  bottom: 0;
  clip-path: polygon(34% 0%, 66% 0%, 100% 100%, 0% 100%);
  height: 42vh;
  left: 22%;
  opacity: 0.72;
  width: 56%;
}

.backdropGrid {
  background:
    repeating-linear-gradient(90deg, rgba(132, 202, 255, 0.08) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(180deg, rgba(132, 202, 255, 0.08) 0 1px, transparent 1px 42px);
  bottom: 0;
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
  height: 28vh;
  left: 20%;
  opacity: 0.45;
  width: 60%;
}

.backdropHorizon {
  background: linear-gradient(90deg, transparent, rgba(151, 215, 255, 0.28), transparent);
  height: 2px;
  left: 12%;
  opacity: 0.7;
  right: 12%;
  top: 44%;
}

#backdropSelectedFighter {
  --fighter-accent: #54c9ff;
  bottom: 17vh;
  height: 220px;
  left: 50%;
  opacity: 0.92;
  transform: translateX(-50%);
  width: min(42vw, 430px);
}

.selectedFighterShadow {
  background: radial-gradient(circle at center, rgba(110, 195, 255, 0.32), transparent 68%);
  bottom: 8px;
  filter: blur(10px);
  height: 56px;
  left: 18%;
  opacity: 0.72;
  position: absolute;
  right: 18%;
}

.selectedFighterBody {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fighter-accent) 42%, white), color-mix(in srgb, var(--fighter-accent) 78%, #142028)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  border: 1px solid color-mix(in srgb, var(--fighter-accent) 55%, white);
  box-shadow:
    0 0 34px color-mix(in srgb, var(--fighter-accent) 38%, transparent),
    inset 0 0 24px rgba(255, 255, 255, 0.16);
  clip-path: polygon(50% 0%, 59% 10%, 66% 28%, 83% 30%, 100% 52%, 72% 60%, 67% 100%, 50% 73%, 33% 100%, 28% 60%, 0% 52%, 17% 30%, 34% 28%, 41% 10%);
  height: 170px;
  left: 50%;
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  width: min(26vw, 250px);
}

.selectedFighterCanopy {
  background: linear-gradient(180deg, rgba(27, 51, 73, 0.96), rgba(85, 157, 214, 0.68));
  border: 1px solid rgba(177, 228, 255, 0.38);
  border-radius: 38% 38% 50% 50%;
  height: 28px;
  left: 50%;
  position: absolute;
  top: 28px;
  transform: translateX(-50%);
  width: 42px;
}

.selectedFighterNose {
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.92), color-mix(in srgb, var(--fighter-accent) 56%, white));
  border-radius: 50% 50% 28% 28%;
  height: 30px;
  left: 50%;
  position: absolute;
  top: -12px;
  transform: translateX(-50%);
  width: 22px;
}

.selectedFighterWing,
.selectedFighterTail {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fighter-accent) 48%, white), color-mix(in srgb, var(--fighter-accent) 70%, #1a2830));
  border: 1px solid color-mix(in srgb, var(--fighter-accent) 40%, white);
  position: absolute;
}

.selectedFighterWing {
  height: 50px;
  top: 68px;
  width: 108px;
}

.selectedFighterWing.left {
  clip-path: polygon(100% 8%, 6% 50%, 100% 92%);
  left: -52px;
}

.selectedFighterWing.right {
  clip-path: polygon(0% 8%, 94% 50%, 0% 92%);
  right: -52px;
}

.selectedFighterTail {
  height: 38px;
  top: 118px;
  width: 42px;
}

.selectedFighterTail.left {
  clip-path: polygon(100% 0%, 18% 100%, 100% 100%);
  left: 36px;
}

.selectedFighterTail.right {
  clip-path: polygon(0% 0%, 0% 100%, 82% 100%);
  right: 36px;
}

.selectedFighterLabel {
  bottom: 0;
  color: #eefaff;
  font-size: 15px;
  font-weight: 800;
  left: 50%;
  letter-spacing: 0;
  position: absolute;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  transform: translateX(-50%);
  white-space: nowrap;
}

.backdropJet {
  background: rgba(190, 220, 240, 0.12);
  border: 1px solid rgba(190, 220, 240, 0.08);
  clip-path: polygon(50% 0%, 62% 20%, 74% 20%, 100% 50%, 72% 58%, 66% 100%, 50% 72%, 34% 100%, 28% 58%, 0% 50%, 26% 20%, 38% 20%);
  filter: blur(0.4px);
  height: 110px;
  opacity: 0.4;
  top: 58%;
  width: 160px;
}

.backdropJet.left {
  left: 12%;
  transform: rotate(-9deg);
}

.backdropJet.right {
  right: 12%;
  transform: rotate(9deg) scaleX(-1);
}

@media (max-width: 900px) {
  #backdropSelectedFighter {
    bottom: 14vh;
    height: 190px;
    width: min(62vw, 310px);
  }

  .selectedFighterBody {
    height: 142px;
    width: min(42vw, 190px);
  }

  .selectedFighterWing {
    height: 40px;
    top: 58px;
    width: 78px;
  }

  .selectedFighterWing.left {
    left: -66px;
  }

  .selectedFighterWing.right {
    right: -66px;
  }

  .selectedFighterTail {
    top: 100px;
  }
}

button {
  border: 1px solid rgba(160, 235, 255, 0.55);
  border-radius: 6px;
  background: rgba(20, 70, 94, 0.78);
  color: #f2fbff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px 16px;
}

button:hover {
  background: rgba(36, 102, 132, 0.88);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 0;
}

#hud {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 2;
}

#metrics,
#lockPanel,
#radarPanel {
  background: linear-gradient(90deg, rgba(4, 14, 22, 0.58), rgba(4, 14, 22, 0));
  color: #bff6ff;
  left: 22px;
  letter-spacing: 0;
  position: absolute;
  text-shadow: 0 2px 8px #000;
  top: 18px;
  width: 230px;
}

#metrics div,
#lockPanel div {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px 72px auto;
  min-height: 24px;
}

#metrics span {
  color: #74c9dd;
  font-size: 13px;
  font-weight: 800;
}

#metrics strong {
  color: #effcff;
  font-size: 20px;
  line-height: 1;
}

#metrics small {
  color: #8fddeb;
  font-size: 12px;
  font-weight: 700;
}

#fpsRow strong {
  color: #7dffb0;
}

#fpsRow.fpsMid strong {
  color: #ffe16f;
}

#fpsRow.fpsLow strong {
  color: #ff6b6b;
}

#lockPanel {
  color: #ffe16f;
  font-size: 17px;
  font-weight: 800;
  top: 176px;
}

#gunWeapon {
  color: #ffd7a8;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

#gunWeapon[data-kind="spike"] {
  color: #e8d6b0;
}

#gunWeapon[data-kind="laser"] {
  color: #ff6b84;
}

#gunWeapon[data-kind="plasma"] {
  color: #d07cff;
}

#targetHpRow {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto auto 1fr;
  margin-top: 8px;
}

#targetHpRow span {
  color: #ff8b7a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

#targetHp {
  color: #ffe9e4;
  font-size: 14px;
}

#targetHpTrack {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 90, 70, 0.35);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

#targetHpFill {
  background: linear-gradient(90deg, #ff2d1f, #ff7a3a);
  height: 100%;
  width: 100%;
}

#radarPanel {
  background: linear-gradient(270deg, rgba(4, 14, 22, 0.68), rgba(4, 14, 22, 0.08));
  left: auto;
  padding: 10px 0 0 0;
  right: 22px;
  top: 18px;
  width: 182px;
}

#radarScope {
  background: radial-gradient(circle at center, rgba(53, 112, 88, 0.18), rgba(4, 14, 22, 0.88));
  border: 1px solid rgba(150, 255, 196, 0.24);
  border-radius: 50%;
  height: 144px;
  margin-left: auto;
  position: relative;
  width: 144px;
}

.radarRing,
.radarAxis,
#radarPlayer,
#radarEnemy {
  position: absolute;
}

.radarRing {
  border: 1px solid rgba(134, 232, 176, 0.22);
  border-radius: 50%;
  inset: 0;
}

.radarRing.inner {
  inset: 25%;
}

.radarAxis.horizontal {
  background: rgba(134, 232, 176, 0.22);
  height: 1px;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.radarAxis.vertical {
  background: rgba(134, 232, 176, 0.22);
  bottom: 12px;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 1px;
}

#radarPlayer,
#radarEnemy {
  height: 8px;
  transform: translate(-50%, -50%);
  width: 8px;
}

.radarHeading {
  background: currentColor;
  border-radius: 999px;
  height: 14px;
  left: 50%;
  opacity: 0.95;
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  width: 2px;
}

#radarPlayer {
  background: #9af4be;
  clip-path: polygon(50% 0%, 100% 100%, 50% 78%, 0% 100%);
  color: #9af4be;
  box-shadow: 0 0 10px rgba(154, 244, 190, 0.7);
  left: 50%;
  top: 50%;
}

#radarEnemy {
  background: #ff7b6b;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  color: #ff7b6b;
  box-shadow: 0 0 10px rgba(255, 123, 107, 0.7);
  display: none;
  left: 50%;
  top: 50%;
}

#radarEnemy.above {
  background: #ffd36c;
  color: #ffd36c;
  box-shadow: 0 0 10px rgba(255, 211, 108, 0.7);
}

#radarEnemy.below {
  background: #ff8f6b;
  color: #ff8f6b;
  box-shadow: 0 0 10px rgba(255, 143, 107, 0.7);
}

#radarLabel,
#radarLegend,
#radarInfo,
#cameraLabel {
  color: #aef4c7;
  font-size: 13px;
  font-weight: 800;
  margin-top: 8px;
  text-align: right;
}

#radarLegend {
  color: #c9f7d9;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 6px;
  text-align: right;
}

#radarInfo {
  color: #e6fbef;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 6px;
  min-height: 30px;
}

#cameraLabel {
  color: #8fddeb;
  margin-top: 4px;
}

#targetRange {
  color: #ffad82;
  font-size: 14px;
}

#crosshair {
  border: 2px solid rgba(186, 255, 234, 0.84);
  border-radius: 50%;
  height: 34px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
}

#crosshair::before,
#crosshair::after {
  background: rgba(186, 255, 234, 0.82);
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

#crosshair::before {
  height: 2px;
  width: 58px;
}

#crosshair::after {
  height: 58px;
  width: 2px;
}

#targetMarker {
  border: 2px solid #ff3a2a;
  box-shadow: 0 0 10px rgba(255, 45, 30, 0.7), inset 0 0 8px rgba(255, 40, 20, 0.16);
  height: 56px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 56px;
}

#targetMarker.hit {
  border-color: #fff4f0;
  box-shadow: 0 0 22px rgba(255, 220, 180, 0.95), inset 0 0 16px rgba(255, 80, 40, 0.45);
}

#warning {
  color: #ff4f39;
  font-size: 34px;
  font-weight: 900;
  left: 50%;
  position: absolute;
  text-shadow: 0 2px 8px #000;
  top: 18%;
  transform: translateX(-50%);
}

#startPanel,
#pausePanel,
#endPanel {
  background: rgba(5, 14, 22, 0.78);
  border: 1px solid rgba(150, 220, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
  left: 50%;
  max-width: min(1200px, calc(100vw - 24px));
  padding: 24px;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

#startPanel {
  max-height: calc(100vh - 24px);
  overflow: auto;
  width: min(1200px, calc(100vw - 24px));
}

#startPanel h1,
#pausePanel h2,
#endPanel h2 {
  font-size: 36px;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 12px;
}

#startPanel p,
#pausePanel p,
#endPanel p {
  color: #c9dce6;
  line-height: 1.45;
  margin: 0 0 18px;
}

.lobbyTop {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.lobbyStart {
  align-items: stretch;
  display: grid;
  gap: 12px;
  min-width: 260px;
}

#pelitStatus {
  color: #c9ecff;
  font-size: 13px;
  margin: 0;
  min-height: 1em;
}

.modeBox {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(160, 235, 255, 0.14);
  border-radius: 6px;
  padding: 10px 12px;
}

.modeBox span {
  color: #8edfff;
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.modeToggle {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.modeToggle button,
.multiRow button {
  background: rgba(18, 36, 48, 0.9);
  border: 1px solid rgba(150, 220, 255, 0.2);
  border-radius: 6px;
  color: #eaf8ff;
  cursor: pointer;
  font-weight: 800;
  padding: 8px 10px;
}

.modeToggle button.active {
  background: #1d6d8a;
  border-color: #8edfff;
}

#multiPanel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#multiPanel[hidden] {
  display: none;
}

#multiHint,
#multiStatus {
  color: #c9dce6;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.multiRow {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

#joinCodeInput {
  background: rgba(4, 12, 18, 0.7);
  border: 1px solid rgba(150, 220, 255, 0.24);
  border-radius: 6px;
  color: #eaf8ff;
  font-size: 16px;
  letter-spacing: 0.12em;
  padding: 8px 10px;
  text-transform: uppercase;
}

#roomCodeLabel {
  color: #fff4c8;
  font-size: 20px;
  letter-spacing: 0.14em;
  min-width: 4.5ch;
  text-align: right;
}

.lobbyGemBox {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(160, 235, 255, 0.14);
  border-radius: 6px;
  padding: 10px 12px;
}

.lobbyGemBox span {
  color: #8edfff;
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.lobbyGemBox strong {
  color: #f5fbff;
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-top: 4px;
}

.lobbyGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

#startPanel dl,
#controlsPanel dl {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 0;
}

#startPanel dl div,
#controlsPanel dl div {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(128px, 0.42fr) 1fr;
}

#startPanel dt,
#controlsPanel dt {
  color: #8edfff;
  font-weight: 800;
}

#startPanel dd,
#controlsPanel dd {
  color: #d7ecf5;
  margin: 0;
}

#pausePanel,
#endPanel {
  text-align: center;
}

@media (max-width: 640px) {
  #metrics,
  #lockPanel {
    left: 12px;
    width: 205px;
  }

  #radarPanel {
    right: 12px;
    top: 12px;
    width: 150px;
  }

  #radarScope {
    height: 116px;
    width: 116px;
  }

  #metrics strong {
    font-size: 17px;
  }

  .lobbyTop {
    flex-direction: column;
  }

  .lobbyStart {
    min-width: 0;
    width: 100%;
  }

  .lobbyGrid,
  #startPanel dl,
  #controlsPanel dl {
    grid-template-columns: 1fr;
  }
}

#upgradePanel,
#fighterPanel,
#shopPanel,
#controlsPanel {
  border-block: 1px solid rgba(150, 220, 255, 0.18);
  padding: 14px 0;
}

.upgradeHeader {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.upgradeHeader span {
  color: #8edfff;
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.upgradeHeader strong {
  color: #f5fbff;
  display: block;
  font-size: 30px;
  line-height: 1;
}

#upgradeButton {
  min-width: 190px;
}

#upgradeHint {
  color: #d7ecf5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 10px;
}

#fighterHint {
  color: #d7ecf5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 10px;
}

#shopHint {
  color: #d7ecf5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 10px;
}

#upgradeGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.upgradeStat.powerSummary {
  grid-column: 1 / -1;
}

#fighterGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

#shopGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.upgradeStat {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(160, 235, 255, 0.14);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 8px 10px;
}

.upgradeStat.canBuy {
  background: rgba(16, 64, 38, 0.42);
  border-color: rgba(110, 255, 170, 0.55);
  box-shadow: 0 0 18px rgba(70, 220, 130, 0.16);
}

.upgradeStat.cantAfford {
  background: rgba(62, 28, 10, 0.4);
  border-color: rgba(255, 176, 88, 0.45);
}

.upgradeStat.maxed {
  opacity: 0.62;
}

.upgradeStatTop {
  align-items: start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.upgradeStatus {
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 3px 8px;
  white-space: nowrap;
}

.upgradeStat.canBuy .upgradeStatus {
  background: rgba(70, 220, 130, 0.22);
  color: #b8ffd4;
}

.upgradeStat.cantAfford .upgradeStatus {
  background: rgba(255, 170, 70, 0.2);
  color: #ffd19a;
}

.upgradeStat.maxed .upgradeStatus {
  background: rgba(180, 200, 210, 0.12);
  color: #c5d6de;
}

.upgradeTrack {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

.upgradeFill {
  background: linear-gradient(90deg, #7ee0ff, #9dffc2);
  height: 100%;
}

.upgradeStat.cantAfford .upgradeFill {
  background: linear-gradient(90deg, #ffb56a, #ffd27a);
}

.upgradeStat.canBuy button {
  background: rgba(22, 118, 64, 0.92);
  border-color: rgba(140, 255, 190, 0.7);
}

.upgradeStat.canBuy button:hover {
  background: rgba(30, 148, 80, 0.96);
}

.upgradeStat.cantAfford button {
  background: rgba(92, 42, 12, 0.78);
  border-color: rgba(255, 176, 88, 0.45);
  color: #ffe3c2;
}

.upgradeStat button {
  width: 100%;
}

.upgradeStat span {
  color: #91dff0;
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.upgradeStat strong {
  color: #f4fbff;
  display: block;
  font-size: 15px;
  line-height: 1.25;
  margin-top: 3px;
}

.upgradeDetail {
  color: #d5eef6;
  font-size: 12px;
  font-weight: 700;
}

.fighterCard {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(160, 235, 255, 0.14);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.fighterCardHeader {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.fighterCardHeader strong {
  color: #f4fbff;
  display: block;
  font-size: 16px;
  line-height: 1.1;
}

.fighterCardHeader span {
  color: #91dff0;
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.fighterChip {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  white-space: nowrap;
}

.fighterChip.owned {
  background: rgba(54, 188, 118, 0.18);
  color: #9ff0bd;
}

.fighterChip.locked {
  background: rgba(255, 197, 92, 0.14);
  color: #ffd08e;
}

.fighterCampaign {
  background: rgba(18, 70, 92, 0.55);
  border: 1px solid rgba(150, 230, 255, 0.28);
  border-radius: 6px;
  color: #c9eefc;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 8px;
}

.fighterCampaign strong {
  color: #fff7c2;
  font-size: 18px;
  margin-left: 6px;
}

.fighterCard p {
  color: #d7ecf5;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.fighterMeta {
  color: #9cdbea;
  font-size: 12px;
  font-weight: 700;
}

.fighterAction {
  width: 100%;
}

.shopCard {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(160, 235, 255, 0.14);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.shopCard strong {
  color: #f4fbff;
  display: block;
  font-size: 16px;
  line-height: 1.15;
}

.shopCard span {
  color: #91dff0;
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.shopCard p {
  color: #d7ecf5;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.shopMeta {
  color: #9cdbea;
  font-size: 12px;
  font-weight: 700;
}

.shopAction {
  width: 100%;
}

@media (max-width: 640px) {
  .upgradeHeader {
    align-items: stretch;
    flex-direction: column;
  }

  #upgradeButton {
    min-width: 0;
    width: 100%;
  }

  #upgradeGrid {
    grid-template-columns: 1fr;
  }

  #fighterGrid {
    grid-template-columns: 1fr;
  }

  #shopGrid {
    grid-template-columns: 1fr;
  }
}