: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;
}

.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; }
.manager-row .num{
  font-family:'IBM Plex Mono', monospace; color: var(--chalk-dim); width: 22px; text-align:right; font-size:0.85rem;
}
.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; }

/* ---------- 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; }

.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; text-decoration: line-through; }

/* ---------- 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; }