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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0e1a;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #e8ecff;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(10, 13, 30, 0.95), rgba(10, 13, 30, 0.6) 80%, transparent);
}

.team-panel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-panel.left .team-name { color: #5ab0ff; }
.team-panel.right .team-name { color: #ff6a6a; }

.team-name {
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 13px;
}

select {
  background: #161b33;
  color: #e8ecff;
  border: 1px solid #3a4370;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

select:hover { border-color: #6a79c9; }

select:disabled { opacity: 0.5; cursor: not-allowed; }

.center-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

#startBtn, #restartBtn {
  background: linear-gradient(180deg, #4a68ff, #3247c9);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(70, 100, 255, 0.4);
}

#startBtn:hover, #restartBtn:hover { filter: brightness(1.15); }

.speed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9aa4d4;
}

#speed { accent-color: #4a68ff; width: 110px; }

#turnInfo {
  font-size: 13px;
  color: #9aa4d4;
  min-width: 200px;
  text-align: center;
}

#winOverlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(5, 7, 18, 0.88);
}

#winText {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 30px currentColor;
}

.overlay-btns {
  display: flex;
  gap: 14px;
}

#lobbyReturnBtn {
  background: linear-gradient(180deg, #2a3160, #1c2244);
  color: #e8ecff;
  border: 1px solid #4a5590;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

#lobbyReturnBtn:hover { filter: brightness(1.25); }

.ghost-btn {
  background: transparent;
  color: #9aa4d4;
  border: 1px solid #3a4370;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.ghost-btn:hover { border-color: #6a79c9; color: #e8ecff; }

/* ============================== LOBİ ============================== */
#lobby {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background: radial-gradient(1200px 600px at 50% -100px, rgba(74, 104, 255, 0.18), transparent),
              #070914;
}

.lobby-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lobby-title {
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #5ab0ff, #c69bff, #ff6a6a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lobby-sub {
  text-align: center;
  color: #9aa4d4;
  font-size: 14px;
  letter-spacing: 2px;
  margin-top: -8px;
}

.lobby-card {
  background: rgba(18, 23, 48, 0.9);
  border: 1px solid #2c3564;
  border-radius: 14px;
  padding: 18px 20px;
}

.lobby-card h2 {
  font-size: 16px;
  letter-spacing: 1px;
  color: #c9d2ff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.new-match-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.side-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.side-pick.left { color: #5ab0ff; }
.side-pick.right { color: #ff6a6a; }

.vs {
  font-weight: 900;
  color: #9aa4d4;
  padding-bottom: 9px;
}

#lobbyStartBtn {
  background: linear-gradient(180deg, #4a68ff, #3247c9);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(70, 100, 255, 0.4);
  margin-left: auto;
}

#lobbyStartBtn:hover { filter: brightness(1.15); }

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d5e;
}

.match-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 13, 30, 0.7);
  border: 1px solid #262e58;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}

.match-list .host {
  font-weight: 700;
  color: #ffe9a8;
  min-width: 90px;
}

.match-list .matchup { flex: 1; color: #c9d2ff; }
.match-list .matchup .l { color: #5ab0ff; font-weight: 700; }
.match-list .matchup .r { color: #ff6a6a; font-weight: 700; }

.match-list .score {
  font-weight: 800;
  color: #9aa4d4;
  font-variant-numeric: tabular-nums;
}

.match-list .winner { font-weight: 800; }
.match-list .winner.l { color: #5ab0ff; }
.match-list .winner.r { color: #ff6a6a; }

.match-list .when {
  color: #6a7290;
  font-size: 11px;
  min-width: 60px;
  text-align: right;
}

.watch-btn {
  background: linear-gradient(180deg, #2a8f5a, #1d6b42);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.watch-btn:hover { filter: brightness(1.2); }
.watch-btn.mine { background: linear-gradient(180deg, #4a68ff, #3247c9); }

.empty-note {
  color: #6a7290;
  font-size: 13px;
  padding: 6px 2px;
}

.mine-badge {
  background: rgba(74, 104, 255, 0.2);
  border: 1px solid #4a68ff;
  color: #8fa8ff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 1px;
}

#spectatorBadge {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(255, 77, 94, 0.15);
  border: 1px solid #ff4d5e;
  color: #ff8f9a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 5px 16px;
  border-radius: 20px;
}

.hidden { display: none !important; }