/* FAF Tourney — command console theme v2 */
:root {
  --bg: #0C1219;
  --panel: #141D28;
  --panel2: #18232F;
  --line: #24344663;
  --line-solid: #243446;
  --text: #D7E1EA;
  --muted: #7C8FA3;
  --blue: #5C9EE8;
  --blue-dim: #5c9ee81f;
  --amber: #FFB447;
  --amber-dim: #ffb44718;
  --green: #6FCF8E;
  --red: #E2564A;
  --radius: 6px;
  --display: 'Chakra Petch', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 900px 480px at 50% -120px, #16283b66, transparent),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line-solid);
  background: rgba(12,18,25,.92);
  position: relative; z-index: 20;   /* scrolls with the page, as it always has (it was `sticky`, which the overflow rule above disabled) */
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 #ffb44715;
}
.wordmark { font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: var(--text); }
.wordmark:hover { text-decoration: none; }
.wm-faf { color: var(--amber); font-weight: 700; text-shadow: 0 0 14px #ffb44755; }
.wm-t { font-weight: 500; margin-left: 6px; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: 1px; flex-wrap: wrap; justify-content: flex-end; }
.gearbtn {
  background: none; border: 1px solid var(--line-solid); border-radius: 4px;
  color: var(--muted); cursor: pointer; padding: 5px 9px; font-size: 15px; line-height: 1;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.gearbtn:hover { color: var(--amber); border-color: #ffb44766; box-shadow: 0 0 10px #ffb44722; }

main { padding: 28px 0 80px; width: 100%; max-width: 100vw; overflow-x: hidden; }
.page { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.page-wide { max-width: 1480px; }
#app { display: block; width: 100%; max-width: 100vw; overflow-x: hidden; }
.widepage { padding: 0 34px; max-width: 100vw; overflow-x: hidden; }
/* `overflow-x: hidden` makes an element a scroll container, and a sticky element only sticks
   inside its nearest one: with it on html, body, main and #app nothing on the page could stick.
   `clip` cuts off the same overflow without that (browsers without it keep `hidden`). */
@supports (overflow: clip) {
  html, body, main, #app { overflow-x: clip; }
}
.widepage > .panel { max-width: 1180px; margin-left: auto; margin-right: auto; }


h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .5px; }
h1 { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
h2::before { content: ''; width: 8px; height: 8px; background: var(--amber); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
h2 .h2-strong { color: var(--text); }
h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-solid), transparent); }

/* panels with corner accent */
.panel {
  position: relative;
  background: linear-gradient(180deg, #16202c, var(--panel));
  border: 1px solid var(--line-solid);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 18px #0006;
}
.panel::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 22px; height: 22px; border-top: 2px solid #ffb44788; border-left: 2px solid #ffb44788;
  border-top-left-radius: var(--radius); pointer-events: none;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

/* forms */
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 14px 0 5px; font-family: var(--display); }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-solid); border-radius: 4px;
  font-family: var(--body); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #35506e; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px #5c9ee833, 0 0 14px #5c9ee822; }
textarea { resize: vertical; min-height: 64px; }
input[type=checkbox] { accent-color: var(--amber); width: 15px; height: 15px; }

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 9px 18px; border-radius: 4px;
  border: 1px solid var(--blue); background: var(--blue-dim); color: var(--blue);
  transition: background .12s, transform .06s, box-shadow .15s;
}
.btn:hover { background: #5c9ee836; box-shadow: 0 0 14px #5c9ee833; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--blue); color: #0A1420; }
.btn.primary:hover { background: #7cb4f0; box-shadow: 0 0 18px #5c9ee855; }
.btn.amber { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.btn.amber:hover { background: #ffb44730; box-shadow: 0 0 14px #ffb44733; }
.btn.danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn.danger:hover { background: #e2564a1c; box-shadow: 0 0 12px #e2564a33; }
.btn.ghost { border-color: var(--line-solid); color: var(--muted); background: transparent; }
.btn.ghost:hover { color: var(--text); box-shadow: none; background: #ffffff08; }
.btn.small { padding: 4px 10px; font-size: 11px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 3px;
  border: 1px solid var(--line-solid); color: var(--muted);
  background: #0c121980;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pill.signup   { color: var(--green); border-color: #6fcf8e55; }
/* signups exist but are waiting for their scheduled opening time - not the same as open */
.pill.presignup { color: var(--muted); border-color: var(--line-solid); }
.pill.presignup::before { box-shadow: none; opacity: .6; }
.pill.draft, .pill.drafted { color: var(--amber); border-color: #ffb44755; }
.pill.running  { color: var(--green); border-color: #6fcf8e66; background: #12331f66; }
.pill.running::before { animation: pulse 1.6s ease-in-out infinite; }
.pill.finished { color: var(--text); border-color: var(--line-solid); }
.pill.abandoned { color: #ff6369; border-color: #e5484d99; background: #3a181a80; font-weight: 700; }
/* home card chips */
.catbox { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; border-radius: 3px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; }
.catbox.official { color: var(--green); border: 1px solid #2f6b45; background: #12331f; }
.catbox.community { color: var(--muted); border: 1px solid var(--line-solid); background: #141d28; }
.countchip { display: inline-block; font-family: var(--display); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); background: #2a2113; border: 1px solid #6b5220; border-radius: 3px; padding: 5px 12px; font-weight: 700; white-space: nowrap; }
.countchip.countchip-close { color: #7fb0e0; background: #16222e; border-color: #2f4a63; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* phase stepper */
.stepper { display: flex; align-items: center; gap: 0; margin: 18px 0 24px; font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.stepper-label { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-right: 12px; opacity: .8; }
.step-arrow { flex: none; color: var(--muted); padding: 0 8px; opacity: .6; font-size: 13px; }
.step { flex: 1; text-align: center; padding: 8px 4px 9px; color: var(--muted); position: relative; background: transparent; border: 1px dashed var(--line-solid); border-radius: 2px; opacity: .75; }
.step.done { color: var(--blue); border: 1px solid #5c9ee84d; background: #5c9ee80f; opacity: 1; }
.step.done::before { content: '\2713 '; color: var(--green); }
.step.now { color: var(--amber); border: 1px solid #ffb44766; background: var(--amber-dim); box-shadow: 0 0 16px #ffb44722, inset 0 -2px 0 var(--amber); opacity: 1; }
.step.now::before { content: '\25B8 '; }

/* tabs — bordered pills */
.tabs { display: flex; gap: 8px; margin: 22px 0 22px; flex-wrap: wrap; }
.tab {
  font-family: var(--display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  padding: 9px 18px; cursor: pointer; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line-solid); border-radius: 4px;
  transition: color .12s, border-color .12s, box-shadow .15s, background .12s;
  position: relative;
}
.tab:hover { color: var(--text); border-color: #3a5878; }
.tab.active {
  color: var(--amber); border-color: #ffb44788; background: var(--amber-dim);
  box-shadow: 0 0 16px #ffb44726, inset 0 -2px 0 var(--amber);
}

/* launch queue (signature) */
.queue { display: flex; flex-direction: column; gap: 10px; }
.qitem {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel2); border: 1px solid var(--line-solid);
  border-left: 3px solid var(--amber);
  border-radius: 4px; padding: 12px 16px;
  transition: transform .1s, box-shadow .15s;
}
.qitem:not(.done):hover { transform: translateX(3px); box-shadow: -3px 0 14px #ffb44722; }
.qitem.live { border-left-color: var(--blue); }
.qitem.done { border-left-color: var(--line-solid); opacity: .75; }
.qround { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: 1px; white-space: nowrap; }
.qitem.live .qround { color: var(--blue); }
.qitem.done .qround { color: var(--muted); }
.qteams { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-size: 15px; font-weight: 600; }
.qvs { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.qscore { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.qwin { color: var(--green); }
.qrec { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-solid); border-radius: 3px; padding: 1px 7px; white-space: nowrap; }
.qitem.done .qrec { opacity: .8; }
.livechip { font-family: var(--mono); font-size: 10px; color: var(--blue); border: 1px solid #5c9ee855; border-radius: 3px; padding: 1px 7px; letter-spacing: 1px; }
.livechip::before { content: '● '; animation: pulse 1.6s infinite; }

/* bracket */
.bsection { margin-bottom: 30px; max-width: 100%; }
.bsection-title { font-family: var(--display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin: 0 auto 12px; padding-left: 12px; border-left: 3px solid var(--amber); width: max-content; max-width: 100%; }
.bsection-title.lb { border-left-color: var(--red); }
.bsection-title.gf { border-left-color: var(--green); }
.bracket { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 8px 2px 18px; }
.bname-team { cursor: pointer; }
.bname-team:hover { color: var(--amber); text-decoration: underline; }
.tp-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; }
.tp-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 4px; }
.tp-name { font-size: 14px; }
.tp-rating { font-size: 13px; }
.tp-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line-solid); font-size: 13px; color: var(--muted); }
.veto-card-foot, .veto-pop-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-solid); }
.binner { display: flex; gap: 46px; position: relative; width: max-content; margin: 0 auto; }
svg.connectors { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
svg.connectors path { stroke: #2c4258; stroke-width: 2; fill: none; }
.bcol { display: flex; flex-direction: column; min-width: 220px; }
.bcol-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.bcol-title { font-family: var(--display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 2px; }
.bcol-bo { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.bcol-bo select { width: auto; font-family: var(--mono); font-size: 11px; padding: 1px 4px; background: var(--panel2); color: var(--fg); border: 1px solid var(--line-solid); border-radius: 3px; }
/* The 3rd place match hangs under the final, in its column (hangUnderFinal in app.bracket.js). The
   spacer above the final is sized to the block below it, so the final stays centred. */
.bfinal-stack { display: flex; flex-direction: column; }
.bthird { margin-top: 26px; }
.bthird-spacer { margin-bottom: 26px; }
.bthird .bcol-title { margin-bottom: 4px; }
.third-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.mapblock {
  border: 1px solid #2c4258; border-left: 3px solid var(--blue);
  border-radius: 4px; background: #101a26;
  padding: 8px 12px 9px; margin: 2px 0 12px;
  text-align: left;
}
.mapblock-head { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--blue); margin-bottom: 5px; display: flex; justify-content: space-between; gap: 8px; }
.mapblock-head a { font-family: var(--body); letter-spacing: 0; }
.maprow { font-size: 13px; padding: 2px 0; display: flex; gap: 10px; align-items: baseline; }
.bcol .mapblock { max-width: 240px; }
.maprow span:last-child { word-break: break-word; }
.maprow .mapg { font-family: var(--mono); font-size: 10px; color: var(--amber); letter-spacing: 1px; white-space: nowrap; min-width: 52px; }
.bmatch { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; overflow: hidden; transition: border-color .15s, box-shadow .15s; position: relative; z-index: 1; }
.bmatch.ready { border-color: #ffb44766; }
.bmatch.preview { opacity: .82; border-style: dashed; }
.ffacard.preview { opacity: .82; border-style: dashed; }
.bmatch.ready:hover { box-shadow: 0 0 16px #ffb44722; }
.bmatch.live { border-color: #5c9ee877; box-shadow: 0 0 14px #5c9ee81f; }
.botag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--amber); letter-spacing: .8px; text-transform: uppercase; padding: 4px 10px 2px; opacity: .95; }
.brow { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; font-size: 14px; gap: 8px; }
.brow + .brow { border-top: 1px solid var(--line-solid); }
.brow .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2px; min-width: 0; }
.brow.winner { background: #6fcf8e12; }
.brow.winner .bname { color: var(--green); font-weight: 600; }
.brow .bscore { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.ff-mark { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #ff6369; letter-spacing: 1px; }
.ff-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-solid); }
.win-pick.on { border-color: var(--amber); color: var(--amber); background: var(--amber-dim, #2a2113); }
.brow.winner .bscore { color: var(--green); }
.bname.tbd { color: var(--muted); font-style: italic; }
.bfoot { padding: 5px 10px; border-top: 1px solid var(--line-solid); text-align: right; }
.seedtag { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-right: 6px; }

/* ffa cards */
.ffagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ffacard { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; padding: 12px 14px; }
.ffacard.ready { border-color: #ffb44766; }
.ffacard ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ffacard li { padding: 3px 0; font-size: 14px; display: flex; justify-content: space-between; }
.ffacard li.won { color: var(--green); font-weight: 600; }
.ffacard li.lost { color: var(--muted); text-decoration: line-through; }

/* lists / tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-solid); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: #ffffff05; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.rank1 td { color: var(--amber); font-weight: 600; }
.rank2 td { color: #cfd8e3; }
.rank3 td { color: #c9a06a; }

/* team cards */
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.teamcard { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; padding: 14px 16px; transition: transform .1s, box-shadow .15s; }
.teamcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #0008; }
.teamcard.elim { opacity: .55; }
.teamcard h3 { margin: 0 0 8px; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.teamcard ul { margin: 0; padding: 0; list-style: none; }
.teamcard li { padding: 3px 0; font-size: 14px; }
.captag { font-family: var(--mono); font-size: 10px; color: var(--amber); letter-spacing: 1px; margin-left: 6px; }

/* draft */
.draft-turn {
  background: var(--amber-dim); border: 1px solid #ffb44755; border-left: 4px solid var(--amber); border-radius: 4px;
  padding: 14px 18px; margin-bottom: 18px;
  font-family: var(--display); font-size: 16px;
  box-shadow: 0 0 22px #ffb44715;
}
.draft-turn strong { color: var(--amber); }
.pool { display: flex; flex-wrap: wrap; gap: 8px; }
.poolchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px;
  padding: 6px 6px 6px 12px; font-size: 14px;
  transition: border-color .12s;
}
.poolchip:hover { border-color: #3a5878; }
.poolchip .rating { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.openslot { color: var(--muted); font-style: italic; opacity: .7; }
.datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 14px; background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; }
.datebar .db-label { font-family: var(--display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.datebar .db-value { font-size: 14px; color: var(--text); }
.datebar button { margin-left: auto; }
.tdate { color: var(--amber); }
.tprize { color: var(--green); font-weight: 600; }
.tcat { color: var(--amber); font-size: 13px; font-weight: normal; }
.dctag { color: var(--muted, #8a97a8); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.seedlist { list-style: none; margin: 0; padding: 0; }
.seeditem { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px; background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; cursor: grab; }
.seeditem.dragging { opacity: .5; border-color: var(--amber); }
.seeditem .seednum { font-family: var(--mono); font-size: 13px; color: var(--amber); min-width: 22px; text-align: center; }
.seeditem .seedname { flex: 1; font-size: 14px; }
.seeditem .seedbtns { display: flex; gap: 4px; }
.seeditem .seedbtns button { background: #0c1219; border: 1px solid var(--line-solid); color: var(--muted); border-radius: 3px; width: 26px; height: 26px; cursor: pointer; font-size: 11px; line-height: 1; }
.seeditem .seedbtns button:hover { color: var(--amber); border-color: var(--amber); }
.vetobox { margin: 6px 8px 4px; padding: 8px; background: #0c1219; border: 1px solid var(--line-solid); border-radius: 4px; }
.vetobox.done { background: #10261a; border-color: #2f6b45; }
.veto-head { font-family: var(--display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.veto-banned, .veto-remaining, .veto-final { display: flex; flex-wrap: wrap; gap: 5px; }
.veto-banned { margin-bottom: 6px; }
.veto-map { font-size: 12px; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line-solid); }
.veto-map.banned { color: var(--muted); text-decoration: line-through; opacity: .6; background: transparent; }
.veto-map.avail { color: var(--text); background: var(--panel2); }
.veto-map.ban { cursor: pointer; color: var(--text); background: var(--panel2); }
.veto-map.ban:hover { border-color: var(--red); color: var(--red); }
.veto-map.play { color: var(--green); border-color: #2f6b45; background: #12331f; font-weight: 600; }
.vseq { display: flex; flex-direction: column; gap: 4px; }
.vstep { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #0c1219; border: 1px solid var(--line-solid); border-radius: 4px; }
.vstep-n { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 18px; }
.vstep-team { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.vstep-team.team-A { color: #7db8ff; border: 1px solid #2d5a9e; }
.vstep-team.team-B { color: #ffb066; border: 1px solid #6b5220; }
.vstep-act { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.vstep-act.ban { color: var(--red); }
.vstep-act.pick { color: var(--green); }
.vstep-ctl { margin-left: auto; display: flex; gap: 3px; }
.vstep-ctl button { background: #0c1219; border: 1px solid var(--line-solid); color: var(--muted); border-radius: 3px; width: 22px; height: 22px; cursor: pointer; font-size: 10px; }
.vstep-ctl button:hover:not(:disabled) { color: var(--amber); border-color: var(--amber); }
.vstep-ctl button:disabled { opacity: .3; cursor: default; }
.vstep-del:hover:not(:disabled) { color: var(--red) !important; border-color: var(--red) !important; }
.veto-summary { margin-top: 10px; font-size: 13px; color: var(--muted); }
.veto-ab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.veto-abtag { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 3px; }
.veto-abtag.team-A { color: #7db8ff; border: 1px solid #2d5a9e; }
.veto-abtag.team-B { color: #ffb066; border: 1px solid #6b5220; }
.veto-history { margin-bottom: 8px; }
.vg-dec { font-family: var(--mono); font-size: 9px; color: var(--amber); text-transform: uppercase; }
.veto-map.act-ban { cursor: pointer; color: var(--text); background: var(--panel2); }
.veto-map.act-ban:hover { border-color: var(--red); color: var(--red); }
.veto-map.act-pick { cursor: pointer; color: var(--text); background: var(--panel2); }
.veto-map.act-pick:hover { border-color: var(--green); color: var(--green); }
.veto-section-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.veto-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.veto-card-head h2 { margin: 0; }
.veto-card-teams { font-size: 14px; color: var(--text); }
.veto-card.veto-done { border-color: #2ea04355; background: linear-gradient(180deg, #16261a 0%, var(--panel, #0f1620) 60%); box-shadow: 0 0 0 1px #2ea04333; }
.veto-done-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #3fb950; background: #2ea04322; border: 1px solid #2ea04366; border-radius: 3px; padding: 1px 6px; margin-right: 8px; vertical-align: 2px; }
.vteam-name { cursor: pointer; }
.vteam-name:hover { color: var(--amber); text-decoration: underline; }
.vstat-panel { border-color: #FFB44744; }
.vstat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.vstat-h { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.vstat-row { display: grid; grid-template-columns: 130px 1fr 28px; align-items: center; gap: 8px; margin-bottom: 5px; }
.vstat-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vstat-bar { height: 12px; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 3px; overflow: hidden; }
.vstat-fill { display: block; height: 100%; }
.vstat-fill.ban { background: #ff6369aa; }
.vstat-fill.play { background: #3fb95099; }
.vstat-num { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 640px) { .vstat-cols { grid-template-columns: 1fr; } }
.veto-card .vetobox { border: none; padding: 0; background: transparent; }
.veto-mini { margin-top: 6px; }
.veto-mini-link { font-size: 12px; color: var(--amber); text-decoration: none; }
.veto-mini-link:hover { text-decoration: underline; }
.veto-mini.done { display: flex; flex-wrap: wrap; gap: 4px; }
.veto-mini-map { font-family: var(--mono); font-size: 11px; color: var(--green); border: 1px solid #2f6b45; background: #12331f; border-radius: 3px; padding: 1px 6px; }
.mapdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mapdb-card { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.mapdb-thumb { height: 150px; background: #0c1219; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.mapdb-thumb.noimg { cursor: default; }
.mapdb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mapdb-noimg-label { color: var(--muted); font-size: 12px; }
.mapdb-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mapdb-name { font-weight: 600; font-size: 15px; }
.mapdb-desc { font-size: 13px; color: var(--text2, #b8c0cc); white-space: pre-wrap; }
.mapdb-used { font-size: 11px; color: var(--amber); }
.mapdb-used.muted { color: var(--muted); }
.mapdb-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.me-image { display: flex; gap: 14px; align-items: flex-start; }
.me-thumb { width: 140px; height: 100px; background: #0c1219; border: 1px solid var(--line-solid); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.me-thumb img { width: 100%; height: 100%; object-fit: cover; }
.me-image-ctl { flex: 1; }
.map-lightbox-img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 6px; cursor: zoom-in; margin: 6px 0; background: #0c1219; }
.map-desc { font-size: 14px; color: var(--text2, #b8c0cc); white-space: pre-wrap; margin: 8px 0; padding: 10px; background: var(--panel2); border-radius: 4px; }
.veto-map.has-info { cursor: pointer; }
.veto-map.has-info:hover { border-color: var(--amber); }



.btn.faf { display: block; width: 100%; background: #2d5a9e; color: #eaf2fb; border: 1px solid #3f74c4; font-weight: 600; letter-spacing: .5px; }
.btn.faf:hover { background: #366bbd; box-shadow: 0 0 12px #2d5a9e55; }
.or-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 14px 0; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-solid); }
.or-divider span { padding: 0 12px; }
.verifiedchip { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--green); border: 1px solid #2f6b45; background: #12331f; border-radius: 3px; padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
.idbadge { display: inline-block; font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.idbadge.verified { color: var(--green); border: 1px solid #2f6b45; background: #12331f; }
.idbadge.manual { color: var(--muted); border: 1px solid var(--line-solid); }
.idbadge.late { color: var(--amber); border: 1px solid #6b5220; background: #2a2110; text-transform: uppercase; letter-spacing: .5px; }
.cap-count { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cap-count .warn, .warn { color: var(--amber); }
.signed-in-note { color: var(--green); font-size: 14px; margin: 4px 0 12px; }
.teammates { display: flex; flex-wrap: wrap; gap: 8px; }
.teammate { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; padding: 6px 12px; font-size: 14px; }
.cap-tag { font-family: var(--mono); font-size: 9px; color: var(--amber); text-transform: uppercase; letter-spacing: .5px; border: 1px solid #6b5220; border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.tc-count.over { color: #ff6369; border-color: #e5484d99; }
/* veto map cards with thumbnails */
.veto-map.vm-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; min-width: 92px; }
.vm-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line-solid); display: block; }
.vm-thumb.dim { opacity: .45; filter: grayscale(.6); }
.veto-map.vm-card .vm-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veto-map.banned .vm-name { text-decoration: line-through; }
.invchip { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.invchip.accepted { color: var(--green); border: 1px solid #2f6b45; background: #12331f; }
.invchip.declined { color: #ff6369; border: 1px solid #e5484d66; background: #3a181a80; }
.invchip.pending { color: var(--amber); border: 1px solid #6b5220; background: #2a2113; }
.mono.warn { color: #ff6369; }
.dcpill { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--amber); border: 1px dashed #6b5220; background: #2a2113; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.replayline { font-family: var(--mono); font-size: 10px; color: var(--muted); margin: 4px 10px 6px; word-break: break-all; }
.reward-panel { border-left: 3px solid var(--amber); }
.stream-panel { border-left: 3px solid #a855f7; }
.sponsor-panel { border-left: 3px solid var(--green); }
.chat-room.pinged { border-color: #e5484d; color: #ff6369; background: #3a181a40; font-weight: 700; }
/* organizer callout at the top of the Chats sidebar */
.org-callout { border: 1px solid #6b5220; border-left: 3px solid var(--amber); background: linear-gradient(90deg, #2a211360, transparent); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.org-callout-title { font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.org-callout-names { font-size: 13px; margin-bottom: 6px; }
.org-name { display: inline-block; font-weight: 700; font-size: 14px; color: var(--amber); border: 1px solid #6b5220; background: #2a2113; border-radius: 3px; padding: 3px 10px; margin: 2px 5px 2px 0; }
.org-callout-hint { font-size: 12px; color: var(--muted); }
.org-callout-hint code { color: var(--amber); background: #2a2113; border-radius: 3px; padding: 0 4px; }
/* FAQ sub-page links */
.faq-sublinks { display: flex; flex-direction: column; gap: 6px; }
.faq-sublink { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-solid); border-left: 3px solid var(--amber); border-radius: 4px; background: var(--panel2); color: var(--text); font-size: 14px; }
.faq-sublink:hover { border-color: var(--amber); color: var(--amber); }
.faq-links { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.faq-links a { color: var(--blue); }
.stream-line { font-size: 13px; margin: 4px 0; overflow-wrap: anywhere; }
/* chat */
.chat-layout { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.chat-rooms { flex: 0 0 240px; max-width: 100%; }
.chat-roomlist { display: flex; flex-direction: column; gap: 4px; }
.chat-room { text-align: left; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 4px; color: var(--text, #dbe2ea); padding: 8px 10px; cursor: pointer; font-size: 13px; }
.chat-room:hover { border-color: var(--amber); }
.chat-room.mentioned { border-color: #e5484d; }
.chat-room-badges { display: inline-flex; gap: 4px; vertical-align: middle; }
.chat-mention-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: #e5484d; color: #fff; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 0 4px; }
.chat-room-group { margin: 12px 0 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.chat-group-toggle { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 4px 4px; display: flex; align-items: center; gap: 6px; }
.chat-group-toggle:hover { color: var(--text, #dbe2ea); }
.cg-caret { font-size: 10px; }
.chat-completed { display: flex; flex-direction: column; gap: 4px; }
.chat-room.active { border-color: var(--amber); color: var(--amber); background: var(--amber-dim, #2a2113); }
.chat-host { flex: 1; min-width: 280px; }
.chat-panel { display: flex; flex-direction: column; border: 1px solid var(--line-solid); border-radius: 6px; background: var(--panel, #0f1620); overflow: hidden; }
.chat-head { padding: 10px 12px; border-bottom: 1px solid var(--line-solid); font-family: var(--display); letter-spacing: 1px; text-transform: uppercase; font-size: 13px; color: var(--amber); }
.chat-log { height: clamp(380px, calc(100vh - 300px), 1100px); overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-compact .chat-log { height: clamp(240px, 45vh, 420px); }
.chat-msg { font-size: 13px; }
.chat-who { font-weight: 700; color: var(--blue); }
.chat-time { color: var(--muted); font-size: 10px; margin-left: 6px; font-family: var(--mono); cursor: help; }
/* day separator so a message's date is obvious without stamping it on every line */
.chat-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: #2a3d55; }
.chat-day span { color: var(--muted); font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.chat-day:first-child { margin-top: 0; }
.chat-mod { margin-left: 8px; }
.chat-mod a { color: var(--muted); font-size: 11px; margin-left: 6px; }
.chat-mod a:hover { color: #ff6369; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 1px; }
.chat-sys { font-size: 12px; color: var(--amber); font-style: italic; }
.chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-solid); }
.chat-input input { flex: 1; }
.chat-inwrap { position: relative; flex: 1; display: flex; }
.chat-inwrap input { flex: 1; }
.chat-mentions { position: absolute; left: 0; bottom: calc(100% + 4px); min-width: 200px; max-width: 320px; max-height: 240px; overflow-y: auto; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 6px; box-shadow: 0 6px 22px #000a; z-index: 40; padding: 4px; }
.chat-mention { padding: 6px 10px; border-radius: 4px; font-size: 13px; cursor: pointer; color: var(--text, #dbe2ea); }
.chat-mention:hover, .chat-mention.on { background: var(--amber-dim, #2a2113); color: var(--amber); }
.chat-ping { color: var(--amber); background: #FFB44722; border-radius: 3px; padding: 0 3px; font-weight: 600; }
.match-chat-line { margin: 4px 10px 6px; }
.reward-body { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; margin-top: 6px; }
/* tournament news */
.news-post .news-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.news-post .news-body { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.news-post .news-actions { margin-left: auto; }
.news-post .news-actions a { font-size: 12px; color: var(--muted); margin-left: 8px; }
.news-post .news-actions a.danger-link { color: var(--danger, #e5484d); }
.news-important { border-left: 3px solid var(--amber); background: linear-gradient(90deg, #ffb44710, transparent 40%); }
.news-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); border: 1px solid #6b5220; background: #2a2113; border-radius: 3px; padding: 2px 7px; }
.tab-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; background: var(--danger, #e5484d); border-radius: 8px; padding: 0 4px; margin-left: 7px; vertical-align: middle; }
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.teamcard { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 6px; padding: 12px; }
.teamcard.full { border-color: #2f6b45; }
.teamcard.open { border-color: #6b5220; }
.tc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tc-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.tc-seed { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--amber); background: #FFB44722; border: 1px solid #FFB44755; border-radius: 4px; padding: 0 6px; margin-right: 2px; vertical-align: 1px; }
.tc-count { font-family: var(--mono); font-size: 12px; color: var(--amber); white-space: nowrap; }
.tc-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.tc-count.ok { color: var(--green); }
.tc-members { display: flex; flex-direction: column; gap: 3px; font-size: 13px; margin-bottom: 10px; }
.tc-members > div { color: var(--text); }
.tc-join { width: 100%; }
.tc-admin { margin-top: 8px; border-top: 1px solid var(--line-solid); padding-top: 8px; }
.unteamed { display: flex; flex-wrap: wrap; gap: 6px; }
.unteamed-chip { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; padding: 4px 10px; font-size: 13px; }
.unteamed-chip[data-assign] { cursor: pointer; }
.unteamed-chip[data-assign]:hover { border-color: var(--amber); }
.assign-hint { font-family: var(--mono); font-size: 9px; color: var(--amber); margin-left: 4px; }
.divgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.divcol { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 6px; padding: 12px; }
.divcol h3 { margin: 0 0 10px; font-size: 14px; }
.divteam { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: #0c1219; border: 1px solid var(--line-solid); border-radius: 4px; margin-bottom: 6px; font-size: 13px; }
.divteam select { font-size: 12px; padding: 2px; }
.teamtotal { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-solid); font-family: var(--display); font-size: 11px; letter-spacing: 1px; color: var(--amber); }
.pickorder { display: flex; flex-wrap: wrap; gap: 7px; }
.po-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 4px 11px 4px 6px; border: 1px solid var(--line-solid); border-radius: 3px; background: var(--panel2); color: var(--text); }
.po-chip .po-num { font-family: var(--mono); font-size: 10px; color: var(--muted); background: #0c1219; border-radius: 2px; padding: 1px 5px; }
.po-chip.po-done { opacity: .45; }
.po-chip.po-done .po-num::after { content: ' \2713'; color: var(--green); }
.po-chip.po-now { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); box-shadow: 0 0 10px #ffb44722; }
.po-chip.po-now .po-num { color: var(--amber); }

/* champion */
.champ {
  text-align: center; padding: 34px 20px; margin-bottom: 22px;
  border: 1px solid #ffb44755; border-radius: var(--radius);
  background:
    radial-gradient(ellipse 380px 130px at 50% 0%, #ffb44726, transparent),
    linear-gradient(180deg, var(--amber-dim), transparent);
  box-shadow: 0 0 40px #ffb44711;
}
.champ .champ-label { font-family: var(--mono); font-size: 12px; letter-spacing: 4px; color: var(--amber); text-transform: uppercase; }
.champ h1 { font-size: 40px; margin: 8px 0 0; color: var(--text); text-shadow: 0 0 30px #ffb44744; }

/* toast + modal */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--line-solid); border-left: 3px solid var(--blue);
  color: var(--text); padding: 12px 20px; border-radius: 4px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100;
  max-width: 90vw; box-shadow: 0 8px 30px #000a;
}
#toast.show { opacity: 1; }
#toast.err { border-left-color: var(--red); }
.modal-bg { position: fixed; inset: 0; background: rgba(5,9,14,.86); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--panel); border: 1px solid #35506e; border-radius: var(--radius); padding: 24px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px #000c, 0 0 30px #5c9ee814; }
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal .row { display: flex; gap: 12px; align-items: flex-start; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.copybox { display: flex; gap: 8px; margin: 6px 0 14px; }
.copybox input { font-family: var(--mono); font-size: 12px; }

.section { margin-bottom: 26px; }
.headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.headrow-right { display: flex; align-items: center; gap: 10px; }
.streamer-toggle.on { border-color: var(--amber); color: var(--amber); background: var(--amber-dim, #2a2113); }
.empty { color: var(--muted); font-style: italic; padding: 14px 0; }

.tlist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; background: var(--panel2);
  border: 1px solid var(--line-solid); border-left: 3px solid var(--line-solid);
  border-radius: 4px; margin-bottom: 8px;
  transition: border-color .12s, transform .1s;
}
.tlist-item:hover { border-left-color: var(--amber); transform: translateX(2px); }
.tlist-item .tname { font-family: var(--display); font-size: 16px; font-weight: 600; }
.tlist-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tlist-item > div:first-child { min-width: 0; flex: 1; }
.tlist-item > span:last-child { flex: 0 0 auto; }

.infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.infogrid-top { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.infogrid + .infogrid { margin-top: 0; }
.infocell { background: #0c121980; border: 1px solid var(--line-solid); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.infocell .ic-label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); margin-bottom: 5px; }
.ic-body { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
/* rich-text (markdown-lite) elements */
.ic-body .art-h1, .art-preview .art-h1, .news-body .art-h1 { display: block; font-family: var(--display); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 10px 0 4px; }
.ic-body .art-h2, .art-preview .art-h2, .news-body .art-h2 { display: block; font-family: var(--display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); margin: 8px 0 3px; }
.ic-body .art-h3, .art-preview .art-h3, .news-body .art-h3 { display: block; font-weight: 700; font-size: 13px; margin: 6px 0 2px; }
.ic-body .art-li, .art-preview .art-li, .news-body .art-li { display: block; padding-left: 16px; position: relative; }
.ic-body .art-li::before, .art-preview .art-li::before, .news-body .art-li::before { content: '\2022'; position: absolute; left: 4px; color: var(--amber); }
.md-toolbar { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.md-toolbar button { background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 3px; color: var(--text, #dbe2ea); font-size: 12px; min-width: 30px; padding: 4px 8px; cursor: pointer; }
.md-toolbar button:hover { border-color: var(--amber); color: var(--amber); }
.req { color: var(--danger, #e5484d); }
.desc-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.desc-gallery > a, .desc-thumb { display: block; }
.desc-gallery img { max-height: 130px; max-width: 220px; border-radius: 4px; border: 1px solid var(--line-solid); object-fit: cover; display: block; }
.desc-thumb { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tc-checkin { margin-top: 6px; }
.pending-bar { display: flex; align-items: center; gap: 12px; background: rgba(245,180,60,0.12); border-bottom: 1px solid var(--amber); padding: 8px 16px; font-size: 13px; }
.pending-bar .pending-text { flex: 1; }
.pending-more { color: var(--muted, #8a97a8); font-size: 12px; }
/* Admin housekeeping alert: blue instead of the amber "your turn" urgency, and the only
   pending row that carries a dismiss button. */
.pending-bar.pending-admin { background: rgba(92,158,232,0.12); border-bottom: 1px solid var(--blue); }
.pending-x {
  background: none; border: 1px solid var(--line-solid); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 8px;
  transition: color .15s, border-color .15s;
}
.pending-x:hover { color: var(--text); border-color: var(--blue); }
.tc-requests { margin-top: 8px; border-top: 1px solid var(--line-solid); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tc-req { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.tc-req-btns { white-space: nowrap; }
.tc-pending { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.modal-wide { max-width: 760px; }
.modal-mid { max-width: 640px; }
/* spawn number toggles in the map editor */
.spawn-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.spawn-chip {
  min-width: 30px; padding: 4px 6px; border-radius: 4px; cursor: pointer;
  background: #16202c; border: 1px solid #35506e; color: var(--muted);
  font: inherit; font-size: 12px; line-height: 1.2;
}
.spawn-chip:hover { border-color: var(--blue); color: var(--text); }
.spawn-chip.on { background: #1d3a5c; border-color: var(--blue); color: var(--text); font-weight: 600; }
/* structured map spec lines, shown above the free-text description */
.mapdb-desc-spec, .map-desc-spec {
  font-size: 12px; line-height: 1.5; color: var(--text);
  margin-bottom: 6px; white-space: normal;
}
.map-desc-spec { font-size: 13px; }
.ic-body .art-img, .art-preview .art-img { display: block; max-width: 100%; max-height: 420px; border-radius: 4px; border: 1px solid var(--line-solid); margin: 8px 0; }
.art-preview { margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line-solid); border-radius: 4px; background: #0c121980; min-height: 60px; }

.scale-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.scale-row input[type=range] { flex: 1; accent-color: var(--amber); }


/* ---------- mobile ---------- */
@media (max-width: 720px) {
  main { padding: 18px 0 60px; }
  .tlist-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tlist-item > span:last-child { width: 100%; justify-content: flex-start !important; }
  .page { padding: 0 14px; }
  .widepage { padding: 0 14px; }

  .topbar { padding: 10px 14px; gap: 8px; }
  .wordmark { font-size: 16px; letter-spacing: 1px; }
  .topbar-right { gap: 8px; width: 100%; }
  .topbar-right span { display: none; }               /* hide ORGANIZER/CAPTAIN text label */
  .topbar-right .btn.small { padding: 6px 10px; }

  h1 { font-size: 22px; }
  h2 { font-size: 14px; }

  /* stepper + tabs scroll horizontally instead of squishing */
  .stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stepper-label { display: none; }
  .step-arrow { padding: 0 5px; }
  .step { flex: 0 0 auto; padding: 7px 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab { flex: 0 0 auto; padding: 8px 14px; }

  .panel { padding: 14px; }
  .grid2 { grid-template-columns: 1fr; gap: 14px; }
  .infogrid { grid-template-columns: 1fr; }
  .teamgrid, .ffagrid { grid-template-columns: 1fr; }

  /* tables: let them scroll rather than overflow the panel */
  .panel table { display: block; overflow-x: auto; white-space: nowrap; }

  /* queue / recent-results: stack cleanly on narrow screens instead of squishing */
  .qitem { flex-direction: column; align-items: stretch; gap: 8px; }
  .qround { white-space: normal; }
  .qteams { font-size: 15px; gap: 6px; }
  .qteams .qvs { margin: 0 2px; }
  .qscore { font-size: 18px; }
  .qitem .btn.small { align-self: flex-start; }

  .headrow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .copybox input { font-size: 11px; }
  .modal { padding: 18px; }
  .champ h1 { font-size: 30px; }
}

@media (max-width: 420px) {
  .wordmark .wm-t { display: none; }                   /* just "FAF" on very small screens */
  .tab { font-size: 12px; padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* veto indicator spacing (issue 4) */
.veto-mini { margin: 8px 10px 4px; }
.veto-mini-link { font-size: 13px; }
/* larger turn text (issue 6) */
.veto-head { font-size: 15px !important; margin-bottom: 10px; }
.vetobox .veto-head strong { font-size: 16px; }
/* explicit A/B set control (issue 5) */
.veto-abset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; }
/* per-BO tabs */
.bo-tabs { display: flex; gap: 4px; margin: 6px 0; }
.bo-tab { background: var(--panel2); border: 1px solid var(--line-solid); color: var(--muted); padding: 6px 16px; border-radius: 4px; cursor: pointer; font-family: var(--mono); font-size: 13px; }
.bo-tab.active { color: var(--amber); border-color: var(--amber); background: #2a2110; }
/* map pool cards */
.pool-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pool-card { background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 6px; padding: 12px; }
.pool-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pool-card-name { font-weight: 600; font-size: 15px; }
.pool-card-maps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pool-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pool-thumb { position: relative; border: 1px solid var(--line-solid); border-radius: 4px; overflow: hidden; background: var(--panel); cursor: pointer; aspect-ratio: 1 / 1; }
.pool-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pool-thumb.noimg { display: flex; align-items: center; justify-content: center; }
.pool-thumb-noimg { color: var(--muted); font-size: 11px; }
.pool-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, #000a); color: #fff; font-size: 11px; padding: 10px 6px 4px; line-height: 1.1; }
@media (max-width: 720px) { .pool-thumbs { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } }
.pool-map-chip { font-size: 11px; color: var(--text2, #b8c0cc); border: 1px solid var(--line-solid); border-radius: 3px; padding: 1px 6px; }
.pool-card-assign { font-size: 12px; color: var(--amber); margin-bottom: 8px; }
.pool-card-assign.muted { color: var(--muted); }
.pool-card-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line-solid); padding-top: 8px; }

.pool-status { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pool-status-row { padding: 6px 10px; background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; font-size: 13px; }

/* ---- compact clickable pick lists (replaces checkbox lists) ---- */
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.pick-item {
  background: var(--panel2); border: 1px solid var(--line-solid); color: var(--muted);
  border-radius: 4px; padding: 6px 12px; font-size: 13px; font-family: var(--body);
  cursor: pointer; transition: none; display: inline-flex; align-items: center; gap: 6px;
}
.pick-item:hover { border-color: var(--amber); color: var(--text); }
.pick-item.on { background: #12331f; border-color: #3f8f5c; color: var(--green); font-weight: 600; }
.pick-item.on:hover { border-color: var(--green); }
.pick-rows { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.pick-row {
  background: var(--panel2); border: 1px solid var(--line-solid); color: var(--muted);
  border-radius: 4px; padding: 8px 12px; font-size: 14px; font-family: var(--body);
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px;
}
.pick-row:hover { border-color: var(--amber); color: var(--text); }
.pick-row.on { background: #12331f; border-color: #3f8f5c; color: var(--green); font-weight: 600; }
.pick-count { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* clickable table rows (captain marking) */
tr.pickrow { cursor: pointer; }
tr.pickrow:hover td { background: #182230; }
tr.pickrow.on td { background: #12331f; }
tr.pickrow.on td:nth-child(2) { color: var(--green); font-weight: 600; }
.cap-yes { font-family: var(--mono); font-size: 10px; color: var(--green); border: 1px solid #3f8f5c; border-radius: 3px; padding: 2px 7px; }
.cap-no { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* pool map list: one per line, scrollable, with a tick marker */
#plMaps { max-height: 220px; }
#plMaps .pick-row { padding: 7px 12px; }
.pr-name { flex: 1; }
.pr-tick::after { content: ''; }
.pick-row.on .pr-tick::after { content: '✓'; color: var(--green); font-weight: 700; }

.ok-msg { color: var(--green); }
.pool-card-warn { font-size: 12px; color: var(--amber); margin-bottom: 6px; }

/* "it's your turn" banner */
.turn-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #2a2110, #1d1a12);
  border: 1px solid var(--amber); border-left-width: 4px;
  border-radius: 6px; padding: 12px 16px; margin-bottom: 14px;
}
.turn-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex-shrink: 0;
  animation: turnpulse 1.6s ease-in-out infinite;
}
@keyframes turnpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.turn-text { flex: 1; font-size: 15px; font-weight: 600; color: var(--amber); }
@media (max-width: 640px) {
  .turn-banner { flex-wrap: wrap; }
  .turn-text { flex-basis: 100%; }
}

.veto-abset.needed { border-color: var(--amber); background: #2a2110; }
.veto-wait { padding: 12px; text-align: center; color: var(--muted); font-size: 14px; background: var(--panel2); border-radius: 4px; margin-top: 4px; }

.mapsub { font-size: 11px; color: var(--muted); border-top: none; padding-top: 0; }
.swiss-map-prep { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.swiss-map-prep .bcol { min-width: 190px; }

/* site admin console */
.sa-req { display: flex; gap: 14px; align-items: flex-start; padding: 12px; background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 6px; margin-bottom: 8px; }
.sa-req-main { flex: 1; }
.sa-req-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.sa-req-msg { font-size: 13px; color: var(--text2, #b8c0cc); margin-bottom: 4px; white-space: pre-wrap; }
.sa-req-act { display: flex; gap: 6px; flex-shrink: 0; }
.sa-log td { vertical-align: top; }
.log-new { color: var(--green); }
.log-del { color: var(--red, #d9534f); }
@media (max-width: 640px) { .sa-req { flex-wrap: wrap; } }
.dc-nudge { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line-solid); border-radius: 4px; }
.setup-headline { color: var(--amber); font-size: 13px; margin: 0 0 12px; }
.briefing-wide { margin-top: 14px; }
.pr-tag { color: var(--amber); font-size: 11px; font-family: var(--mono); margin-right: 8px; }

/* scheduled-publish banner row */
.pub-sched { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border: 1px solid #FFB44755; background: #FFB4470f; border-radius: 4px; font-size: 13px; }

/* Publishing with a second account (decision 51): the draft banner's state line, its buttons, the
   approver's box, and the chips on draft cards. */
.pub-state { margin-top: 10px; padding: 8px 10px; border-radius: 4px; font-size: 13px; border: 1px solid var(--line-solid); }
.pub-state.pub-wait { border-color: #FFB44755; background: #FFB4470f; }
.pub-state.pub-ok { border-color: #2f6b45; background: #12331f; }
.pub-state.pub-warn { border-color: #FFB447aa; background: #FFB4471f; }
.pub-state.pub-no { border-color: #e5484d88; background: #e5484d14; }
.pub-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.approve-box { border-color: #5c9ee888; }
.approve-head { color: var(--blue); letter-spacing: 1px; }
.pub-reject { margin-top: 10px; }
.pub-reject textarea { width: 100%; margin: 0 0 6px; }
.idbadge.pubchip { text-transform: uppercase; letter-spacing: .5px; }
.idbadge.pubchip.pub-wait { color: var(--amber); border: 1px solid #6b5220; background: #2a2110; }
.idbadge.pubchip.pub-ok { color: var(--green); border: 1px solid #2f6b45; background: #12331f; }
.idbadge.pubchip.pub-warn { color: #ffcf8a; border: 1px solid #8a6a2a; background: #3a2c10; }
.idbadge.pubchip.pub-no { color: #ff8a8d; border: 1px solid #7a2d30; background: #2d1214; }
/* A link to a site that is not on the allowed list: its text, not clickable (decision 51). */
.link-off { border-bottom: 1px dotted var(--muted); cursor: help; }
/* home page: the viewer's own unpublished drafts */
.draft-panel { border-color: #FFB44755; }

/* free agents (players not yet on a team) */
.fa-panel { border-color: #4c8fd455; }
.fa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.fa-card { border: 1px solid var(--line-solid); border-radius: 5px; background: var(--panel2, #141d28); padding: 8px 10px; }
.fa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fa-name { font-size: 14px; overflow-wrap: anywhere; }
.fa-rating { font-size: 13px; color: var(--muted); }
.fa-actions { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.fa-sort.on { border-color: var(--amber); color: var(--amber); background: var(--amber-dim, #2a2113); }

/* ordered ban/pick log */
.veto-log { margin-top: 12px; border-top: 1px solid var(--line-solid); padding-top: 10px; }
.vlog-row { display: grid; grid-template-columns: 22px 52px minmax(90px, 170px) 1fr; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.vlog-n { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
.vlog-act { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-align: center; border-radius: 3px; padding: 1px 0; }
.vlog-act.ban { color: #ff6369; background: #ff63691f; border: 1px solid #ff636944; }
.vlog-act.pick { color: #3fb950; background: #2ea04322; border: 1px solid #2ea04355; }
.vlog-act.dec { color: var(--amber); background: #FFB44722; border: 1px solid #FFB44755; }
.vlog-team { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlog-map { overflow-wrap: anywhere; }
.vlog-row.decider .vlog-map { color: var(--amber); font-weight: 600; }

/* ---- Matches tab (observer / streamer view) ---- */
.mt-table { width: 100%; border-collapse: collapse; }
.mt-table th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line-solid); font-weight: 400; }
.mt-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.mt-table tr:last-child td { border-bottom: none; }
.mt-table tbody tr:hover { background: #ffffff06; }
.mt-team { cursor: pointer; }   /* truncation is handled by .mt-teamcell on the td */
.mt-team:hover { color: var(--amber); text-decoration: underline; }
.mt-team.win { color: #3fb950; font-weight: 600; }
.mt-state { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.mt-state.wait { color: var(--muted); background: #ffffff0d; border: 1px solid var(--line-solid); }
.mt-state.ready { color: #4c8fd4; background: #4c8fd422; border: 1px solid #4c8fd455; }
.mt-state.veto { color: var(--amber); background: #FFB44722; border: 1px solid #FFB44755; }
.mt-state.live { color: #ff6369; background: #ff63691f; border: 1px solid #ff636944; }
.mt-state.done { color: #3fb950; background: #2ea04322; border: 1px solid #2ea04355; }
.mt-actions { text-align: right; white-space: nowrap; }
.mt-actions .btn { margin-left: 6px; }

/* match details popup */
.md-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; margin: 12px 0 4px; }
.md-team { border: 1px solid var(--line-solid); border-radius: 6px; padding: 10px 12px; background: var(--panel2, #141d28); }
.md-team.win { border-color: #2ea04366; background: linear-gradient(180deg, #16261a 0%, var(--panel2, #141d28) 70%); }
.md-tname { font-weight: 700; font-size: 15px; margin-bottom: 8px; cursor: pointer; overflow-wrap: anywhere; }
.md-tname:hover { color: var(--amber); }
.md-wintag { font-family: var(--mono); font-size: 9px; color: #3fb950; border: 1px solid #2ea04366; border-radius: 3px; padding: 1px 5px; vertical-align: 2px; }
.md-players { display: flex; flex-direction: column; gap: 3px; }
.md-p { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.md-mid { text-align: center; padding-top: 6px; }
.md-score { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; }
.md-colon { color: var(--muted); margin: 0 4px; }
.md-foot { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-solid); }
@media (max-width: 700px) { .md-grid { grid-template-columns: 1fr; } .md-mid { padding: 6px 0; } }

/* ---- stats page ---- */
.st-champ { border-color: #FFB44766; text-align: center; }
.st-champ-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.st-card { border: 1px solid var(--line-solid); border-radius: 6px; background: var(--panel2, #141d28); padding: 12px; }
.st-val { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1; }
.st-lbl { font-size: 13px; margin-top: 5px; }
.st-sub { margin-top: 3px; }
.st-list { display: flex; flex-direction: column; gap: 4px; }
.st-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.st-rank { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 20px; text-align: right; }
.st-name { flex: 1; overflow-wrap: anywhere; }
.st-num { color: var(--muted); }
.st-bar { flex: 0 0 140px; height: 10px; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 3px; overflow: hidden; }
.st-fill { display: block; height: 100%; background: #3fb95099; }

/* ---- series ---- */
.series-block { border-color: #4c8fd455; }
.sr-list, .sr-eds { display: flex; flex-direction: column; gap: 8px; }
.sr-item, .sr-ed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-solid); border-radius: 6px; background: var(--panel2, #141d28); text-decoration: none; color: inherit; }
.sr-item:hover, .sr-ed:hover { border-color: var(--amber); }
.sr-name, .sr-ed-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.sr-count { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-row.st-unused .st-name { color: var(--muted); }

/* While a modal is open, stop the page behind it animating. Infinite CSS animations force
   continuous compositing of everything underneath a full-screen overlay, which spins up fans
   on long pages (the Matches tab in particular). */
body.modal-open .pill.running::before,
body.modal-open .livechip::before,
body.modal-open .turnbanner { animation: none !important; }

/* map thumbnails inside the match-details veto log */
.vlog-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line-solid); display: block; }
.vlog-thumb.ban { opacity: .4; filter: grayscale(.7); }
.vlog-noimg { width: 34px; height: 34px; border-radius: 3px; border: 1px dashed var(--line-solid); display: block; }
.vlog-row.with-thumb { grid-template-columns: 22px 52px 34px minmax(90px, 150px) 1fr; }

/* ---- parent / child qualification ---- */
.qualify-block { border-color: #FFB44755; }
.qb-list { margin: 4px 0 0; padding-left: 18px; }
.qb-list li { margin-bottom: 5px; }
.ql-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ql-toggle input { width: auto; margin: 0; }
.ql-add { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.ql-pick { position: relative; flex: 1; min-width: 220px; }
.ql-pick input { width: 100%; }
.ql-opts { position: absolute; left: 0; right: 0; top: calc(100% + 3px); max-height: 240px; overflow-y: auto; background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 5px; box-shadow: 0 8px 24px #000a; z-index: 30; }
.ql-opt { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.ql-opt:hover { background: var(--amber-dim, #2a2113); color: var(--amber); }
.ql-opt.muted { cursor: default; }
.ql-opt.muted:hover { background: none; color: var(--muted); }
.ql-list { display: flex; flex-direction: column; gap: 8px; }
.ql-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 11px; border: 1px solid var(--line-solid); border-radius: 5px; background: var(--panel2, #141d28); }
.ql-name { font-weight: 600; }
.inv-via { font-family: var(--mono); font-size: 10px; color: var(--amber); border: 1px solid #FFB44755; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }

/* keep the score visible no matter how long the team/player label is */
.brow .bscore { flex: 0 0 auto; }
/* match chat + veto link share one compact row */
.mlinks { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 6px 10px 0; overflow: hidden; }
.mlinks .veto-mini-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* headline cash prize cell at the top of Rewards */
.prize-cell { margin-bottom: 10px; }
.prize-amount { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--amber); }
.prize-row { display: flex; gap: 8px; align-items: center; }
.prize-row select { width: 130px; }
.prize-row input { width: 150px; }

/* keyboard shortcut help */
.hk-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.hk-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.hk-row kbd, .hk-key { font-family: var(--mono); font-size: 12px; min-width: 42px; text-align: center; padding: 4px 8px; border: 1px solid var(--line-solid); border-bottom-width: 2px; border-radius: 4px; background: var(--panel2, #141d28); color: var(--amber); cursor: pointer; }
.hk-key:hover { border-color: var(--amber); }
.hk-key.arming { border-color: var(--amber); background: var(--amber-dim, #2a2113); }
.hk-row span { flex: 1; }
.hk-clear { opacity: .7; }

/* Long player-name labels must never clip or push the score/status out of view.
   IMPORTANT: only the two team cells may shrink. Constraining every cell (max-width:0) collapses
   the fixed columns and makes their text overlap the neighbours. */
.mt-teamcell { max-width: 0; width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fixed { white-space: nowrap; width: 1%; }
.veto-card-teams { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veto-card-head { flex-wrap: nowrap; gap: 12px; }
.veto-card-head h2 { white-space: nowrap; }

/* Vetoes tab: a sub-page per part of the tournament (Swiss stage / playoffs, or a division) and
   the follow box that narrows the page to one team or player */
.veto-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.subtab {
  font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 12px; cursor: pointer; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line-solid); border-radius: 4px;
}
.subtab:hover { color: var(--text); border-color: #3a5878; }
.subtab.active { color: var(--amber); border-color: #ffb44788; background: var(--amber-dim); box-shadow: inset 0 -2px 0 var(--amber); }

/* Admin tab: four sub-tabs (Info, Format, Signups, People). On a desktop the bar stays in reach
   down a long sub-tab; each sub-tab opens with jump links to its panels; a link from elsewhere
   flashes the spot it opened. */
.admin-nav { margin: 0 0 14px; padding: 8px 0; }
.admin-subtabs .subtab { font-size: 13px; padding: 8px 18px; }
.admin-subtabs .tab-badge { margin-left: 6px; }
.admin-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-size: 12px; margin: 0 0 16px; }
.admin-toc > .muted { margin-right: 8px; }
.admin-toc a { color: var(--blue); }
.admin-toc .toc-dot { color: var(--muted); margin: 0 7px; }
.admin-pane .panel { scroll-margin-top: 72px; }
.admin-flash { animation: adminFlash 1.6s ease-out; }
@keyframes adminFlash {
  0% { box-shadow: 0 0 0 2px var(--amber), 0 0 24px #ffb44766; }
  100% { box-shadow: 0 0 0 2px #ffb44700, 0 0 24px #ffb44700; }
}
@media (min-width: 721px) {
  .admin-nav {
    position: sticky; top: 0; z-index: 15;
    background: var(--bg);   /* solid: a see-through bar smudges the fields scrolling under it */
    border-bottom: 1px solid var(--line-solid);
    box-shadow: 0 10px 14px -12px #000c;
  }
}
@media (max-width: 720px) {
  .admin-subtabs { flex-wrap: nowrap; }
  .admin-subtabs .subtab { flex: 1 1 0; min-width: 0; padding: 8px 4px; text-align: center; font-size: 12px; }
  .admin-pane .panel { scroll-margin-top: 10px; }
}
.veto-follow { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.veto-follow select { width: auto; max-width: 280px; padding: 6px 9px; }
@media (max-width: 700px) {
  .veto-follow { margin-left: 0; width: 100%; }
  .veto-follow select { flex: 1; max-width: none; }
}

/* replay ids link to the FAF vault */
.replay-link { color: inherit; text-decoration: underline dotted; }
.replay-link:hover { color: var(--amber); text-decoration: underline; }
/* organizers listed one per row with their discord handle */
.org-callout-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
/* The name and its Discord handle are welded into one pill: square inner corners so they read as
   a single object, which is what makes it obvious whose handle it is. Never truncated - the pair
   wraps as a unit instead, so a handle can't end up orphaned under someone else's name. */
.org-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-idpair { display: inline-flex; align-items: stretch; max-width: 100%; }
.org-idpair .org-name { margin: 2px 0; border-radius: 3px 0 0 3px; border-right: none; }
.org-idpair .org-discord {
  margin: 2px 0; border-radius: 0 3px 3px 0; border-left: 1px solid #6b5220;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.org-discord { font-family: var(--mono); font-size: 11px; color: var(--blue); background: #4c8fd41f; border: 1px solid #4c8fd444; border-radius: 3px; padding: 1px 6px; }
/* chat notice shown before the tournament starts */
.chat-prestart { border-color: #FFB44755; }

/* Quiet unread marker. Intentionally much softer than the red @mention badge - a mention needs
   you personally, unread just means something was said. */
.unread-dot { display: inline-block; min-width: 14px; height: 14px; line-height: 14px; text-align: center; padding: 0 4px; margin-left: 4px; border-radius: 7px; font-size: 10px; font-weight: 700; color: var(--blue); background: #4c8fd426; border: 1px solid #4c8fd455; vertical-align: 1px; }
.tab-badge.quiet { background: #4c8fd426; border: 1px solid #4c8fd455; color: var(--blue); }
.series-desc { margin: 0 0 14px; }

/* ---- series name colours (fixed palette so nothing can be unreadable) ---- */
.c-amber  { color: var(--amber); }
.c-blue   { color: var(--blue); }
.c-green  { color: #3fb950; }
.c-red    { color: #ff6369; }
.c-purple { color: #a371f7; }
.c-plain  { color: var(--text); }
.sr-title { font-family: var(--display); letter-spacing: 1px; }
.sr-inline { font-weight: 700; }
.sr-item-main { min-width: 0; }
.sr-name { font-family: var(--display); font-size: 19px; letter-spacing: 1px; margin-bottom: 3px; }
/* long descriptions must not swamp the list */
.sr-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.sr-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-swatch { font-family: var(--display); font-size: 14px; width: 38px; height: 30px; border: 1px solid var(--line-solid); border-radius: 4px; background: var(--panel2, #141d28); cursor: pointer; }
.sr-swatch:hover { border-color: var(--amber); }
.sr-swatch.on { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }

/* ---------- faction veto ---------- */
/* A game's faction choice (inside the games table, .vgt). Colours stand in for faction logos
   (which are game assets we don't ship); the initial plus the name keeps it unambiguous. */
.fveto-col {
  margin-left: auto; padding-left: 14px; border-left: 1px solid #2a3d55;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  min-width: 210px; max-width: 340px;
}
/* Your turn. The old active state was a 1px amber edge and a small amber line of text, which
   is why players did not notice they were on the clock. It now reads as a job. */
.fveto-col.active {
  border-left-color: var(--amber); border-left-width: 3px;
  background: linear-gradient(90deg, #ffb44714, transparent 70%);
  border-radius: 0 4px 4px 0; padding-top: 2px; padding-bottom: 4px;
}
.fveto-turn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #0A1420; background: var(--amber); border-radius: 3px; padding: 2px 8px 2px 6px;
  box-shadow: 0 0 12px #ffb44740;
}
.fveto-turn .turn-dot { width: 7px; height: 7px; background: #0A1420; }
/* the amber "you owe a faction choice" link on a bracket box and in a veto card */
.fveto-cta { color: var(--amber); font-weight: 600; }
.fveto-cta:hover { text-decoration: underline; }
.fveto-cta .fv-count {
  display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 2px;
  border-radius: 7px; background: var(--amber); color: #0A1420;
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-align: center;
}
.fveto-col.done { border-left-color: var(--green); }
.fveto-prompt { font-size: 13px; font-weight: 700; color: var(--amber); }
.fveto-chips, .fveto-mine { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fveto-wait { font-size: 12px; color: var(--muted); font-style: italic; }
.fveto-note { line-height: 1.4; }
.fveto-res { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fv-who { color: var(--muted); min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-arrow { color: var(--muted); font-size: 12px; }

.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px; border-radius: 4px; font: inherit; font-size: 11px;
  background: #16202c; border: 1px solid #35506e; color: var(--text); cursor: default;
}
.fchip .fchip-glyph {
  width: 17px; height: 17px; border-radius: 3px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 10px; color: #08121c;
}
.fchip.f-uef  .fchip-glyph { background: #4a90d9; }
.fchip.f-aeon .fchip-glyph { background: #57c46a; }
.fchip.f-cybran .fchip-glyph { background: #d9534f; }
.fchip.f-sera .fchip-glyph { background: #d9b84a; }
.fchip.clickable { cursor: pointer; }
.fchip.clickable:hover { border-color: var(--amber); background: #1d2b3a; }
.fchip.dim { opacity: .4; }
.fchip.dim .fchip-name { text-decoration: line-through; }
.fchip.on { border-color: var(--green); }
.fchip[disabled] { cursor: default; }
/* The games of a series, one aligned row each: game, map, then each team's faction. Used in the
   veto popup, on the Vetoes tab and in the match details. */
.vgt { width: 100%; margin-top: 4px; font-size: 13px; }
/* phones turn panel tables into sideways scrollers; this one is built to fit instead */
.panel table.vgt { display: table; overflow-x: visible; white-space: normal; }
.vgt th { font-size: 10px; padding: 5px 8px; }
.vgt td { padding: 6px 8px; vertical-align: middle; }
.vgt .vgt-n { width: 1%; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.vgt td.vgt-map .veto-map { display: inline-block; margin-right: 6px; }
.vgt th.vgt-f { min-width: 72px; white-space: normal; overflow-wrap: anywhere; }
.vgt td.vgt-f { width: 1%; white-space: nowrap; }
/* an open faction choice spans both team columns; it sits in the row, not beside it */
.vgt .fveto-col { margin: 0; padding: 0; border: none; min-width: 0; max-width: none; width: auto; }
.vgt .fveto-col.active { padding: 2px 0 4px 10px; border-left: 3px solid var(--amber); }
@media (max-width: 520px) {
  .vgt th, .vgt td { padding: 5px 4px; }
  .vgt td.vgt-f .fchip-name { display: none; }
  /* the ban / pick order: the team above its map, no thumbnail, so the map name keeps its width */
  .vlog-row, .vlog-row.with-thumb { grid-template-columns: 18px 46px minmax(0, 1fr); row-gap: 1px; }
  .vlog-row .vlog-thumb, .vlog-row .vlog-noimg { display: none; }
  .vlog-row .vlog-team, .vlog-row .vlog-map { grid-column: 3; }
  .vlog-row .vlog-n, .vlog-row .vlog-act { grid-row: span 2; }
}
@media (max-width: 700px) {
  .fveto-col { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px solid #2a3d55; padding-top: 8px; width: 100%; max-width: none; }
}

/* ---------- chat: reply / quote and @everyone ---------- */
.chat-quote {
  display: flex; gap: 6px; align-items: baseline; cursor: pointer;
  border-left: 2px solid #3a5a80; padding: 2px 0 2px 8px; margin-bottom: 3px;
  font-size: 11px; color: var(--muted); max-width: 100%;
}
.chat-quote:hover { border-left-color: var(--blue); }
.chat-quote .cq-who { color: var(--blue); font-weight: 600; flex: 0 0 auto; }
.chat-quote .cq-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg .chat-mod a[data-chatreply] { color: var(--muted); }
.chat-msg .chat-mod a[data-chatreply]:hover { color: var(--blue); }
/* the composer's "replying to" bar */
.chat-replybar {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  background: #16202c; border-left: 2px solid var(--blue);
  padding: 4px 8px; margin-bottom: 4px; border-radius: 0 4px 4px 0;
}
.chat-replybar .crb-label { color: var(--muted); flex: 0 0 auto; }
.chat-replybar .crb-who { color: var(--blue); font-weight: 600; flex: 0 0 auto; }
.chat-replybar .crb-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-replybar .crb-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.chat-replybar .crb-x:hover { color: var(--text); }
/* an @everyone announcement stands out from ordinary chatter */
.chat-msg.chat-everyone { background: rgba(217,184,74,0.10); border-left: 2px solid var(--amber); padding-left: 8px; border-radius: 0 4px 4px 0; }
/* brief flash when jumping to a quoted original */
.chat-flash { background: rgba(92,158,232,0.18); transition: background 1s; }

/* ---------- veto: make BAN vs PICK unmissable, and confirm before committing ---------- */
.veto-act {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-weight: 800; letter-spacing: .06em; font-size: 12px;
}
.veto-act-ban  { color: #ff6b63; }
.veto-act-pick { color: #5fd177; }
span.veto-act-ban  { background: rgba(217,83,79,0.18);  border: 1px solid rgba(217,83,79,0.55); }
span.veto-act-pick { background: rgba(87,196,106,0.15); border: 1px solid rgba(87,196,106,0.5); }
.veto-head-ban  { border-left: 3px solid #d9534f; padding-left: 8px; }
.veto-head-pick { border-left: 3px solid #57c46a; padding-left: 8px; }
/* the "your turn" line under the header */
.veto-yourturn {
  margin: 6px 0 10px; padding: 6px 10px; border-radius: 4px; font-size: 12px;
  background: #16202c; border-left: 3px solid currentColor;
}
/* a map armed by the first click, waiting for the second */
.veto-map.armed { outline: 2px solid var(--amber); outline-offset: 1px; position: relative; }
.veto-map .vm-confirm {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: var(--amber); text-transform: uppercase;
}
.veto-map.act-ban.armed  { outline-color: #d9534f; }
.veto-map.act-ban.armed  .vm-confirm { color: #ff6b63; }
.veto-map.act-pick.armed { outline-color: #57c46a; }
.veto-map.act-pick.armed .vm-confirm { color: #5fd177; }
.veto-map[disabled] { opacity: .5; cursor: default; }
/* armed faction chip, awaiting its confirming second click */
.fchip.armed { outline: 2px solid var(--amber); outline-offset: 1px; }
.fchip.armed .fchip-name { font-weight: 700; }
.fchip[disabled].armed { opacity: 1; }

/* your own matches, tinted in every Matches-tab section */
tr.mt-mine > td { background: rgba(217,164,74,0.07); }
tr.mt-mine > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tr.mt-mine:hover > td { background: rgba(217,164,74,0.12); }
/* replay links inside the match details popup */
.md-replays { margin: 10px 0 0; font-size: 12px; text-align: center; }
.md-replays a { margin-right: 2px; }
/* the speaker's Discord handle, attached to their own message so it is never ambiguous */
.chat-dc {
  font-family: var(--mono); font-size: 10px; color: var(--blue);
  background: #4c8fd41f; border: 1px solid #4c8fd444; border-radius: 3px;
  padding: 0 5px; margin-left: 6px; vertical-align: baseline;
}

/* "How the veto will run" preview, shown on a map pool before any of it happens */
.vp-title { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vp-steps { display: flex; flex-direction: column; gap: 3px; }
.vp-step { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 6px; border-radius: 3px; background: #16202c; }
.vp-step.decider { background: #1d2b1f; }
.vp-n { min-width: 18px; text-align: right; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.vp-team { color: var(--text); }

/* home: collapsible completed archive, split by year */
h2.collapsy { cursor: pointer; user-select: none; }
h2.collapsy:hover { color: var(--amber); }
/* a folding heading's caret takes the place of the theme's triangle, rather than sitting next to it */
h2.collapsy::before { display: none; }
.collapsy-caret { display: inline-block; width: 12px; color: var(--amber); font-size: 12px; }
.cmp-year { margin-top: 14px; }
.cmp-year:first-child { margin-top: 4px; }
.cmp-year-head {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); border-bottom: 1px solid #2a3d55; padding-bottom: 4px;
}
.cmp-more { margin-top: 8px; }

/* ---------------------------------------------------------------------------
   Chat dock (public/app.dock.js)
   The viewer's chats as tabs on the right, so they stay readable while the user
   works through the bracket, matches and vetoes. Fixed to the viewport, and the
   page is PADDED out of its way rather than covered: an overlay would sit on top
   of match boxes and swallow their clicks. Minimized it is one button in the
   corner; narrow screens get a bottom sheet instead of a rail.
   --------------------------------------------------------------------------- */
:root { --pin-w: clamp(300px, 25vw, 370px); --pin-top: 56px; --pin-h: min(58vh, 440px); }

.chat-dock {
  position: fixed; right: 0; top: var(--pin-top); bottom: 0;
  width: var(--pin-w);
  z-index: 18;                       /* under the sticky top bar (20) and any modal (50) */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16202c, var(--panel));
  border-left: 1px solid var(--line-solid);
  box-shadow: -14px 0 34px #00000073;
}
.chat-dock::before {                 /* the amber edge every panel in this theme carries */
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--amber), transparent 55%); opacity: .5;
}
.cd-launch { display: none; }
.cd-head { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 0 8px; border-bottom: 1px solid var(--line-solid); }
.cd-tabs { flex: 1; min-width: 0; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.cd-tab {
  flex: 0 1 auto; max-width: 160px; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 5px 6px 9px; margin-bottom: -1px;
  border: 1px solid var(--line-solid); border-bottom-color: transparent; border-radius: 5px 5px 0 0;
  background: #111923; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.cd-tab:hover { color: var(--text); }
.cd-tab.on { background: var(--panel2); color: var(--amber); border-color: #ffb44766; border-bottom-color: var(--panel2); }
.cd-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cd-tab-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-x { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 3px; border-radius: 3px; }
.cd-x:hover { color: var(--red); background: #e2564a1c; }
.cd-badge {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1;
  padding: 2px 5px; border-radius: 8px; background: var(--blue); color: #0c1219;
}
.cd-badge.mention { background: var(--red); color: #fff; }
.cd-badge.ping { background: none; padding: 0; font-size: 12px; }
.cd-min {
  flex: none; align-self: center; margin-bottom: 5px;
  background: none; border: 1px solid var(--line-solid); border-radius: 4px; cursor: pointer;
  color: var(--muted); font-size: 11px; padding: 3px 8px;
}
.cd-min:hover { color: var(--amber); border-color: var(--amber); }
.cd-body { flex: 1; min-height: 0; display: flex; }
/* minimized: just a button in the corner, with what is waiting */
.chat-dock.collapsed { top: auto; left: auto; right: 16px; bottom: 16px; width: auto; height: auto; background: none; border: none; box-shadow: none; }
.chat-dock.collapsed::before, .chat-dock.collapsed .cd-head, .chat-dock.collapsed .cd-body { display: none; }
.chat-dock.collapsed .cd-launch {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); color: var(--amber); border: 1px solid #ffb44788; border-radius: 20px;
  padding: 9px 16px; font-family: var(--display); letter-spacing: 1px; font-size: 13px; cursor: pointer;
  box-shadow: 0 10px 28px #000a;
}
.chat-dock.collapsed .cd-launch:hover { border-color: var(--amber); background: #1f2c3a; }
/* the panel fills the dock: the log takes the slack, the composer stays at the bottom */
.chat-panel.chat-panel-pinned { flex: 1; min-height: 0; height: 100%; border: none; border-radius: 0; background: transparent; }
.chat-panel-pinned .chat-log { height: auto; flex: 1 1 auto; min-height: 0; }
.chat-panel-pinned .chat-input { flex-wrap: wrap; }
.chat-panel-pinned .chat-input .btn { flex: 0 0 auto; }
/* in the narrow dock the message box gets the whole row, the buttons go under it */
.chat-panel-pinned .chat-inwrap { flex: 1 1 100%; }
.chat-panel-docked .chat-head { font-size: 11px; padding: 6px 10px; }

body.chat-docked main { padding-right: calc(var(--pin-w) + 10px); }
body.chat-docked #toast { transform: translateX(calc(-50% - (var(--pin-w) / 2))); }

/* chat panel header: label on the left, controls on the right */
.chat-head { display: flex; align-items: center; gap: 8px; }
.chat-head .ch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .ch-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.ch-icon {
  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; padding: 4px 6px;
  transition: color .15s, border-color .15s, background .15s;
}
.ch-icon:hover { color: var(--amber); border-color: #ffb44755; background: var(--amber-dim); }

/* "Keep open on the right" - quiet until you want it, amber once it is on */
.chat-pin-btn {
  background: transparent; border: 1px solid var(--line-solid); border-radius: 4px;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  font-family: var(--body); font-size: 11px; letter-spacing: .04em; text-transform: none;
  padding: 4px 9px; transition: color .15s, border-color .15s, background .15s;
}
.chat-pin-btn:hover { color: var(--amber); border-color: #ffb44766; background: var(--amber-dim); }
.chat-pin-btn.on { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }

/* room list: the room button and its pin toggle sit side by side */
.chat-room-row { display: flex; align-items: stretch; gap: 4px; }
.chat-room-row .chat-room { flex: 1; min-width: 0; }
.chat-pin-mini {
  flex: 0 0 auto; width: 30px;
  background: var(--panel2, #141d28); border: 1px solid var(--line-solid); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  opacity: .45; transition: opacity .15s, border-color .15s, background .15s;
}
.chat-room-row:hover .chat-pin-mini { opacity: .9; }
.chat-pin-mini:hover { opacity: 1; border-color: var(--amber); background: var(--amber-dim); }
.chat-pin-mini.on { opacity: 1; border-color: var(--amber); background: var(--amber-dim); box-shadow: 0 0 10px #ffb44722; }
.chat-pin-hint { margin: 10px 0 0; line-height: 1.45; }

/* Narrow screens have no room for a rail - the dock becomes a bottom sheet. */
@media (max-width: 980px) {
  .chat-dock:not(.collapsed) {
    top: auto; left: 0; right: 0; width: auto; height: var(--pin-h);
    border-left: none; border-top: 1px solid var(--line-solid);
    box-shadow: 0 -14px 34px #00000073;
  }
  .chat-dock:not(.collapsed)::before { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--amber), transparent 55%); }
  body.chat-docked main { padding-right: 0; padding-bottom: calc(var(--pin-h) + 24px); }
  body.chat-docked #toast { transform: translateX(-50%); bottom: calc(var(--pin-h) + 16px); }
  .chat-pin-btn { font-size: 10px; padding: 4px 7px; }
}

/* Which rating counts and as of when. It was three grey sentences competing with the Discord
   help text and players missed it; it is now a bordered callout the eye lands on. */
.rating-callout {
  border: 1px solid var(--line-solid); border-left: 3px solid var(--amber);
  border-radius: 4px; background: #ffb4470a;
  padding: 10px 12px; margin: 12px 0;
}
.rating-callout .rc-src { font-size: 13px; }
.rating-callout .rc-req { margin-top: 6px; }
.rating-callout strong, .rating-source strong { color: var(--amber); }
.rating-source { font-size: 13px; }

/* organizer-only all-leaderboard rating breakdown */
.ar-table { width: 100%; }
.ar-table td, .ar-table th { padding: 6px 8px; }
.ar-table tr.ar-counted { background: #ffb4470f; }
.ar-table tr.ar-counted td { color: var(--text); }
.ar-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #0A1420; background: var(--amber); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------------
   Multi-day events: the day picker, and the "runs on N days" chip
   --------------------------------------------------------------------------- */
.tdays {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--amber); border: 1px solid #ffb44755; background: var(--amber-dim);
  border-radius: 3px; padding: 1px 6px; vertical-align: 1px; white-space: nowrap;
}
.dp-host { margin-top: 8px; }
.daypicker {
  border: 1px solid var(--line-solid); border-radius: 6px;
  background: var(--panel2, #141d28); padding: 10px 12px; max-width: 340px;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dp-title { font-family: var(--display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
.dp-nav {
  background: none; border: 1px solid var(--line-solid); border-radius: 4px; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 9px;
}
.dp-nav:hover { color: var(--amber); border-color: #ffb44766; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-dow { margin-bottom: 3px; }
.dp-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; min-height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.dp-cell.dp-empty, .dp-cell.dp-dowc { cursor: default; border: none; }
.dp-dowc { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
button.dp-cell:hover { border-color: var(--amber); background: #1d2b3a; }
.dp-cell.today { border-color: #35506e; }
.dp-cell.on { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); font-weight: 700; }
.dp-cell.on.first { background: var(--amber); color: #0A1420; }
.dp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; }
.dp-sum { flex: 1; min-width: 0; color: var(--text); }
.dp-clear {
  background: none; border: 1px solid var(--line-solid); border-radius: 4px; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 11px; padding: 3px 8px;
}
.dp-clear:hover { color: var(--amber); border-color: #ffb44766; }
.dp-hint { margin-top: 6px; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Bans. One panel serves all three scopes (global, series, tournament).
   --------------------------------------------------------------------------- */
.ban-table-wrap { overflow-x: auto; }
.ban-table { width: 100%; }
.ban-table td, .ban-table th { padding: 7px 8px; vertical-align: top; }
.ban-table input[type="date"] { max-width: 165px; }
/* an expired ban keeps its row - the record of who set it and why is the point */
.ban-table tr.ban-expired td { opacity: .55; }
.ban-notice { border-left: 3px solid var(--red); background: #e2564a0f; }
.ban-notice h2::before { background: var(--red); }

/* per-match Bo selector in the match details header (organizers only) */
.md-bo-sel {
  display: inline-block; width: auto; margin: 0 0 0 2px; padding: 2px 6px;
  font-family: var(--mono); font-size: 12px; line-height: 1.4;
  vertical-align: middle; height: auto;
}
/* a swiss row for someone already knocked out reads as history, not a live contender */
tr.row-out > td { opacity: .55; }

/* ---- opponent pick phase (LotS: seeds 1-8 choose who they play) ---- */
.pick-callout {
  border: 1px solid var(--amber, #d99a2b);
  background: color-mix(in srgb, var(--amber, #d99a2b) 12%, transparent);
  border-radius: 6px; padding: 10px 12px; margin: 0 0 12px;
}
.pick-callout-h {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber, #d99a2b);
}
.pick-clock {
  font-family: var(--mono); font-size: 12px; margin-left: 6px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255, 255, 255, .07);
}
.pick-clock.urgent { background: var(--danger, #e5484d); color: #fff; }
/* The pairing rows have class names of their own. As .pick-list / .pick-row they also matched the
   compact clickable lists further up (a wrapping row of small bordered chips), so each pairing was
   squeezed into a box of its own and every name was cut off. Names wrap rather than truncate. */
.opp-list { margin-top: 12px; border-top: 1px solid var(--line, #2a2f37); }
.opp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid var(--line, #2a2f37);
}
.opp-row.turn { background: rgba(255, 255, 255, .04); }
.opp-seed {
  width: 26px; text-align: center; flex: none;
  color: var(--muted, #8b93a1); font-size: 12px;
}
.opp-name, .opp-target { flex: 1 1 40%; min-width: 0; overflow-wrap: anywhere; }
.opp-vs { flex: none; font-size: 12px; }
.opp-pending { color: var(--amber, #d99a2b); font-style: italic; }
.pick-choose { margin-top: 14px; }
.pick-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-opts .btn { margin: 0; }
/* undo the last pick / redo the playoffs: organizers, until the first playoff match starts */
.playoff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.playoff-actions .btn { margin: 0; }
@media (max-width: 560px) {
  .opp-row { flex-wrap: wrap; gap: 4px 8px; }
  .opp-name, .opp-target { flex-basis: calc(100% - 40px); }
  .opp-target { margin-left: 34px; }   /* under the name, not under the seed number */
  .opp-vs { display: none; }
}

/* ---- read-only rating check (Players tab) ---- */
.signup-actions {
  display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; margin-top: 16px;
}
.signup-actions .btn { margin: 0; }
.rating-check { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rating-check .btn { margin: 0; }
.rating-check .rc-note { margin: 0; }
.rc-out {
  margin-top: 8px; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--line, #2a2f37);
  background: rgba(255, 255, 255, .03);
  max-width: 520px;
}
.rc-out.good { border-color: var(--green, #46a758); background: color-mix(in srgb, var(--green, #46a758) 10%, transparent); }
.rc-out.bad { border-color: var(--danger, #e5484d); background: color-mix(in srgb, var(--danger, #e5484d) 10%, transparent); }
.rc-out.warn { border-color: var(--amber, #d99a2b); background: color-mix(in srgb, var(--amber, #d99a2b) 10%, transparent); }
.rc-verdict { font-weight: 600; margin-bottom: 6px; }
.rc-num { margin-bottom: 2px; }

/* "click here" from the overview lands ON the check, not just on the tab */
.focus-flash {
  animation: focusFlash 2s ease-out 1;
  border-radius: 6px;
}
@keyframes focusFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber, #d99a2b) 55%, transparent); }
}
@media (max-width: 560px) {
  .signup-actions { flex-direction: column; align-items: stretch; }
  .rc-out { max-width: none; }
}

/* ---- declared early stop: the bracket must not draw matches nobody will play ---- */
.stop-notice { border-left: 3px solid var(--amber, #d99a2b); }
.stop-notice.done { border-left-color: var(--muted, #8b93a1); }
.stop-head { letter-spacing: 1px; color: var(--amber, #d99a2b); margin-bottom: 6px; }
.stop-notice.done .stop-head { color: var(--muted, #8b93a1); }
.stop-count { margin-top: 6px; }
/* a match that was never played reads as history, not as something still to come */
.bmatch.notplayed { opacity: .4; }
.bmatch.notplayed::after {
  content: 'not played';
  position: absolute; right: 6px; bottom: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .5px;
  color: var(--muted, #8b93a1); text-transform: uppercase;
}

/* setting the early-stop rule from the Admin tab while the tournament runs */
.stop-set {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line, #2a2f37); border-radius: 6px;
  background: rgba(255, 255, 255, .02);
}
.stop-set .btn { margin: 0; }

/* ---- arranging the opening Swiss matchups ---- */
.r1edit .r1rows { display: flex; flex-direction: column; gap: 6px; }
.r1row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r1row select { margin: 0; flex: 1 1 160px; min-width: 0; max-width: 240px; }
.r1n { width: 20px; flex: none; color: var(--muted, #8b93a1); font-size: 12px; text-align: right; }
.r1edit .warn { color: var(--amber, #d99a2b); }
@media (max-width: 560px) { .r1row select { flex-basis: 100%; max-width: none; } }

/* ---------- divisions (King / Prince) ---------- */
.champ-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.champ-row .champ { flex: 1; min-width: 240px; margin-bottom: 0; }
.div-draft { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-solid); }
.div-draft-h { font-family: var(--display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 14px 0 6px; }
.div-draft .div-draft-h { margin-top: 0; }

/* ---------- Hall of Fame ---------- */
.hof-search { margin: 0 0 12px; }
.hof-search input { width: 100%; max-width: 420px; }
.hof-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Predictions ---------- */
.pred-prize { margin-top: 12px; padding: 10px 14px; border: 1px solid #ffb44766; background: var(--amber-dim); border-radius: 4px; color: var(--text); font-size: 14px; }
.pred-prize-k { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin-right: 8px; }
.pred-state { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--line-solid); }
.pred-state.open { color: #3fb950; border-color: #2ea04366; }
.pred-state.locked { color: var(--muted); }
.pred-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pred-head h2 { margin: 0; }
.pred-note { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--line-solid); background: var(--panel2); font-size: 13px; }
.pred-note.ok { border-left-color: var(--green); }
.pred-note.warn { border-left-color: var(--amber); color: var(--amber); }
.pred-viewing { margin: 0 0 12px; padding: 8px 12px; border: 1px solid #4c8fd455; background: #4c8fd41a; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pred-score { margin: 0 0 12px; font-size: 13px; }
.pred-score .ok, .pred-mark.ok { color: #3fb950; }
.pred-score .no, .pred-mark.no { color: #ff6369; }
.pred-div { font-family: var(--display); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin: 16px 0 8px; }
.pred-round { margin: 0 0 14px; }
.pred-round-h { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pred-match { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line-solid); border-radius: 4px; background: var(--panel2); min-width: 0; }
.pred-match.ok { border-color: #2ea04366; }
.pred-match.no { border-color: #ff636955; }
.pm-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 0 2px; }
.pred-team {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-align: left;
  padding: 6px 8px; border: 1px solid var(--line-solid); border-radius: 3px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.pred-team .seedtag { margin-right: 0; }
.pred-team .pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred-team:hover:not(:disabled) { border-color: var(--amber); }
.pred-team.on { border-color: var(--green); background: #2ea04322; box-shadow: inset 3px 0 0 var(--green); }
.pred-team:disabled { cursor: default; }
.pred-team:disabled:not(.on) { opacity: .75; }
.pred-team .pt-won { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: var(--amber); }
.pred-team.won { border-style: dashed; }
.pred-tbd { padding: 6px 8px; font-size: 12px; color: var(--muted); font-style: italic; border: 1px dashed var(--line-solid); border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred-mark { font-weight: 700; min-width: 12px; display: inline-block; text-align: center; }
.pred-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-solid); }
.pred-dist { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.pd-item { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border: 1px solid var(--line-solid); border-radius: 3px; color: var(--muted); }
.pd-item strong { color: var(--text); margin-right: 4px; }
.pd-item.off { border-color: #ffb44788; color: var(--amber); }
.pred-recs { display: flex; flex-direction: column; gap: 4px; }
.pred-recrow { display: grid; grid-template-columns: 28px minmax(90px, 1fr) auto 90px 18px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; }
.pred-recrow:nth-child(odd) { background: var(--panel2); }
.pred-recrow.ok { box-shadow: inset 3px 0 0 #2ea043; }
.pred-recrow.no { box-shadow: inset 3px 0 0 #ff6369; }
.pred-recrow .pr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred-rec { display: flex; gap: 4px; flex-wrap: wrap; }
.pred-rec select { width: auto; padding: 4px 8px; }
.pred-rc { font-family: var(--mono); font-size: 12px; padding: 4px 8px; border: 1px solid var(--line-solid); border-radius: 3px; background: var(--bg); color: var(--muted); cursor: pointer; }
.pred-rc:hover:not(:disabled) { border-color: var(--amber); color: var(--text); }
.pred-rc.on { border-color: var(--green); background: #2ea04333; color: var(--text); }
.pred-rc:disabled { cursor: default; }
.pred-names { display: flex; gap: 6px; flex-wrap: wrap; }
.pred-names .me { border-color: var(--amber); }
.pred-board tr.me td { background: var(--amber-dim); }
.pred-badge { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; padding: 1px 6px; border-radius: 3px; vertical-align: 1px; margin-left: 4px; }
.pred-badge.perfect { color: #0A1420; background: var(--amber); }
.pred-badge.alive { color: #3fb950; border: 1px solid #2ea04366; }
.pred-perfect-line { margin: 0 0 10px; padding: 8px 12px; border: 1px solid #ffb44766; background: var(--amber-dim); border-radius: 4px; }
@media (max-width: 560px) {
  /* name, record so far and mark on one line, the record buttons under them */
  .pred-recrow { grid-template-columns: 24px minmax(0, 1fr) auto 18px; row-gap: 4px; }
  .pred-recrow .seedtag { grid-column: 1; grid-row: 1; }
  .pred-recrow .pr-name { grid-column: 2; grid-row: 1; }
  .pred-recrow .pr-now { grid-column: 3; grid-row: 1; }
  .pred-recrow .pred-mark { grid-column: 4; grid-row: 1; }
  .pred-recrow .pred-rec { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------------------
   Popups on top of popups, and the picture viewer (app.js modal({stack}) and
   showImageViewer). A map opened from the veto popup or the match details sits
   on top of it and closes back to it; the enlarged picture opens on the page.
   --------------------------------------------------------------------------- */
.modal-bg.modal-stacked { background: rgba(5, 9, 14, .55); }
.modal-bg.img-viewer-layer { padding: 0; background: rgba(3, 6, 10, .94); }
.img-viewer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
/* the box fills the window and the picture is fitted inside it, so a small preview is shown
   enlarged rather than at its own (smaller) size */
.img-viewer-img { width: 96vw; height: 86vh; object-fit: contain; }
.img-viewer-close {
  position: fixed; top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #ffffff33; background: #0c1219cc; color: var(--text); font-size: 15px; cursor: pointer;
}
.img-viewer-close:hover { border-color: var(--amber); color: var(--amber); }
.img-viewer-cap {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 90vw;
  font-family: var(--display); letter-spacing: 1px; color: var(--text);
  background: #0c1219cc; border: 1px solid var(--line-solid); border-radius: 4px; padding: 4px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-lightbox-img { cursor: zoom-in; }

/* ---------------------------------------------------------------------------
   Per-day start times (host form and Admin tab) and the Schedule on the Overview
   --------------------------------------------------------------------------- */
.daytimes {
  margin-top: 10px; max-width: 560px;
  border: 1px solid var(--line-solid); border-left: 3px solid var(--amber); border-radius: 4px;
  background: #ffb4470a; padding: 10px 12px;
}
.dt-q { font-size: 13px; font-weight: 600; }
.dt-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
label.dt-opt {
  display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text);
}
.dt-opt input { width: auto; margin: 0; accent-color: var(--amber); }
.dt-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.dt-day { min-width: 140px; font-family: var(--mono); font-size: 12px; }
.dt-first { color: var(--text); }
.sched-day { display: inline-block; min-width: 46px; font-family: var(--mono); font-size: 11px; color: var(--amber); }

/* ---------------------------------------------------------------------------
   Home page: list/calendar switch, filters, sections, role tags
   --------------------------------------------------------------------------- */
.home-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.hb-views { display: inline-flex; border: 1px solid var(--line-solid); border-radius: 5px; overflow: hidden; flex: none; }
.hb-view {
  background: var(--panel); border: none; color: var(--muted); cursor: pointer;
  padding: 7px 14px; font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.hb-view + .hb-view { border-left: 1px solid var(--line-solid); }
.hb-view:hover { color: var(--text); }
.hb-view.on { background: var(--amber-dim); color: var(--amber); }
.hb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: 1; min-width: 0; }
.hb-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hb-chip {
  background: var(--panel); border: 1px solid var(--line-solid); border-radius: 14px; cursor: pointer;
  color: var(--muted); padding: 4px 11px; font-size: 12px; font-family: var(--body);
}
.hb-chip:hover { color: var(--text); border-color: #3a5470; }
.hb-chip.on { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
input[type=text].hb-search { width: 200px; max-width: 100%; padding: 6px 10px; font-size: 13px; }
select.hb-series { width: auto; max-width: 240px; padding: 6px 8px; font-size: 13px; }
.hb-reset { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 2px 4px; }
.hb-reset[hidden] { display: none; }
.home-sec .sec-body[hidden] { display: none; }
.sec-note { margin: -4px 0 10px; }
.rolebox {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  border-radius: 3px; padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}
.rolebox.to { color: #ff8f85; border: 1px solid #8a3a33; background: #3a1a17; }
.rolebox.player { color: #8cc4ff; border: 1px solid #2f4a63; background: #16222e; }
.rolebox.caster { color: #d2adff; border: 1px solid #5a3f7a; background: #241a33; }
.tseries { color: var(--blue); }
@media (max-width: 640px) {
  .home-bar { flex-direction: column; align-items: stretch; }
  .hb-views { align-self: flex-start; }
  input[type=text].hb-search { width: 100%; }
  select.hb-series { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Home page: calendar (public/app.calendar.js)
   --------------------------------------------------------------------------- */
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-title { margin: 0 6px; min-width: 150px; text-align: center; }
.cal-spacer { flex: 1; }
label.cal-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text);
}
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.cal-key { display: inline-flex; align-items: center; gap: 5px; }
.cal-key::before { content: ''; width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--line-solid); border-left-width: 3px; background: #1b2735; }
.cal-key.official::before { border-left-color: var(--green); }
.cal-key.community::before { border-left-color: var(--blue); }
.cal-key.is-draft::before { border-style: dashed; border-color: #ffb44799; background: transparent; }
.cal-key.is-mine::before { box-shadow: inset 0 0 0 1px #ff8f85; }
.cal-hint { color: var(--amber); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dows { margin-bottom: 4px; }
.cal-dow { font-family: var(--display); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: center; }
.cal-cell {
  min-height: 92px; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  background: var(--panel2); border: 1px solid var(--line-solid); border-radius: 4px; padding: 4px;
}
.cal-cell.wknd { background: #1a2633; }
.cal-cell.out { opacity: .42; }
.cal-cell.today { border-color: var(--amber); box-shadow: inset 0 0 0 1px #ffb44755; }
.cal-cell.today .cal-daynum { color: var(--amber); font-weight: 700; }
.cal-dragging .cal-cell { transition: background .1s; }
.cal-cell.drop-on { background: var(--amber-dim); outline: 2px dashed var(--amber); outline-offset: -2px; opacity: 1; }
.cal-daynum { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cal-chip {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 11px; line-height: 1.3; color: var(--text); text-decoration: none;
  background: #1f2c3b; border: 1px solid #2c3f55; border-left: 3px solid var(--blue); border-radius: 3px; padding: 2px 5px;
}
.cal-chip:hover { border-color: var(--amber); color: var(--text); }
.cal-chip.official { border-left-color: var(--green); }
.cal-chip.is-draft { background: transparent; border-style: dashed; border-color: #ffb44799; border-left-style: solid; color: #d9c7a4; }
.cal-chip.is-mine { box-shadow: inset 0 0 0 1px #ff8f8577; }
.cal-chip.is-abandoned .cal-name { text-decoration: line-through; opacity: .7; }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.dragging { opacity: .35; }
.cal-time { flex: none; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cal-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-n, .cal-role { flex: none; font-family: var(--mono); font-size: 9px; color: var(--amber); }
.cal-role { color: #ff8f85; }
.cal-undated { margin-top: 12px; border-top: 1px solid var(--line-solid); padding-top: 10px; }
.cal-undated-title { font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cal-undated-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-undated-list .cal-chip { max-width: 260px; }
.cal-agenda { display: none; }
.cal-ag-day { padding: 8px 0; border-bottom: 1px solid var(--line-solid); display: flex; flex-direction: column; gap: 4px; }
.cal-ag-day.today .cal-ag-date { color: var(--amber); }
.cal-ag-date { font-family: var(--display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cal-ag-day .cal-chip { font-size: 13px; padding: 5px 8px; }
@media (max-width: 720px) {
  .cal-grid-wrap { display: none; }
  .cal-agenda { display: block; }
  .cal-hint { display: none; }
}

/* the server cannot save (site admins and directors only, see drawTopbar) */
.save-warn {
  background: #3a1a17; border-bottom: 1px solid var(--red); color: #ffc2bb;
  padding: 9px 16px; font-size: 13px; text-align: center; line-height: 1.45;
}
.save-warn strong { color: #fff; }