:root{
  --text: #ffffff;
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);
  --accent: #00e5ff;

  /* Glass theme */
  --glass-bg: rgba(255,255,255,0.10);
  --glass-bg-strong: rgba(255,255,255,0.14);
  --glass-border: rgba(255,255,255,0.18);

  /* Team gradients (titles + timers) */
  --happy1:#6a1b9a;
  --happy2:#9c27b0;

  --waqas1:#0d47a1;
  --waqas2:#1976d2;

  /* Team glow (active border/shadow) */
  --happy:#9c27b0;
  --happy-soft: rgba(156,39,176,0.25);
  --happy-glow: rgba(156,39,176,0.55);

  --waqas:#1976d2;
  --waqas-soft: rgba(25,118,210,0.25);
  --waqas-glow: rgba(25,118,210,0.55);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;

  background-image: url("bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.45),
    rgba(10,18,35,0.35),
    rgba(0,0,0,0.45)
  );
  z-index: -1;
}

.wrap{
  padding: 18px;
  max-width: 1320px;
  margin: 0 auto;
}

.app-title{
  text-align: center;
  margin: 0 0 14px 0;
  letter-spacing: 0.4px;
}

/* Layout */
.app{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px){
  .app{
    grid-template-columns: 40% 60%;
    align-items: start;
  }
}

/* Glass cards */
.card{
  background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

/* Buttons */
.btn{
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .08s ease, opacity .2s ease, filter .2s ease;
}
.btn:active{ transform: scale(0.98); }
.btn:disabled{ opacity: .55; cursor: not-allowed; }

.undo{ background: #ff9800; color:#111; }
.redo{ background: #4caf50; color:#111; }

/* Sidebar */
.sidebar{
  padding: 0;
  overflow: hidden;
}

.sidebar-head{
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, var(--glass-bg-strong), rgba(255,255,255,0.05));
}

.sidebar-badge{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,229,255,0.14);
  border: 1px solid rgba(0,229,255,0.25);
  margin-bottom: 10px;
}

.sidebar-actions{
  display: flex;
  gap: 10px;
}

.sidebar-actions .btn{
  flex: 1;
}

.sidebar-meta{
  padding: 14px;
  display: grid;
  gap: 10px;
}

.turn-pill{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  font-weight: 800;
  color: var(--muted);
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.turn-pill.happy{
  background: linear-gradient(135deg, var(--happy2), #b84de3);
  border-color: var(--happy2);
  color: #fff;
}

.turn-pill.waqas{
  background: linear-gradient(135deg, var(--waqas2), #4da3ff);
  border-color: var(--waqas2);
  color: #fff;
}

.turn-name{
  font-weight: 900;
  color: #fff;
}

.search-wrap input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #fff;
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.search-wrap input::placeholder{
  color: rgba(255,255,255,0.60);
}

.players-panel{
  padding: 0 14px 14px 14px;
}

.players-panel-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.players-panel-head h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.count{
  font-size: 12px;
  color: var(--muted2);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}

/* Players (no scroll) */
.players-list{
  max-height: none;
  overflow: visible;
  padding-right: 0;
  display: grid;
  gap: 10px;
}

/* Player row (NO SERIAL) */
.player-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.player-row:hover{ filter: brightness(1.08); }

.pname{
  font-weight: 900;
  letter-spacing: 0.2px;
}

.player-row.locked{
  opacity: 0.65;
  cursor: not-allowed;
}

.lock-badge{
  margin-left: auto;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--muted2);
}

.hint{
  margin: 0;
  padding: 0 14px 14px 14px;
  font-size: 12px;
  color: var(--muted2);
}

/* Right squads */
.squads{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px){
  .squads{
    grid-template-columns: 1fr 1fr;
  }
}

/* Team title */
.team-title{
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 900;
  margin-bottom: 18px;
  color: #fff;
  letter-spacing: 0.3px;
}

.happy-title{ background: linear-gradient(135deg, var(--happy1), var(--happy2)); }
.waqas-title{ background: linear-gradient(135deg, var(--waqas1), var(--waqas2)); }

/* Floating timer (only active) */
.team{ position: relative; }

.floating-timer{
  position: absolute;
  top: -14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  display: none;
  color: #fff;
}

.happy-timer{
  background: linear-gradient(135deg, rgba(156,39,176,0.92), rgba(106,27,154,0.92));
}

.waqas-timer{
  background: linear-gradient(135deg, rgba(25,118,210,0.92), rgba(13,71,161,0.92));
}

/* Active border/shadow uses team color */
@keyframes teamGlow {
  0%   { box-shadow: 0 18px 45px rgba(0,0,0,0.25); }
  50%  { box-shadow: 0 0 0 10px var(--glow-soft), 0 0 28px var(--glow-strong); }
  100% { box-shadow: 0 18px 45px rgba(0,0,0,0.25); }
}

.team.active{
  border: 2px solid var(--team-color);
  animation: teamGlow 1.6s ease-in-out infinite;
}

.team.happy.active{
  --team-color: var(--happy);
  --glow-soft: var(--happy-soft);
  --glow-strong: var(--happy-glow);
}

.team.waqas.active{
  --team-color: var(--waqas);
  --glow-soft: var(--waqas-soft);
  --glow-strong: var(--waqas-glow);
}

.team.active .floating-timer{
  display: inline-block;
}

/* Team list items */
.team ul{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: playerCount;
}

.team li{
  counter-increment: playerCount;
  display: flex;
  align-items: center;
  gap: 10px;

  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.72));
  color: #111;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 9px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
}

.team li::before{
  content: counter(playerCount);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.14);
  font-size: 13px;
  font-weight: 900;
}

/* Modal */
.modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.70);
  justify-content: center;
  align-items: center;
  padding: 18px;
}

.modal-content{
  width: min(420px, 100%);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.40);
}

.modal-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.modal-sub{
  margin: 0 0 14px 0;
  color: var(--muted2);
  font-size: 13px;
}

.highlight{
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 14px;
}

.team-select{
  display: grid;
  gap: 10px;
}

.pick{
  width: 100%;
  color: #fff;
}

.happyPick{ background: linear-gradient(135deg, var(--happy1), var(--happy2)); }
.waqasPick{ background: linear-gradient(135deg, var(--waqas1), var(--waqas2)); }

.pickAction{
  width: 100%;
  color: #111;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
}

.center{ text-align: center; }