/* Combat — экран выбора бойца, стилистика классических аркадных файтингов */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  color: #ddd;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  user-select: none;
}

#app {
  height: 100%;
  background: #000 url("../assets/menu_bg.jpg") center / cover no-repeat;
}

.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background: rgba(0, 0, 0, .45);
}
.screen.active { display: flex; }

/* --- заголовки --- */

.game-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: .18em;
  background: linear-gradient(#fff8dc 15%, #d4a017 40%, #7a5200 60%, #ffd700 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 2px #000) drop-shadow(0 0 18px rgba(255, 120, 0, .35));
}

.select-title {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: .35em;
  color: #e8e8e8;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(255, 255, 255, .25);
}

/* --- карточки бойцов --- */

.fighters {
  display: flex;
  gap: clamp(1.5rem, 6vw, 5rem);
}

.fighter-card {
  cursor: pointer;
  text-align: center;
}

.portrait-frame {
  width: clamp(160px, 26vw, 280px);
  aspect-ratio: 1;
  border: 3px solid #555;
  outline: 2px solid #111;
  background: #111;
  overflow: hidden;
  transition: transform .12s ease;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.75) brightness(.8);
  transition: filter .12s ease;
}

.fighter-name {
  margin-top: .7rem;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .22em;
  color: #999;
  text-shadow: 0 2px 2px #000;
  transition: color .12s ease;
}

/* курсор P1 — зелёная рамка как в классике */
.fighter-card.cursor .portrait-frame {
  border-color: #2eff5e;
  box-shadow: 0 0 18px rgba(46, 255, 94, .55), inset 0 0 12px rgba(46, 255, 94, .25);
  animation: cursor-pulse .9s ease-in-out infinite;
}
.fighter-card.cursor .portrait-frame img { filter: none; }
.fighter-card.cursor .fighter-name { color: #ffd700; }

@keyframes cursor-pulse {
  50% { box-shadow: 0 0 30px rgba(46, 255, 94, .9), inset 0 0 16px rgba(46, 255, 94, .4); }
}

/* вспышка подтверждения выбора */
.fighter-card.chosen .portrait-frame {
  animation: chosen-flash .5s steps(2, jump-none) 3;
}
@keyframes chosen-flash {
  50% { border-color: #fff; box-shadow: 0 0 40px rgba(255, 255, 255, .9); }
}

.hint {
  font-size: clamp(.8rem, 1.6vw, 1rem);
  letter-spacing: .12em;
  color: #aaa;
  text-shadow: 0 1px 2px #000;
}

/* --- экран VS --- */

#vs-screen { flex-direction: row; gap: clamp(1rem, 5vw, 4rem); }

.vs-side { text-align: center; }
.vs-side img {
  width: clamp(180px, 30vw, 340px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid #777;
  outline: 2px solid #111;
  display: block;
}
.vs-left  { animation: slide-left .45s ease-out; }
.vs-right { animation: slide-right .45s ease-out; }
@keyframes slide-left  { from { transform: translateX(-60vw); } }
@keyframes slide-right { from { transform: translateX(60vw); } }

.vs-name {
  margin-top: .6rem;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: .22em;
  color: #ffd700;
  text-shadow: 0 2px 2px #000;
}

.vs-mark {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  font-style: italic;
  color: #ff3b1f;
  text-shadow: 0 3px 2px #000, 0 0 24px rgba(255, 60, 0, .6);
  animation: vs-pop .4s cubic-bezier(.2, 2.4, .4, 1) .25s backwards;
}
@keyframes vs-pop { from { transform: scale(0); } }

/* --- бой --- */

#fight-screen { background: #000; }
#fight-canvas {
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto;
  display: block;
}