:root{--team-accent: #005DAA; --team-accent-ink: #ffffff;}

:root{--paper:#f3ecd7;--ink:#161616;--red:#d93a2a;--blue:#2a4cd9;--yellow:#ffcf2a;--dim:#706754}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Special Elite',monospace;font-size:16px;line-height:1.45}
body{background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='2' seed='5'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none;cursor:pointer}
.nav{background:var(--ink);color:var(--paper);padding:10px 0;overflow:hidden;position:sticky;top:0;z-index:50;border-bottom:4px double var(--paper)}
.nav-inner{max-width:1000px;margin:0 auto;display:flex;gap:6px;align-items:stretch;padding:0 20px;overflow:hidden;justify-content:stretch}
.mast{font-family:'Archivo Black';font-size:20px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;background:var(--red);color:var(--paper);padding:4px 10px;transform:rotate(-1deg)}
.navlink{flex:1;text-align:center;padding:7px 8px;font-family:'Bungee';font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--paper);cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center}
.navlink:nth-child(2n){background:var(--yellow);color:var(--ink);transform:rotate(-1deg)}
.navlink:nth-child(3n){background:var(--paper);color:var(--ink);transform:rotate(1deg)}
.navlink.active{background:var(--red);color:var(--paper);transform:rotate(-2deg) scale(1.05)}
.wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px}
.page{display:none}.page.active{display:block}
h1.title{font-family:'Archivo Black';font-size:clamp(56px,10vw,128px);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px;transform:rotate(-1deg);display:inline-block;background:var(--ink);color:var(--yellow);padding:4px 14px}
.sub{font-family:'Cutive Mono';font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:28px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:8px 0}
.box{border:2px solid var(--ink);padding:18px;background:var(--paper);margin-bottom:16px;position:relative}
.box.tilt{transform:rotate(-.5deg)}
.box.tilt2{transform:rotate(.4deg)}
.box h3{font-family:'Bungee';font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:inline-block;background:var(--ink);color:var(--yellow);padding:3px 8px;transform:rotate(-1deg)}

.sticker{display:inline-block;background:var(--red);color:var(--paper);font-family:'Bungee';font-size:12px;padding:3px 8px;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-3deg)}
.sticker.y{background:var(--yellow);color:var(--ink)}
.sticker.b{background:var(--blue);color:var(--paper)}

/* Home layout - zine collage */
.home-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.home-grid>*{grid-column:span 12}
.h-hero{grid-column:span 12;background:var(--red);color:var(--paper);padding:24px;border:3px solid var(--ink);position:relative}
.h-hero h2{font-family:'Archivo Black';font-size:40px;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.h-hero .meta{font-family:'Cutive Mono';font-size:13px;margin-top:10px;letter-spacing:.1em;text-transform:uppercase}
.h-next{grid-column:span 6;background:var(--ink);color:var(--paper);padding:22px;transform:rotate(-.3deg)}
.h-last{grid-column:span 6;background:var(--yellow);color:var(--ink);padding:22px;transform:rotate(.3deg);border:2px solid var(--ink)}
.h-table{grid-column:span 5}
.h-sc{grid-column:span 4}
.h-inj{grid-column:span 3}
.h-nws{grid-column:span 7}
.h-up{grid-column:span 5}
.h-hl{grid-column:span 8;background:var(--blue);color:var(--paper);padding:22px;transform:rotate(-.5deg)}
.h-potw{grid-column:span 4;background:var(--ink);color:var(--yellow);padding:22px;transform:rotate(1deg)}
@media(max-width:900px){.home-grid>*{grid-column:span 12!important}}

.big-num{font-family:'Archivo Black';font-size:72px;line-height:.9}
.mini-num{font-family:'Archivo Black';font-size:30px;line-height:1}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.cd-cell{background:var(--paper);color:var(--ink);border:2px solid var(--paper);padding:10px 4px;text-align:center}
.cd-cell .v{font-family:'Archivo Black';font-size:28px;line-height:1}
.cd-cell .l{font-family:'Cutive Mono';font-size:10px;letter-spacing:.15em;text-transform:uppercase}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-family:'Courier Prime',monospace}
.tbl th{background:var(--ink);color:var(--paper);text-align:left;padding:5px 8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:400}
.tbl td{border-bottom:1px dashed var(--ink);padding:6px 8px;font-size:13px}
.tbl tr.self td{background:var(--yellow);font-weight:700}
.tbl .num{text-align:right;font-weight:700}

