:root {
  --teal: #5ad1cb;
  --gold: #f8ae25;
  --font: 'Poppins', 'Arial', sans-serif;
}

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

html, body {
  background: #04101a;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
}

.screen {
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.screen.active { display: flex; }

/* ─── LOBBY ─────────────────────────────────────── */
#screen-lobby {
  background: url('backgrounds/bg-splash.png') no-repeat center / cover;
}

.lobby-panel {
  background: rgba(4, 16, 26, 0.82);
  border: 2px solid rgba(90, 209, 203, 0.5);
  border-radius: 2vmin;
  padding: 5vmin 6vmin;
  text-align: center;
  max-width: 90vmin;
}

.lobby-panel h1 {
  color: #fff;
  font-size: 5vmin;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.lobby-panel .sub {
  color: var(--teal);
  font-size: 1.6vmin;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 1vmin;
}

.lobby-status {
  color: #fff;
  font-size: 2.4vmin;
  font-weight: 800;
  margin-top: 4vmin;
}

.lobby-slots {
  display: flex;
  gap: 2vmin;
  justify-content: center;
  margin-top: 3vmin;
}

.lobby-slot {
  width: 14vmin;
  height: 10vmin;
  border-radius: 1.2vmin;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-weight: 800;
  font-size: 1.6vmin;
  gap: 0.6vmin;
}

.lobby-slot.filled { border-color: var(--teal); color: #fff; }
.lobby-slot.team-b.filled { border-color: var(--gold); }
.lobby-slot.ready { background: rgba(90,209,203,0.15); box-shadow: 0 0 16px rgba(90,209,203,0.5); }
.lobby-slot.team-b.ready { background: rgba(248,174,37,0.15); box-shadow: 0 0 16px rgba(248,174,37,0.5); }
.lobby-slot.you { outline: 2px dashed #fff; outline-offset: 3px; }

.lobby-hint {
  color: rgba(255,255,255,0.55);
  font-size: 1.5vmin;
  margin-top: 3vmin;
  font-weight: 600;
}

/* ─── GAME ──────────────────────────────────────── */
#app {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  background: url('backgrounds/bg-game.png') no-repeat center / 100% 100%;
}

.board {
  position: absolute;
  display: block;
  background: transparent;
}

.board-a { left: 22.36%; top: 11.55%; width: 35.93%; height: 66.38%; }
.board-b { left: 61.25%; top: 11.55%; width: 35.94%; height: 66.38%; }

.ov {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
}

.ov-time   { left: 7.53%;  top: 50.30%; width: 6.58%;  height: 2.98%; font-size: 2.1vmin; }
.ov-round  { left: 9.53%;  top: 60.72%; width: 2.6%; height: 2.98%; font-size: 2.1vmin; }
.ov-leader { left: 4.99%;  top: 71.48%; width: 11.71%; height: 2.98%; font-size: 1.7vmin; }

.ov-score { font-size: 1.7vmin; width: 9.47%; height: 2.38%; }
.ov-lines { font-size: 0.95vmin; font-weight: 600; color: rgba(255,255,255,0.65); width: 4.2%; height: 1.19%; }

.ov-score-a1, .ov-score-a2 { color: var(--teal); }
.ov-score-b1, .ov-score-b2 { color: var(--gold); }

.ov-score-a1, .ov-lines-a1 { left: 12.34%; }
.ov-score-a2, .ov-lines-a2 { left: 36.07%; }
.ov-score-b1, .ov-lines-b1 { left: 61.21%; }
.ov-score-b2, .ov-lines-b2 { left: 84.85%; }

.ov-score-a1, .ov-score-a2, .ov-score-b1, .ov-score-b2 { top: 88.38%; }
.ov-lines-a1, .ov-lines-a2, .ov-lines-b1, .ov-lines-b2 { top: 90.98%; }

.round-seg {
  position: absolute;
  top: 64.65%;
  height: 1.55%;
  width: 3.55%;
  border-radius: 0.2vmin;
  background: transparent;
  transition: background 0.25s ease;
}

.round-seg-1 { left: 5.3%; }
.round-seg-2 { left: 9.05%; }
.round-seg-3 { left: 12.85%; }
.round-seg.filled { background: var(--gold); box-shadow: 0 0 6px rgba(248,174,37,0.6); }

.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  font-size: 4vmin;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.banner.show { opacity: 1; }

.you-tag {
  position: absolute;
  right: 1.5%;
  top: 1%;
  font-size: 1.3vmin;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}

/* ─── WIN ───────────────────────────────────────── */
#screen-win.team-a { background: url('backgrounds/bg-win-a.png') no-repeat center / cover; }
#screen-win.team-b { background: url('backgrounds/bg-win-b.png') no-repeat center / cover; }

#win-app {
  position: relative;
  width: 100vmin;
  height: 100vmin;
}

.ov-win-score {
  left: 39.97%; top: 63.77%; width: 20.3%; height: 4.77%;
  font-size: 3.6vmin; color: #fff;
}

.ov-win-lines {
  left: 44.38%; top: 68.69%; width: 11.37%; height: 2.91%;
  font-size: 1.7vmin; font-weight: 700; color: rgba(255,255,255,0.75);
}

.win-hint {
  position: absolute;
  left: 0; right: 0; top: 88%;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  font-size: 1.4vmin;
}