:root {
  --pitch: #08192a;
  --pitch-raised: #0f2942;
  --pitch-line: #1b3d5c;
  --sky: #7cc5ee;
  --sky-deep: #2e86c1;
  --chalk: #e9f2f8;
  --chalk-dim: #9db4c6;
  --gold: #d6a93f;
  --warn: #f08a7a;

  --display: 'Barlow Condensed', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 4px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* Backstop only. Anything that overflows sideways is a bug to fix at the
     source, not to hide here — but on a phone a stray pixel of horizontal
     scroll makes the whole app feel broken. */
  overflow-x: hidden;
  max-width: 100%;
  background: var(--pitch);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--sky); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* ---------- buttons, fields, messages ---------- */

.btn {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pitch);
  background: var(--sky);
  border: 0;
  border-radius: var(--radius);
  padding: 10px 20px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.btn:hover:not(:disabled) { background: #9ad5f5; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--sky);
  border: 1px solid var(--pitch-line);
}
.btn-quiet:hover:not(:disabled) { background: var(--pitch-raised); color: var(--chalk); }

.btn-small { padding: 5px 12px; font-size: 0.9rem; }

label {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin: 18px 0 6px;
}

.optional { color: var(--pitch-line); letter-spacing: 0.04em; }

input, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--chalk);
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 11px 12px;
}
input:focus, textarea:focus {
  border-color: var(--sky-deep);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.25);
}

.hint { margin: 6px 0 0; font-size: 0.85rem; color: var(--chalk-dim); }

.msg { margin: 12px 0 0; font-size: 0.9rem; min-height: 1.2em; }
.msg.is-error { color: var(--warn); }

/* ---------- gate (login / join) ---------- */

.gate-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
}

.gate-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1c6ea4 0%, #0d3a5c 60%, var(--pitch) 100%);
  display: flex;
  align-items: center;
  padding: 8vh 6vw;
}

/* Signature: the chevron band, lifted from the club's chevron-front shirt. */
.chevrons {
  position: absolute;
  inset: -10% -30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  opacity: 0.5;
}
.chevrons i {
  display: block;
  height: 68px;
  background: var(--sky);
  clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
  transform: translateX(-14%);
  animation: chev-in 900ms cubic-bezier(.2,.8,.2,1) both;
}
.chevrons i:nth-child(2) { opacity: 0.55; animation-delay: 90ms; }
.chevrons i:nth-child(3) { opacity: 0.28; animation-delay: 180ms; }

@keyframes chev-in {
  from { transform: translateX(-30%); opacity: 0; }
}

.gate-brand-inner { position: relative; max-width: 27rem; }

.eyebrow {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #fff;
}
.wordmark span { color: var(--sky); }

.lede { font-size: 1.08rem; margin: 0 0 18px; color: #dcecf6; }
.foot-note { font-size: 0.92rem; color: #a9c9de; margin: 0; }

.gate-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vh 6vw;
  max-width: 34rem;
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pitch-line); }
.tab {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--chalk-dim);
  padding: 10px 14px;
  cursor: pointer;
}
.tab.is-active { color: var(--chalk); border-bottom-color: var(--sky); }

.panel { display: none; }
.panel.is-active { display: block; }
.panel .btn { margin-top: 26px; width: 100%; }

/* ---------- app chrome ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(8, 25, 42, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pitch-line);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark-chevron {
  width: 22px; height: 22px;
  background: var(--sky);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.mark-text {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chalk);
}
.mark-text b { color: var(--sky); font-weight: 700; }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.who { font-size: 0.9rem; color: var(--chalk-dim); }

.switch { display: none; }

.board {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px var(--gutter) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
/* On desktop the match panel shares the right rail with the news. */
.board .col-match { display: block; grid-column: 2; }
.board .col-news { grid-column: 2; }
.board .col-feed { grid-row: 1 / span 2; }

.rail-head {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pitch-line);
}
.rail-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rail-head-row .rail-head { flex: 1; }

/* ---------- fixtures strip ---------- */

.strip[hidden] { display: none; }

