/* vs.css: カッコいい VS 用スタイル (軽量版) */
#vs-bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,12,20,0.95), rgba(20,6,6,0.95));
  animation: bgPulse 2s infinite alternate;
  overflow: hidden;
  z-index: 1000;
  display: none;
}

@keyframes bgPulse {
  0% { filter: brightness(0.95); }
  100% { filter: brightness(1.15); }
}

.player-card {
  position: absolute;
  top: 50%;
  width: 36%;
  height: 200px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 24px;
  opacity: 0;
}

#card-left { left: -60%; animation: slideLeft 1.0s cubic-bezier(.2,.9,.3,1) forwards; }
#card-right { right: -60%; animation: slideRight 1.0s cubic-bezier(.2,.9,.3,1) forwards; }

@keyframes slideLeft { to { left: 6%; opacity: 1; transform: translateY(-50%) translateX(0) } }
@keyframes slideRight { to { right: 6%; opacity: 1; transform: translateY(-50%) translateX(0) } }

.card-icon {
  width: 96px; height:96px; border-radius:50%; object-fit:cover;
  border: 3px solid rgba(255,255,255,0.12);
  margin-right: 20px;
}

.card-name { font-size: 2.2rem; font-weight: 800; color: #fff; text-shadow: 0 6px 18px rgba(0,0,0,0.7); }

#vs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  font-size: 6.2rem;
  font-weight: 900;
  color: white;
  opacity: 0;
  text-shadow: 0 0 28px rgba(255,80,80,0.8), 0 0 38px rgba(100,120,255,0.8);
  animation: vsPop 0.8s ease-out 0.9s forwards;
}

@keyframes vsPop {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* フラッシュ */
#flash {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 2000;
  display: none;
}
.flash-show { animation: flashAnim 0.6s forwards; }
@keyframes flashAnim { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }
