@font-face{font-family:system-fallback;src:local('Arial')}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#101c2a;color:#f5f7f9;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}body{display:flex;flex-direction:column}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ff8f4c;outline-offset:4px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}.info-icon{width:17px;height:17px;border:1px solid #748292;border-radius:50%;font:12px Georgia,serif;display:grid;place-items:center}main{display:flex;flex-direction:column;flex:1;min-height:0}.stage{position:relative;isolation:isolate;flex:1;min-height:310px;background:#252e35;overflow:hidden}#map{height:100%;width:100%;z-index:0;background:#252e35}.leaflet-container{font-family:inherit}.leaflet-control-attribution{background:#112030ed!important;color:#bac8d5!important;font-size:10px!important;padding:3px 8px!important}.leaflet-control-attribution a{color:#e6edf6!important}.leaflet-control-zoom{border:1px solid #56616c!important;border-radius:7px!important;overflow:hidden;box-shadow:0 4px 16px #0003!important}.leaflet-control-zoom a{background:#182737!important;border-color:#3b4a5a!important;color:#e9edf3!important;width:38px!important;height:36px!important;line-height:36px!important;font-weight:400!important}.leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-right:20px;margin-bottom:12px}.ground-marker{background:none;border:0}.pin-hit{width:44px;height:44px;display:grid;place-items:center}.ground-tooltip{background:#152536ed!important;border:1px solid #58697a!important;box-shadow:0 2px 12px #0003!important;border-radius:5px!important;color:#edf2f8!important;font-size:10px!important;padding:5px 9px!important}.leaflet-tooltip-top:before{border-top-color:#58697a!important}.leaflet-container a.leaflet-popup-close-button{color:#a9b8c7!important;top:5px;right:6px;width:32px;height:32px;font-size:22px}.popup-heading{padding:0 21px 12px 0;border-bottom:1px solid #ffffff1c}.popup-heading .eyebrow{font-size:8px;color:#a9b8c8;letter-spacing:1.5px}.popup-heading h2{font-size:17px;line-height:1.3;margin:5px 0 3px;font-weight:600;letter-spacing:-.3px}.popup-heading p{font-size:10px;margin:0;color:#9babbf}.scorecard{padding:16px 0 12px;border-bottom:1px solid #ffffff1c}.scorecard:last-child{border:0;padding-bottom:0}.score-meta{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#a3b1c3;margin-bottom:12px;gap:10px}.status-badge{display:inline-flex;gap:5px;align-items:center;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}.status-badge.live{color:#55e4a6}.status-badge.upcoming{color:#edbd67}.status-badge.finished{color:#adbac7}.team-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:7px 0;font-size:14px;font-weight:550}.team-name{display:flex;align-items:center;gap:10px}.team-emblem{width:25px;height:25px;border:1px solid #4b5f74;background:#26394e;color:#d7e4f1;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;flex:none}.team-row:nth-of-type(3) .team-emblem{background:#38404c;border-color:#5d6371}.fixture-foot{display:flex;justify-content:space-between;gap:10px;color:#91a3b8;font-size:9px;margin-top:13px}.supporter-link{display:block;color:#ffa36c!important;font-weight:600;margin-top:12px}.local-label{color:#f6b36c!important}.empty-state{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);background:#152536f5;box-shadow:0 10px 40px #0003;border:1px solid #4b6073;border-radius:12px;text-align:center;padding:28px;width:min(340px,calc(100% - 32px))}.empty-state h2{font-size:18px;margin:0 0 10px}.empty-state p{font-size:12px;color:#acbdcf}.empty-state button{padding:10px 16px;margin-top:6px;border-radius:6px;background:#354e68;color:#fff;font-size:12px}#map-notice{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);background:#1d3145;border:1px solid #6c8196;border-radius:7px;box-shadow:0 4px 18px #0003;padding:12px 16px;max-width:calc(100% - 130px);font-size:11px;line-height:1.5}#map-notice button{background:none;color:#ffad7d;text-decoration:underline;padding:0 3px;font-size:inherit}footer strong{color:#bcc8d5;font-weight:500}footer button{background:none;font-size:10px;color:#a8b8ca;padding:10px 0;white-space:nowrap}footer button span{margin-left:6px;color:#ff9a5f}.list-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.list-intro h2{font-size:17px;margin:0;font-weight:550}.list-intro p{font-size:11px;color:#9bacbf;margin:0}#match-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.venue-card{border:1px solid #344b62;background:#17283b;border-radius:10px;padding:18px}.venue-card .popup-heading{padding-right:0}.venue-card .scorecard{padding-top:18px}.venue-card button.show-ground{margin-top:17px;background:#263c53;border:1px solid #3c526a;padding:10px;border-radius:5px;font-size:11px;width:100%;color:#bdcfe1}.venue-card button.show-ground:hover{background:#364e69}.stage.is-list .fit-button,.stage.is-list .map-caption,.stage.is-list #map-notice{display:none!important}dialog{border:1px solid #466078;border-radius:15px;background:#142539;color:#e6edf5;width:min(530px,calc(100% - 28px));padding:26px;box-shadow:0 20px 100px #0008;max-height:88dvh}dialog::backdrop{background:#06101fc9;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:9px;color:#a8b7c9;letter-spacing:1.8px;font-weight:600}.close-button{font-size:25px;background:none;color:#b1c1d2;min-width:36px;min-height:36px;margin:-10px -12px -3px 0}dialog h2{font-size:24px;letter-spacing:-.6px;line-height:1.25;margin:14px 0}dialog h3{font-size:14px;margin:22px 0 8px}dialog p{font-size:12px;line-height:1.8;color:#b6c5d5}dialog a{color:#ffb183;text-underline-offset:3px}.primary-button,.secondary-button{border-radius:6px;padding:12px 15px;font-size:12px;min-height:44px}.primary-button{background:#ff7a32;color:#131f2d;font-weight:700}.primary-button:hover{background:#ff9b64}.secondary-button{background:#2c435b;color:#d7e2ee}dialog>.primary-button{margin-top:14px}form label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#c5d4e4;font-weight:550}form select,form input{border:1px solid #4f657c;border-radius:5px;padding:11px;background:#0f1c2b;color:#e6edf5;min-width:0;width:100%;height:42px}form select{margin-bottom:0}.coordinate-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.source-note{font-size:11px!important;color:#a7b7c9!important;line-height:1.7!important}.form-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.concept-note{margin-top:24px;border-top:1px solid #ffffff20;padding-top:20px}.concept-note strong{font-size:12px}.concept-note p{font-size:11px;margin-bottom:0}#location-message{font-size:11px;color:#79edb5;line-height:1.7}#location-message.error{color:#ffb19d}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;top:-100px;left:10px;z-index:9999;padding:10px;background:#fff;color:#111}.skip:focus{top:10px}.noscript{position:fixed;inset:45% 10% auto;background:#152536;padding:24px;z-index:99;text-align:center}

