:root{
  --bg:#0b1020;
  --panel:#101a33;
  --panel2:#0f1730;
  --card:#131f3d;
  --stroke:rgba(255,255,255,.08);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.70);
  --muted2:rgba(232,238,252,.55);
  --accent:#5dd6ff;
  --accent2:#8a7dff;
  --danger:#ff5d7a;
  --ok:#34d399;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: radial-gradient(1100px 700px at 15% -10%, rgba(93,214,255,.25), transparent 60%),
              radial-gradient(900px 600px at 80% 0%, rgba(138,125,255,.18), transparent 55%),
              var(--bg);
}

.page{min-height:100%;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(11,16,32,.55);
}

.brand{display:flex;gap:12px;align-items:center}
.dot{
  width:14px;height:14px;border-radius:999px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow: 0 0 0 6px rgba(93,214,255,.09);
}
.brandTitle{font-weight:800;letter-spacing:.2px}
.brandSub{font-size:12px;color:var(--muted)}

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

.layout{
  display:flex;
  gap:16px;
  padding:16px;
  max-width:1280px;
  margin:0 auto;
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel.left{flex: 0 0 380px; min-width:320px}
.panel.right{flex: 1 1 auto}

.panelHeader{
  padding:16px 16px 10px;
  border-bottom:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
}
.panelHeader h2{margin:0;font-size:18px}
.sub{margin-top:4px;font-size:12px;color:var(--muted2)}

.leaderboard{padding:10px}
.empty{padding:12px;border:1px dashed var(--stroke);border-radius:14px;color:var(--muted)}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;
}
.rank{width:54px;font-weight:800;color:rgba(232,238,252,.9)}
.avatar{width:44px;height:44px;border-radius:999px;overflow:hidden;border:1px solid var(--stroke);flex:0 0 auto;background: rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatarFallback{font-weight:800;color:rgba(232,238,252,.85)}
.who{flex:1 1 auto;min-width:0}
.name{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wins{font-size:12px;color:var(--muted);margin: 0;}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;padding:2px 8px;border-radius:999px;
  background: rgba(93,214,255,.14);
  border:1px solid rgba(93,214,255,.25);
  color: rgba(232,238,252,.92);
  font-weight:700;
  margin-right:6px;
}

.rowActions{display:flex;gap:8px;flex:0 0 auto}

.card{
  margin:10px;
  padding:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
}
.addPerson h3{margin:0 0 10px;font-size:15px}
.hint{margin-top:8px;font-size:12px;color:var(--muted2)}

.form{display:grid;gap:8px}
label{font-size:12px;color:var(--muted2)}
input{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,8,16,.35);
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(93,214,255,.45); box-shadow:0 0 0 4px rgba(93,214,255,.10)}

.btn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{border-color: rgba(93,214,255,.35)}
.btn.primary{
  background: linear-gradient(135deg, rgba(93,214,255,.22), rgba(138,125,255,.18));
  border-color: rgba(93,214,255,.35);
}
.btn.tiny{padding:7px 10px;font-size:12px}
.btn.danger{border-color: rgba(255,93,122,.35)}
.btn.danger:hover{border-color: rgba(255,93,122,.55)}

.linkbtn{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  text-decoration:none;
  background: rgba(255,255,255,.03);
}
.linkbtn:hover{border-color: rgba(93,214,255,.35)}

.pill{
  display:inline-flex;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  background: rgba(255,255,255,.03);
}
.pill.ok{
  border-color: rgba(52,211,153,.35);
  color: rgba(232,238,252,.92);
  background: rgba(52,211,153,.12);
}

.datesGrid{
  padding:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.dateCard{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dateTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dateTitle{font-weight:800}
.thumb{
  width:100%;
  aspect-ratio: 16/10;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.placeholder{color:var(--muted2);font-size:12px}
.dateBottom{display:flex;gap:10px;justify-content:flex-end}

.modal[hidden]{display:none}
.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
}
.modalBackdrop{position:absolute;inset:0;background: rgba(0,0,0,.55)}
.modalCard{
  position:relative;
  width:min(900px, calc(100% - 24px));
  background: rgba(16,26,51,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modalHeader{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modalTitle{font-weight:900}
.modalBody{padding:14px}
.modalBody img{width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,255,255,.10)}
.error{color:#ff9aa9;margin-top:10px}

.center{display:flex;align-items:center;justify-content:center;min-height: calc(100vh - 74px);padding:16px}
.card.auth{max-width:420px;width:100%}

@media (max-width: 980px){
  .layout{flex-direction:column}
  .panel.left{flex:1 1 auto}
  .datesGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
  .datesGrid{grid-template-columns: 1fr;}
  .rank{width:46px}
}


/* Topbar countdown */
.countdown{
  margin-left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(232,238,252,.80);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.countdown b{
  color: rgba(232,238,252,.96);
}
@media (max-width: 980px){
  .countdown{display:none;}
}


/* Medals for top 3 */
.row.rank-1 .rank{
  color: rgba(255, 215, 0, .95);
  text-shadow: 0 0 18px rgba(255, 215, 0, .18);
}
.row.rank-2 .rank{
  color: rgba(192, 192, 192, .95);
  text-shadow: 0 0 18px rgba(192, 192, 192, .18);
}
.row.rank-3 .rank{
  color: rgba(205, 127, 50, .95);
  text-shadow: 0 0 18px rgba(205, 127, 50, .16);
}
.row.rank-1{
  border-color: rgba(255,215,0,.22);
  background: rgba(255,215,0,.05);
}
.row.rank-2{
  border-color: rgba(192,192,192,.18);
  background: rgba(192,192,192,.04);
}
.row.rank-3{
  border-color: rgba(205,127,50,.18);
  background: rgba(205,127,50,.04);
}


/* Highlight the current (next upcoming) Wednesday */
.dateCard.current{
  border-color: rgba(93,214,255,.35);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(93,214,255,.08);
}
.dateCard.current .dateTitle{
  color: rgba(232,238,252,.98);
}


/* ===== Bigger Leaderboard ===== */
.panel.left{
  flex: 0 0 440px;
}

.row{
  padding: 14px 14px;
  gap: 14px;
}

.avatar{
  width: 64px;
  height: 64px;
}

.rank{
  width: 64px;
  font-size: 18px;
}

.name{
  font-size: 17px;
}

.wins{
  font-size: 14px;
}

@media (max-width: 980px){
  .panel.left{
    flex: 1 1 auto;
  }
  .avatar{
    width: 56px;
    height: 56px;
  }
}