:root{
  --bg: #0A0E14;
  --panel: #141922;
  --panel-raised: #1B222D;
  --line: #262E3B;
  --accent: #37E17E;
  --accent-dim: #1C6B45;
  --accent-soft: rgba(55,225,126,0.12);
  --gold: #FFB74D;
  --danger: #FF5C5C;
  --chalk: #F3F5F8;
  --chalk-dim: #8891A1;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--chalk);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  padding-bottom: 70px;
}
.hidden{ display:none !important; }
a{ color: var(--accent); }

/* ---------- Header ---------- */
.scoreboard{
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  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; align-items:center; gap: 10px; line-height:1; }
.brand-mark{
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--chalk);
}
.brand-mark::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  background: var(--accent); margin-right:9px; box-shadow: 0 0 8px var(--accent);
}
.brand-sub{
  font-weight: 600; font-size: 0.82rem; color: var(--chalk-dim);
  padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line);
}

.clock-block{
  text-align:center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 22px;
  background: var(--panel-raised);
  min-width: 210px;
}
.clock-label{ font-size: 0.65rem; font-weight:700; color: var(--chalk-dim); }
.clock-name{ font-weight: 700; font-size: 0.98rem; color: var(--accent); margin-top: 2px; min-height: 1.2em; }
.clock-time{
  font-weight:800; font-size: 1.9rem; letter-spacing: 0.02em; 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.65rem; font-weight:700; color: var(--chalk-dim); }
.round-value{ font-weight:800; font-size:1.6rem; color:var(--chalk); }
.pick-value{ font-size:0.78rem; color: var(--accent); font-weight: 600; }

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

.auth-panel{ max-width: 400px; margin: 40px auto; }
.auth-panel .text-input{ width: 100%; margin-bottom: 4px; }
.auth-switch{ margin-top: 16px; font-size: 0.85rem; color: var(--chalk-dim); }
.auth-switch a{ color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ---------- 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: 560px;
  margin: 20px auto;
}
.panel-title{ font-weight: 800; font-size: 1.5rem; 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.78rem; font-weight: 600; color: var(--chalk-dim); margin: 16px 0 7px;
}
.field-hint{ font-size: 0.8rem; color: var(--chalk-dim); margin: 4px 0 0; line-height:1.4; }

.text-input{
  width: 100%;
  background: #0D1219;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  color: var(--chalk);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
.text-input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.text-input.small{ padding: 7px 11px; 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{ color: var(--chalk-dim); width: 22px; text-align:right; font-size:0.85rem; font-variant-numeric: tabular-nums; }
.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(--accent); }

.btn{
  font-family:'Inter', sans-serif;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.06s ease, opacity 0.15s ease, background 0.15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn.primary{ background: var(--accent); color: #06150D; }
.btn.primary:hover{ background: #4FEB92; }
.btn.primary.big{ width:100%; padding: 14px; font-size: 1rem; margin-top: 8px; }
.btn.ghost{ background: var(--panel-raised); border: 1px solid var(--line); color: var(--chalk); }
.btn.ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn.ghost.small{ padding: 6px 14px; font-size: 0.8rem; }
.btn.text{ background:none; color: var(--chalk-dim); font-weight:600; text-decoration: underline; padding: 4px; }
.btn:disabled{ opacity: 0.4; cursor: not-allowed; }

.setup-result{ margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.url-preview{ font-size: 0.8rem; color: var(--accent); margin-top: 6px; }

.key-warning{
  background: rgba(255,92,92,0.1); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 12px; font-size: 0.85rem; color: var(--chalk);
}
.key-value{ font-size: 1rem; color: var(--accent); word-break: break-all; margin: 6px 0; font-weight: 700; }

/* ---------- 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: var(--radius-sm);
  padding: 10px 14px;
}
.lobby-row .who{ display:flex; align-items:center; gap:10px; }
.lobby-row .seed{ color: var(--accent); font-size:0.85rem; width: 26px; font-weight: 700; }
.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: var(--radius-pill); padding:6px 12px; font-size:0.75rem; cursor:pointer; }
.copy-btn:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- 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-weight:700; font-size:1.1rem; margin: 6px 0 12px; letter-spacing: -0.01em; }

.board{
  display:flex; flex-direction:column; gap: 14px;
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.board-round-label{ font-size:0.68rem; font-weight: 700; color: var(--accent); margin-bottom:6px; }
.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: var(--radius-sm);
  padding: 8px 9px;
  min-height: 58px;
  position: relative;
  background: var(--panel-raised);
}
.slot.filled{ border-color: transparent; }
.slot.on-clock{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 14px rgba(55,225,126,0.3);
}
.slot .mgr{ font-size: 0.68rem; color: var(--chalk-dim); font-weight: 600; }
.slot .team{ font-weight: 700; font-size: 0.95rem; margin-top: 3px; }
.slot .pickno{ position:absolute; top:6px; right:8px; font-size:0.62rem; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.slot .auto-tag{ font-size:0.6rem; color: var(--accent); margin-top:2px; }

.turn-banner{
  background: var(--panel-raised); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 12px; font-size: 0.88rem;
}
.turn-banner.mine{ border-color: var(--accent); color: var(--accent); font-weight:700; background: var(--accent-soft); }
.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(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  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; }

.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: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; max-width: 380px; width: 100%;
  box-shadow: 0 20px 60px 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: var(--radius-sm);
  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(--accent); }
.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; }

.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; font-weight: 700; color: var(--chalk-dim); margin-bottom:6px; }
.pool-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }

.team-btn{
  display:flex; align-items:center; gap:10px;
  border-radius: var(--radius-sm); 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:26px; height:26px; border-radius: 50%; flex:none; }
.team-btn:hover:not(:disabled){ border-color: var(--accent); }
.team-btn.selected{
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft);
}
.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: var(--radius-sm); padding: 12px 14px; }
.result-row .rname{ font-weight:700; font-size:1.02rem; margin-bottom:6px; }
.result-teams{ display:flex; flex-wrap:wrap; gap:6px; }
.result-teams span{ font-size:0.78rem; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--panel); border:1px solid var(--line); }

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

.foot{
  position: fixed; bottom:0; left:0; right:0;
  background: var(--panel); 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: var(--panel); border-top: 1px solid var(--line);
  padding: 10px 20px; z-index: 24;
}
.link-row{ padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.link-row b{ color: var(--accent); 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; }