.strip {
  border-bottom: 1px solid var(--pitch-line);
  background: linear-gradient(180deg, #0c2740 0%, var(--pitch) 100%);
}
.strip-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.strip-next {
  position: relative;
  padding-left: 18px;
}
.strip-next::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 8px;
  background: var(--sky);
  clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%, 60% 50%);
}
.next-when {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.next-teams {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 2px 0 4px;
}
.next-teams em, .predict-teams em { font-style: normal; color: var(--sky); }
.next-meta { font-size: 0.9rem; color: var(--chalk-dim); }
.next-live {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pitch);
  background: var(--sky);
  border-radius: 2px;
  padding: 1px 8px;
  margin-left: 8px;
}

.strip-rest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
.strip-label {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin: 0 0 8px;
}

.pills { display: flex; gap: 5px; }
.pill {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 3px;
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  color: var(--chalk-dim);
  cursor: default;
}
.pill.w { background: var(--sky); border-color: var(--sky); color: var(--pitch); }
.pill.l { background: transparent; border-color: #6b3540; color: #e08a8a; }
.pill.d { color: var(--chalk); }

.mini { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.mini li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  color: var(--chalk-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini .mini-date { color: var(--sky); min-width: 5.4em; }
.mini .mini-opp { color: var(--chalk); overflow: hidden; text-overflow: ellipsis; }

.strip-admin {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter) 16px;
}
.strip-admin[hidden] { display: none; }
.strip-admin summary {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  cursor: pointer;
}
.strip-admin summary:hover { color: var(--sky); }
.fixture-form { max-width: 640px; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fixture-form .btn { margin-top: 18px; }

/* ---------- notifications ---------- */

.bell {
  position: relative;
  background: none;
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  color: var(--chalk-dim);
  font-size: 1.1rem;
  padding: 6px 12px;
  cursor: pointer;
}
.bell:hover { color: var(--sky); }
.bell-count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pitch);
  background: var(--sky);
  border-radius: 10px;
  padding: 1px 5px;
}
.bell-count[hidden] { display: none; }

.notif-drop {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter) 16px;
}
.notif-drop[hidden] { display: none; }
.notif {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pitch-line);
  color: var(--chalk-dim);
  padding: 11px 0;
  cursor: pointer;
  font-size: 0.92rem;
}
.notif:hover { color: var(--chalk); }
.notif.is-new { color: var(--chalk); }
.notif.is-new b { color: var(--sky); }

/* ---------- match panel ---------- */

.col-match { display: none; }
.board[data-view="match"] .col-match { display: block; }

.predict-card, .rating-card {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.predict-teams {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.predict-when { font-size: 0.88rem; color: var(--chalk-dim); margin: 0 0 14px; }
.score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.score-row input {
  text-align: center;
  font-family: var(--display);
  font-size: 1.6rem;
  padding: 6px;
}
.score-row .v {
  font-family: var(--display);
  color: var(--chalk-dim);
  text-transform: uppercase;
}
.score-side { font-size: 0.82rem; color: var(--chalk-dim); text-align: center; margin-bottom: 4px; }
.predict-card .btn { margin-top: 14px; width: 100%; }

.others { list-style: none; margin: 14px 0 0; padding: 0; font-size: 0.9rem; }
.others li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--pitch-line);
}
.others .pts { color: var(--sky); font-family: var(--display); }

.rater {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--pitch-line);
}
.rater-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rater-name span { color: var(--chalk-dim); font-size: 0.82rem; margin-left: 6px; }
.rater-avg {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--sky);
  min-width: 3.2em;
  text-align: right;
}
.rater input[type="range"] { width: 108px; accent-color: var(--sky); }

.table { list-style: none; counter-reset: pos; margin: 0; padding: 0; }
.table li {
  counter-increment: pos;
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pitch-line);
  font-size: 0.94rem;
}
.table li::before {
  content: counter(pos);
  font-family: var(--display);
  color: var(--chalk-dim);
}
.table .pts { font-family: var(--display); font-size: 1.1rem; color: var(--sky); }

