/* Survivor Draft – draft.css (full replacement) */
/* Break the draft UI out of narrow theme containers */
/* Wider centered container (safe in all themes) */
.sd-draft{
  width: 100%;
  max-width: 1200px;     /* try 1400px if you want even wider */
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}


/* Force layout regardless of theme styles */
.sd-draft .sd-grid{
  display:flex !important;
  align-items:flex-start;
  width:100%;
}

.sd-draft .sd-grid > .sd-panel{
  min-width:0;
}

.sd-draft .sd-grid > .sd-panel:first-child{
  flex: 1 1 auto !important;
  margin-right:16px;
}

.sd-draft .sd-grid > .sd-panel:last-child{
  flex: 0 0 360px !important;
}

.sd-draft .sd-contestants{
  display:flex !important;
  flex-wrap:wrap;
  margin:-10px;
}

.sd-draft .sd-contestants .sd-card{
  width: calc(50% - 20px) !important;
  margin:10px;
}




.sd-draft {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  width: 100%;
}

.sd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}

/* replace gap with margin */
.sd-header > *:first-child { margin-right: 16px; }

.sd-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}

.sd-subtitle {
  opacity: .75;
  margin-top: 2px;
}

.sd-clock {
  text-align: right;
  padding: 10px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
}

.sd-clock-label { font-size: 12px; opacity: .7; }
.sd-clock-name { font-size: 14px; font-weight: 700; margin-top: 2px; }
.sd-clock-time { font-size: 20px; font-weight: 900; margin-top: 4px; }

/* -----------------------------
   Layout (no grid, no gap)
------------------------------ */

.sd-grid {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.sd-panel {
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  min-width: 0; /* important for flex children */
}

.sd-panel h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

/* Left panel wider, Teams panel fixed width */
.sd-grid > .sd-panel:first-child {
  flex: 1 1 auto;
  margin-right: 16px;
}

.sd-grid > .sd-panel:last-child {
  flex: 0 0 360px; /* adjust to 340/380 if you want */
}

/* Contestant pool: 2 columns using flex wrap + margins (no grid/gap) */
.sd-contestants {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; /* “fake gap” */
}

.sd-contestants .sd-card {
  width: calc(50% - 20px);
  margin: 10px;
}

/* -----------------------------
   Contestant card (bigger)
------------------------------ */

.sd-card {
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  transition: transform .06s ease;
}

.sd-card:hover { transform: translateY(-1px); }

.sd-photo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #f2f2f2;
  flex: 0 0 72px;
  overflow: hidden;
  margin-right: 12px; /* replaces gap */
}

.sd-photo img { width: 100%; height: 100%; object-fit: cover; }

.sd-meta { min-width: 0; }

.sd-name {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.15;
}

.sd-seasons {
  font-size: 13px;
  opacity: .85;
  margin-top: 6px;
  line-height: 1.25;
}

.sd-status {
  font-size: 13px;
  margin-top: 8px;
  font-weight: 800;
}

.sd-card.drafted { opacity: .55; cursor: not-allowed; }

.sd-note { margin-top: 10px; font-size: 13px; min-height: 18px; }

/* 2-column contestant grid (flex wrap) */
.sd-draft .sd-contestants{
  display:flex !important;
  flex-wrap:wrap;
  margin:-10px;
}

.sd-draft .sd-contestants .sd-card{
  box-sizing:border-box;
  width: calc(50% - 20px) !important;
  margin:10px;
}

.sd-draft .sd-photo{
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  border-radius: 18px;
}

.sd-draft .sd-photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f2f2;
}

.sd-draft .sd-card{
  padding: 16px;
  border-radius: 20px;
  min-height: 125px;
}



/* -----------------------------
   Teams (no grid, no gap)
------------------------------ */

.sd-teams { display: block; }

.sd-team {
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
}
.sd-team:last-child { margin-bottom: 0; }

.sd-team-name { font-weight: 900; margin-bottom: 8px; }

.sd-team-picks { display: block; }

.sd-pick-pill {
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #f6f6f6;
  display: block;
  margin-bottom: 6px;
}
.sd-pick-pill:last-child { margin-bottom: 0; }


/* Modal */
.sd-modal.sd-hidden { display:none; }

.sd-modal{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:99999;
}

.sd-modal-backdrop{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background: rgba(0,0,0,.45);
}

.sd-modal-card{
  position:relative;
  width: min(620px, calc(100vw - 32px));
  margin: 8vh auto 0;
  background:#fff;
  border-radius:22px;
  padding:18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.sd-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid #eee;
  background:#fff;
  font-size:22px;
  line-height:32px;
  cursor:pointer;
}

.sd-modal-body{
  display:flex;
  align-items:flex-start;
}

.sd-modal-photo{
  width:160px;
  height:160px;
  border-radius:22px;
  overflow:hidden;
  background:#f2f2f2;
  flex:0 0 160px;
  margin-right:16px;
}

.sd-modal-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sd-modal-photo-empty{
  width:100%;
  height:100%;
}

.sd-modal-name{
  font-weight:900;
  font-size:22px;
  margin-bottom:6px;
}

.sd-modal-seasons{
  font-size:14px;
  opacity:.75;
  margin-bottom:10px;
  line-height:1.35;
}

.sd-modal-status{
  font-size:14px;
  font-weight:800;
  margin-bottom:14px;
}

.sd-modal-draft{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  border:0;
  cursor:pointer;
}

.sd-modal-draft:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.sd-modal-hint{
  margin-top:10px;
  font-size:13px;
  opacity:.75;
}

@media (max-width: 520px){
  .sd-modal-body{ display:block; }
  .sd-modal-photo{ margin-right:0; margin-bottom:12px; width:100%; height:220px; }
}

/* Team card polish */
.sd-team.onclock{
  border-color:#111;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.sd-team.isyou{
  border-color:#444;
}

.sd-badge{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f2f2;
  margin-left:8px;
  vertical-align:middle;
}

.sd-badge-clock{
  background:#111;
  color:#fff;
}

/* Pick pills: number + name layout */
.sd-pick-pill{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.sd-pick-num{
  font-size:12px;
  font-weight:900;
  opacity:.7;
  min-width:56px;
}

.sd-pick-name{
  font-size:13px;
  font-weight:800;
}

.sd-pick-pill.sd-empty{
  opacity:.45;
}

.sd-login-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-weight:900;
  text-decoration:none;
}
.sd-login-btn:hover{ opacity:.9; }




/* -----------------------------
   Responsive
------------------------------ */

/* Stack panels on tablet/mobile */
@media (max-width: 900px) {
  .sd-grid { display: block; }
  .sd-grid > .sd-panel:first-child { margin-right: 0; margin-bottom: 16px; }
  .sd-grid > .sd-panel:last-child { width: auto; flex: 0 0 auto; }
}

/* Single column cards + seasons stacked */
@media (max-width: 520px) {
  .sd-contestants { margin: -8px; }
  .sd-contestants .sd-card { width: calc(100% - 16px); margin: 8px; }

  .sd-season { display: block; }
  .sd-sep { display: none; }
}