@media(max-width:1000px){#match-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-right:12px;margin-bottom:12px}.leaflet-control-zoom a{width:38px!important;height:34px!important;line-height:34px!important}.leaflet-control-attribution{font-size:8px!important;padding:2px 5px!important}.popup-heading h2{font-size:16px}.scorecard{padding:12px 0}.score-meta{margin-bottom:9px}.team-row{font-size:13px}.fixture-foot{margin-top:10px}.stage{min-height:280px}.footer-extra{display:none}footer button{font-size:9px}#match-list{grid-template-columns:1fr;gap:12px}.list-intro{margin:0 2px 16px}.list-intro h2{font-size:15px}.list-intro p{font-size:10px}.venue-card{padding:16px}.venue-card .scorecard{padding:15px 0}.venue-card .team-row{font-size:14px}.venue-card .score{font-size:22px}#map-notice{left:12px;right:64px;bottom:76px;transform:none;max-width:none;font-size:10px;padding:9px 11px}dialog{padding:22px}dialog h2{font-size:23px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
/* Crop only the original wordmark's transparent margins; retain the source artwork. */
.brand{position:relative;width:190px;height:54px;flex:none}

/* Matchday navigation and controls */
.site-header {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: none;
  height: 60px;
  padding: 0 24px;
  background: #142231;
  border-bottom: 1px solid #536171;
}

/* Display the original wordmark at its visible bounds. */
.brand { position: relative; display: block; flex: none; width: 146px; height: 42px; overflow: hidden; }
.brand img { position: absolute; width: 269px; height: auto; left: -58px; top: -12px; }
.site-nav { align-self: stretch; display: flex; align-items: stretch; }
.site-nav a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 3px solid #ff7b28;
  text-decoration: none;
  font-weight: 650;
}
.quiet-button {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 4px;
  min-height: 44px;
  background: transparent;
  color: #c7d3df;
  font-size: 12px;
}
.quiet-button:hover { color: white; }
.matchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  flex: none;
  padding: 12px 24px 13px;
  background: #132231;
}
.heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; min-width: 0; }
.heading h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.045em; line-height: 1.12; font-weight: 750; }
.heading h1 > span { color: #ff7b28; }
.heading p { display: flex; align-items: center; gap: 11px; margin: 0; color: #bac8d7; font-size: 13px; }
.demo-tag {
  padding: 2px 7px;
  border: 1px solid #657588;
  border-radius: 4px;
  color: #d9e4ef;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
}
.match-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #586a7d;
  border-radius: 9px;
  background: #172634;
}
.search svg { width: 18px; flex: none; stroke: #bdcad7; fill: none; stroke-width: 1.7; }
.search input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #f5f7fa; }
.search input::placeholder { color: #bbc8d6; }
.search:focus-within { outline: 2px solid #ff8f4c; outline-offset: 1px; }

.view-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #586a7d;
  border-radius: 9px;
  background: #101e2d;
}
.view-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 6px;
  background: transparent;
  color: #c0cddd;
  font-size: 13px;
  font-weight: 650;
}
.view-switch button[aria-pressed=true] { background: #45576b; color: #fff; }
.view-switch svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.filters { display: flex; gap: 8px; }
.filters button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #506175;
  border-radius: 9px;
  background: #152333;
  color: #eef3f8;
  font-size: 12px;
  font-weight: 600;
}
.filters button:hover { background: #273849; }
.filters button[aria-pressed=true] { border-color: #e1e9f1; background: #354659; }
.filters button > span { color: #c3d0df; font-size: 11px; }
.filters button > span::before { content: "("; }
.filters button > span::after { content: ")"; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot.live { background: #2bd77a; }
.dot.upcoming { background: #ffa446; }
.dot.finished { background: #a8b8c9; }

/* OSM raster styling, pins and scorecards */
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.46) brightness(1.13) contrast(.86); }
#map::after {
  position: absolute;
  z-index: 250; /* Between Leaflet's tile and overlay panes. */
  inset: 0;
  background: #16405b30;
  pointer-events: none;
  content: "";
}
.ground-pin {
  --pin-fill: #25cf76;
  --pin-rim: #f4f9ff;
  position: relative;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 3px solid var(--pin-rim);
  border-radius: 50%;
  background: var(--pin-fill);
  box-shadow: 0 2px 8px #0008;
}
.ground-pin:not(.grouped)::after {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid var(--pin-rim);
  transform: translateX(-50%);
  content: "";
}
.ground-pin.upcoming { --pin-fill: #ff9d39; }
.ground-pin.finished { --pin-fill: #a2b0be; }
.ground-pin.grouped {
  width: 33px;
  height: 33px;
  border-width: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--pin-fill) 44%, transparent), 0 0 0 11px color-mix(in srgb, var(--pin-fill) 20%, transparent);
  background: color-mix(in srgb, var(--pin-fill) 60%, #081e2a);
  font-size: 17px;
  font-weight: 750;
  color: #fff;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #142434; color: #f4f7fa; box-shadow: 0 12px 36px #0005; }
.leaflet-popup-content-wrapper { border: 1px solid #a0afbf; border-radius: 12px; }
.leaflet-popup-content { width: min(294px, calc(100vw - 64px)) !important; margin: 14px; line-height: 1.45; }
.popup-scorecards .popup-heading { padding-bottom: 9px; }
.popup-scorecards .scorecard { padding-top: 10px; padding-bottom: 10px; }
.popup-scorecards .scorecard:last-child { padding-bottom: 0; }
.popup-scorecards .score-meta { margin-bottom: 7px; }
.popup-scorecards .team-row { margin: 5px 0; }
.popup-scorecards .fixture-foot { margin-top: 8px; }
.score {
  min-width: 36px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #2a3c50;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.map-caption {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 28px;
  padding: 10px 14px;
  border: 1px solid #5c7083;
  border-left: 3px solid #ff7b28;
  border-radius: 9px;
  background: #122232f2;
  pointer-events: none;
}
.map-caption strong { font-size: 13px; }
.map-caption p { margin: 3px 0 0; color: #d9e4ef; font-size: 11px; }
.fit-button {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 112px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  border: 1px solid #596b7e;
  border-radius: 8px;
  background: #182737;
}
.fit-button:hover { background: #2a3d51; }
.fit-button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
#list-view { position: absolute; inset: 0; overflow: auto; padding: 22px max(24px, calc((100% - 1100px) / 2)); background: #0f1d2d; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; flex: none; padding: 0 24px; color: #a8b9cb; font-size: 10px; }

@media (max-width: 700px) {
  .site-header { height: 49px; padding: 0 14px; }
  .brand { width: 124px; height: 36px; }
  .brand img { width: 229px; left: -49px; top: -10px; }
  .site-nav { display: none; }
  .quiet-button { gap: 5px; font-size: 11px; }
  .matchbar { padding: 10px 12px; gap: 8px; }
  .heading { flex-direction: column; align-items: flex-start; gap: 5px; }
  .heading h1 { font-size: clamp(17px, 5vw, 24px); }
  .heading p { gap: 7px; font-size: 11px; }
  .demo-tag { font-size: 8px; padding: 1px 5px; }
  .view-switch button { padding: 0 8px; gap: 5px; font-size: 11px; }
  .view-switch svg { width: 14px; height: 14px; }
  .match-controls { grid-template-columns: 1fr; gap: 7px; }
  .search { height: 36px; }
  .search input { font-size: 16px; }
  .filters { display: grid; grid-template-columns: .8fr 1fr 1.3fr 1.15fr; gap: 5px; }
  .filters button { min-height: 36px; padding: 0 4px; gap: 4px; font-size: 11px; }
  .filters button > span { font-size: 10px; }
  .filters .dot { width: 6px; height: 6px; }
  .map-caption { left: 12px; bottom: 23px; padding: 8px 10px; }
  .map-caption strong { font-size: 11px; }
  .map-caption p { font-size: 10px; }
  .fit-button { right: 12px; bottom: 104px; }
  #list-view { padding: 16px 12px; }
  footer { padding: 0 12px; font-size: 9px; }
}
@media (max-width: 360px) {
  .filters button { font-size: 10px; }
  .filters button > span { font-size: 9px; }
  .view-switch svg { display: none; }
}
