:root{--ink:#15212b;--green:#176b45;--paper:#f4f7f5;--line:#dce5df}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}header{background:#123e2c;color:#fff;padding:24px 18px}header .wrap,main,.foot{max-width:1140px;margin:auto}.brand{display:flex;align-items:center;gap:14px}.ball{width:46px;height:46px;border-radius:50%;background:#fff;color:#123e2c;display:grid;place-items:center;font-weight:900;font-size:20px}h1{font-size:clamp(1.5rem,4vw,2.25rem);margin:0}header p{margin:5px 0 0;color:#dcece3}nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}nav a{color:#123e2c;background:#fff;padding:9px 13px;border-radius:999px;text-decoration:none;font-weight:700}main{padding:20px 16px 44px}.intro,.card{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:18px}.intro{padding:18px}.status{font-size:.9rem;color:#56645d}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}select,button{font:inherit;border:1px solid #bdccc2;border-radius:9px;padding:10px 12px;background:#fff;color:var(--ink)}button{background:var(--green);color:#fff;border:0;font-weight:700;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px}.card{overflow:hidden;min-width:0;margin:0}.card h2{font-size:1.2rem;margin:0;padding:15px 16px;border-bottom:1px solid var(--line)}.inside{padding:14px 16px}.scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.94rem}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid #edf1ee;white-space:nowrap}th{color:#4c5d53;background:#f8faf8;font-size:.83rem}tr:last-child td{border-bottom:0}.muted{color:#637168}.pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#edf5ef;color:#1a6240;font-size:.8rem;font-weight:700}.error{color:#9a2b23;background:#fff0ee;border:1px solid #f1c5bf;padding:12px;border-radius:10px}.empty{padding:18px;text-align:center;color:#637168}.foot{padding:0 16px 30px;color:#647168;font-size:.85rem}@media(max-width:600px){header{padding:20px 15px}.inside{padding:10px}.card h2{padding:13px}.intro{padding:14px}}

.stats-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.stats-table{width:100%;min-width:1400px;border-collapse:collapse;font-size:.88rem}
.stats-table th,.stats-table td{padding:8px 7px;border-bottom:1px solid #edf1ee;white-space:nowrap}
.stats-average-row td{font-weight:800;background:#e7f1ee;border-top:2px solid #176b59}
@media print{body{background:#fff}.test-banner,header nav,.controls,.foot{display:none!important}main{max-width:none;padding:0}.card{border:0;break-inside:avoid}.stats-table{min-width:0;font-size:7pt}.stats-table th,.stats-table td{white-space:normal;padding:3px}.stats-table-wrap{overflow:visible}section{break-inside:avoid}}

/* TEST v5: independent public information pages */
.page-nav{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}
.page-nav a{padding:8px 12px;border-radius:8px;text-decoration:none;background:#edf3f1;color:#174a37;font-weight:700}
.page-nav a[aria-current=page]{background:#176b45;color:#fff}
.page-main{max-width:1200px;margin:0 auto;padding:20px}
@media(max-width:700px){.page-main{padding:12px}}

/* TEST v7: keep wide fixture information accessible without clipping */
.stats-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;touch-action:pan-x}
.stats-table{min-width:1050px}
.stats-table th:nth-child(1),.stats-table td:nth-child(1){min-width:125px}
.stats-table th:nth-child(2),.stats-table td:nth-child(2){min-width:110px}
.stats-table th:nth-child(3),.stats-table td:nth-child(3){min-width:310px}
.stats-table th:nth-child(4),.stats-table td:nth-child(4){min-width:145px}
.stats-table th:nth-child(5),.stats-table td:nth-child(5){min-width:180px}
@media(max-width:700px){.stats-table{min-width:920px}.stats-table-wrap{border-bottom:2px solid #dce5df}}


/* TEST v9: table navigation arrows sit outside the clipped table frame */
.table-scroll-shell{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:stretch;gap:8px;width:100%;min-width:0}
.table-scroll-shell .stats-table-wrap{min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-gutter:stable;touch-action:pan-x;border:1px solid #dce5df;border-radius:8px}
.table-scroll-shell .scroll-arrow{align-self:center;display:flex;align-items:center;justify-content:center;width:36px;min-height:54px;padding:0;border-radius:9px;background:#176b45;color:#fff;font-size:30px;line-height:1;box-shadow:0 1px 3px #0002}
.table-scroll-shell .scroll-arrow:hover{background:#125638}
.table-scroll-shell .scroll-arrow:focus-visible{outline:3px solid #8bb9a1;outline-offset:2px}
@media(max-width:600px){.table-scroll-shell{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.table-scroll-shell .scroll-arrow{width:30px;min-height:48px;font-size:26px}.table-scroll-shell .stats-table-wrap{scrollbar-width:thin}}
@media print{.table-scroll-shell{display:block}.table-scroll-shell .scroll-arrow{display:none!important}.table-scroll-shell .stats-table-wrap{border:0;overflow:visible}}


/* TEST v13: floating arrows only on desktop/non-mobile operating systems. On phones/tablets, arrows stay beside the table in normal flow. */
html.desktop-nonmobile-os .table-scroll-shell .scroll-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:1000;width:42px;min-height:58px;border-radius:10px;box-shadow:0 2px 10px #0003;opacity:.94}
html.desktop-nonmobile-os .table-scroll-shell .scroll-left{left:8px}
html.desktop-nonmobile-os .table-scroll-shell .scroll-right{right:8px}
html.desktop-nonmobile-os .table-scroll-shell .scroll-arrow:hover{opacity:1}


/* TEST v11: maximise the usable page and table viewport width */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.page-main{width:100%;max-width:none;margin:0;padding:20px clamp(12px,2vw,32px) 36px}
.page-main>.card,.page-main>.intro{width:100%;max-width:none}
.page-main .inside{width:100%;min-width:0}
.page-main .table-scroll-shell{width:100%;max-width:100%;grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}
.page-main .stats-table-wrap{width:100%;max-width:100%;min-width:0}
.page-main .stats-table{width:max-content;min-width:100%;table-layout:auto}
@media(max-width:700px){.page-main{padding:12px 8px 28px}.page-main .table-scroll-shell{grid-template-columns:26px minmax(0,1fr) 26px;gap:4px}.page-main .table-scroll-shell .scroll-arrow{width:26px}}
@media print{.page-main{width:100%;max-width:none;padding:0}}

/* TEST v12: fix collapsed table viewport and keep every column in the scroll area */
.page-main .table-scroll-shell{display:grid!important;grid-template-columns:30px minmax(0,1fr) 30px!important;align-items:stretch;min-width:0!important;overflow:visible!important}
.page-main .table-scroll-shell>.stats-table-wrap{display:block!important;grid-column:2;min-width:0!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;position:relative!important;contain:inline-size;}
.page-main .table-scroll-shell>.stats-table-wrap>.stats-table{display:table!important;width:max-content!important;min-width:1050px!important;max-width:none!important;table-layout:auto!important;border-collapse:collapse!important}
.page-main .stats-table th,.page-main .stats-table td{width:auto;min-width:100px;white-space:nowrap}
.page-main .stats-table th:nth-child(1),.page-main .stats-table td:nth-child(1){min-width:125px}
.page-main .stats-table th:nth-child(2),.page-main .stats-table td:nth-child(2){min-width:110px}
.page-main .stats-table th:nth-child(3),.page-main .stats-table td:nth-child(3){min-width:310px}
.page-main .stats-table th:nth-child(4),.page-main .stats-table td:nth-child(4){min-width:145px}
.page-main .stats-table th:nth-child(5),.page-main .stats-table td:nth-child(5){min-width:180px}
html.desktop-nonmobile-os .page-main .table-scroll-shell>.scroll-arrow{position:fixed!important;top:50vh;z-index:1000}
@media(max-width:700px){.page-main .table-scroll-shell{grid-template-columns:26px minmax(0,1fr) 26px!important}.page-main .table-scroll-shell>.stats-table-wrap>.stats-table{min-width:920px!important}}
@media print{.page-main .table-scroll-shell{display:block!important}.page-main .table-scroll-shell>.stats-table-wrap{contain:none;overflow:visible!important;width:100%!important}.page-main .table-scroll-shell>.stats-table-wrap>.stats-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}}

@media print{.table-scroll-shell .scroll-arrow{display:none!important}}

/* TEST v14: keep player names visible while the player statistics table scrolls horizontally. */
body[data-page="players"] .stats-table th:first-child,
body[data-page="players"] .stats-table td:first-child{
  position:sticky!important;
  left:0!important;
  background:#fff!important;
  z-index:2;
  box-shadow:2px 0 3px rgba(20,35,30,.10);
}
body[data-page="players"] .stats-table thead th:first-child{
  background:#f6f9f7!important;
  z-index:4;
}
@media print{
  body[data-page="players"] .stats-table th:first-child,
  body[data-page="players"] .stats-table td:first-child{position:static!important;box-shadow:none!important}
}


/* TEST v16: hard-disable viewport-floating arrows on phones/tablets and touch-first devices, even if their browser reports a desktop user agent. */
@media (pointer: coarse), (max-width: 900px){
  html.desktop-nonmobile-os .table-scroll-shell .scroll-arrow,
  html.desktop-nonmobile-os .page-main .table-scroll-shell>.scroll-arrow{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;z-index:auto!important;align-self:center!important}
}


/* TEST v17: compact stats/standings columns and remove arrow controls on mobile/tablet devices. */
body[data-page="players"] .stats-table th,
body[data-page="players"] .stats-table td,
body[data-page="standings"] .stats-table th,
body[data-page="standings"] .stats-table td{padding:5px 4px;font-size:.82rem;letter-spacing:-.01em}
body[data-page="players"] .stats-table th,
body[data-page="standings"] .stats-table th{font-size:.76rem}
body[data-page="players"] .stats-table th:first-child,
body[data-page="players"] .stats-table td:first-child{min-width:115px}
@media (pointer: coarse), (max-width: 900px){
  .table-scroll-shell .scroll-arrow,
  .page-main .table-scroll-shell>.scroll-arrow{display:none!important}
  .table-scroll-shell{display:block!important}
  .table-scroll-shell>.stats-table-wrap{width:100%!important;max-width:100%!important}
}