:root{
  --bg: #0B1210;
  --panel: #131F1A;
  --panel-raised: #17251F;
  --line: #24352C;
  --turf: #4C7031;
  --turf-bright: #6FA33F;
  --chalk: #ECEDE7;
  --chalk-dim: #A9B3AC;
  --gold: #FFC42B;
  --danger: #E2472B;
  --radius: 10px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(76,112,49,0.06), transparent 300px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 80px);
  color: var(--chalk);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  padding-bottom: 70px;
}

.hidden{ display:none !important; }

a{ color: var(--gold); }

/* ---------- Scoreboard header ---------- */
.scoreboard{
  background: linear-gradient(180deg, #0E1713, #0B1210 90%);
  border-bottom: 3px solid var(--turf);
  position: sticky; top:0; z-index: 20;
}
.scoreboard-inner{
  max-width: 1180px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; padding: 14px 20px;
  flex-wrap: wrap;
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand-mark{
  font-family:'Anton', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  color: var(--chalk);
}
.brand-sub{
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--turf-bright);
  text-transform: uppercase;
  margin-top: 3px;
}

.clock-block{
  text-align:center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 22px;
  background: #0A100D;
  min-width: 220px;
}
.clock-label{
  font-size: 0.62rem; letter-spacing:0.16em; color: var(--chalk-dim);
}
.clock-name{
  font-family:'Anton', sans-serif;
  font-size: 1.05rem;
  color: var(--gold);
  margin-top: 2px;
  min-height: 1.2em;
}
.clock-time{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.clock-time.low{ color: var(--danger); }

.round-block{ text-align:right; line-height:1.1; }
.round-label{ font-size:0.62rem; letter-spacing:0.16em; color: var(--chalk-dim); }
.round-value{ font-family:'Anton', sans-serif; font-size:1.8rem; color:var(--chalk); }
.pick-value{ font-size:0.78rem; color: var(--turf-bright); }

/* ---------- Layout shells ---------- */
main{ max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }

.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  max-width: 720px;
  margin: 20px auto;
}
.panel-title{
  font-family:'Anton', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}
.panel-sub{ color: var(--chalk-dim); margin: 0 0 22px; line-height:1.5; font-size:0.94rem; }

.field-label{
  display:block; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--turf-bright); margin: 18px 0 8px;
}
.field-hint{
  font-size: 0.78rem; color: var(--chalk-dim); margin: 4px 0 0; line-height:1.4;
}