.squad-sync { margin: 14px 0 4px; }
.squad-sync .hint { margin-top: 8px; }
.hint.is-error { color: var(--warn); }

.squad-list { list-style: none; margin: 14px 0 0; padding: 0; font-size: 0.9rem; }
.squad-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid var(--pitch-line);
}
.squad-list button {
  background: none; border: 0; color: var(--chalk-dim); cursor: pointer;
}
.squad-list button:hover { color: var(--warn); }

/* ---------- admin view ---------- */

.col-admin { display: none; }
.board[data-view="admin"] .col-admin { display: block; grid-column: 1 / -1; }
.board[data-view="admin"] .col-feed,
.board[data-view="admin"] .col-match,
.board[data-view="admin"] .col-news { display: none; }
body[data-view="admin"] .strip,
body[data-view="admin"] .switch { display: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
.stat {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-left: 3px solid var(--sky-deep);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.stat-value {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sky);
}
.stat-label {
  display: block;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin-top: 5px;
}
.stat.is-alert { border-left-color: var(--warn); }
.stat.is-alert .stat-value { color: var(--warn); }

/* Daily activity columns — plain CSS, no charting library. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 150px;
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
  min-width: 0;
}
.col-bar {
  width: 100%;
  background: var(--sky);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 200ms ease;
}
.col-bar.is-empty { background: var(--pitch-line); }
.col-value {
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--chalk-dim);
  min-height: 1em;
}
.col-label {
  font-family: var(--display);
  font-size: 0.76rem;
  color: var(--chalk-dim);
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9rem;
}
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  height: 9px;
  background: var(--pitch-raised);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill { height: 100%; background: var(--sky-deep); border-radius: 999px; }
.bar-value { font-family: var(--display); color: var(--sky); min-width: 2em; text-align: right; }

.admin-block {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.admin-block .hint { margin: 0 0 10px; }
.col-admin .strip-admin { padding: 0; margin-bottom: 6px; }

/* ---------- moderation ---------- */

.report {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.report-meta { font-size: 0.84rem; color: var(--chalk-dim); margin: 0 0 6px; }
.report-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-reason { font-size: 0.86rem; color: var(--gold); margin: 6px 0 0; }

.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--pitch-line);
}
.member-name { display: flex; flex-direction: column; gap: 2px; font-size: 0.94rem; }
.member-tags { font-size: 0.8rem; color: var(--chalk-dim); }

.reset-code {
  width: 100%;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--sky);
  background: var(--pitch-raised);
  border: 1px dashed var(--sky-deep);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin: 8px 0 0;
}

/* ---------- share menu ---------- */

.post-actions { position: relative; }

.share-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(2, 8, 14, 0.55);
  overflow: hidden;
}
.share-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  font-size: 0.92rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pitch-line);
  color: var(--chalk);
  padding: 11px 14px;
  cursor: pointer;
}
.share-item:last-child { border-bottom: 0; }
.share-item:hover { background: var(--pitch-raised); color: var(--sky); }

/* ---------- curated accounts ---------- */

.accounts { display: flex; flex-direction: column; }

.account {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 11px 0;
  border-bottom: 1px solid var(--pitch-line);
}
.account:hover .account-handle { color: #9ad5f5; }
.account-handle {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sky);
}
.account-name { display: block; font-size: 0.92rem; }
.account-blurb { display: block; font-size: 0.84rem; color: var(--chalk-dim); }
.account-drop {
  position: absolute;
  top: 8px; right: 0;
  background: none;
  border: 0;
  color: var(--chalk-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.account-drop:hover { color: var(--warn); }

/* ---------- pinned threads ---------- */

.post.is-thread {
  border-left-color: var(--gold);
  background: linear-gradient(180deg, #14314c 0%, var(--pitch-raised) 100%);
}
.thread-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

/* ---------- topics ---------- */

.topics {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pitch-line);
  scrollbar-width: none;
}
.topics::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-radius: 999px;
  color: var(--chalk-dim);
  padding: 7px 15px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.chip:hover { color: var(--chalk); border-color: var(--sky-deep); }
.chip.is-active {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--pitch);
}
.chip-count {
  font-size: 0.85rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.topic-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin-bottom: 4px;
}

.composer-left { display: flex; align-items: center; gap: 12px; }
.composer-left select {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--chalk);
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 7px 10px;
}

