/* HTFC fixtures page and the home page "Next match" strip. Only styles fx-/nm- classes. */

/* ---------- home strip ---------- */
.next-match{padding:6px 0 10px}
.next-match[hidden]{display:none}
.nm-in{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;padding:18px 24px;background:var(--navy);color:#fff;border-radius:22px;border-left:5px solid var(--gold);box-shadow:0 24px 50px -32px rgba(8,18,43,.7)}
.nm-tag{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.nm-main{display:flex;flex-direction:column;flex:1;min-width:220px}
.nm-main b{font:900 clamp(22px,4vw,30px)/1.05 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.nm-main span{color:#b9c6e4;font-size:15px}
.nm-count{font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;background:rgba(245,183,0,.16);color:var(--gold);white-space:nowrap}
.nm-count.res-W{background:rgba(46,204,113,.18);color:#7CFFB2}.nm-count.res-L{background:rgba(224,36,60,.2);color:#ff8d9b}.nm-count.res-D{background:rgba(255,255,255,.12);color:#dbe4f7}
.nm-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:2px solid var(--gold)}
.nm-link:hover{color:var(--gold)}

/* ---------- page ---------- */
.fx-sec{padding-top:40px}
.fx-sec h2{margin-bottom:22px}
.fx-next{background:linear-gradient(150deg,var(--navy-2),var(--navy) 70%);color:#fff;border-radius:28px;padding:clamp(22px,4vw,40px);box-shadow:0 30px 60px -35px rgba(8,18,43,.7);position:relative;overflow:hidden}
.fx-next::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(rgba(245,183,0,.2),transparent 70%);pointer-events:none}
.fx-next-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.fx-count{font-weight:800;font-size:14px;padding:7px 14px;border-radius:999px;background:var(--gold);color:var(--navy)}
.fx-chip{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(42,109,244,.14);color:var(--blue);margin:2px 6px 2px 0}
.fx-next .fx-chip{background:rgba(255,255,255,.12);color:#dbe4f7}
.fx-chip.warn{background:rgba(224,36,60,.16);color:var(--red)}
.fx-next .fx-chip.warn{background:rgba(224,36,60,.3);color:#ffd0d6}
.fx-vs{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font:900 clamp(38px,8vw,76px)/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase}
.fx-vs .us{display:inline-flex;align-items:center;gap:12px;font-size:.78em;line-height:.95;min-width:0}
.fx-vs .us img{width:clamp(38px,6vw,54px);height:auto}
.fx-vs .v{color:var(--gold);font-size:.6em}
.fx-vs .them{color:#cdd8f3;font-size:.72em;overflow-wrap:break-word;min-width:0;max-width:100%}
.fx-when{margin-top:16px;font-size:18px;font-weight:700}
.fx-where{color:#b9c6e4;margin-top:4px}
.fx-notes{margin-top:10px;color:#dbe4f7;font-size:15px}
.fx-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
.fx-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fx-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 14px 30px -24px rgba(8,18,43,.4)}
.fx-date{flex:none;width:56px;text-align:center;border-radius:12px;background:var(--ice);padding:6px 0}
.fx-date b{display:block;font:900 26px/1 "Big Shoulders Display",Impact,sans-serif;color:var(--navy)}
.fx-date span{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.fx-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fx-mid b{font:800 20px/1.15 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.fx-mid > span{color:var(--muted);font-size:14px}
.fx-mid a{color:var(--blue)}
.fx-scorers{color:var(--ink)!important;font-weight:600}
.fx-chips:empty{display:none}
.fx-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font:900 22px "Big Shoulders Display",Impact,sans-serif;color:#fff}
.fx-badge.W{background:#1f9d57}.fx-badge.D{background:#8a94ad}.fx-badge.L{background:var(--red)}.fx-badge.p,.fx-badge.x{background:var(--ice);color:var(--muted)}
.fx-ics,.fx-share{flex:none;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--navy);background:none;font:700 13px "Archivo",sans-serif;letter-spacing:.04em;cursor:pointer;color:var(--navy)}
.fx-ics:hover,.fx-share:hover{background:var(--navy);color:#fff}
.fx-share:disabled{opacity:.5}
.fx-empty{color:var(--muted);padding:6px 0}
.fx-next .fx-empty,.fx-next-wrap .fx-empty{font-size:17px}
.fx-seasons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fx-season{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--navy);background:none;font:700 14px "Archivo",sans-serif;cursor:pointer;color:var(--navy)}
.fx-season.on{background:var(--navy);color:#fff}
.fx-stats{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:860px){.fx-stats{grid-template-columns:1.1fr 1fr}}
.fx-card{background:#fff;border-radius:22px;padding:22px;box-shadow:0 14px 30px -24px rgba(8,18,43,.4)}
.fx-card h3{font:900 28px/1 "Big Shoulders Display",Impact,sans-serif;text-transform:uppercase;margin-bottom:14px}
.fx-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fx-summary div{background:var(--ice);border-radius:14px;padding:12px 8px;text-align:center}
.fx-summary b{display:block;font:900 34px/1 "Big Shoulders Display",Impact,sans-serif;color:var(--navy)}
.fx-summary span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fx-top{list-style:none;margin:0;padding:0}
.fx-top li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #e7ebf3}
.fx-top li:last-child{border-bottom:0}
.fx-top .r{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ice);font-weight:800;font-size:13px;color:var(--navy)}
.fx-top li:first-child .r{background:var(--gold)}
.fx-top .n{flex:1;font-weight:700}
.fx-top .g{font:900 24px "Big Shoulders Display",Impact,sans-serif;color:var(--navy)}
.fx-top .g small{font:600 12px "Archivo",sans-serif;color:var(--muted)}
.fx-updated{font-size:13px;color:var(--muted);margin-top:14px}
#fxPage :focus-visible,.next-match :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.next-match :focus-visible{outline-color:var(--gold)}
@media (max-width:520px){
  .fx-row{flex-wrap:wrap}
  .fx-ics,.fx-share{margin-left:auto}
  .fx-summary b{font-size:28px}
}
.fx-scorers.them{font-weight:500!important;color:var(--muted,#5b6480)!important}