.text-input{
  width: 100%;
  background: #0C1512;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--chalk);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
.text-input:focus{ outline: 2px solid var(--turf-bright); outline-offset: 1px; }
.text-input.small{ padding: 7px 10px; font-size: 0.85rem; }

.manager-inputs{ display:flex; flex-direction:column; gap:8px; }
.manager-row{ display:flex; align-items:center; gap:8px; flex-wrap: wrap; }
.manager-row .num{
  font-family:'IBM Plex Mono', monospace; color: var(--chalk-dim); width: 22px; text-align:right; font-size:0.85rem;
}
.manager-row .manager-name-input{ flex: 1 1 140px; min-width: 100px; }
.manager-row .manager-email-input{ flex: 1 1 160px; min-width: 120px; }
.manager-row button{
  background:none; border:none; color: var(--chalk-dim); cursor:pointer; font-size: 1rem; padding: 4px 8px;
}
.manager-row button:hover{ color: var(--danger); }

.row-actions{ display:flex; gap:10px; margin-top:10px; }

.toggle-row{ display:flex; flex-direction:column; gap:10px; margin: 20px 0; }
.toggle{ display:flex; align-items:center; gap:10px; font-size: 0.92rem; color: var(--chalk-dim); cursor:pointer; }
.toggle input{ width:16px; height:16px; accent-color: var(--turf-bright); }

.btn{
  font-family:'Inter', sans-serif;
  font-weight: 700;
  border-radius: 7px;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: transform 0.06s ease, opacity 0.15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn.primary{ background: var(--turf-bright); color: #08120C; }
.btn.primary:hover{ background: #7CB84A; }
.btn.primary.big{ width:100%; padding: 14px; font-size: 1rem; margin-top: 8px; }
.btn.ghost{ background: transparent; border: 1px solid var(--line); color: var(--chalk); }
.btn.ghost:hover{ border-color: var(--turf-bright); color: var(--turf-bright); }
.btn.ghost.small{ padding: 6px 12px; font-size: 0.8rem; }
.btn.text{ background:none; color: var(--chalk-dim); font-weight:500; text-decoration: underline; padding: 4px; }
.btn:disabled{ opacity: 0.4; cursor: not-allowed; }

.setup-result{ margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 16px; }

.url-preview{
  font-family:'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--turf-bright);
  margin-top: 6px;
}

.key-warning{
  background: rgba(226,71,43,0.1); border: 1px solid var(--danger);
  border-radius: 6px; padding: 10px 12px; margin-top: 12px; font-size: 0.85rem;
  color: var(--chalk);
}
.key-value{
  font-family:'IBM Plex Mono', monospace; font-size: 1rem; color: var(--gold);
  word-break: break-all; margin: 6px 0;
}

/* ---------- Lobby ---------- */
.lobby-order{ display:flex; flex-direction:column; gap:10px; margin-bottom: 20px; }
.lobby-row{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--panel-raised); border:1px solid var(--line); border-radius: 8px;
  padding: 10px 14px;
}
.lobby-row .who{ display:flex; align-items:center; gap:10px; }
.lobby-row .seed{
  font-family:'IBM Plex Mono', monospace; color: var(--turf-bright); font-size:0.85rem; width: 26px;
}
.lobby-row .link{ font-size: 0.78rem; color: var(--chalk-dim); word-break: break-all; }
.copy-btn{ background: var(--panel); border:1px solid var(--line); color: var(--chalk); border-radius:6px; padding:6px 10px; font-size:0.75rem; cursor:pointer; }
.copy-btn:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------- Draft room ---------- */
.room-grid{ display:grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items:start; }
@media (max-width: 880px){ .room-grid{ grid-template-columns: 1fr; } }

.col-title{
  font-family:'Anton', sans-serif; font-weight:400; font-size:1.2rem; letter-spacing:0.02em;
  margin: 6px 0 12px;
}

.board{
  display:flex; flex-direction:column; gap: 14px;
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.board-round{ }
.board-round-label{
  font-size:0.68rem; letter-spacing:0.14em; color: var(--turf-bright); margin-bottom:6px; text-transform:uppercase;
}
.board-slots{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
@media (max-width:640px){ .board-slots{ grid-template-columns: repeat(2,1fr);} }

.slot{
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 9px;
  min-height: 58px;
  position: relative;
  background: #0F1A15;
}
.slot.filled{ border-color: transparent; }
.slot.on-clock{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px rgba(255,196,43,0.25);
}
.slot .mgr{ font-size: 0.68rem; color: var(--chalk-dim); text-transform: uppercase; letter-spacing:0.03em; }
.slot .team{ font-family:'Anton', sans-serif; font-size: 0.98rem; margin-top: 3px; letter-spacing:0.01em; }
.slot .pickno{
  position:absolute; top:6px; right:8px; font-family:'IBM Plex Mono', monospace; font-size:0.62rem; color: var(--chalk-dim);
}
.slot .auto-tag{ font-size:0.6rem; color: var(--turf-bright); margin-top:2px; }

.turn-banner{
  background: var(--panel-raised); border:1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 0.88rem;
}
.turn-banner.mine{ border-color: var(--gold); color: var(--gold); font-weight:700; }
.turn-banner.paused{ border-color: var(--danger); color: var(--danger); font-weight:700; }

.pick-confirm{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  flex-wrap: wrap;
  background: var(--panel-raised); border: 2px solid var(--gold); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
  animation: pickConfirmIn 0.15s ease-out;
}
@keyframes pickConfirmIn{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform:none; } }
.pick-confirm span{ font-weight:700; font-size:0.92rem; }
.pick-confirm-actions{ display:flex; gap:8px; flex: none; }

/* Generic in-frame confirmation overlay — used for reset/pause-style admin
   confirmations. Never a native browser popup, so it can't be blocked. */
.confirm-overlay{
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4,8,6,0.72);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.confirm-box{
  background: var(--panel); border: 2px solid var(--gold); border-radius: var(--radius);
  padding: 22px 24px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: pickConfirmIn 0.15s ease-out;
}
.confirm-message{ font-size: 0.98rem; line-height:1.5; margin: 0 0 18px; color: var(--chalk); }
.confirm-actions{ display:flex; gap:10px; justify-content:flex-end; }

.history-box{ max-width: 640px; max-height: 80vh; display:flex; flex-direction:column; }
.history-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.history-list{ overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.history-entry{
  background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px;
}
.history-entry summary{
  cursor:pointer; font-weight:700; font-size:0.94rem; list-style: none;
  display:flex; align-items:center; gap:10px;
}
.history-entry summary::-webkit-details-marker{ display:none; }
.history-entry summary::before{ content: "▸"; color: var(--turf-bright); }
.history-entry[open] summary::before{ content: "▾"; }
.history-time{ color: var(--chalk-dim); font-weight:400; font-size:0.82rem; }
.history-entry .results{ margin-top: 12px; }


.team-btn.selected{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
  background: #1B2A20;
}

.pool-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pool-head .text-input{ max-width: 180px; }

.pool{ display:flex; flex-direction:column; gap: 14px; margin-top: 12px; max-height: 640px; overflow-y:auto; padding-right: 4px; }
.pool-group-label{ font-size:0.68rem; letter-spacing:0.12em; color: var(--chalk-dim); text-transform:uppercase; margin-bottom:6px; }
.pool-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }

.team-btn{
  display:flex; align-items:center; gap:9px;
  border-radius: 7px; border: 1px solid var(--line);
  padding: 8px 10px; cursor:pointer; text-align:left;
  background: var(--panel-raised); color: var(--chalk);
  font-family:'Inter', sans-serif; font-size: 0.84rem; font-weight:600;
}
.team-btn .swatch{ width:12px; height:12px; border-radius: 3px; flex:none; }
.team-btn:hover:not(:disabled){ border-color: var(--turf-bright); }
.team-btn:disabled{ opacity: 0.28; cursor: default; }
.team-btn.drafted{ text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; opacity: 0.45; }

/* ---------- Results ---------- */
.results{ display:flex; flex-direction:column; gap:14px; }
.result-row{ background: var(--panel-raised); border:1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.result-row .rname{ font-family:'Anton', sans-serif; font-size:1.05rem; margin-bottom:6px; }
.result-teams{ display:flex; flex-wrap:wrap; gap:6px; }
.result-teams span{ font-size:0.78rem; padding: 4px 8px; border-radius: 5px; background:#0C1512; border:1px solid var(--line); }

/* ---------- Misc ---------- */
.you-badge{
  position: fixed; bottom: 60px; right: 16px;
  background: var(--gold); color:#0A100D; font-weight:700; font-size:0.8rem;
  padding: 8px 14px; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 30;
}

.foot{
  position: fixed; bottom:0; left:0; right:0;
  background: #0A100D; border-top: 1px solid var(--line);
  padding: 8px 20px; display:flex; align-items:center; gap: 14px; z-index: 25;
}
.admin-panel{ display:flex; gap:8px; align-items:center; }

.links-panel{
  position: fixed; bottom: 46px; left: 0; right: 0;
  max-height: 220px; overflow-y: auto;
  background: #0A100D; border-top: 1px solid var(--line);
  padding: 10px 20px; z-index: 24;
}
.link-row{ padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.82rem; }
.link-row b{ color: var(--gold); margin-right: 10px; }
.link-row span{ color: var(--chalk-dim); word-break: break-all; }

.forgot-key-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ================= Season app additions ================= */

.week-picker, .identity-block{ display:flex; align-items:center; }

.section-block{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 20px;
}

.two-col{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items:start; }
@media (max-width: 880px){ .two-col{ grid-template-columns: 1fr; } }

/* ---------- Scoreboard (weekly matchup cards) ---------- */
.scoreboard-list{ display:flex; flex-direction:column; gap: 12px; }
.matchup-card{
  background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px;
}
.matchup-card.bye{ opacity: 0.7; font-size: 0.88rem; color: var(--chalk-dim); }
.matchup-sides{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.matchup-side{ flex: 1; display:flex; flex-direction:column; gap: 2px; }
.matchup-side.away{ text-align: right; }
.matchup-name{ font-weight: 700; font-size: 0.95rem; }
.matchup-score{
  font-family:'IBM Plex Mono', monospace; font-size: 1.6rem; font-weight:700; color: var(--chalk);
}
.matchup-side.winner .matchup-score{ color: var(--turf-bright); }
.matchup-side.winner .matchup-name{ color: var(--turf-bright); }
.matchup-vs{ color: var(--chalk-dim); font-size: 0.78rem; padding: 0 6px; }

.matchup-detail{ margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; display:none; }
.matchup-card.expanded .matchup-detail{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.player-line{ display:flex; justify-content:space-between; font-size:0.82rem; padding: 3px 0; color: var(--chalk-dim); }
.player-line .pts{ font-family:'IBM Plex Mono', monospace; color: var(--chalk); }
.expand-toggle{
  background:none; border:none; color: var(--chalk-dim); font-size: 0.75rem;
  cursor:pointer; text-decoration: underline; padding: 8px 0 0; width: 100%; text-align:center;
}

/* ---------- Standings ---------- */
.standings-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.standings-table th{
  text-align:left; color: var(--chalk-dim); font-weight:600; font-size: 0.72rem;
  letter-spacing: 0.06em; padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.standings-table th:not(:first-child), .standings-table td:not(:first-child){ text-align:center; }
.standings-table td{ padding: 8px; border-bottom: 1px solid var(--line); }
.standings-table td:first-child{ font-weight:700; }
.standings-table .pf{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Lineup builder ---------- */
.slot-group{ margin-bottom: 14px; }
.slot-group-label{
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turf-bright); margin-bottom: 6px;
}
.slot-picker-row{ display:flex; align-items:center; gap: 8px; margin-bottom: 6px; }
.slot-picker-row select{ flex: 1; }
.slot-tag{
  font-family:'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--chalk-dim);
  width: 42px; flex: none;
}

/* ---------- Commissioner panel ---------- */
.commish-panel summary::-webkit-details-marker{ display:none; }
.commish-panel summary{ list-style:none; }
.commish-panel summary::before{ content:"▸ "; color: var(--turf-bright); }
.commish-panel[open] summary::before{ content:"▾ "; }
.slot-editor{ display:flex; flex-direction:column; gap: 8px; margin-top: 6px; }
.slot-editor-row{ display:flex; align-items:center; gap: 8px; }
.slot-editor-row input.slot-name{ width: 90px; }
.slot-editor-row input.slot-count{ width: 60px; }
.scoring-editor{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin-top: 6px;
}
.scoring-editor-row{ display:flex; align-items:center; gap: 8px; font-size: 0.82rem; }
.scoring-editor-row label{ flex:1; color: var(--chalk-dim); }
.scoring-editor-row input{ width: 70px; }