html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0B1229;
}

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

#wb {
  width: 100vw !important;
  height: 100vh !important;
  font-family: 'Arial Black', Arial, sans-serif;
  background: #0B1229;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Slides ────────────────────────────────────────────────────────────────── */

.slide        { display: none; flex-direction: column; flex: 1; }
.slide.active { display: flex; }

.slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: #0B1229;
}

.slide-label {
  color: #94A3B8;
  font-size: clamp(16px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 18px;
}

.slide-title {
  color: #fff;
  font-size: clamp(60px, 11vw, 180px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 10px;
}

.slide-range {
  color: #94A3B8;
  font-size: clamp(16px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 28px;
}

.slide-countdown {
  color: #F59E0B;
  font-size: clamp(48px, 8vw, 140px);
  font-weight: 900;
}

.slide-until {
  color: #94A3B8;
  font-size: clamp(14px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 10px;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.footer {
  background: #0D1F4E;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-txt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #94A3B8;
}

/* ── Controls ──────────────────────────────────────────────────────────────── */

.controls {
  background: #060d1e;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cbtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'Arial Black', Arial, sans-serif;
}
.cbtn:hover      { background: rgba(255,255,255,0.08); }
.cbtn.cbtn-active { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.5); color: #F59E0B; }

.clock-display { font-size: 13px; font-weight: 900; color: #fff; margin-left: auto; }

.dots        { display: flex; gap: 5px; align-items: center; }
.dot         { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: background 0.2s; }
.dot.done    { background: rgba(255,255,255,0.5); }
.dot.current { background: #fff; transform: scale(1.3); }

.progress-bar  { height: 3px; background: rgba(255,255,255,0.08); }
.progress-fill { height: 100%; background: #F59E0B; transition: width 1s linear; }

.status-badge  { font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 3px; }
.badge-live    { background: #10B981; color: #fff; }
.badge-waiting { background: #F59E0B; color: #0B1229; }
.badge-done    { background: #64748B; color: #fff; }
.badge-manual  { background: #6366F1; color: #fff; }

/* ── Scoreboard (top-right, always visible) ────────────────────────────────── */

#scoreboard {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 300px;
  background: rgba(9, 16, 38, 0.94);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 18px;
  z-index: 300;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: box-shadow 1.8s ease;
}

#scoreboard.announcing {
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(245,158,11,0.18);
}

#scoreboard.sb-hidden {
  display: none;
}

.sb-header {
  color: #94A3B8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.sb-table {
  width: 100%;
  border-collapse: collapse;
}

/* two-line row layout — name + sub-stats line + points */
.sb-table tbody td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.sb-rank  { color: #334155; font-size: 10px; font-weight: 700; width: 18px; }
.sb-main  { padding: 0 10px; }
.sb-name  { color: #CBD5E1; font-size: 13px; font-weight: 700; line-height: 1.2; }
.sb-stats { color: #475569; font-size: 9px;  font-weight: 700; letter-spacing: 0.3px; margin-top: 3px; }
.sb-pts   { color: #F59E0B; font-size: 15px; font-weight: 900; text-align: right; white-space: nowrap; }

/* ── Timezone clocks (bottom-left, always visible) ─────────────────────────── */

#tz-panel {
  position: fixed;
  bottom: 82px;
  left: 16px;
  background: rgba(9, 16, 38, 0.94);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 18px;
  z-index: 300;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  min-width: 160px;
}

.tz-header {
  color: #94A3B8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.tz-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}

.tz-label {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  width: 38px;
  flex-shrink: 0;
}

.tz-time {
  color: #CBD5E1;
  font-size: 20px;
  font-weight: 900;
}

.tz-ampm {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

/* ── Goal Progress (bottom-right, always visible) ──────────────────────────── */

#daily-focus {
  position: fixed;
  bottom: 82px;
  right: 16px;
  width: 300px;
  background: rgba(9, 16, 38, 0.94);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 18px;
  z-index: 300;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.gp-header {
  color: #94A3B8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.gp-team {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.gp-team-pct {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: #CBD5E1;
}

.gp-team-sub {
  color: #64748B;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.gp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.gp-name {
  color: #CBD5E1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  width: 92px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.gp-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.gp-pct {
  font-size: 13px;
  font-weight: 900;
  width: 42px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Leaderboard overlay ───────────────────────────────────────────────────── */

#leaderboard-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  background: rgba(6, 10, 22, 0.97);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

#leaderboard-panel {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lb-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px;
}

.lb-tab {
  background: transparent;
  border: none;
  color: #475569;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lb-tab:hover  { color: #94A3B8; }
.lb-tab.active { background: rgba(255,255,255,0.08); color: #fff; }

.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-table thead th {
  color: #334155;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0 0 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lb-table thead th:first-child  { text-align: left; }
.lb-table thead th:nth-child(2) { text-align: left; padding-left: 12px; }
.lb-table thead th:not(:first-child):not(:nth-child(2)) { text-align: right; }

.lb-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.lb-table tbody td {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.lb-rank { color: #334155; font-size: 13px; font-weight: 700; text-align: left; width: 24px; }
.lb-name { color: #CBD5E1; font-size: 18px; font-weight: 900; padding-left: 12px; }
.lb-val  { color: #475569; font-size: 14px; font-weight: 700; text-align: right; }
.lb-apps { color: #94A3B8; font-size: 14px; font-weight: 700; text-align: right; }
.lb-pts  { color: #F59E0B; font-size: 20px; font-weight: 900; text-align: right; }

.lb-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 14px;
}

.lb-algo {
  color: #1e293b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.8;
}

/* ── Slide type themes ─────────────────────────────────────────────────────── */

/* Call blocks — deep blue */
.slide-inner.type-call {
  background: radial-gradient(ellipse at 50% 38%, #0C2047 0%, #070E22 60%, #050A18 100%);
}
.slide-inner.type-call .slide-label { color: #60A5FA; }

/* Peak block — crimson, high energy */
.slide-inner.type-peak {
  background: radial-gradient(ellipse at 50% 38%, #330A00 0%, #180400 55%, #0C0200 100%);
}
.slide-inner.type-peak .slide-label    { color: #F87171; }
.slide-inner.type-peak .slide-range    { color: #7F1D1D; }
.slide-inner.type-peak .slide-countdown { color: #EF4444; }
.slide-inner.type-peak .slide-until    { color: #7F1D1D; }

/* Instagram outreach — purple */
.slide-inner.type-instagram {
  background: radial-gradient(ellipse at 50% 38%, #220840 0%, #100320 55%, #090115 100%);
}
.slide-inner.type-instagram .slide-label    { color: #C084FC; }
.slide-inner.type-instagram .slide-countdown { color: #A855F7; }

/* Follow-up blocks — teal/green */
.slide-inner.type-followup {
  background: radial-gradient(ellipse at 50% 38%, #002018 0%, #000F0C 55%, #000A08 100%);
}
.slide-inner.type-followup .slide-label    { color: #34D399; }
.slide-inner.type-followup .slide-countdown { color: #10B981; }

/* Warm calls — amber/orange */
.slide-inner.type-warmcall {
  background: radial-gradient(ellipse at 50% 38%, #221000 0%, #100800 55%, #080400 100%);
}
.slide-inner.type-warmcall .slide-label    { color: #FB923C; }
.slide-inner.type-warmcall .slide-countdown { color: #F97316; }

/* Reset / setup / wrap — subtle, low-key */
.slide-inner.type-reset {
  background: radial-gradient(ellipse at 50% 38%, #0E1428 0%, #0B1229 100%);
}
.slide-inner.type-reset .slide-label { color: #64748B; }