/* Same look as AF Fantasy. Barlow, SIL Open Font License (fonts/OFL.txt) */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/Barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(fonts/Barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/Barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/BarlowCondensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/BarlowCondensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/BarlowCondensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(fonts/BarlowCondensed-800.woff2) format("woff2"); }

:root {
  --ink: #edf0e9;
  --dim: #8f988f;
  --faint: #5b645c;
  --bg: #101311;
  --raised: #171b18;
  --raised-2: #1e231f;
  --rule: #262c27;
  --red: #e56e56;          /* HaxBall red */
  --blue: #5689e5;         /* HaxBall blue */
  --armband: #f4d35e;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 "Barlow", system-ui, sans-serif;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: 0.4; }

/* ---------------------------------------------------------------- header */

.bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 8px 32px;
  padding: 18px 32px 0;
  border-bottom: 1px solid var(--rule);
}
/* Line the header up with the centred page below it, like AF Fantasy. */
.bar { padding-left: max(32px, calc((100vw - 1120px) / 2 + 32px)); padding-right: max(32px, calc((100vw - 1120px) / 2 + 32px)); }
/* Logo: the white HaxBall ball, then the wordmark. */
.brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-content: start; padding-bottom: 12px; }
.logo-disc {
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 3px solid #000; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink);
  color: #000; font: 800 18px/1 var(--cond); letter-spacing: -0.02em;
}
.wordmark { display: block; font: 800 30px/0.9 var(--cond); text-transform: uppercase; letter-spacing: -0.01em; }
.edition { display: block; margin-top: 6px; white-space: nowrap; color: var(--dim); font: 500 13px/1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }

.tabs { display: flex; gap: 26px; }
.tabs button {
  font: 700 17px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dim);
  padding: 0 0 14px;
  border-bottom: 3px solid transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }

.account { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; font-size: 14px; }
.me { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.me img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #000; }
.text { color: var(--dim); font-size: 14px; white-space: nowrap; }
.text:hover { color: var(--ink); text-decoration: underline; }
.discord {
  background: #5865f2;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 3px;
}
.dev { display: flex; gap: 8px; }
.dev input { width: 150px; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 4px 0; font-size: 13px; }

/* ---------------------------------------------------------------- login redirect */

.redirecting { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgb(5 7 6 / 0.88); }
.redirecting > div { text-align: center; }
.redirecting p { margin: 16px 0 0; font: 700 20px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.04em; }
.spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid rgb(88 101 242 / 0.3); border-top-color: #5865f2; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ---------------------------------------------------------------- week strip */

.strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
/* Equal widths, like AF Fantasy; the strip scrolls when they don't fit. */
.strip button {
  flex: 1 0 0;
  min-width: 104px;
  padding: 8px 12px 7px;
  text-align: left;
  border-right: 1px solid var(--rule);
}
.strip b { display: block; font: 700 18px/1 var(--cond); text-transform: uppercase; white-space: nowrap; color: #c9cfc6; }
.strip small { display: block; margin-top: 5px; font: 500 13px/1 var(--cond); color: var(--dim); letter-spacing: 0.02em; white-space: nowrap; }
.strip button.later b, .strip button.past b { color: var(--dim); }
.strip button.later small, .strip button.past small { color: var(--dim); opacity: 0.8; }
.strip button:disabled { cursor: default; opacity: 1; }
.strip button:not(:disabled):not([aria-pressed="true"]):hover { background: var(--raised); }
.strip button[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 -3px 0 var(--ink); }
.strip button[aria-pressed="true"] b { color: var(--ink); }

main { padding: 24px 32px 64px; max-width: 1120px; margin: 0 auto; }

/* ---------------------------------------------------------------- random goal */

.featured { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin: 22px 0 8px; background: var(--raised); border-top: 4px solid var(--ink); }
.featured .media { align-self: start; aspect-ratio: 16 / 9; background: #0b0d0c; cursor: zoom-in; }
.featured .media video, .featured .media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured .info { display: flex; flex-direction: column; min-width: 0; padding: 18px 22px; }
.featured .kicker b { color: var(--ink); font-weight: 700; }
.featured .lb-teams { font-size: 22px; }
.featured .credits { display: grid; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.featured .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 14px 0 0;
}
.sort { display: flex; gap: 22px; }
.sort button {
  font: 700 15px/1 var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dim);
  padding: 6px 0 9px;
  border-bottom: 3px solid transparent;
}
.sort button:hover { color: var(--ink); }
.sort button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 16px; }
.filters input, .filters select {
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--faint);
  padding: 6px 0;
  font-size: 14px;
  outline: none;
}
.filters input { width: 220px; }
.filters select { max-width: 360px; }
.filters input:focus, .filters select:focus { border-color: var(--ink); }
.filters select option { background: var(--raised); }

