/* ── Reset y capas base ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #04060f;
  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  color: #dfe9ff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Webcam a pantalla completa, espejada como un espejo real */
#cam {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  filter: saturate(0.7) brightness(0.75);
  z-index: 0;
}

/* Lienzo WebGL transparente sobre el video */
#stage { position: fixed; inset: 0; z-index: 1; }
#stage canvas { display: block; }

/* Destello rojo al recibir daño (opacidad controlada por JS) */
#vignette {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 18vmax rgba(255, 30, 60, 0.9);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

/* Capa de interfaz */
#ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#ui button { pointer-events: auto; }

/* ── Barras de vida ─────────────────────────────────────────────── */
.hp-row {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  display: flex; align-items: center; gap: 12px;
}
.hp-name { font-size: 12px; letter-spacing: 0.12em; width: 46px; }
.hp-name.you { color: #9ff2ff; text-align: right; }
.hp-name.cpu { color: #ffb3ec; }
.hp-bar {
  flex: 1; height: 14px;
  background: rgba(6, 12, 30, 0.75);
  border: 1px solid rgba(160, 190, 255, 0.35);
  border-radius: 8px;
  overflow: hidden;
}
.hp-fill { height: 100%; width: 100%; transition: width 0.25s ease-out; }
.hp-fill.you { background: linear-gradient(90deg, #0088aa, #00e5ff); float: right; }
.hp-fill.cpu { background: linear-gradient(90deg, #ff2fd0, #aa1166); }

/* ── Chips de estado ────────────────────────────────────────────── */
.hud-side {
  position: absolute; top: 52px; left: 14px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.chip {
  background: rgba(6, 12, 30, 0.72);
  border: 1px solid rgba(160, 190, 255, 0.3);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}
#cam-status.ok    { border-color: rgba(0, 255, 170, 0.55); color: #8dffd9; }
#cam-status.error { border-color: rgba(255, 80, 100, 0.6);  color: #ff9aa8; }

.fist-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin: 0 5px 0 10px; background: #33415e; vertical-align: middle;
  transition: background 0.1s, box-shadow 0.1s; }
.fist-dot.seen.left    { background: #0a5b66; }
.fist-dot.seen.right   { background: #661b53; }
.fist-dot.closed.left  { background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.fist-dot.closed.right { background: #ff2fd0; box-shadow: 0 0 8px #ff2fd0; }

#guard-chip { opacity: 0.45; transition: opacity 0.15s, border-color 0.15s, color 0.15s; }
#guard-chip.on { opacity: 1; border-color: #22ffaa; color: #8dffd9;
  box-shadow: 0 0 12px rgba(34, 255, 170, 0.35); }

/* ── Mensajes centrales flotantes ───────────────────────────────── */
#msgs { position: absolute; top: 30%; left: 50%; width: 0; }
.pop {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: clamp(22px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.14em;
  animation: popa 1s ease-out forwards;
}
.pop.good    { color: #8dffd9; text-shadow: 0 0 18px #22ffaa; }
.pop.bad     { color: #ff9aa8; text-shadow: 0 0 18px #ff1e3c; }
.pop.neutral { color: #ffe49a; text-shadow: 0 0 18px #ffd24a; }
@keyframes popa {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(1); }
}

/* Resultado (K.O.) */
#result {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
}
#result.show { display: block; }
#result .big {
  font-size: clamp(40px, 9vw, 92px);
  font-weight: 800; letter-spacing: 0.18em;
  text-shadow: 0 0 30px currentColor;
}
#result .big.win  { color: #8dffd9; }
#result .big.lose { color: #ff9aa8; }
#result .sub { margin-top: 10px; font-size: 14px; opacity: 0.8; letter-spacing: 0.1em; }

/* ── Botones de gesto (mantener el puño encima) ─────────────────── */
.gbtn {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--d, 17vh); height: var(--d, 17vh);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: auto; cursor: pointer;
}
.gbtn.show { display: flex; }
/* anillo de progreso: se llena mientras el puño está encima */
.gbtn .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#22ffaa calc(var(--p, 0) * 1turn),
                             rgba(160, 190, 255, 0.22) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%);
  mask: radial-gradient(circle, transparent 60%, #000 63%);
}
.gbtn .core {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: rgba(6, 12, 30, 0.78);
  border: 1px solid rgba(160, 190, 255, 0.4);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  font-size: 12px; letter-spacing: 0.12em;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gbtn .core .ico { font-size: 26px; }
.gbtn.hot .core { border-color: #22ffaa;
  box-shadow: 0 0 20px rgba(34, 255, 170, 0.45); }

/* ── Instrucción y botones ──────────────────────────────────────── */
.hint {
  position: absolute; top: 56%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 13px; line-height: 2;
  letter-spacing: 0.07em;
  background: rgba(4, 8, 20, 0.7);
  border: 1px solid rgba(160, 190, 255, 0.3);
  border-radius: 16px;
  padding: 20px 28px;
  backdrop-filter: blur(8px);
}
.hint em { color: #9ff2ff; font-style: normal; }
.hint .r { color: #ffb3ec; }
.hint.hidden { display: none; }

.hud-bottom {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
.btn {
  background: rgba(6, 12, 30, 0.78);
  border: 1px solid rgba(160, 190, 255, 0.4);
  color: #dfe9ff;
  border-radius: 12px;
  padding: 12px 20px;
  font: inherit; font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
  backdrop-filter: blur(6px);
}
.btn:hover { border-color: #9ff2ff; box-shadow: 0 0 14px rgba(0, 229, 255, 0.35); }
.btn.primary { border-color: #ff2fd0; color: #ffb3ec; }
.btn.primary:hover { box-shadow: 0 0 14px rgba(255, 47, 208, 0.4); }