html, body { margin: 0; padding: 0; background: #0a0c0b; color: #eef2ef; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: #2fe07d; text-decoration: none; }
a:hover { color: #7cf0ae; }
::selection { background: #2fe07d; color: #06120b; }
@keyframes bp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

button { font: inherit; }

.mgr-card:hover { border-color: #2fe07d !important; }
.toggle-btn:hover { border-color: #2fe07d !important; color: #2fe07d !important; }

/* Nav is wider than a phone screen, so it scrolls. The fade on the right edge is
   the only cue that there's more nav off-screen; it clears once you reach the end. */
.nav-wrap { position: relative; margin: 0 -16px; }
.nav-scroll {
  display: flex; gap: 4px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-fade {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  pointer-events: none; transition: opacity .18s ease;
  background: linear-gradient(to right, rgba(10,12,11,0), rgba(10,12,11,.97) 65%);
}
.nav-fade.at-end { opacity: 0; }

/* Standings tables scroll sideways on phones, so rank + manager stay pinned —
   otherwise you scroll to a number with no idea whose row it is. */
.sticky-col { position: sticky; z-index: 2; }

/* Names wrap rather than truncate: a pinned column is only useful if you can read
   the whole name. The team line is secondary and gives way on small screens. */
.liga-grid { display: grid; grid-template-columns: 34px minmax(186px, 1fr) 120px 110px 100px 130px; gap: 6px; }
.pokal-grid { display: grid; grid-template-columns: 30px minmax(186px, 1fr) 46px 46px 46px 54px 130px; gap: 6px; }

.tbl-name {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 18px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.04;
  /* break-word, not anywhere: only split a word that genuinely cannot fit, so
     "Mads Maaarinho" wraps at its space rather than mid-word. */
  overflow-wrap: break-word;
}
@media (max-width: 620px) { .tbl-name { font-size: 15px; } }
.tbl-hold {
  display: block; font-size: 11px; color: #8b968f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) { .tbl-hold { display: none; } }

/* Hovering one manager lights up every other instance of them on the page, so you can
   trace your own fixtures down the whole kampprogram. Transform rather than font-size,
   so nothing reflows or starts truncating mid-hover. */
.mgr { cursor: default; transition: color .12s ease, transform .12s ease; }
.mgr-hl { color: #fff !important; font-weight: 700; transform: scale(1.07); }
.mgr-r { transform-origin: 100% 50%; }
.mgr-l { transform-origin: 0% 50%; }

/* Bajer Galla receipt. "Vundet" is the secondary column, so on narrow phones it
   gives way to the manager names — otherwise madsdamp and Mads Maaarinho both
   truncate to "MADS…". */
.ledger-grid { display: grid; grid-template-columns: 1fr 48px 48px 58px 44px; gap: 6px; }
@media (max-width: 430px) {
  .ledger-grid { grid-template-columns: 1fr 44px 44px 54px; }
  .ledger-wins { display: none; }
}