/* ---------- composer ---------- */

.composer {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 14px;
}
.composer textarea { resize: vertical; min-height: 74px; }
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.count { font-family: var(--display); font-size: 1rem; color: var(--chalk-dim); }
.count.is-low { color: var(--gold); }
.composer .msg { margin-top: 8px; }

/* ---------- posts ---------- */

.feed { display: flex; flex-direction: column; gap: 12px; }

.post {
  position: relative;
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-left: 3px solid var(--sky-deep);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-handle, .post-time { font-size: 0.86rem; color: var(--chalk-dim); }
.post-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.post-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.act {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--chalk-dim);
  padding: 4px 10px;
  cursor: pointer;
}
.act:hover { color: var(--chalk); border-color: var(--pitch-line); }
.act.is-on { color: var(--sky); }

.reply { border-left-color: var(--pitch-line); margin-left: 14px; }

.empty {
  border: 1px dashed var(--pitch-line);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  color: var(--chalk-dim);
}
.load-more { width: 100%; margin-top: 14px; }

/* ---------- news ---------- */

.news { display: flex; flex-direction: column; }

.item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 0;
  border-bottom: 1px solid var(--pitch-line);
}
.item:hover .item-title { color: var(--sky); }
.item-source {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.item-title { margin: 4px 0 4px; font-weight: 600; line-height: 1.35; }
.item-time { font-size: 0.82rem; color: var(--chalk-dim); }

/* ---------- reply sheet ---------- */

.sheet[hidden] { display: none; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 12, 20, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh var(--gutter);
  overflow-y: auto;
}
.sheet-panel {
  width: min(620px, 100%);
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 16px;
}
.sheet-close {
  float: right;
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: var(--chalk-dim);
  cursor: pointer;
}
.sheet .feed { margin-top: 14px; }
.composer-reply { margin-top: 16px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .gate-grid { grid-template-columns: 1fr; }
  .gate-brand { padding: 10vh 24px 6vh; }
  .gate-form { padding: 30px 24px 60px; max-width: none; }

  /* Bottom bar rather than top tabs. The top of a phone screen is the
     hardest place to reach one-handed and the thumb is already down here. */
  .switch {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    z-index: 25;
    background: rgba(8, 25, 42, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--pitch-line);
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .switch-btn {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 58px;
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: none;
    border: 0;
    border-bottom: 0;
    color: var(--chalk-dim);
    padding: 12px 0 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .switch-btn:active { background: var(--pitch-raised); }
  /* A bar above the label rather than under it — reads as a tab marker at
     the bottom of the screen, where an underline would be lost. */
  .switch-btn::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
  }
  .switch-btn.is-active { color: var(--chalk); }
  .switch-btn.is-active::before { background: var(--sky); }

  /* Clear the bar so the last post isn't hidden behind it. */
  .board { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .sheet-panel { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

  /* The strip belongs to the Match tab on small screens — the terrace and
     news views get the full height for what they're actually for. */
  body[data-view="terrace"] .strip,
  body[data-view="news"] .strip { display: none; }

  .strip-inner { grid-template-columns: 1fr; gap: 18px; padding: 16px var(--gutter); }
  .strip-rest { grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
  .ff-row { grid-template-columns: 1fr; gap: 0; }

  .split { grid-template-columns: 1fr; gap: 0; }
  .chart { height: 120px; gap: 3px; padding: 10px; }
  .col-value { display: none; }

  /* iOS zooms the whole page when you focus an input under 16px, and it does
     not zoom back out. Every field goes to 16px on touch, whatever it looks
     like on desktop. */
  input, textarea, select,
  .poll-input, .edit-box textarea, .composer-left select { font-size: 16px; }

  /* Comfortable thumb targets. The desktop sizes are fine with a pointer but
     fiddly on a phone, especially the row of actions under each post. */
  .act, .chip, .share-item, .icon-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .act { padding: 8px 12px; }
  .chip { padding: 9px 16px; }
  .share-item { min-height: 46px; }
  .btn { padding: 12px 20px; }
  .btn-small { padding: 9px 14px; }

  /* Installed to the home screen, the app runs under the notch and over the
     home indicator. */
  .topbar-inner { padding-top: max(12px, env(safe-area-inset-top)); }
  .board, .strip-inner, .topbar-inner, .notif-drop {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  /* The chip row scrolls; a fade at the edge is what tells you so. */
  .topics {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .chip { scroll-snap-align: start; }

  /* Full-height sheet rather than a floating panel — more room to read a
     thread, and nothing to mis-tap behind it. */
  .sheet { padding: 0; align-items: stretch; }
  .sheet-panel {
    width: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) var(--gutter)
             calc(24px + env(safe-area-inset-bottom));
  }

  /* A photo shouldn't eat the whole screen before you've read the post. */
  .post-photo img { max-height: 62vh; object-fit: cover; }

  .composer-left { gap: 8px; min-width: 0; }
  .composer-left select { max-width: 42vw; }
  .composer-foot { flex-wrap: wrap; gap: 10px; }

  /* The rating slider and average crowd out the player name at 320px. */
  .rater input[type="range"] { width: 84px; }
  .rater-avg { min-width: 2.6em; }
  .topbar-right { gap: 8px; }
  .mark-text { font-size: 1.3rem; }

  /* minmax(0, 1fr) rather than a bare 1fr: 1fr keeps an implicit `auto`
     minimum, so the column refuses to shrink below its widest content — and
     the scrolling chip row reports its full width even though it scrolls.
     That is what pushed the page sideways. */
  .board { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; }
  .board > * { min-width: 0; }
  .board .col-match, .board .col-news, .board .col-feed { grid-column: 1; grid-row: auto; }
  .board[data-view="terrace"] .col-news,
  .board[data-view="terrace"] .col-match { display: none; }
  .board[data-view="news"] .col-feed,
  .board[data-view="news"] .col-match { display: none; }
  .board[data-view="match"] .col-feed,
  .board[data-view="match"] .col-news { display: none; }
  .board[data-view="match"] .col-match { display: block; }
  .board[data-view="news"] .rail-head { margin-top: 6px; }
  .who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- feed manager ---------- */

.member-tags.is-bad { color: var(--warn); }

.feed-sample {
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-top: 10px;
}
.feed-sample-head {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin: 0 0 7px;
}
.feed-sample-item {
  font-size: 0.9rem;
  margin: 0 0 5px;
  padding-left: 13px;
  border-left: 2px solid var(--sky-deep);
}

/* ---------- content filter ---------- */

.term-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pitch-line);
  font-size: 0.9rem;
}
.term-word { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.term-sev {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 7px;
  background: var(--pitch-raised);
  color: var(--chalk-dim);
}
.term-sev.is-urgent { background: var(--warn); color: var(--pitch); }

.report.is-urgent { border-left-color: var(--warn); border-left-width: 4px; }
.report-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 7px;
  margin-right: 7px;
  background: var(--pitch-line);
  color: var(--chalk);
}
.report-tag.is-urgent { background: var(--warn); color: var(--pitch); }
.bell-count.is-urgent { background: var(--warn); }

/* ---------- photos, polls, editing ---------- */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  font-size: 1.05rem;
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  color: var(--chalk-dim);
  cursor: pointer;
}
.icon-btn:hover { color: var(--sky); border-color: var(--sky-deep); }
.icon-btn.is-on { background: var(--sky); border-color: var(--sky); color: var(--pitch); }

.photo-preview { position: relative; margin-top: 12px; }
.photo-preview[hidden] { display: none; }
.photo-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
}
.photo-drop {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(8, 25, 42, 0.86);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  color: var(--chalk);
  padding: 4px 10px;
  cursor: pointer;
}

.post-photo { margin-top: 10px; }
.post-photo img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--pitch-line);
}

.post-edited {
  display: block;
  font-size: 0.8rem;
  color: var(--pitch-line);
  margin-top: 6px;
}

.poll-builder { display: grid; gap: 7px; margin-top: 12px; }
.poll-builder[hidden] { display: none; }
.poll-input { font-size: 0.94rem; padding: 8px 10px; }

.poll { margin-top: 12px; display: grid; gap: 6px; }
.poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-align: left;
  font-family: var(--body);
  font-size: 0.94rem;
  background: var(--pitch);
  border: 1px solid var(--pitch-line);
  border-radius: var(--radius);
  color: var(--chalk);
  padding: 9px 12px;
  cursor: pointer;
}
.poll-opt:hover { border-color: var(--sky-deep); }
.poll-opt.is-mine { border-color: var(--sky); }
.poll-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(46, 134, 193, 0.32);
  transition: width 260ms ease;
}
.poll-text { position: relative; flex: 1; }
.poll-share { position: relative; font-family: var(--display); color: var(--sky); }
.poll-total { font-size: 0.82rem; color: var(--chalk-dim); margin: 2px 0 0; }