/* News */
.news-item{padding:14px 0;border-bottom:1px dashed var(--ink);cursor:pointer}
.news-item .cat{display:inline-block;background:var(--red);color:var(--paper);font-family:'Bungee';font-size:10px;letter-spacing:.1em;padding:2px 6px;text-transform:uppercase;transform:rotate(-1deg);margin-bottom:6px}
.news-item:nth-child(3n) .cat{background:var(--blue)}
.news-item:nth-child(4n) .cat{background:var(--yellow);color:var(--ink)}
.news-item h4{font-family:'Archivo Black';font-size:20px;line-height:1.1;text-transform:uppercase;margin-bottom:6px}
.news-item .ex{font-size:13px;line-height:1.5}
.news-item .by{font-family:'Cutive Mono';font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:.1em}

/* Squad */
.sq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sq-card{background:var(--paper);border:3px solid var(--ink);padding:14px;position:relative;cursor:pointer;transition:transform .1s}
.sq-card:nth-child(3n){background:var(--yellow)}
.sq-card:nth-child(5n){background:var(--ink);color:var(--yellow)}
.sq-card:nth-child(7n){background:var(--red);color:var(--paper)}
.sq-card:hover{transform:rotate(-1deg) scale(1.03)}
.sq-card .num{font-family:'Archivo Black';font-size:52px;line-height:1}
.sq-card .nm{font-family:'Bungee';font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.sq-card .stats{font-family:'Courier Prime',monospace;font-size:11px;margin-top:8px}
.sq-card .pos{position:absolute;top:10px;right:10px;font-family:'Cutive Mono';font-size:10px;letter-spacing:.15em;background:var(--paper);color:var(--ink);padding:1px 5px;border:1px solid var(--ink)}
.pos-group h2{font-family:'Bungee';font-size:18px;letter-spacing:.1em;text-transform:uppercase;margin:20px 0 14px;display:inline-block;background:var(--ink);color:var(--yellow);padding:4px 12px;transform:rotate(-1deg)}

/* Player */
.pl-hero{background:var(--red);color:var(--paper);padding:30px;border:3px solid var(--ink);margin-bottom:20px;position:relative}
.pl-hero .bn{position:absolute;right:15px;top:-20px;font-family:'Archivo Black';font-size:260px;line-height:1;color:var(--yellow);opacity:.15}
.pl-hero>*{position:relative;z-index:1}
.pl-name{font-family:'Archivo Black';font-size:clamp(40px,8vw,88px);line-height:.9;text-transform:uppercase;letter-spacing:-.02em}
.pl-name .f{display:block;font-family:'Special Elite';font-size:26px;font-weight:400}
.pl-meta{font-family:'Cutive Mono';font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-top:16px;display:flex;gap:20px;flex-wrap:wrap}
.pl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.pl-stat{background:var(--paper);color:var(--ink);padding:14px;text-align:center;border:2px solid var(--ink)}
.pl-stat .v{font-family:'Archivo Black';font-size:36px;line-height:1}
.pl-stat .l{font-family:'Cutive Mono';font-size:10px;letter-spacing:.15em;text-transform:uppercase;margin-top:4px}
.back{display:inline-block;background:var(--ink);color:var(--yellow);padding:6px 12px;font-family:'Bungee';font-size:12px;letter-spacing:.1em;margin-bottom:18px;cursor:pointer;transform:rotate(-1deg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.two{grid-template-columns:1fr}}

/* Fixtures */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{background:var(--paper);color:var(--ink);border:3px solid var(--ink);font-family:'Bungee';font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;cursor:pointer}
.tabs button.active{background:var(--ink);color:var(--yellow);transform:rotate(-1deg)}
.tab-panel{display:none}.tab-panel.active{display:block}
.fx-row{display:grid;grid-template-columns:110px 60px 1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--ink);font-family:'Courier Prime',monospace}
.fx-row .d{font-size:12px;text-transform:uppercase}
.fx-row .opp{font-family:'Bungee';font-size:16px;letter-spacing:.03em;text-transform:uppercase}
.fx-row .sc{background:var(--ink);color:var(--yellow);font-family:'Archivo Black';padding:3px 10px;font-size:16px}
.fx-row .sc.l{background:var(--red);color:var(--paper)}
.fx-row .sc.d{background:var(--blue);color:var(--paper)}
.chip{display:inline-block;background:var(--ink);color:var(--paper);font-family:'Bungee';font-size:10px;letter-spacing:.1em;padding:2px 7px;text-transform:uppercase}
.chip.r{background:var(--red)}.chip.y{background:var(--yellow);color:var(--ink)}.chip.b{background:var(--blue)}

/* Injury */
.inj-row{display:grid;grid-template-columns:50px 1fr 110px 130px;gap:12px;padding:12px 0;border-bottom:1px dashed var(--ink);align-items:center}
.inj-row h4{font-family:'Bungee';font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.inj-row .is{font-size:12px;color:var(--dim);margin-top:2px}

/* Highlights */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.hl-card{background:var(--paper);border:3px solid var(--ink);cursor:pointer;transition:transform .1s;overflow:hidden}
.hl-card:nth-child(3n){transform:rotate(-.5deg)}
.hl-card:nth-child(4n){transform:rotate(.7deg)}
.hl-card:hover{transform:rotate(0) scale(1.02)}
.hl-thumb{aspect-ratio:16/9;background:var(--ink);display:grid;place-items:center;position:relative}
.hl-thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,207,42,.06) 6px 12px)}
.hl-play{width:48px;height:48px;background:var(--yellow);border-radius:50%;display:grid;place-items:center;z-index:1}
.hl-play::before{content:"";width:0;height:0;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.hl-dur{position:absolute;bottom:6px;right:6px;background:var(--paper);color:var(--ink);font-family:'Courier Prime';font-size:11px;padding:2px 5px;z-index:1;font-weight:700}
.hl-tag{position:absolute;top:8px;left:8px;z-index:1}
.hl-meta{padding:12px}
.hl-meta h4{font-family:'Archivo Black';font-size:15px;line-height:1.2;text-transform:uppercase}
.hl-meta .mt{font-family:'Cutive Mono';font-size:10px;margin-top:6px;letter-spacing:.1em;display:flex;justify-content:space-between}

/* v10-fanzine multi-page additions */
.faq-it{padding:10px 0;border-bottom:1px dashed var(--ink)}
.faq-it summary{font-family:'Bungee';font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.article-body p{margin-bottom:14px;font-family:'Courier Prime',monospace;font-size:14px;line-height:1.7}
.avatar-init{width:72px;height:72px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-family:'Archivo Black';font-size:26px}
.avatar-init.lg{width:120px;height:120px;font-size:44px;border-color:var(--paper)}
.avatar-img{width:72px;height:72px;border-radius:50%;border:3px solid var(--ink);object-fit:cover;background:var(--paper)}
.avatar-img.lg{width:120px;height:120px;border-color:var(--paper)}
.crest{width:22px;height:22px;object-fit:contain;background:var(--paper);border-radius:50%;padding:2px}
/* News titles: avoid em-dash orphaning on narrow width + softer divider */
.news-item{border-bottom:1px dashed rgba(0,0,0,.15) !important}
.news-item h4{overflow-wrap:break-word;text-wrap:pretty}
/* Page title smaller on mobile */
@media(max-width:720px){
  h1.title{font-size:clamp(36px,8vw,56px) !important;padding:4px 10px;margin-bottom:10px}
  .sub{font-size:12px;padding:6px 0;margin-bottom:16px}
}
@media(max-width:520px){
  h1.title{font-size:clamp(30px,9vw,44px) !important}
}
/* Match details: remove default summary marker (Chrome/Safari/Firefox) */
details.match-detail > summary{list-style:none;padding:0 !important}
details.match-detail > summary::-webkit-details-marker{display:none}
details.match-detail > summary::marker{content:""}
details.match-detail > summary .fx-row{padding:12px 0 !important;margin:0}
/* Scores aligned to same right position regardless of preceding content */
details.match-detail .fx-row .sc{justify-self:end;min-width:56px;text-align:center}
/* Match details: stack team columns vertically on narrow */
@media(max-width:520px){
  .md-body > div:first-child{grid-template-columns:minmax(0,1fr) !important}
}
.md-body .goal-card{min-width:0}
/* Highlight card meta text is cream on cream inside coloured panels — force ink */
.hl-card, .hl-meta{color:var(--ink)}
.hl-meta{padding:10px 12px 12px}
.hl-meta h4{font-size:14px}
/* Home highlight hero shouldn't have empty bottom: shrink .hl-meta padding */
.h-hl .hl-card{margin:0}
/* Hamburger (mobile only) */
.hamb{display:none;width:40px;height:40px;background:var(--red);border:2px solid var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;margin-left:auto;flex:0 0 auto;transform:rotate(-1deg)}
.hamb span{display:block;width:22px;height:3px;background:var(--paper)}
@media(max-width:720px){
  .nav-inner{justify-content:flex-start;padding:0 12px;gap:8px;overflow:visible}
  .hamb{display:flex}
  .mast{flex:1 1 auto;font-size:16px}
  .nav-inner .navlink{display:none !important}
  .nav-drawer{position:fixed;top:54px;left:0;right:0;background:var(--ink);border-bottom:4px double var(--paper);padding:16px 20px;display:none;flex-direction:column;gap:8px;z-index:49;max-height:calc(100vh - 54px);overflow-y:auto}
  .nav-drawer.open{display:flex}
  .nav-drawer a{display:block;padding:12px 14px;font-family:'Bungee';font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);border:2px solid var(--paper);text-align:left;background:transparent}
  .nav-drawer a.active{background:var(--red);color:var(--paper);transform:rotate(-1deg)}
  .nav-drawer a:nth-child(2n){background:var(--yellow);color:var(--ink);transform:rotate(-.5deg)}
  .nav-drawer a:nth-child(3n){background:transparent;color:var(--paper);transform:rotate(.5deg)}
  .hamb.open{background:var(--ink);border-color:var(--yellow)}
  .hamb.open span{background:var(--yellow)}
  .hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamb.open span:nth-child(2){opacity:0}
  .hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(min-width:721px){.nav-drawer{display:none !important}}
/* Fixture row responsive: stack at narrow viewports */
.fx-row .opp{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
  .fx-row{grid-template-columns:90px 44px 1fr auto;gap:8px;padding:10px 0}
  .fx-row .opp{font-size:14px}
  .fx-row > .chip:last-child{display:none} /* hide comp badge on narrow */
}
@media(max-width:520px){
  .fx-row{grid-template-columns:1fr auto;gap:6px;padding:8px 0}
  .fx-row .d,.fx-row .opp{grid-column:1/-1}
  .fx-row > .chip{justify-self:start}
  .fx-row > .sc{justify-self:end;grid-row:1}
}
/* Full standings table — show all columns on desktop; drop on narrow to fit-without-scroll */
.tbl{table-layout:auto;width:100%}
.tbl td, .tbl th{padding:5px 6px}
.tbl .num{text-align:right;font-weight:700}
@media(max-width:780px){
  /* Hide GF (7) GA (8) GD (9) and keep Pts (10) + Form (11) */
  .tbl th:nth-child(7), .tbl td:nth-child(7),
  .tbl th:nth-child(8), .tbl td:nth-child(8),
  .tbl th:nth-child(9), .tbl td:nth-child(9){display:none}
  .tbl td,.tbl th{padding:4px 4px;font-size:11.5px}
  .tbl .num{font-size:12.5px}
}
@media(max-width:520px){
  /* Even more aggressive: hide W (4) D (5) L (6); keep # Club P Pts Form */
  .tbl th:nth-child(4), .tbl td:nth-child(4),
  .tbl th:nth-child(5), .tbl td:nth-child(5),
  .tbl th:nth-child(6), .tbl td:nth-child(6){display:none}
  .tbl td,.tbl th{padding:4px 3px;font-size:11px}
}
@media(max-width:400px){
  /* Tightest: hide P (3) and Form (11); just # Club Pts */
  .tbl th:nth-child(3), .tbl td:nth-child(3),
  .tbl th:nth-child(11), .tbl td:nth-child(11){display:none}
}
/* Tabs: wrap better on narrow */
.tabs{flex-wrap:wrap}
.tabs button{flex:1 0 auto;min-width:100px}

/* ---- Team-accent tinting (per-team --team-accent CSS var) ---- */
/* Home hero "TOP STORY" sticker */
.h-hero .sticker.y{background:var(--team-accent);color:var(--team-accent-ink)}
/* Home h-hero panel bg */
.h-hero{background:var(--team-accent);color:var(--team-accent-ink)}
.h-hero h2,.h-hero .meta{color:var(--team-accent-ink)}
/* Even-numbered news card category pill */
.news-item:nth-child(even) .cat{background:var(--team-accent);color:var(--team-accent-ink);padding:2px 6px;display:inline-block}
/* Active nav link */
.nav .navlink.active{background:var(--team-accent);color:var(--team-accent-ink);border-color:var(--team-accent)}
/* Article detail hero bg (v10 uses inline red box — we override via .accent-hero class) */
.accent-hero{background:var(--team-accent) !important;color:var(--team-accent-ink) !important;border-color:var(--ink) !important}
.accent-hero .sub,.accent-hero h1{color:var(--team-accent-ink) !important}
/* Player profile hero bg + sticker */
.pl-hero{background:var(--team-accent) !important;color:var(--team-accent-ink) !important}
.pl-hero .sticker.y{background:var(--team-accent-ink);color:var(--team-accent)}
/* Top scorer widget (new .h-ts grid cell used on home) */
.h-ts{background:var(--paper);border:3px solid var(--ink);padding:14px;position:relative}
.h-ts .ts-avatar{border-color:var(--team-accent) !important}
.h-ts .ts-name{color:var(--ink);font-family:'Archivo Black';font-size:20px;text-transform:uppercase}
.h-ts .ts-num{background:var(--team-accent);color:var(--team-accent-ink);font-family:'Archivo Black';font-size:12px;padding:2px 8px;display:inline-block}
/* Reading-time chip */
.read-chip{display:inline-block;background:var(--team-accent);color:var(--team-accent-ink);padding:2px 8px;margin-left:8px;font-family:'Bungee';font-size:11px;letter-spacing:.06em;text-transform:uppercase}