/* ✅ 화면 */
body {
  background: black;
  overflow: hidden;
  margin: 0;
}

/* ✅ 영상 */
#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ HUD 컨테이너 */
#hud-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ✅ 개별 HUD */
.hud {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  transition: transform 0.15s ease;
  will-change: transform;
}

/* ✅ 링 */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid orange;
  box-shadow:
    0 0 25px orange,
    0 0 10px orange;
}

/* ✅ 링 크기 */
.big {
  width: 100%;
  height: 100%;
}

.mid {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
}

.small {
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
}

/* ✅ 십자선 */
.cross::before,
.cross::after {
  content: '';
  position: absolute;
  background: orange;
}

.cross::before {
  width: 100%;
  height: 2px;
  top: 50%;
}

.cross::after {
  width: 2px;
  height: 100%;
  left: 50%;
}

/* ✅ ✅ ✅ 🔥 핵심: 텍스트 중앙 정렬 FIX */
.label {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* ✅ 🔥 중앙 정렬 핵심 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  pointer-events: none;

  font-family: monospace;

  background: rgba(0, 0, 0, 0.35);
  padding: 3px 6px;
  border-radius: 4px;
}

/* ✅ 이름 */
.name {
  color: #ffaa00;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;

  text-shadow:
    0 0 6px #ffaa00,
    0 0 12px #ffaa00;
}

/* ✅ 상태 */
.status {
  color: #00ff99;
  font-size: 11px;
  letter-spacing: 2px;

  margin-top: 2px;

  text-shadow:
    0 0 6px #00ff99,
    0 0 12px #00ff99;

  animation: blink 1s infinite;
}

/* ✅ 깜빡임 */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
/* ✅ 🔴 LOCKED 상태 */
.hud.locked .ring {
  border-color: red;
  box-shadow:
    0 0 30px red,
    0 0 15px red;
}

.hud.locked .cross::before,
.hud.locked .cross::after {
  background: red;
}

/* ✅ LOCKED일 때 살짝 커짐 */
.hud.locked {
  transform: translate(-50%, -50%) scale(1.1);
}
.back-btn {
  position: fixed; /* 🔥 핵심 */
  top: 20px;
  left: 20px;
  z-index: 9999; /* 🔥 핵심 */

  padding: 10px 15px;
  border-radius: 10px;
  border: none;
  background: #1e293b;
  color: white;
  cursor: pointer;
}
.back-btn:hover {
  background: #38bdf8;
  color: black;
}