:root {
  --bg: #e7f5ee;
  --panel: #ffffff;
  --panel2: #d5ebdf;
  --line: #b4d6c4;
  --text: #123527;
  --muted: #5b7d6c;
  --accent: #d4a017;
  --green: #148f5a;
  --red: #c0392b;
  --blue: #2a7fc9; --input: #eaf6f0;
  --qb: #c23a30; --rb: #148f5a; --wr: #2a7fc9; --te: #7d4a9e; --k: #a67c00; --def: #587a68;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
}
h1, h2, h3 { margin: 0 0 .5em 0; font-weight: 600; }
button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 14px;
  cursor: pointer;
}
button:hover { border-color: var(--blue); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
button.good { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
button.danger { background: transparent; border-color: var(--red); color: var(--red); }
button.danger:hover { background: var(--red); color: #fff; }
button.warn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
input, select {
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
}
input:focus, select:focus { outline: none; border-color: var(--blue); }
input[type=number] { width: 90px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }

.pos { display: inline-block; min-width: 34px; text-align: center; padding: 1px 5px; border-radius: 4px;
       font-size: 11.5px; font-weight: 700; color: #fff; }
.pos-QB { background: var(--qb); } .pos-RB { background: var(--rb); } .pos-WR { background: var(--wr); }
.pos-TE { background: var(--te); } .pos-K { background: var(--k); } .pos-DEF { background: var(--def); }

/* ---------- operator layout ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar .phase { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.topbar .spacer { flex: 1; }

.wrap { padding: 16px 18px; max-width: 1500px; margin: 0 auto; }
.cols { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.card h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.onclock { font-size: 26px; font-weight: 700; }
.onclock .team { color: var(--accent); }

.timer { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 110px; text-align: center; }
.timer.low { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.nom-live { background: var(--panel2); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.nom-live .pname { font-size: 24px; font-weight: 700; }
.nom-live .bidline { font-size: 20px; margin-top: 6px; }
.nom-live .bidline .amt { color: var(--green); font-weight: 800; font-size: 26px; }

/* ---------- operator viewport-fit layout ----------
   Nomination header + team grid stay pinned in the viewport;
   admin tools and the log live in a side panel with its own scrollbar. */
.op-layout { display: flex; gap: 14px; height: calc(100vh - 92px); }
/* compact header card: one status line + one control line */
.op-head { padding: 8px 14px; }
.op-head .phase-lab { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; }
.op-head .onclock-sm { font-size: 17px; font-weight: 700; white-space: nowrap; }
.op-head .onclock-sm .team { color: var(--accent); }
.op-head .timer { font-size: 24px; min-width: 60px; }
.op-head .nom-live.compact { padding: 6px 10px; margin: 7px 0 0 0; }
.op-head .nom-live.compact input, .op-head .nom-live.compact select, .op-head .nom-live.compact button {
  padding: 5px 10px; font-size: 13.5px; }
.op-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.op-main > .card { margin-bottom: 0; flex: none; }
.op-main .opgrid { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.op-main .opcard { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.op-main .oplist { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
.op-main .oprow { min-height: 0; overflow: hidden; align-items: center; line-height: 1.2; }
.op-side { flex: none; width: 400px; overflow-y: auto; min-height: 0; padding-right: 2px; }
@media (max-width: 1100px) {
  .op-layout { display: block; height: auto; }
  .op-side { width: auto; overflow: visible; margin-top: 14px; }
  .op-main .opgrid { overflow: visible; }
}

/* ---------- operator 4x4 team grid ---------- */
.opgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .opgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.opcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; min-width: 0;
}
.opcard.onclock { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.opcard.highbid { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.opcard.dim { opacity: .45; }
.opcard.bidok { cursor: pointer; }
.opcard.bidok:hover { background: var(--panel2); border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.opcard .thead { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line);
  padding-bottom: 5px; margin-bottom: 5px; }
.opcard .trank { font-size: 11px; color: var(--muted); }
.opcard .tname { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.opcard.onclock .tname { color: var(--accent); }
.opcard .bidtag { font-size: 11px; font-weight: 700; background: var(--blue); color: #fff;
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.opcard.bidok:hover .bidtag { background: #fff; color: var(--blue); }
.opcard .tcap { font-size: 14px; font-weight: 800; color: var(--green); white-space: nowrap; cursor: pointer; }
.opcard .tcap:hover { text-decoration: underline; }
.opcard .tcap .tmax { font-size: 10.5px; font-weight: 400; color: var(--muted); margin-left: 4px; }

.oprow { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; line-height: 1.55; white-space: nowrap; }
.oprow.res { opacity: .6; }
.oprow.slot-empty { opacity: .35; }
.oprow .ppos { width: 44px; font-weight: 800; font-size: 11px; flex: none; color: var(--muted); }
.oprow .pnm { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.oprow .ppr { color: var(--green); font-weight: 600; flex: none; cursor: pointer; }
.oprow .ppr:hover { text-decoration: underline; }
.oprow.res .ppr { color: var(--muted); font-weight: 400; }
.oprow .mv { flex: none; width: 26px; padding: 0 1px; font-size: 10px; background: transparent;
  border: none; color: var(--muted); cursor: pointer; visibility: hidden; }
.oprow .del { flex: none; color: var(--red); cursor: pointer; font-size: 11px; visibility: hidden; }
.oprow:hover .mv, .oprow:hover .del { visibility: visible; }
.oprow .ppos-QB { color: var(--qb); } .oprow .ppos-RB { color: var(--rb); }
.oprow .ppos-WR { color: var(--wr); } .oprow .ppos-TE { color: var(--te); }
.oprow .ppos-K { color: var(--k); } .oprow .ppos-DEF { color: var(--def); }

table.teams { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.teams th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.teams td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.teams tr.current td { background: var(--panel2); }
table.teams tr.full td { opacity: .55; }
.capbar { color: var(--green); font-weight: 700; }

.roster-chip { display: inline-flex; gap: 4px; align-items: center; background: var(--panel2);
  border-radius: 5px; padding: 2px 7px; margin: 2px 2px 2px 0; font-size: 12.5px; }
.roster-chip .price { color: var(--green); font-weight: 600; }

.log { max-height: 300px; overflow-y: auto; font-size: 13px; }
.log div { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.log time { color: var(--muted); margin-right: 8px; font-size: 11.5px; }

details.admin { border: 1px solid var(--red); border-radius: 10px; padding: 0; margin-bottom: 16px; }
details.admin > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .06em; font-size: 14px; list-style: none;
}
details.admin > summary::before { content: '⚙ '; }
details.admin .inner { padding: 0 16px 16px 16px; }
.admin-section { border-top: 1px solid var(--line); padding: 12px 0; }
.admin-section h3 { font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.setup-table td, .setup-table th { padding: 4px 8px; }
.setup-table input[type=text] { width: 200px; }
.setup-table input[type=number] { width: 60px; }

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; }
.banner.ok { background: #d9f2e3; border: 1px solid var(--green); }
.banner.bad { background: #fbe3e3; border: 1px solid var(--red); }
.banner.info { background: #ddeafc; border: 1px solid var(--blue); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 12px 22px; border-radius: 8px;
  font-weight: 600; z-index: 100; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.toast.show { opacity: 1; }
.toast.ok { background: var(--green); color: #fff; }

.configs { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- board (projector): status strip + 4x4 roster grid ---------- */
body.board { overflow: hidden; }
.board-wrap { display: grid; grid-template-rows: auto 1fr; height: 100vh; padding: 1.2vh 1vw; gap: 1.2vh; }
.board-wrap.has-ctl { grid-template-rows: auto 1fr auto; }

.board-strip {
  display: flex; align-items: center; gap: 1.5vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .8vh 1.2vw; min-height: 6.5vh;
}
.board-strip .s-round { font-size: 2.4vh; color: var(--muted); letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.board-strip .s-clock { font-size: 2.6vh; white-space: nowrap; }
.board-strip .s-clock b { color: var(--accent); }
.board-strip .s-mid { flex: 1; display: flex; align-items: center; gap: 1.2vw; min-width: 0; }
.board-strip .s-pos { font-size: 2.2vh; font-weight: 800; padding: .2vh .6vw; border-radius: 6px; color: #fff; }
.board-strip .s-player { font-size: 3.6vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-strip .s-bid { font-size: 4.2vh; font-weight: 900; color: var(--green); white-space: nowrap; }
.board-strip .s-high { font-size: 2.8vh; font-weight: 700; color: var(--accent); white-space: nowrap; }
.board-strip .s-idle { font-size: 2.8vh; color: var(--muted); }
.board-strip .s-idle b { color: var(--accent); }
.board-timer { font-size: 4.5vh; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.board-timer.low { color: var(--red); animation: pulse 1s infinite; }

.board-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: .9vh .5vw; min-height: 0;
}
.tcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .6vh .6vw; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.tcard.onclock { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tcard.highbid { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.tcard.dim { opacity: .4; }
.tcard.bidok { cursor: pointer; }
.tcard.bidok:hover { background: var(--panel2); border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.thead .bidtag-b { font-size: 1.35vh; font-weight: 700; background: var(--blue); color: #fff;
  border-radius: 4px; padding: .1vh .5vw; white-space: nowrap; }
.tcard.bidok:hover .bidtag-b { background: #fff; color: var(--blue); }

/* board control bar */
.board-ctl {
  display: flex; align-items: center; gap: .7vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1vh 1vw; min-height: 6vh;
}
.board-ctl .c-grow { flex: 1; }
.board-ctl .c-note { font-size: 1.9vh; color: var(--muted); white-space: nowrap; }
.board-ctl .c-in {
  background: var(--input); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: .8vh .6vw; font-size: 2vh;
}
.board-ctl .c-in:focus { outline: none; border-color: var(--blue); }
.board-ctl .c-name { width: 26ch; }
.board-ctl .c-btn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: .8vh 1vw; font-size: 2vh; cursor: pointer; white-space: nowrap;
}
.board-ctl .c-btn:hover { border-color: var(--blue); }
.board-ctl .c-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.board-ctl .c-btn.sold { background: var(--green); border-color: var(--green); color: #fff; font-weight: 800; font-size: 2.4vh; }
.board-ctl .c-btn.danger { background: transparent; border-color: var(--red); color: var(--red); }
.board-ctl .c-btn.warn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.thead { display: flex; align-items: baseline; gap: .5vw; border-bottom: 1px solid var(--line); padding-bottom: .4vh; margin-bottom: .4vh; }
.thead .trank { font-size: 1.5vh; color: var(--muted); font-variant-numeric: tabular-nums; }
.thead .tname { font-size: 1.9vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tcard.onclock .thead .tname { color: var(--accent); }
.thead .tcap { font-size: 1.9vh; font-weight: 800; color: var(--green); white-space: nowrap; }
.thead .tcap .tmax { font-size: 1.3vh; font-weight: 400; color: var(--muted); margin-left: .4vw; }

.plist { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
.prow { display: flex; align-items: center; gap: .4vw; font-size: 1.35vh; line-height: 1.1; white-space: nowrap; min-height: 0; }
/* fewer rows per card outside the full view — text can breathe */
.mode-active .prow { font-size: 1.75vh; }
.mode-active .prow .ppos { font-size: 1.5vh; }
.mode-reserve .prow { font-size: 2vh; }
.mode-reserve .prow .ppos { font-size: 1.7vh; }
.rescap { font-size: 1.5vh; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px dashed var(--line); display: flex; align-items: center; }
.oplist .rescap { font-size: 11px; padding-bottom: 4px; margin-bottom: 4px; }
.prow.res { opacity: .6; }
.prow.slot-empty { opacity: .3; }
.prow .ppos { width: 5.4ch; font-weight: 800; font-size: 1.2vh; flex: none; color: var(--muted); }
.prow .pnm { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.prow .ppr { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.prow.res .ppr { color: var(--muted); font-weight: 400; }

/* ---------- header "score bug" band (Sky theme spice) ----------
   Deep navy→blue gradient with white text so the header pops on the light page. */
.board-strip, .op-head.card {
  background: linear-gradient(90deg, #0b3d2c 0%, #148f5a 100%);
  border: none;
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 2px 12px rgba(11, 61, 44, .3);
}
.board-strip .s-round, .op-head .phase-lab, .op-head .phase-lab .muted { color: #a8dcc3; }
.board-strip .s-clock, .board-strip .s-player, .op-head .onclock-sm { color: #fff; }
.board-strip .s-clock b, .board-strip .s-high, .op-head .onclock-sm .team { color: #ffd166; }
.board-strip .s-bid { color: #8ff0bd; }
.board-strip .s-idle { color: #bfe8d4; }
.board-strip .s-idle b { color: #ffd166; }
.board-timer, .op-head .timer { color: #fff; }
.board-timer.low, .op-head .timer.low { color: #ff7b6b; }
.op-head .nom-live { background: rgba(255, 255, 255, .14); }
.op-head .muted { color: #bfe8d4; }
.op-head .amt-big { color: #8ff0bd; font-weight: 800; font-size: 20px; }
.op-head .hi-team { color: #ffd166; }
.op-head b { color: #fff; }
.op-head .banner.ok { background: rgba(255, 255, 255, .14); border-color: #8ff0bd; color: #fff; }

/* position colors: filled chip in the strip, colored text in the grid */
.s-pos.ppos-QB { background: var(--qb); } .s-pos.ppos-RB { background: var(--rb); }
.s-pos.ppos-WR { background: var(--wr); } .s-pos.ppos-TE { background: var(--te); }
.s-pos.ppos-K { background: var(--k); } .s-pos.ppos-DEF { background: var(--def); }
.prow .ppos-QB { color: var(--qb); } .prow .ppos-RB { color: var(--rb); }
.prow .ppos-WR { color: var(--wr); } .prow .ppos-TE { color: var(--te); }
.prow .ppos-K { color: var(--k); } .prow .ppos-DEF { color: var(--def); }