/* ---------------------------------------------------------------- games */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  padding-top: 14px;
}
.game { padding-top: 30px; }
.game-head { display: flex; align-items: flex-end; gap: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.game-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 800 24px/1.05 var(--cond); text-transform: uppercase; }
.game-title .team { display: inline-flex; align-items: center; gap: 8px; }
.logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.game-sub { margin-top: 6px; color: var(--dim); font: 500 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.03em; }
.game-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--bg);
  font: 800 22px/1 var(--cond);
}
.game-score .dash { opacity: 0.6; }
.game-count { margin-left: auto; color: var(--dim); font: 600 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.half {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font: 700 13px/1 var(--cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.half::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ---------------------------------------------------------------- goal cards */

.card { position: relative; background: var(--raised); border-top: 3px solid var(--rule); transition: border-color 0.15s; }
.card:hover { border-top-color: var(--faint); }
.card.leading { border-top-color: var(--armband); }
.card .media { position: relative; aspect-ratio: 16 / 9; background: #0b0d0c; cursor: zoom-in; }
.card video, .card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .info { padding: 12px 16px 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scorer { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 19px/1.1 var(--cond); }
.scorer .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorer .nick { font-weight: 500; color: var(--dim); }
/* HaxBall discs: thick black outline in the scoring side's colour. */
.dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #000; box-shadow: 0 0 0 1px var(--rule); flex: none; }
.dot.red { background: var(--red); }
.dot.blue { background: var(--blue); }
/* With a Discord picture: the picture fills the disc, the ring keeps the side's colour. */
.dot:has(img) { overflow: hidden; border-width: 1px; }
.dot.red:has(img) { box-shadow: 0 0 0 2px var(--red); }
.dot.blue:has(img) { box-shadow: 0 0 0 2px var(--blue); }
.dot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credit .dot { width: 24px; height: 24px; }
.credit.goal .dot { width: 30px; height: 30px; }
.og { padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; color: var(--armband); font: 700 11px/1 var(--cond); letter-spacing: 0.06em; }
.meta { margin-top: 6px; color: var(--dim); font-size: 13px; line-height: 1.45; }

.vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 54px;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  font: 800 17px/1 var(--cond);
}
.vote .arrow { font-size: 11px; color: var(--dim); }
.vote:hover:not(:disabled) { border-color: var(--armband); }
.vote[aria-pressed="true"] { background: var(--armband); border-color: var(--armband); color: #000; }
.vote[aria-pressed="true"] .arrow { color: #000; }

.empty { text-align: center; color: var(--dim); padding: 40px; }
.hint { text-align: center; color: var(--dim); font-size: 13px; margin: 28px 0 0; }
kbd { background: var(--raised); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px; font-family: inherit; font-size: 12px; }

/* ---------------------------------------------------------------- your replays */

.upload { margin-bottom: 8px; }
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px;
  background: var(--raised);
  border: 2px dashed var(--faint);
  text-align: center;
  cursor: pointer;
  color: var(--dim);
}
.dropzone strong { color: var(--ink); font: 800 22px/1 var(--cond); text-transform: uppercase; }
.dropzone.over { border-color: var(--armband); }
.jobs { list-style: none; padding: 0; margin: 12px 0 0; display: grid; }
.jobs li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.jobs .status { color: var(--dim); }
.jobs .status.done { color: var(--ink); }
.jobs .status.error { color: var(--red); }

/* ---------------------------------------------------------------- viewer */

.viewer { position: relative; background: #0b0d0c; }
.viewer video, .viewer img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--rule); }
.controls button { border: 1px solid var(--rule); border-radius: 3px; padding: 5px 9px; min-width: 34px; font: 700 14px/1 var(--cond); }
.controls button:hover { border-color: var(--dim); }
.controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.controls input[type="range"] { flex: 1; accent-color: var(--ink); }
.controls .speeds { display: flex; gap: 4px; }
.controls .spacer { flex: 1; }
.controls .download { flex: none; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); font: 700 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; }
.controls .download:hover { border-color: var(--dim); }

/* Sized so header, clip, controls and nav fit the screen without scrolling. */
.lightbox {
  width: min(1040px, 94vw, calc((94vh - 300px) * 16 / 9));
  min-width: min(560px, 94vw);
  max-height: 96vh;
  padding: 0;
  border: 0;
  border-top: 4px solid var(--ink);
  background: var(--raised);
  color: var(--ink);
}
.lightbox::backdrop { background: rgb(5 7 6 / 0.75); }
html:has(dialog[open]) { overflow: hidden; }
.lb-head { padding: 14px 20px 14px; outline: none; } /* takes the opening focus instead of Close */
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kicker { margin: 0; color: var(--dim); font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.05em; }
/* Scoreboard: one row per team, score on the right. */
.lb-teams { display: grid; gap: 6px; margin: 10px 0 0; font: 800 24px/1.05 var(--cond); text-transform: uppercase; }
.trow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trow .tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tscore { flex: none; min-width: 36px; padding: 3px 8px; background: var(--ink); color: var(--bg); text-align: center; }
.trow.other { color: var(--dim); }
.trow.other .logo { opacity: 0.6; }
.trow.other .tscore { background: var(--raised-2); color: var(--dim); }
.lb-credits { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.lb-credits dl { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; min-width: 0; }
.credit dt { color: var(--dim); font: 600 12px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; }
.credit dd { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 600 17px/1.1 var(--cond); }
.credit dd b { font-weight: 700; }
.credit.goal dd { font-size: 21px; }
.credit .nick { color: var(--dim); font-weight: 500; }
.credit .none { color: var(--faint); }
.lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 12px; border-top: 1px solid var(--rule); }
.lightbox-count { color: var(--dim); font: 600 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.04em; }
.ghost { padding: 7px 12px; border: 1px solid var(--rule); border-radius: 3px; font: 700 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.03em; }
.ghost:hover:not(:disabled) { border-color: var(--dim); }
.close { color: var(--dim); font-size: 14px; }
.close:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------- sync */

.sync { width: min(640px, 94vw); max-height: 86vh; padding: 0; border: 0; border-top: 4px solid var(--ink); background: var(--raised); color: var(--ink); }
.sync::backdrop { background: rgb(5 7 6 / 0.75); }
.sync[open] { display: flex; flex-direction: column; }
.sync-title { margin: 8px 0 0; font: 800 24px/1 var(--cond); text-transform: uppercase; }
.sync-note { margin: 8px 0 0; color: var(--dim); font-size: 14px; }
.sync-note:empty { display: none; }
.sync-log { overflow-y: auto; margin: 0; padding: 0 20px 16px; }
.sync-log li { gap: 16px; }
.sync-log .status { flex: none; text-align: right; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 14px;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; padding: 14px 16px 0; gap: 4px 12px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; }
  .account { padding-bottom: 0; align-self: start; gap: 12px; }
  .me span, .dev { display: none; }
  .brand { min-width: 0; }
  .wordmark { font-size: 24px; }
  .edition { white-space: normal; line-height: 1.15; }
  main { padding: 18px 14px 48px; }
  .cards { grid-template-columns: 1fr; }
  .game-head { flex-wrap: wrap; gap: 10px; }
  .game-title { font-size: 20px; }
  .filters { width: 100%; }
  .filters input, .filters select { flex: 1 1 140px; width: auto; }
  .featured { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .featured .info { padding: 14px; }
  .featured .lb-teams { font-size: 20px; }
  .lb-teams { font-size: 20px; }
  .lightbox { width: 100vw; max-width: 100vw; min-width: 0; margin: auto 0 0; }
  .lb-head { padding: 12px 14px; }
  .lb-credits dl { gap: 8px 22px; }
  /* Scrub bar gets its own row so the buttons and Download fit. */
  .controls { flex-wrap: wrap; }
  .controls input[type="range"] { order: 1; flex-basis: 100%; }
  .controls .download { margin-left: auto; }
  .lb-nav { padding: 10px 14px 12px; }
}