:root {
  --bg: #050505;
  --primary: #00f2ff; /* Player Cyan */
  --enemy: #ff0055;   /* CPU Red */
  --ui-bg: rgba(0, 0, 0, 0.6);
  --font-main: 'Share Tech Mono', monospace;
  --font-big: 'Black Ops One', cursive;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: #fff;
  font-family: var(--font-main);
  overflow: hidden;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 720px;
  background: #111;
  box-shadow: 0 0 50px rgba(0, 242, 255, 0.1);
  overflow: hidden;
}

/* Video & Canvas */
.video-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

video {
  display: none; /* Hide raw video */
}

canvas {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror effect */
}

/* UI Layer */
.ui-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* Allow clicks to pass through except buttons */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

/* Scores */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.score-box {
  background: var(--ui-bg);
  padding: 10px 30px;
  border: 2px solid;
  border-radius: 8px;
  text-align: center;
}

.score-box.player {
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary);
}

.score-box.cpu {
  border-color: var(--enemy);
  box-shadow: 0 0 15px var(--enemy);
}

.label { font-size: 1rem; opacity: 0.8; margin-bottom: 5px; }
.score { font-family: var(--font-big); font-size: 3rem; line-height: 1; }

.vs-logo {
  font-family: var(--font-big);
  font-size: 4rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  font-style: italic;
}

/* Center HUD */
.center-hud {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

#countdown {
  font-family: var(--font-big);
  font-size: 8rem;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.8);
  display: none;
}

#result-text {
  font-family: var(--font-big);
  font-size: 6rem;
  text-transform: uppercase;
  text-shadow: 0 0 30px currentColor;
  display: none;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hand-monitor {
  background: var(--ui-bg);
  padding: 10px 20px;
  border-left: 4px solid var(--primary);
  font-size: 1.5rem;
  font-weight: bold;
}
#gesture-name { color: var(--primary); }

#start-btn {
  pointer-events: auto;
  padding: 15px 50px;
  font-family: var(--font-big);
  font-size: 1.5rem;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 20px var(--primary);
  transition: 0.2s;
}
#start-btn:hover { background: #fff; transform: scale(1.05); }

/* CPU Hand Display */
.cpu-hand-display {
  position: absolute;
  top: 100px; right: 20px;
  width: 150px; height: 150px;
  background: rgba(0,0,0,0.8);
  border: 4px solid var(--enemy);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  color: var(--enemy);
  box-shadow: 0 0 20px var(--enemy);
  transition: 0.2s;
}

/* Scanline Effect */
.scan-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: rgba(0, 242, 255, 0.3);
  opacity: 0.5;
  animation: scan 3s linear infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes scan { 0% { top: -5%; } 100% { top: 105%; } }