.edit-box { margin-top: 10px; display: grid; gap: 8px; }
.edit-box textarea { font-size: 0.96rem; }

.next-when.is-live { color: var(--sky); }
.next-when.is-live::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- feed presentation ---------- */

.post-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.post-main { min-width: 0; }

.avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
}
.reply .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 0.92rem; }

/* Was --pitch-line, a border colour: near-invisible on this background. */
.post-edited { color: var(--chalk-dim); }

.day-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  margin: 14px 0 2px;
}
.day-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pitch-line);
}

.post.is-pending { opacity: 0.6; }
.post.is-pending .post-actions { font-size: 0.86rem; color: var(--chalk-dim); }
.post.is-going { opacity: 0.35; transition: opacity 160ms ease; }

.act.pop { animation: pop 260ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes pop {
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------- loading skeleton ---------- */

.skeleton { pointer-events: none; }
.sk-block, .sk-line {
  display: block;
  background: linear-gradient(90deg, var(--pitch-line) 25%, #24455f 50%, var(--pitch-line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
}
.sk-line { height: 11px; margin-bottom: 9px; }
.sk-line.sk-short { width: 38%; }
.sk-line.sk-med { width: 72%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Prose stays readable rather than stretching the full width on desktop. */
.post-body { max-width: 68ch; }

/* ---------- season fixture list ---------- */

.seg { display: flex; gap: 2px; background: var(--pitch-raised);
       border: 1px solid var(--pitch-line); border-radius: 999px; padding: 2px; }
.seg-btn {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--chalk-dim);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn.is-active { background: var(--sky); color: var(--pitch); }

.season-month {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 18px 0 6px;
}
.season-month:first-child { margin-top: 4px; }

.fixture {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--pitch-line);
}
.fixture.is-played { opacity: 0.82; }

.fixture-when { display: flex; flex-direction: column; line-height: 1.15; }
.fixture-day {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.fixture-date { font-family: var(--display); font-size: 1rem; color: var(--chalk); }

.fixture-main { min-width: 0; }
.fixture-teams { display: flex; align-items: baseline; gap: 8px; }
.fixture-ha {
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pitch);
  background: var(--sky-deep);
  border-radius: 2px;
  padding: 1px 5px;
}
.fixture-opp {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixture-meta {
  font-size: 0.8rem;
  color: var(--chalk-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture-right { display: flex; align-items: center; gap: 8px; }
.fixture-time { font-family: var(--display); font-size: 1rem; color: var(--chalk-dim); }
.fixture-score { font-family: var(--display); font-size: 1.2rem; color: var(--chalk); }
.fixture-score.w { color: var(--sky); }
.fixture-score.l { color: #e08a8a; }
.fixture-outcome {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 3px;
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  color: var(--chalk-dim);
}

/* ---------- landing page ---------- */

.landing { background: var(--pitch); }

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1c6ea4 0%, #0d3a5c 58%, var(--pitch) 100%);
  padding: clamp(56px, 12vh, 110px) var(--gutter) clamp(48px, 10vh, 90px);
  padding-top: max(clamp(56px, 12vh, 110px), env(safe-area-inset-top));
}
.hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.25rem); max-width: 34rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
.hero-cta .btn { text-decoration: none; display: inline-flex; align-items: center; }
.hero-cta .btn-quiet { border-color: rgba(233, 242, 248, 0.35); color: var(--chalk); }

.landing-main { max-width: 640px; margin: 0 auto; padding: 8px var(--gutter) 40px; }
.landing-block { margin-bottom: 34px; }

.sells { display: grid; gap: 12px; }
.sell {
  background: var(--pitch-raised);
  border: 1px solid var(--pitch-line);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.sell h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.sell p { margin: 0; color: #c3d6e4; font-size: 0.96rem; }

.faq dt {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-top: 18px;
}
.faq dd { margin: 6px 0 0; color: #b6cbdb; font-size: 0.96rem; }

.landing-final {
  border-top: 1px solid var(--pitch-line);
  padding-top: 30px;
  text-align: center;
}
.landing-final .btn { display: inline-block; text-decoration: none; margin-top: 8px; }
.landing-final .lede { margin: 0 auto 6px; max-width: 30rem; }
.wordmark-small {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--sky);
}

.landing-foot {
  border-top: 1px solid var(--pitch-line);
  padding: 22px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  text-align: center;
}
.landing-foot p {
  max-width: 40rem;
  margin: 0 auto;
  font-size: 0.84rem;
  color: var(--chalk-dim);
}

@media (min-width: 720px) {
  .sells { grid-template-columns: 1fr 1fr; }
  .landing-main { max-width: 780px; }
}

/* ---------- daylight theme ----------
   Sky blue ground, navy ink. Readable in bright sunlight, which the dark
   theme is not. The variables carry most of it; the rules below cover the
   handful of places where a dark value was written in directly. */

:root[data-theme="light"] {
  --pitch: #c3e2f6;          /* page ground — and button text, so it stays pale */
  --pitch-raised: #dbeffb;   /* cards lift towards white */
  --pitch-line: #8ebdda;
  --sky: #0c4a75;            /* accent inverts to navy so it reads on light */
  --sky-deep: #0a3a5c;
  --chalk: #08202f;          /* body ink */
  --chalk-dim: #3a5d77;
  --gold: #7a5200;
  --warn: #9c2f28;
}

:root[data-theme="light"] .topbar { background: rgba(195, 226, 246, 0.94); }
:root[data-theme="light"] .switch { background: rgba(195, 226, 246, 0.97); }
:root[data-theme="light"] .strip {
  background: linear-gradient(180deg, #a9d5f0 0%, var(--pitch) 100%);
}
:root[data-theme="light"] .sk-block,
:root[data-theme="light"] .sk-line {
  background: linear-gradient(90deg, var(--pitch-line) 25%, #b9d9ef 50%, var(--pitch-line) 75%);
  background-size: 200% 100%;
}
:root[data-theme="light"] .post.is-thread {
  background: linear-gradient(180deg, #cbe6f8 0%, var(--pitch-raised) 100%);
}
:root[data-theme="light"] .pill.l { border-color: #b8746e; color: #8f2b24; }
:root[data-theme="light"] .fixture-score.l { color: #8f2b24; }
:root[data-theme="light"] .mini .mini-date { color: var(--sky); }
:root[data-theme="light"] .poll-fill { background: rgba(12, 74, 117, 0.18); }
:root[data-theme="light"] .share-menu { box-shadow: 0 10px 28px rgba(10, 40, 62, 0.22); }
:root[data-theme="light"] .photo-drop { background: rgba(219, 239, 251, 0.9); }
:root[data-theme="light"] .sell p,
:root[data-theme="light"] .faq dd { color: #2c4d64; }

/* The hero keeps its dark band in both themes — it is the one place the sky
   blue belongs in the foreground rather than behind everything. */
:root[data-theme="light"] .hero-cta .btn-quiet {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}