@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jbmono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
/* FTL-Q design system: Philippine flag palette, Archivo (display) + Inter (text), self-hosted. */

:root {
  /* legacy names are kept (used by staff.js inline styles) but now map to the flag palette */
  --purple: #6700A3; --purple-d: #050C38; --purple-l: #F6E4F6;
  --green: #12a150; --green-d: #0b6e36; --green-l: #e2f6ea;
  --gold: #FF5A57; --gold-d: #C2403F;
  --red: #E02F75; --ink: #160C3D; --muted: #715C86; --line: #EADAEA;
  --bg: #FBF1FA; --card: #fff; --grey: #F6E6F5;
  --navy: #050C38; --navy-2: #1B2062; --blue: #6700A3; --yellow: #FF5A57;
  --radius: 22px; --shadow: 0 1px 2px rgba(5,12,56, .05), 0 10px 30px -12px rgba(5,12,56, .18);
  --display: "Bricolage Grotesque", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
a { color: var(--link, var(--blue)); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0 0 .5em; letter-spacing: -.035em; font-weight: 800; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.05em; }
h2 { font-size: 1.9rem; letter-spacing: -.045em; } h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .right { text-align: right; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 99; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--blue); }

/* ---------- header ---------- */
.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); }
.site-header::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--blue) 0 40%, var(--red) 40% 70%, var(--yellow) 70%); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 50px; width: 50px; object-fit: contain; }
.brand .bt { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: 1.35rem; letter-spacing: .01em; line-height: 1; }
.brand small { display: block; font-family: var(--font); font-style: normal; font-weight: 600; color: var(--muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; background: var(--grey); padding: 5px; border-radius: 999px; }
.nav a { color: var(--ink); padding: 8px 15px; font-weight: 600; font-size: .88rem; border-radius: 999px; transition: background .15s; }
.nav a:hover { text-decoration: none; background: #fff; }
.nav a.on { background: var(--navy); color: #fff; }
.nav a.staff { background: var(--yellow); color: #050C38; font-weight: 700; margin-left: 4px; }
.nav a.staff:hover { background: #FF7C79; }
.menu-btn { display: none; margin-left: auto; background: var(--grey); border: 0; border-radius: 999px; padding: 10px 16px; font-size: 1rem; cursor: pointer; }
@media (max-width: 1020px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); background: #fff; flex-direction: column; align-items: stretch; padding: 10px; border-radius: 24px; box-shadow: 0 20px 50px rgba(5,12,56, .25); border: 1px solid var(--line); }
  .nav.open { display: flex; } .nav a { padding: 13px 16px; } .nav a.staff { margin: 6px 0 0; text-align: center; }
}
#season-banner .arch { background: var(--yellow); color: #050C38; text-align: center; padding: 9px 16px; font-weight: 700; font-size: .9rem; }
#season-banner a { color: #050C38; text-decoration: underline; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(900px 420px at 15% 0%, #9B2BD1 0%, transparent 60%), linear-gradient(135deg, #050C38 0%, var(--navy-2) 100%); }
.hero .sun { position: absolute; width: 560px; height: 560px; left: -190px; bottom: -260px; opacity: .14; z-index: -1; animation: spin 160s linear infinite; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, .92fr) 150px minmax(0, 1.08fr); align-items: stretch; min-height: 600px; padding: 0 0 0 20px; max-width: 1400px; }
.hero .copy { padding: 70px 40px 70px 0; align-self: center; position: relative; z-index: 2; }
.hero .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E4D6FA; }
.hero .kicker i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(252, 209, 22, .25); animation: pulse 1.6s infinite; }
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: .96; margin: 20px 0 20px; font-weight: 800; letter-spacing: -.055em; }
.hero h1 em { display: inline-block; font-style: normal; color: var(--navy); background: var(--yellow); padding: 0 .14em .04em; border-radius: .12em; margin-top: .08em; transform: rotate(-1.2deg); box-shadow: 0 10px 30px -10px rgba(252, 209, 22, .6); }
.hero .sub { font-size: 1.15rem; color: #E4D6FA; max-width: 36ch; margin: 0 0 6px; line-height: 1.6; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 28px; }
.hero .meta span { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 15px; font-size: .86rem; color: #F1E8FE; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .wave { position: relative; z-index: 3; background: url("/img/ph-wave.svg") center / cover no-repeat; box-shadow: -14px 0 40px rgba(0, 0, 0, .25), 14px 0 40px rgba(0, 0, 0, .25); }
.hero .photo { position: relative; margin-right: 0; min-height: 440px; }
.hero .photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; }
.hero .photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5,12,56, .55), transparent 40%); }
.hero .badge-float { position: absolute; z-index: 3; right: 22px; bottom: 22px; background: #fff; color: var(--ink); border-radius: 20px; padding: 12px 18px 12px 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); display: flex; align-items: center; gap: 12px; }
.hero .badge-float img { height: 48px; width: auto; }
.hero .badge-float b { font-family: var(--display); font-size: 1.8rem; color: var(--blue); line-height: 1; letter-spacing: -.04em; } .hero .badge-float span { font-family: var(--mono); font-size: .66rem; color: var(--muted); line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1000px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); } .hero .copy { padding-right: 24px; } }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding: 0; } .hero .photo { height: 300px; min-height: 0; order: -1; }
  .hero .wave { order: 0; height: 34px; background-size: 260% auto; background-position: 50% 34%; box-shadow: none; } .hero .copy { padding: 30px 20px 44px; } .hero .sun { width: 380px; height: 380px; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- buttons & chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--blue); background: var(--blue); color: #fff; border-radius: 999px; padding: 11px 24px; font-weight: 700; font-size: .92rem; cursor: pointer; font-family: var(--font); transition: transform .12s, background .15s; }
.btn:hover { background: var(--navy); border-color: var(--navy); text-decoration: none; color: #fff; transform: translateY(-1px); }
.btn.light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .btn.light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn.gold { background: var(--yellow); border-color: var(--yellow); color: #050C38; } .btn.gold:hover { background: #FF7C79; border-color: #FF7C79; color: #050C38; }
.btn.ghost { background: #fff; color: var(--blue); border-color: var(--line); } .btn.ghost:hover { background: var(--purple-l); color: var(--navy); border-color: var(--purple-l); }
.btn.danger { background: #fff; border-color: #f3c2c8; color: var(--red); } .btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.small { padding: 5px 13px; font-size: .8rem; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; background: var(--grey); color: #5B3D8C; text-transform: uppercase; }
.chip.live { background: var(--red); color: #fff; } .chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.chip.final { background: var(--green); color: #fff; } .chip.sched { background: var(--purple-l); color: var(--blue); }
.chip.gold { background: var(--yellow); color: #050C38; } .chip.err { background: #fde6e9; color: var(--red); } .chip.warn { background: #FFE1E4; color: #9A3A38; } .chip.ok { background: var(--green-l); color: var(--green-d); }
@keyframes pulse { 50% { opacity: .45; } }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.tabs button, .tabs a { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 600; cursor: pointer; font-family: var(--font); font-size: .88rem; color: var(--ink); }
.tabs .on { background: var(--navy); color: #fff; border-color: var(--navy); } .tabs a:hover { text-decoration: none; }

/* ---------- sections ---------- */
.section { padding-block: 44px; } .section.tight { padding-block: 24px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.section-title h2 { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--navy); }
.section-title h2::before { content: ""; width: 8px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, var(--yellow) 0 50%, var(--red) 50%); transform: skewX(-12deg); }
.section-title a { font-weight: 700; font-size: .88rem; }
.page-head { padding: 34px 0 10px; } .page-head h1 { color: var(--navy); margin: 0 0 6px; } .page-head p { margin: 0; }
.grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.card.pad { padding: 20px; }
.empty { background: #fff; border: 2px dashed #DCC3E0; border-radius: var(--radius); padding: 30px; text-align: center; color: var(--muted); }

/* home dashboard panels */
.panels { display: grid; grid-template-columns: 1.15fr 1.1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .panels { grid-template-columns: 1fr 1fr; } .panels > :last-child { grid-column: 1 / -1; } }
@media (max-width: 720px) { .panels { grid-template-columns: 1fr; } }
.panel { padding: 22px; } .panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; color: var(--navy); margin-bottom: 16px; }
.panel h3 .ico { width: 34px; height: 34px; border-radius: 12px; background: var(--navy); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-style: normal; }
.panel .more { display: block; margin-top: 14px; font-weight: 700; font-size: .86rem; }
.mini-match { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; color: var(--ink); background: #fff; transition: border-color .15s, transform .15s; }
.mini-match:hover { border-color: var(--blue); text-decoration: none; transform: translateY(-2px); }
.mini-match .tm { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; min-width: 0; } .mini-match .tm + .tm { margin-top: 6px; } .mini-match .tm span.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-match .tm .sc { margin-left: auto; font-family: var(--display); font-size: 1.15rem; font-weight: 900; color: var(--blue); } .mini-match .tm.w { color: var(--green-d); }
.mini-match .when { text-align: right; font-size: .78rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 14px; line-height: 1.5; } .mini-match .when b { color: var(--ink); display: block; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.kpi { padding: 20px 22px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--line); } .kpi:last-child { border-right: 0; }
.kpi .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--purple-l); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.kpi b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--navy); } .kpi span { font-size: .78rem; color: var(--muted); }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi:nth-child(2) { border-right: 0; } .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* match cards */
.mcard { display: flex; flex-direction: column; color: var(--ink); transition: transform .18s, box-shadow .18s; }
.mcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -14px rgba(5,12,56, .35); text-decoration: none; }
.mcard .top { background: linear-gradient(180deg, #fff, #FBF1FA); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 22px 12px 16px; min-height: 108px; position: relative; }
.mcard .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blue) 0 40%, var(--red) 40% 70%, var(--yellow) 70%); opacity: .9; }
.mcard .score { font-family: var(--display); font-size: 2.2rem; font-weight: 900; color: var(--navy); letter-spacing: .02em; min-width: 84px; text-align: center; line-height: 1; }
.mcard .score small { display: block; font-family: var(--font); font-style: normal; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.mcard .vs { font-family: var(--display); font-weight: 900; color: #B5A3C9; font-size: 1.1rem; }
.mcard .bot { background: #fff; padding: 14px 18px 16px; flex: 1; }
.mcard .teams { font-weight: 800; margin-bottom: 3px; font-size: 1.02rem; } .mcard .teams .w { color: var(--green-d); }
.mcard .sub { color: var(--muted); font-size: .84rem; } .mcard .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .82rem; }
.mcard .go { color: var(--blue); font-weight: 700; }
.badge { width: 56px; height: 56px; border-radius: 34%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.1rem; flex: none; background-image: linear-gradient(145deg, rgba(255, 255, 255, .28), transparent 55%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 6px 14px -4px rgba(5,12,56, .4); }
.badge.sm { width: 32px; height: 32px; font-size: .72rem; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); } .badge.empty-b { background: #E3CFE6 !important; box-shadow: none; }

/* tables */
.tbl-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #FAF0F9; color: #5B3D8C; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; font-weight: 700; }
td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: #f7f9ff; }
tr.top1 td:first-child { box-shadow: inset 5px 0 var(--yellow); } tr.cut td { border-bottom: 2px dashed var(--blue); }
.st-name { font-weight: 700; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); }
.rank-cell { font-family: var(--display); font-weight: 900; color: var(--navy); font-size: 1.1rem; }
table.full th.grp { background: var(--navy); color: #fff; text-align: center; border-left: 2px solid #fff; }
table.full td.sep, table.full th.sep { border-left: 2px solid var(--line); }
td.bye { background: var(--green-l) !important; text-align: center; color: var(--green-d); font-weight: 700; letter-spacing: .1em; }
td.tot { background: #FFEDEF !important; font-weight: 800; }

/* scoresheet (view-only, mirrors the printed sheet) */
.sheet { background: #fff; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 1000px; margin: 0 auto; overflow: hidden; }
.sheet-head { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; padding: 16px 22px; position: relative; }
.sheet-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0 40%, var(--red) 40% 70%, var(--yellow) 70%); }
.sheet-head img { height: 64px; background: #fff; border-radius: 50%; padding: 2px; } .sheet-head h2 { color: #fff; margin: 0; font-size: 1.15rem; }
.sheet-head p { margin: 3px 0 0; font-size: .88rem; color: #D8C8F0; }
.sheet-sub { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 22px; border-bottom: 1px solid var(--line); font-weight: 600; align-items: center; }
.sheet-bar { background: var(--yellow); color: #050C38; text-align: center; letter-spacing: .5em; font-family: var(--display); font-weight: 900; padding: 6px; font-size: .85rem; }
.sheet-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px; gap: 12px; text-align: center; }
.sheet-teams .tn { font-family: var(--display); font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; } .sheet-teams .tn.win { color: var(--green-d); }
.sheet-teams .big { font-family: var(--display); font-size: 3.2rem; font-weight: 900; color: var(--navy); line-height: 1; }
.sheet table td, .sheet table th { padding: 10px 10px; } .sheet td.pl { font-weight: 600; } .sheet td.sc { text-align: center; font-family: var(--display); font-weight: 900; font-size: 1.2rem; width: 56px; background: #FAF0F9; }
.sheet td.sc.w { background: var(--green-l); color: var(--green-d); }
.sheet tfoot td { font-weight: 800; background: #FFEDEF; }
.pending-note { padding: 12px 22px; background: #FFEDEF; font-size: .9rem; }
@media (max-width: 640px) { .sheet-teams { grid-template-columns: 1fr; } .sheet-teams .big { font-size: 2.4rem; } }

/* bracket */
.bracket { display: flex; gap: 56px; align-items: stretch; overflow-x: auto; padding: 8px 4px 20px; }
.bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 24px; min-width: 270px; position: relative; }
.bcol h3 { text-align: center; color: var(--navy); font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; margin: 0; font-style: normal; }
.bmatch { background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); border-left: 6px solid var(--blue); position: relative; overflow: hidden; }
.bmatch.final { border-left-color: var(--yellow); box-shadow: 0 0 0 3px rgba(252, 209, 22, .35), var(--shadow); } .bmatch.third { border-left-color: var(--red); }
.bmatch .bt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); } .bmatch .bt:last-of-type { border-bottom: 0; }
.bmatch .bt.w { background: var(--green-l); font-weight: 800; } .bmatch .bt .nm { flex: 1; font-weight: 600; } .bmatch .bt .sc { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--blue); }
.bmatch .bt .ph { color: var(--muted); font-weight: 500; font-size: .88rem; } .bmatch .binfo { padding: 6px 14px; font-size: .74rem; background: #FAF0F9; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }

/* forms */
label.f { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 12px; }
input, select, textarea { font: inherit; padding: 10px 14px; border: 1px solid #DCC3E0; border-radius: 14px; background: #fff; color: var(--ink); max-width: 100%; }
label.f input, label.f select, label.f textarea { display: block; width: 100%; margin-top: 5px; font-weight: 400; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 3px solid rgba(103,0,163, .15); box-shadow: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; } .row > * { flex: 1 1 140px; } .row .fit { flex: 0 0 auto; }
dialog { border: 0; border-radius: 26px; padding: 0; box-shadow: 0 30px 80px rgba(5,12,56, .45); width: min(580px, 94vw); max-height: 90vh; }
dialog::backdrop { background: rgba(5,12,56, .6); backdrop-filter: blur(3px); }
dialog form, dialog .dlg { padding: 26px; } dialog h3 { color: var(--navy); font-size: 1.3rem; } .dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.form-err { color: var(--red); font-weight: 600; min-height: 1.2em; font-size: .9rem; }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(120px); background: var(--navy); color: #fff; padding: 12px 24px; border-radius: 999px; transition: transform .25s; z-index: 100; max-width: 90vw; font-weight: 600; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
#toast.show { transform: translateX(-50%); } #toast.err { background: var(--red); }

/* staff */
.staff-shell { display: grid; grid-template-columns: 230px 1fr; gap: 24px; padding: 28px 0 44px; align-items: start; }
.side { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 10px; position: sticky; top: 94px; }
.side a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--ink); font-weight: 600; font-size: .9rem; } .side a:hover { background: var(--purple-l); text-decoration: none; }
.side a.on { background: var(--navy); color: #fff; } .side .who { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; font-size: .8rem; color: var(--muted); word-break: break-all; }
@media (max-width: 860px) { .staff-shell { grid-template-columns: 1fr; } .side { position: static; display: flex; flex-wrap: wrap; gap: 4px; } .side .who { width: 100%; } }
.login-card { max-width: 420px; margin: 44px auto; padding: 30px; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .grow { flex: 1; }
.entry input.sc-in { width: 58px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 1.2rem; padding: 7px 2px; border-radius: 12px; }
.entry input.nm-in { width: 100%; min-width: 140px; padding: 8px 12px; } .entry input.sm-in { width: 82px; padding: 8px 10px; } .entry td { padding: 5px 6px; }
.entry tfoot td { font-weight: 800; background: #FFEDEF; font-size: 1.05rem; }
.savebar { position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 3px solid var(--blue); padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 20px rgba(5,12,56, .1); margin-top: 14px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; } .pill { background: var(--purple-l); border-radius: 999px; padding: 4px 5px 4px 13px; font-size: .82rem; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; } .pill button { border: 0; background: var(--blue); color: #fff; border-radius: 50%; width: 21px; height: 21px; cursor: pointer; line-height: 1; }
.tie-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } .tie-pick label { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; display: flex; gap: 8px; align-items: center; font-size: .88rem; cursor: pointer; }
.tie-pick label:has(input:checked) { border-color: var(--blue); background: var(--purple-l); }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; background: #FFEDEF; border: 2px dashed var(--gold-d); padding: 12px 16px; border-radius: 14px; user-select: all; word-break: break-all; }
.preview-row.error td { background: #fff0f2 !important; } .preview-row.warn td { background: #fffbe6 !important; }
.msgs { font-size: .82rem; margin: 0; padding-left: 16px; } .msgs .e { color: var(--red); }
.accordion summary { cursor: pointer; font-weight: 800; color: var(--blue); padding: 10px 0; }

/* footer */
.site-footer { background: var(--navy); color: #a9b8de; margin-top: 56px; padding: 36px 0; font-size: .88rem; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--blue) 0 40%, var(--red) 40% 70%, var(--yellow) 70%); }
.site-footer .wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .site-footer img.lg { height: 62px; } .site-footer a { color: #fff; } .site-footer .grow { flex: 1; min-width: 220px; }
.site-footer strong { font-family: var(--display); color: #fff; font-size: 1.05rem; }
.site-footer img.sun { height: 54px; opacity: .9; }

@media print { .site-header, .site-footer, #season-banner, .noprint, #toast { display: none !important; } body { background: #fff; } .sheet { box-shadow: none; border: 1px solid #000; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* mono labels (registrack-style eyebrows) */
th, .chip, .mini-match .when, .tabs button, .kpi span, .mcard .sub, .site-header .brand small { font-family: var(--mono); letter-spacing: .02em; }
th, .chip { text-transform: uppercase; letter-spacing: .08em; } .chip { font-weight: 700; font-size: .66rem; }
.mcard .sub, .mini-match .when, .kpi span { font-size: .74rem; }
.section-title h2, .page-head h1 { letter-spacing: -.045em; }
.btn { font-weight: 700; letter-spacing: -.01em; } .btn:not(.ghost):not(.light):not(.gold):not(.danger) { background: var(--navy); border-color: var(--navy); } .btn:not(.ghost):not(.light):not(.gold):not(.danger):hover { background: var(--blue); border-color: var(--blue); }

/* team logos */
.badge.logo { background: #fff; background-image: none; padding: 4px; border: 1px solid var(--line); box-shadow: 0 6px 14px -6px rgba(5,12,56, .3); }
.badge.logo.sm { padding: 2px; box-shadow: none; } .badge.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* rankings panel: never overflow the card */
.panels { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.05fr); }
.panel { min-width: 0; overflow: hidden; }
.panel table { table-layout: fixed; font-size: .9rem; }
.panel th, .panel td { padding: 10px 6px; }
.panel th:first-child, .panel td:first-child { width: 36px; padding-left: 10px; } .panel th:nth-child(n+3), .panel td:nth-child(n+3) { width: 40px; text-align: center; }
.panel td:nth-child(2) { min-width: 0; } .panel .st-name { min-width: 0; } .panel .st-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.panel .tabs { flex-wrap: nowrap; } .panel .tabs button { padding: 7px 16px; }
/* 2026 homepage redesign */
.home-redesign{background:#FDF6FC;color:#160C3D}.home-redesign .wrap,.home-footer.wrap{max-width:1320px}.home-hero{min-height:690px;position:relative;overflow:hidden;background:#050C38;color:white}.home-hero-photo{position:absolute;inset:0 0 0 38%;width:62%;height:100%;object-fit:cover;object-position:50% 42%}.home-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050C38 0%,#0A1050 29%,rgba(5,12,56,.95) 39%,rgba(5,12,56,.45) 52%,transparent 72%),linear-gradient(0deg,rgba(5,12,56,.2),transparent 55%)}.home-hero-inner{min-height:690px;position:relative;display:flex;align-items:center;padding-top:50px;padding-bottom:90px}.home-hero-copy{position:relative;z-index:2;max-width:740px}.home-eyebrow{display:flex;align-items:center;gap:16px;font-size:.82rem;font-weight:800;letter-spacing:.18em;color:#EDE2FC}.home-eyebrow img{width:45px;height:45px}.home-tricolor{width:160px;height:4px;background:linear-gradient(90deg,#6700A3 0 38%,white 38% 63%,#E02F75 63%);margin:26px 0 20px}.home-hero h1{font-size:clamp(3.8rem,6vw,6.8rem);line-height:.9;letter-spacing:-.065em;margin:0 0 24px;font-weight:800}.home-hero h1 em{font-style:normal;color:#FF5A57}.home-hero p{font-size:clamp(1.1rem,1.5vw,1.5rem);margin:0 0 30px;color:#F7F0FF}.home-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.home-actions a{font-weight:800;white-space:nowrap}.home-primary,.home-secondary{padding:13px 23px;border-radius:999px}.home-primary{background:#FF5A57;color:#050C38}.home-secondary{border:2px solid #F3EAFF;color:#fff}.home-text-link{color:white;text-decoration:underline;text-underline-offset:5px;padding:12px}.home-hero-meta{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:28px;color:#EDE2FC;font-size:.93rem}.home-hero-skyline{position:absolute;left:18px;bottom:4px;width:35%;height:auto;opacity:.22;filter:grayscale(1) brightness(2)}.home-content{padding-top:64px;padding-bottom:80px}.home-intro{text-align:center;margin-bottom:27px}.home-intro>span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#6700A3}.home-intro h2{font-size:clamp(2rem,3vw,3rem);margin:8px 0 19px}.home-tabs{display:inline-flex;border:1px solid #EADAEA;border-radius:999px;padding:3px;background:white}.home-tabs button{border:0;background:transparent;padding:8px 24px;border-radius:999px;font:700 .95rem var(--font);color:#160C3D;cursor:pointer}.home-tabs button.on{background:#050C38;color:white}.home-stats{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid #EADAEA;border-radius:18px;margin:0 0 24px}.home-stats>div{padding:20px 27px;display:flex;flex-direction:column;position:relative}.home-stats>div+div:before{content:'';position:absolute;left:0;top:20%;height:60%;border-left:1px solid #EADAEA}.home-stats b{font-size:1.55rem;line-height:1.1}.home-stats span{color:#715C86;font-size:.87rem}.home-main-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:20px}.home-panel{background:#fff;border:1px solid #EADAEA;border-radius:18px;padding:24px;min-width:0}.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.home-section-head h2{font-size:1.6rem;margin:0}.home-section-head>a{font-size:.86rem;font-weight:800;white-space:nowrap}.home-fixture{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #F0E2F0;color:#160C3D}.home-fixture:hover,.home-result:hover{background:#FDF6FC;text-decoration:none}.home-fixture-teams{display:flex;align-items:center;gap:9px;min-width:0;font-weight:700}.home-fixture-teams>span{display:flex;align-items:center;gap:8px;min-width:0}.home-fixture-teams>small{color:#A18FB5}.home-fixture-time{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;border-left:1px solid #EADAEA;padding-left:15px}.home-fixture-time span{font-size:.8rem;color:#715C86}.home-panel .badge.sm,.home-result .badge.sm{width:29px;height:29px;border-radius:9px;box-shadow:none;flex:none}.home-rank-body table{width:100%;border-collapse:collapse}.home-rank-body th{text-align:left;background:#FAF0F9;color:#715C86;font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;padding:11px 9px}.home-rank-body td{padding:10px 9px;border-bottom:1px solid #F0E2F0}.home-rank-body td:nth-child(n+3),.home-rank-body th:nth-child(n+3){text-align:center}.home-rank-body tr.top1{background:#FFE9EC}.home-team{display:flex;align-items:center;gap:9px;font-weight:700;color:#160C3D}.home-road{background:#1B2062;border-radius:18px;margin:24px 0 32px;padding:24px 34px;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;background-image:linear-gradient(120deg,#050C38,#2A1675)}.home-road>div{display:flex;align-items:center;gap:25px}.home-road h2{font-size:1.7rem;margin:0}.home-road p{margin:2px 0 0;color:#E4D6FA}.home-road-icon{color:#FF5A57;font-size:2.5rem}.home-road a{border:2px solid #FF5A57;color:#FF5A57;border-radius:9px;padding:10px 18px;font-weight:800}.home-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.home-result{display:block;color:#160C3D;background:#fff;border:1px solid #EADAEA;border-radius:15px;padding:17px 19px;min-width:0}.home-result-top{font-size:.79rem;color:#715C86;border-bottom:3px solid #FF5A57;padding-bottom:10px;margin-bottom:8px}.home-score-row{display:flex;align-items:center;gap:9px;padding:4px 0;font-weight:750}.home-score-row span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-score-row b{font-size:1.38rem}.home-result-bottom{border-top:1px solid #F0E2F0;margin-top:10px;padding-top:10px;display:flex;justify-content:space-between;gap:7px;font-size:.78rem;color:#715C86}.home-result-bottom>span:last-child{color:#6700A3;font-weight:800}.home-final{color:white;background:#119b50;border-radius:20px;padding:1px 9px;text-transform:uppercase;font-size:.68rem;font-weight:800}.home-empty{color:#715C86;padding:18px 0}.site-footer{border-top:5px solid #6700A3;background:#050C38}.site-footer:before{content:'';display:block;height:4px;background:linear-gradient(90deg,#6700A3 0 38%,#E02F75 38% 70%,#FF5A57 70%)}.home-footer{color:white;padding-top:36px;padding-bottom:19px}.home-footer-main{display:flex;align-items:center;gap:35px}.home-footer-brand{display:flex;align-items:center;gap:15px;min-width:340px}.home-footer-brand img{width:69px;height:69px;object-fit:contain}.home-footer-brand strong,.home-footer-brand span{display:block}.home-footer-brand span{font-size:.85rem;color:#CDB9EC}.home-footer-main nav{display:flex;flex-wrap:wrap;gap:20px;margin:auto}.home-footer-main nav a,.home-footer-bottom a{color:white}.home-footer-skyline{width:210px;opacity:.45;filter:grayscale(1) brightness(2)}.home-footer-bottom{border-top:1px solid #4E3E93;margin-top:25px;padding-top:15px;display:flex;justify-content:space-between;font-size:.8rem;color:#D8C8F0}.home-redesign .badge{box-shadow:none}.home-result-grid,.home-main-grid{content-visibility:auto;contain-intrinsic-size:auto 520px}
@media(max-width:900px){.home-hero-photo{inset:0;width:100%;height:100%;opacity:.62}.home-hero-shade{background:linear-gradient(90deg,#050C38 0%,rgba(5,12,56,.89) 56%,rgba(5,12,56,.5))}.home-hero-inner{min-height:620px}.home-main-grid{grid-template-columns:1fr}.home-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-footer-skyline{display:none}.home-footer-brand{min-width:0}}
@media(max-width:620px){.home-hero,.home-hero-inner{min-height:640px}.home-hero-inner{padding-top:55px;padding-bottom:65px}.home-hero h1{font-size:clamp(3.4rem,12vw,5rem)}.home-hero-photo{object-position:61% center;opacity:.4}.home-hero-shade{background:linear-gradient(90deg,rgba(5,12,56,.98),rgba(5,12,56,.72))}.home-hero-skyline{width:70%;opacity:.12}.home-hero-meta{font-size:.82rem}.home-content{padding-top:43px}.home-stats{grid-template-columns:repeat(2,1fr)}.home-stats>div{padding:18px}.home-stats>div:nth-child(3):before{display:none}.home-panel{padding:17px}.home-fixture-teams{flex-wrap:wrap}.home-fixture-teams>span{width:100%}.home-fixture-teams>small{display:none}.home-road,.home-road>div{align-items:flex-start;flex-direction:column}.home-road{padding:23px}.home-road>div{gap:5px}.home-result-grid{grid-template-columns:1fr}.home-section-head h2{font-size:1.35rem}.home-footer-main{flex-direction:column;align-items:flex-start;gap:22px}.home-footer-main nav{margin:0}.home-hero .home-actions{gap:10px}}
.site-footer{margin-top:0;padding:0;background:#050C38}.site-footer .wrap.home-footer{display:block;padding-top:36px;padding-bottom:19px}.site-footer:before{position:relative;top:auto;height:4px}.site-footer .home-footer-brand img{height:69px}.site-footer .home-footer-skyline{height:auto}

.player-photo-small,.staff-player-name img{width:38px;height:38px;object-fit:cover;border-radius:10px;background:#F6E4F6;flex:none}.player-photo-large{width:190px;height:190px;object-fit:cover;border-radius:20px;background:#F6E4F6;display:block;margin:0 auto 18px}.player-name-link,.staff-player-name{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}.player-profile-card{display:flex;align-items:center;gap:32px;max-width:720px}.player-profile-card .player-photo-large{margin:0}.player-profile-card h1{margin:8px 0}.player-profile-card p{color:var(--muted)}@media(max-width:600px){.player-profile-card{flex-direction:column;align-items:flex-start}.player-profile-card .player-photo-large{width:150px;height:150px}}
/* Public match pages and staff team cards */
body:not([data-page="home"]) .page-head{padding-top:24px}body:not([data-page="home"]) .page-head h1{font-size:clamp(2.3rem,4vw,3.4rem)}
body:not([data-page="home"]) .mcard{box-shadow:none;border-radius:16px}body:not([data-page="home"]) .mcard:hover{transform:none;box-shadow:0 5px 18px rgba(5,12,56,.09)}body:not([data-page="home"]) .mcard .top{padding:16px 12px 12px;min-height:88px}body:not([data-page="home"]) .badge{box-shadow:none;border-radius:13px}body:not([data-page="home"]) .mcard .bot{padding:13px 16px}body:not([data-page="home"]) .mcard .sub{line-height:1.4}
.bracket{gap:25px;overflow-x:auto}.bcol{min-width:0;flex:1}.bmatch{box-shadow:none;border-radius:16px;margin-bottom:16px}.bmatch.final{box-shadow:none;border:1px solid #FFC9C6;border-left:5px solid #FF5A57}.bmatch .bt{min-height:58px}.bmatch .bt .nm{overflow-wrap:anywhere}
.staff-shell{grid-template-columns:220px minmax(0,1fr)}.staff-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-team-card{min-width:0}.staff-team-head{display:grid;grid-template-columns:auto minmax(0,1fr) repeat(3,auto);align-items:center;gap:8px}.staff-team-head strong{min-width:0;overflow-wrap:anywhere}.staff-team-head .btn{white-space:nowrap;padding:6px 10px}.staff-team-card .pill-list{max-height:220px;overflow-y:auto}
.home-eyebrow img{width:52px;height:48px;object-fit:contain}.site-credit{display:inline-flex;align-items:center;gap:7px}.site-credit img{width:23px;height:23px;object-fit:contain}.site-credit strong{font-size:.85rem;color:#fff}
.sponsor-ticker{background:#fff;color:#050C38;overflow:hidden;padding:16px 0;border-top:1px solid #EADAEA}.sponsor-ticker-label{font-size:.73rem;font-weight:800;letter-spacing:.18em;color:#715C86;margin-bottom:10px}.sponsor-track{display:flex;width:max-content;animation:sponsors-scroll 30s linear infinite}.sponsor-ticker:hover .sponsor-track,.sponsor-ticker:focus-within .sponsor-track{animation-play-state:paused}.sponsor-sequence{display:flex;align-items:center;gap:65px;padding-right:65px;flex:none}.sponsor-entry{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-weight:750}.sponsor-entry img{height:39px;max-width:120px;object-fit:contain}.sponsor-entry a{color:#050C38}@keyframes sponsors-scroll{to{transform:translateX(-50%)}}
@media(max-width:1050px){.staff-team-grid{grid-template-columns:1fr}}@media(max-width:700px){.staff-team-head{grid-template-columns:auto 1fr auto}.staff-team-head .btn{grid-row:2}.staff-team-head .btn:last-child{grid-column:3}.home-footer-bottom{gap:12px;flex-wrap:wrap}.bcol{min-width:270px}}@media(prefers-reduced-motion:reduce){.sponsor-track{animation:none;flex-wrap:wrap;width:auto}.sponsor-sequence[aria-hidden="true"]{display:none}}
/* Larger team marks across the public tournament views */
.home-panel .badge.sm{width:44px;height:44px;min-width:44px;border-radius:12px;font-size:.9rem}.home-panel .badge.logo.sm{padding:3px}.home-fixture{min-height:76px}.home-fixture-teams{gap:11px}.home-fixture-teams>span{gap:11px}.home-rank-body td{padding:10px 8px}.home-team{gap:11px}
.home-result .badge.sm{width:42px;height:42px;border-radius:12px;font-size:.85rem}.home-result .badge.logo.sm{padding:3px}.home-score-row{min-height:48px}
body:not([data-page="home"]) .mcard .badge{width:67px;height:67px;font-size:1.18rem;border-radius:15px}body:not([data-page="home"]) .mcard .badge.logo{padding:4px}body:not([data-page="home"]) .bmatch .badge.sm{width:44px;height:44px;font-size:.9rem;border-radius:12px}body:not([data-page="home"]) .bmatch .badge.logo.sm{padding:3px}
@media(max-width:700px){.home-panel .badge.sm{width:38px;height:38px;min-width:38px}.home-fixture-teams{gap:7px}.home-fixture-teams>span{gap:7px}.home-rank-body td{padding:8px 5px}.home-result .badge.sm{width:40px;height:40px}}
/* Subtle tournament card color and decisive-result badge */
.home-stats{background:linear-gradient(125deg,#ffffff 0%,#FBF1FA 75%,#FFF7F7 100%)}.home-main-grid .home-panel:first-child{background:linear-gradient(155deg,#fff 40%,#f1f5ff 100%)}.home-main-grid .home-panel:last-child{background:linear-gradient(150deg,#fff 45%,#FFF3F4 100%)}.home-result{background:linear-gradient(160deg,#fff 53%,#FBF1FA 100%);border-color:#EADAEA}.home-result:nth-child(3n + 2){background:linear-gradient(160deg,#fff 52%,#FFF3F4 100%)}.home-result:hover{background:#F9EAF8}.home-score-row.is-winner{color:#0b6e36}.winner-badge{display:inline-flex;align-items:center;width:auto;flex:none;background:#e7f6ed;color:#11683b;border:1px solid #b9e0c6;border-radius:999px;padding:3px 7px;font:800 .62rem var(--font);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.home-score-row .winner-badge{margin-left:auto}.home-score-row b{margin-left:5px}.match-winner{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.55rem;margin-top:5px;vertical-align:middle}.mcard .score .match-winner{display:block;font-family:var(--font);letter-spacing:0;line-height:1.2}.sponsor-placeholder{min-height:105px;display:flex;align-items:center;background:radial-gradient(circle at 93% 50%,rgba(103,0,163,.12) 1px,transparent 1.4px) 0 0/7px 7px,#fff}.sponsor-placeholder-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.sponsor-placeholder-inner>span{font-size:.75rem;letter-spacing:.18em;font-weight:800;color:#715C86}.sponsor-placeholder-inner strong{font-family:var(--display);font-size:clamp(1.5rem,3.5vw,3.5rem);letter-spacing:.12em;color:#dde5f2;opacity:.85;line-height:1;text-align:right;user-select:none}@media(max-width:620px){.winner-badge{font-size:.56rem;padding:2px 5px}.sponsor-placeholder-inner strong{font-size:1.35rem;letter-spacing:.06em}}
/* Unified restrained card color and motion */
:root{--card-sheen:linear-gradient(145deg,#ffffff 0%,#ffffff 43%,#FBF1FA 100%);--card-sheen-gold:linear-gradient(150deg,#fff 0%,#fff 43%,#FFF3F4 100%)}
.card,.home-panel,.home-result,.home-stats,.home-road,.kpis,.tbl-wrap,.bmatch,.side,.sheet,.mini-match{border-color:#EADAEA}
.card:not(.mcard),.tbl-wrap,.bmatch,.side,.sheet,.mini-match{background:var(--card-sheen)}
.grid>.card:nth-child(3n+2),.staff-team-grid>.card:nth-child(3n+2),.bmatch.final{background:var(--card-sheen-gold)}
.kpis{background:var(--card-sheen)}.home-main-grid .home-panel:first-child{background:var(--card-sheen)}.home-main-grid .home-panel:last-child{background:var(--card-sheen-gold)}
.mcard .bot{background:var(--card-sheen)}.mcard:nth-child(3n+2) .bot{background:var(--card-sheen-gold)}
.home-result,.home-panel,.card,.bmatch,.mini-match{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media(hover:hover) and (pointer:fine){.home-result:hover,.home-fixture:hover,.mini-match:hover,.bmatch:hover,.card:not(.mcard):hover{transform:translateY(-2px);border-color:#D9B5E3;box-shadow:0 9px 22px rgba(5,12,56,.09)}.btn:hover,.home-primary:hover,.home-secondary:hover{transform:translateY(-1px)}.btn,.home-primary,.home-secondary{transition:transform .2s ease,background-color .2s ease}}
@keyframes ftl-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.home-hero-copy,.home-intro,.page-head{animation:ftl-enter .45s ease-out both}.home-main-grid,.home-results,.bracket,.staff-team-grid{animation:ftl-enter .5s ease-out both}}
@media(prefers-reduced-motion:reduce){.home-result,.home-panel,.card,.bmatch,.mini-match,.btn,.home-primary,.home-secondary{transition:none!important;animation:none!important}}
@media print{.card,.tbl-wrap,.bmatch,.side,.sheet,.mini-match,.kpis{background:#fff!important;box-shadow:none!important;animation:none!important;transform:none!important}}
/* One-time hero reveal; transform and opacity only for smooth rendering */
@keyframes hero-photo-reveal{from{opacity:.55;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes hero-copy-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-rule-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
 .home-hero-photo{animation:hero-photo-reveal .85s ease-out both}
 .home-hero-copy{animation:none}
 .home-hero .home-eyebrow{animation:hero-copy-reveal .42s ease-out .08s both}
 .home-hero .home-tricolor{transform-origin:left center;animation:hero-rule-reveal .4s ease-out .2s both}
 .home-hero h1{animation:hero-copy-reveal .55s ease-out .23s both}
 .home-hero-copy>p{animation:hero-copy-reveal .5s ease-out .37s both}
 .home-hero .home-actions{animation:hero-copy-reveal .5s ease-out .48s both}
 .home-hero .home-hero-meta{animation:hero-copy-reveal .5s ease-out .58s both}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){@keyframes hero-photo-reveal{from{opacity:.3;transform:scale(1.035)}to{opacity:.62;transform:scale(1)}}}
@media(max-width:620px) and (prefers-reduced-motion:no-preference){@keyframes hero-photo-reveal{from{opacity:.22;transform:scale(1.035)}to{opacity:.4;transform:scale(1)}}}

/* Admin layout: the later desktop rule must not override the narrow-screen stack. */
.staff-shell > * { min-width: 0; }
.staff-matches .tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.staff-matches .tbl-wrap table { min-width: 760px; }
@media (max-width: 1020px) {
  .staff-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .side { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .side .who { width: 100%; }
  .side a { white-space: nowrap; }
}
@media (max-width: 600px) {
  .staff-shell { padding-top: 16px; }
  .side { padding: 10px; }
  .side a { padding: 8px 10px; font-size: .82rem; }
  .staff-matches h3 { line-height: 1.2; }
}
/* Sponsor marks retain their supplied artwork and appear in the requested order. */
.sponsor-ticker:not(.sponsor-placeholder){padding:18px 0 22px}
.sponsor-sequence{gap:20px;padding-right:20px}
.sponsor-entry{height:88px;min-width:220px;padding:10px 16px;gap:13px;background:#fff;border:1px solid #EADAEA;border-radius:16px;box-shadow:0 3px 12px rgba(5,12,56,.06)}
.sponsor-entry img{width:86px;height:64px;max-width:none;object-fit:contain;flex:none}
.sponsor-entry strong,.sponsor-entry a{font-size:.88rem;line-height:1.2;white-space:normal;max-width:160px}
.site-footer .sponsor-entry strong{color:#050C38}
@media(max-width:600px){.sponsor-entry{min-width:190px;height:78px;padding:8px 11px}.sponsor-entry img{width:70px;height:58px}.sponsor-entry strong,.sponsor-entry a{font-size:.78rem}}

/* Blue/coral homepage theme from the selected mockup. */
:root{--card-sheen:linear-gradient(145deg,#fff 0%,#f0f5ff 65%,#e8eaff 100%);--card-sheen-gold:linear-gradient(145deg,#fff 0%,#fff2f4 62%,#ffe2eb 100%)}
.home-redesign{background:linear-gradient(180deg,#edf3ff 0%,#f8f7ff 55%,#fff5f8 100%)}
.home-hero{background:linear-gradient(125deg,#050C38,#6700A3 62%,#E02F75)}
.home-hero-shade{background:linear-gradient(90deg,#050C38 0%,#1B2062 29%,rgba(27,32,98,.93) 40%,rgba(103,0,163,.4) 59%,rgba(224,47,117,.12) 100%)}
.home-hero h1 em{color:#ff738e}
.home-primary{background:linear-gradient(125deg,#ff8b9b,#ef3967);color:#fff;box-shadow:0 9px 23px rgba(229,46,94,.25)}
.home-primary:hover{color:#fff;background:#e82659}
.home-secondary{border-color:#a4eaff;color:#fff}
.home-tricolor{background:linear-gradient(90deg,#4ccfff 0 40%,#fff 40% 60%,#ff617c 60%)}
.home-main-grid .home-panel:first-child{background:linear-gradient(130deg,#ff8297 0%,#ef436c 51%,#cf1749 100%);border-color:#fa90a6;box-shadow:0 17px 35px rgba(178,24,76,.17);color:#fff}
.home-main-grid .home-panel:last-child{background:linear-gradient(135deg,#FF5A57 0%,#6700A3 52%,#1B2062 100%);border-color:#61baff;box-shadow:0 17px 35px rgba(103,0,163,.19);color:#fff}
.home-main-grid .home-panel .home-section-head h2,.home-main-grid .home-panel .home-section-head a{color:#fff}
.home-main-grid .home-panel .home-section-head a{text-decoration:underline;text-underline-offset:4px}
.home-main-grid .home-panel:first-child .home-fixture{background:rgba(255,255,255,.94);border:0;border-radius:12px;padding:9px 12px;margin:7px 0;color:#0A1050}
.home-main-grid .home-panel:first-child .home-fixture:hover{background:#fff}
.home-main-grid .home-panel:first-child .home-fixture-time{border-left-color:#e4e7f2}
.home-main-grid .home-panel:last-child .home-rank-body{background:rgba(255,255,255,.96);border-radius:13px;overflow:hidden;color:#0A1050}
.home-main-grid .home-panel:last-child .home-rank-body th{background:#e8f0ff;color:#4E3E93}
.home-main-grid .home-panel:last-child .home-rank-body td{border-color:#dde7fa}
.home-main-grid .home-panel:last-child .home-rank-body tr.top1{background:#fff4cf}
.home-main-grid .home-panel .home-empty{color:#fff}
.home-stats{background:linear-gradient(115deg,#fff,#edf7ff 50%,#fff0f5);border-color:#c8d7f2}
.home-road{background:linear-gradient(115deg,#050C38,#6700A3 62%,#e43f6d);border-color:#668be5}
.home-road a{border-color:#ff93a9;color:#fff}
.home-result:nth-child(3n+1){background:linear-gradient(155deg,#fff 30%,#edf5ff)}
.home-result:nth-child(3n+2){background:linear-gradient(155deg,#fff 30%,#f1eeff)}
.home-result:nth-child(3n){background:linear-gradient(155deg,#fff 30%,#fff0f3)}
.home-result-top{border-bottom-color:#f34d72}
@media(max-width:900px){.home-hero-shade{background:linear-gradient(90deg,#050C38,rgba(27,32,98,.9) 66%,rgba(103,0,163,.5))}}
@media(max-width:620px){.home-hero-shade{background:linear-gradient(90deg,rgba(5,12,56,.98),rgba(103,0,163,.7))}.home-main-grid .home-panel{padding:18px}}
@media print{.home-main-grid .home-panel,.home-road,.home-result{background:#fff!important;color:#160C3D!important;box-shadow:none!important}}

/* Clean header and footer edges: remove the former tricolor bars. */
.site-header::before,.site-footer::before{content:none;display:none}
.sponsor-ticker{border-top:0}

/* ===== phone & tablet polish (public + staff) ===== */
.lines-m { display: none; }
@media (max-width: 860px) {
  /* staff navigation becomes one swipeable row that stays under the header */
  .staff-shell { display: block; padding: 0 0 36px; }
  .side { position: sticky; top: 76px; z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 20px; margin: 0 -20px 16px; border-radius: 0; border-width: 0 0 1px; box-shadow: 0 8px 20px -14px rgba(5,12,56, .35); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .side::-webkit-scrollbar { display: none; }
  .side .who { display: none; }
  .side > div:not(.who) { flex: none; width: 230px; padding: 0 !important; } .side > div:not(.who) label { display: none; } .side > div:not(.who) select { width: 100%; padding: 8px 12px; }
  .side a { flex: none; white-space: nowrap; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; }
  .side a.on { border-color: var(--navy); }
  .login-card { margin: 18px auto; padding: 22px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; }              /* stops iOS zooming into fields */
  .btn { min-height: 44px; } .btn.small { min-height: 36px; padding: 6px 14px; }
  .page-head { padding-top: 22px; } .section { padding-block: 28px; }

  /* scoresheets: one card per line instead of a wide table */
  .lines-desktop { display: none !important; }
  .lines-m { display: block; padding: 12px; }
  .lm { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; overflow: hidden; background: #fff; }
  .lm-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #FAF0F9; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
  .lm-h .ln { font-weight: 800; color: var(--navy); }
  .lm-r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
  .lm-r .nm { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .lm-r .nm small { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; font-family: var(--mono); }
  .lm-r b { font-family: var(--display); font-size: 1.6rem; min-width: 34px; text-align: center; line-height: 1; } .lm-r b.dash { color: #C4B3D4; }
  .lm-r.w { background: var(--green-l); } .lm-r.w b { color: var(--green-d); }
  .lm-tot { display: grid; grid-template-columns: 1fr 1fr; background: #FFEDEF; border-top: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 4px; }
  .lm-tot div { padding: 10px 14px; display: flex; flex-direction: column; } .lm-tot span { font-size: .7rem; color: var(--muted); font-family: var(--mono); } .lm-tot b { font-family: var(--display); font-size: 1.4rem; }

  /* standings & players: keep the columns that matter */
  th.opt, td.opt { display: none; }
  .c-draw { display: none; }
  table.full .c-team { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 6px 0 8px -6px rgba(5,12,56, .25); } table.full th.c-team { background: #FAF0F9; }
  th, td { padding: 10px 8px; }

  /* bracket stacks vertically */
  .bracket { flex-direction: column; gap: 22px; overflow: visible; padding-bottom: 6px; }
  .bcol { min-width: 0; gap: 14px; }

  /* staff: my matches as cards */
  table.match-list, .match-list tbody { display: block; }
  .match-list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px; border-bottom: 1px solid var(--line); }
  .match-list tbody tr:last-child { border-bottom: 0; }
  .match-list td { display: block; padding: 0; border: 0; background: transparent !important; }
  .ml-teams { order: -1; flex: 1 0 100%; font-size: 1.05rem; }
  .ml-div, .ml-time, .match-list td:nth-child(2) { color: var(--muted); font-size: .84rem; }
  .ml-go { margin-left: auto; } .ml-go .btn { min-height: 40px; }

  /* staff: score entry — each line is a card with big thumb-friendly score boxes */
  .entry .tbl-wrap { overflow: visible; border: 0; box-shadow: none; }
  .entry-table, .entry-table tbody, .entry-table tfoot { display: block; }
  .entry-table thead { display: none; }
  .entry td { padding: 0 !important; border: 0; background: transparent !important; }
  .ln-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 66px; grid-template-areas: "n time time del" ". court cat cat" "pa pa pa sa" "pb pb pb sb"; gap: 8px; align-items: center; padding: 14px 12px; border-bottom: 8px solid var(--bg); }
  .ln-row:hover td { background: transparent !important; }
  .c-n { grid-area: n; font-weight: 800; color: var(--navy); } .c-time { grid-area: time; } .c-court { grid-area: court; } .c-cat { grid-area: cat; } .c-del { grid-area: del; }
  .c-pa { grid-area: pa; } .c-pb { grid-area: pb; } .c-sa { grid-area: sa; text-align: center; } .c-sb { grid-area: sb; text-align: center; }
  .c-pa::before, .c-pb::before { content: attr(data-team); display: block; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
  .c-pa br, .c-pb br { display: none; } .c-pa input, .c-pb input { display: block; margin-bottom: 6px; }
  .entry input.sm-in, .entry input.nm-in { width: 100%; min-width: 0; } .entry input.nm-in { padding: 11px 12px; }
  .entry input.sc-in { width: 100%; max-width: 100%; height: 58px; font-size: 1.7rem; }
  .c-del .btn { min-height: 38px; padding: 4px 0; width: 100%; }
  .entry-table tfoot { background: #FFEDEF; }
  .tot-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
  .tot-row td { display: block; } .tot-row td:first-child { flex: 1; text-align: left; font-weight: 700; } .tot-row td[colspan="2"] { display: none; } .tot-row td.num { min-width: 34px; font-size: 1.2rem; }
  .savebar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; } .savebar .btn { flex: 1 1 auto; }
  .toolbar { gap: 10px; }
}
@media (max-width: 400px) { .wrap { padding-left: 16px; padding-right: 16px; } .side { margin: 0 -16px 16px; padding: 10px 16px; } }
@media (max-width: 720px) { .staff-matches .tbl-wrap table { min-width: 0; } .staff-matches .tbl-wrap { overflow: visible; } }
@media (max-width: 720px) {
  /* staff tables -> stacked cards (labels come from data-label set in staff.js) */
  .stack, .stack tbody { display: block; width: 100%; min-width: 0 !important; }
  .stack thead { display: none; }
  .stack tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .stack tbody tr:last-child { border-bottom: 0; }
  .stack td { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 0; border: 0; background: transparent !important; min-width: 0; text-align: left; }
  .stack td[data-label]::before { content: attr(data-label); flex: 0 0 92px; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .stack td select, .stack td input:not([type=checkbox]) { flex: 1; min-width: 0; width: 100%; }
  .stack td.right { justify-content: flex-start; white-space: normal !important; }
  .stack.stack-flat tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .stack.stack-flat td { padding: 0; }
  .stack.stack-flat td:first-child { flex: 1 0 100%; font-size: 1.02rem; }
  .stack.stack-flat td.right { margin-left: auto; }
  .staff-shell .tbl-wrap { overflow: visible; }
}
@media (min-width: 721px) { .entry .c-time input.sm-in { width: 150px; } .entry .c-court input.sm-in { width: 64px; } .entry .c-cat input.sm-in { width: 96px; } }


/* ===== GRADIENT THEME: pink #FCCBF0 · coral #FF5A57 · magenta #E02F75 · plum #6700A3 · indigo #1B2062 · night #050C38 ===== */
:root { --pink: #FCCBF0; --coral: #FF5A57; --mag: #E02F75; --plum: #6700A3; --indigo: #1B2062; --night: #050C38;
  --grad: linear-gradient(135deg, #FF5A57 0%, #E02F75 42%, #6700A3 100%); --grad-night: linear-gradient(160deg, #050C38 0%, #1B2062 68%, #2A0F66 100%); }
body { background: #FDF6FC; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 420px at 6% 14%, rgba(252, 203, 240, .75), transparent 70%), radial-gradient(520px 460px at 98% 46%, rgba(103, 0, 163, .12), transparent 70%), radial-gradient(560px 420px at 2% 92%, rgba(255, 90, 87, .16), transparent 70%); }
.home-redesign { background: transparent; }

/* header: dark glass */
.site-header { background: rgba(5, 12, 56, .9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-header::before { height: 3px; background: var(--grad); }
.brand, .brand .bt { color: #fff; } .brand small { color: #CDB9EC; }
.nav { background: rgba(255, 255, 255, .08); } .nav a { color: #EDE2FC; } .nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nav a.on { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(224, 47, 117, .8); } .nav a.staff { background: #fff; color: var(--night); } .nav a.staff:hover { background: var(--pink); }
.menu-btn { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 1020px) { .nav { background: #0A1050; border-color: rgba(255, 255, 255, .12); } .nav a { color: #EDE2FC; } }

/* buttons: dark fill with a gradient outline (like the sample) */
.btn:not(.ghost):not(.light):not(.gold):not(.danger) { background: linear-gradient(var(--night), var(--night)) padding-box, var(--grad) border-box; border: 2px solid transparent; color: #fff; }
.btn:not(.ghost):not(.light):not(.gold):not(.danger):hover { background: linear-gradient(#17125A, #17125A) padding-box, var(--grad) border-box; color: #fff; }
.btn.gold { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -12px rgba(224, 47, 117, .8); } .btn.gold:hover { background: var(--grad); filter: brightness(1.08); color: #fff; }
.btn.ghost { background: #fff; color: var(--plum); border: 1.5px solid var(--line); } .btn.ghost:hover { background: #FBEAF9; color: var(--night); border-color: #E7C8EA; }
.tabs .on, .home-tabs button.on { background: var(--grad); color: #fff; border-color: transparent; }

/* hero: stadium night */
.home-hero { background: radial-gradient(760px 420px at 82% 4%, rgba(155, 43, 209, .55), transparent 65%), radial-gradient(640px 380px at 4% 106%, rgba(255, 90, 87, .4), transparent 65%), radial-gradient(420px 220px at 30% -2%, rgba(252, 203, 240, .3), transparent 70%), var(--grad-night); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 8% 14%, rgba(255, 255, 255, .9) 0 2px, transparent 3px), radial-gradient(circle at 22% 6%, rgba(252, 203, 240, .9) 0 2px, transparent 3px), radial-gradient(circle at 41% 11%, rgba(255, 255, 255, .8) 0 1.5px, transparent 3px), radial-gradient(circle at 63% 5%, rgba(255, 255, 255, .85) 0 2px, transparent 3px), radial-gradient(circle at 78% 13%, rgba(252, 203, 240, .8) 0 2px, transparent 3px), radial-gradient(circle at 92% 7%, rgba(255, 255, 255, .9) 0 1.5px, transparent 3px), radial-gradient(circle at 55% 24%, rgba(255, 255, 255, .6) 0 1px, transparent 2px); }
.home-hero-inner { z-index: 2; padding-bottom: 150px; }
.home-hero h1 em { background: linear-gradient(100deg, #FCCBF0 0%, #FF6F6B 42%, #E02F75 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-primary { background: var(--grad); color: #fff; box-shadow: 0 14px 30px -10px rgba(224, 47, 117, .75); }
.home-secondary { border: 2px solid transparent; background: linear-gradient(#0A0F3F, #0A0F3F) padding-box, var(--grad) border-box; color: #fff; }
.home-tricolor { background: var(--grad); }

/* slanted "how the season works" panel (overlaps the hero edge) */
.format-wrap { position: relative; z-index: 5; max-width: 1060px; margin: -108px auto 0; padding: 0 20px; }
.format-panel { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-radius: 8px 30px 8px 30px; box-shadow: 0 34px 60px -26px rgba(5, 12, 56, .6); transform: skewY(-2deg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); }
.format-panel > div { padding: 28px 22px 30px; transform: skewY(2deg); text-align: center; position: relative; }
.format-panel > div + div::before { content: ""; position: absolute; left: 0; top: 20%; height: 58%; border-left: 1px solid var(--line); }
.format-panel .num { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font: 800 1.2rem var(--display); color: #fff; border: 2px solid transparent; background: linear-gradient(#0A0F3F, #0A0F3F) padding-box, var(--grad) border-box; box-shadow: 0 8px 18px -8px rgba(103, 0, 163, .8); }
.format-panel b { display: block; font: 800 1rem var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--night); }
.format-panel span { display: block; color: var(--muted); font-size: .88rem; margin-top: 4px; }
@media (max-width: 720px) { .format-wrap { margin-top: -70px; } .format-panel { grid-template-columns: 1fr; transform: none; border-radius: 22px; } .format-panel > div { transform: none; padding: 16px 20px; display: grid; grid-template-columns: 50px 1fr; gap: 0 14px; text-align: left; align-items: center; } .format-panel .num { grid-row: span 2; margin: 0; } .format-panel > div + div::before { left: 14px; right: 14px; top: 0; height: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* content cards */
.home-content { padding-top: 46px; }
.home-panel, .home-stats { position: relative; }
.home-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.home-stats b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-intro > span { color: var(--mag); }
.home-rank-body tr.top1 { background: linear-gradient(90deg, #FFE9EC, rgba(255, 255, 255, 0)); }
.home-road { background: var(--grad-night); position: relative; overflow: hidden; }
.home-road::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(224, 47, 117, .55), transparent 70%); pointer-events: none; }
.home-road > * { position: relative; z-index: 1; } .home-road a { background: var(--grad); border-color: transparent; color: #fff; }
.home-road-icon { color: var(--pink); }
.home-tail { padding-top: 56px; }

/* podium */
.podium-section { position: relative; overflow: hidden; color: #fff; margin-top: -1px; padding: 96px 0 74px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); background: radial-gradient(520px 420px at 20% 64%, rgba(224, 47, 117, .5), transparent 70%), radial-gradient(560px 460px at 82% 56%, rgba(103, 0, 163, .65), transparent 70%), radial-gradient(300px 160px at 50% 0%, rgba(252, 203, 240, .22), transparent 70%), var(--grad-night); }
.podium-section .eyebrow { font: 700 .78rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.podium-section h2 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; letter-spacing: -.045em; margin: 6px 0 18px; font-style: normal; }
.podium-section .home-tabs { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); } .podium-section .home-tabs button { color: #fff; }
.podium-section .home-tabs button.on { background: var(--grad); }
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; max-width: 920px; margin: 38px auto 0; }
.pd { text-align: center; padding: 0 8px; min-width: 0; }
.pd .crest { display: flex; justify-content: center; margin-bottom: 14px; } .pd .crest .badge { width: 92px; height: 92px; font-size: 1.7rem; border-radius: 28%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 14px 40px -8px rgba(224, 47, 117, .7); }
.pd .tn { font: 800 1.2rem var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; } .pd .pts { color: #E4D6FA; font: 500 .8rem var(--mono); margin-top: 2px; }
.pd .step { margin-top: 16px; display: flex; justify-content: center; padding-top: 14px; font: 900 3.4rem/1 var(--display); color: rgba(255, 255, 255, .92); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .2); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px -12px rgba(224, 47, 117, .55), inset 0 1px 0 rgba(255, 255, 255, .45); }
.pd.p1 .step { height: 200px; color: #FFC9C6; box-shadow: 0 -16px 54px -8px rgba(255, 90, 87, .7), inset 0 1px 0 #fff; } .pd.p2 .step { height: 136px; } .pd.p3 .step { height: 100px; }
.pd.p1 .crest .badge { width: 116px; height: 116px; font-size: 2.1rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28), 0 0 60px rgba(255, 90, 87, .75); }
.podium-rest { display: flex; justify-content: center; gap: 12px 34px; flex-wrap: wrap; margin: 0 auto; max-width: 920px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); color: #E4D6FA; font-size: .92rem; } .podium-rest b { color: #fff; }
.podium-empty { color: #E4D6FA; margin: 30px 0 0; }
@media (max-width: 620px) { .podium-section { padding: 74px 0 56px; } .pd .crest .badge { width: 60px; height: 60px; font-size: 1.1rem; } .pd.p1 .crest .badge { width: 76px; height: 76px; font-size: 1.4rem; } .pd .tn { font-size: .9rem; } .pd .step { font-size: 2.3rem; } .pd.p1 .step { height: 150px; } .pd.p2 .step { height: 106px; } .pd.p3 .step { height: 80px; } }

/* inner pages */
.page-head h1 { background: linear-gradient(100deg, var(--night) 0%, var(--indigo) 55%, var(--plum) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title h2::before { background: var(--grad); }
.mcard:hover { box-shadow: 0 20px 40px -14px rgba(103, 0, 163, .4); }

/* ===== Home panels v2: one clean card each (no cards inside colored cards) ===== */
.home-main-grid .home-panel::before { display: none; }
.home-redesign .home-main-grid { gap: 22px; align-items: stretch; }
.home-redesign .home-main-grid .home-panel { padding: 26px 26px 22px; border-radius: 24px; }
/* left: light panel, fixtures are plain rows with a date tile */
.home-redesign .home-main-grid .home-panel:first-child { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }
.home-redesign .home-main-grid .home-panel:first-child .home-section-head h2 { color: var(--night); }
.home-redesign .home-main-grid .home-panel:first-child .home-section-head a { color: var(--plum); text-decoration: none; }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 2px; margin: 0; gap: 16px; color: var(--ink); }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture:first-of-type { border-top: 0; }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture:hover { background: linear-gradient(90deg, #FBF1FA, transparent); transform: none; box-shadow: none; }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture-time { order: -1; flex: none; align-items: center; justify-content: center; min-width: 74px; padding: 8px 10px; text-align: center; border: 1.5px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture-time b { font: 800 1.05rem var(--display); letter-spacing: -.02em; color: var(--night); }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture-time span { font: 600 .72rem var(--mono); color: var(--muted); }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture-teams { flex: 1; }
.home-redesign .home-main-grid .home-panel:first-child .home-fixture-teams > small { color: var(--mag); font: 800 .7rem var(--mono); text-transform: uppercase; }
/* right: dark panel, transparent table */
.home-redesign .home-main-grid .home-panel:last-child { background: radial-gradient(420px 260px at 92% 0%, rgba(224, 47, 117, .5), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(103, 0, 163, .55), transparent 70%), var(--grad-night); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 26px 50px -26px rgba(5, 12, 56, .75); color: #fff; }
.home-redesign .home-main-grid .home-panel:last-child .home-section-head h2 { color: #fff; }
.home-redesign .home-main-grid .home-panel:last-child .home-section-head a { color: #FCCBF0; text-decoration: none; }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body { background: transparent; border-radius: 0; overflow: visible; color: #fff; }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body th { background: transparent; color: #CDB9EC; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body td { border-color: rgba(255, 255, 255, .1); color: #fff; }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body tr:last-child td { border-bottom: 0; }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body tr.top1 { background: linear-gradient(90deg, rgba(255, 90, 87, .32), rgba(255, 90, 87, 0)); }
.home-redesign .home-main-grid .home-panel:last-child .home-rank-body td:last-child { font-weight: 800; color: #FFC9C6; }
.home-redesign .home-main-grid .home-panel:last-child .home-team { color: #fff; }
.home-redesign .home-main-grid .home-panel:last-child .home-empty, .home-redesign .home-main-grid .home-panel:first-child .home-empty { color: var(--muted); }
@media (max-width: 620px) { .home-redesign .home-main-grid .home-panel { padding: 20px 16px 16px; } .home-redesign .home-main-grid .home-panel:first-child .home-fixture-time { min-width: 62px; padding: 6px 8px; } }

/* ===== Winner colours follow the theme (magenta ink + gradient badge) ===== */
:root { --win: #B5155E; --win-bg: #FFE9EF; }
.winner-badge { background: var(--grad); color: #fff; border: 0; padding: 3px 9px; font: 800 .6rem var(--font); letter-spacing: .06em; box-shadow: 0 5px 12px -6px rgba(224, 47, 117, .8); }
.home-score-row.is-winner, .mcard .teams .w, .mini-match .tm.w, .sheet-teams .tn.win, .lm-r.w b, .sheet td.sc.w, .bmatch .bt.w, .lm-r.w .nm { color: var(--win); }
.home-score-row.is-winner b { color: var(--win); }
.lm-r.w { background: linear-gradient(90deg, var(--win-bg), rgba(255, 255, 255, 0)); }
.sheet td.sc.w { background: var(--win-bg); }
.bmatch .bt.w { background: linear-gradient(90deg, var(--win-bg), rgba(255, 255, 255, 0)); }
.chip.final, .home-final { background: var(--plum); color: #fff; }

/* ===== One size for buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 22px; line-height: 1; white-space: nowrap; font-size: .92rem; }
.btn.small { min-height: 34px; padding: 0 15px; font-size: .82rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-row .btn { flex: 0 0 auto; }
.toolbar > .btn-row { margin-left: auto; }
@media (max-width: 720px) { .btn { min-height: 44px; } .btn.small { min-height: 38px; } .btn-row .btn { flex: 1 1 auto; } }

/* toggle switch (staff settings) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px 7px 8px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 24px; border-radius: 999px; background: #D9C7DD; position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(5, 12, 56, .3); transition: transform .2s; }
.switch input:checked + .track { background: var(--grad); } .switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 3px solid var(--pink); outline-offset: 2px; }

/* ===== Player profile card ===== */
.player-profile-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; max-width: 560px; padding: 22px 26px 22px 30px !important; position: relative; overflow: hidden; border-radius: 26px; }
.player-profile-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--grad); }
.player-profile-card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(252, 203, 240, .75), transparent 70%); pointer-events: none; }
.player-profile-card > * { position: relative; z-index: 1; }
.player-profile-card .player-photo-large { width: 118px; height: 118px; border-radius: 50%; margin: 0; object-fit: cover; background: #F6E4F6; box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(224, 47, 117, .5), 0 16px 30px -12px rgba(103, 0, 163, .65); }
.pp-eyebrow { display: block; font: 700 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mag); }
.player-profile-card h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.05; margin: 6px 0 12px; letter-spacing: -.04em; background: none; -webkit-text-fill-color: var(--night); color: var(--night); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pp-chip { font: 600 .74rem var(--mono); padding: 5px 12px; border-radius: 999px; background: var(--purple-l); color: var(--plum); border: 1px solid #EBCFEE; }
.pp-chip.id { background: var(--night); color: #fff; border-color: transparent; }
.pp-team { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--night); font-weight: 700; font-size: .92rem; transition: border-color .15s, transform .15s; }
.pp-team:hover { text-decoration: none; border-color: var(--mag); transform: translateX(2px); } .pp-team i { font-style: normal; color: var(--mag); }
@media (max-width: 520px) { .player-profile-card { grid-template-columns: 1fr; justify-items: start; gap: 16px; padding: 22px 20px 22px 26px !important; } .player-profile-card .player-photo-large { width: 96px; height: 96px; } }

/* ===== Night pages (results · schedule · bracket) use the podium's dark gradient ===== */
body[data-page="results"], body[data-page="schedule"], body[data-page="bracket"] { background: #050C38; }
body[data-page="results"]::before, body[data-page="schedule"]::before, body[data-page="bracket"]::before { background: radial-gradient(620px 460px at 14% 22%, rgba(224, 47, 117, .38), transparent 70%), radial-gradient(680px 520px at 88% 46%, rgba(103, 0, 163, .55), transparent 70%), radial-gradient(520px 340px at 50% 0%, rgba(252, 203, 240, .16), transparent 70%), linear-gradient(160deg, #050C38 0%, #1B2062 62%, #2A0F66 100%); }
body[data-page="results"] .page-head h1, body[data-page="schedule"] .page-head h1, body[data-page="bracket"] .page-head h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
body[data-page="results"] .page-head p, body[data-page="schedule"] .page-head p, body[data-page="bracket"] .page-head p, body[data-page="schedule"] .muted, body[data-page="results"] .muted { color: #CDB9EC; }
body[data-page="schedule"] main h2, body[data-page="bracket"] main h2 { color: #fff !important; }
body[data-page="bracket"] main h2 { text-shadow: 0 2px 24px rgba(224, 47, 117, .45); }
body[data-page="bracket"] .bcol h3 { color: #FCCBF0; }
body[data-page="results"] .tabs button, body[data-page="schedule"] .tabs button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
body[data-page="results"] .tabs .on, body[data-page="schedule"] .tabs .on { background: var(--grad); border-color: transparent; }
body[data-page="results"] .empty, body[data-page="schedule"] .empty, body[data-page="bracket"] .empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: #E4D6FA; }
body[data-page="results"] .mcard, body[data-page="schedule"] .mcard, body[data-page="bracket"] .bmatch { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7); border-color: rgba(255, 255, 255, .14); }
body[data-page="results"] .mcard:hover, body[data-page="schedule"] .mcard:hover { box-shadow: 0 26px 52px -18px rgba(224, 47, 117, .55); }

/* ===== Doha skyline (new artwork) ===== */
.home-hero-skyline { left: 0; bottom: 0; width: 66%; max-height: 46%; object-fit: contain; object-position: left bottom; opacity: .2; filter: none; z-index: 1; pointer-events: none; }
.site-footer { position: relative; overflow: hidden; }
.site-footer .home-footer-skyline { display: block !important; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 100%; object-fit: cover; object-position: center bottom; opacity: .09; filter: none; pointer-events: none; z-index: 0; }
.site-footer .home-footer, .site-footer .wrap { position: relative; z-index: 1; }

/* hero photo: framing for the new picture */
.home-hero-photo { object-position: 44% 46%; }
.home-hero-shade { background: linear-gradient(90deg, #050C38 0%, #0A1050 28%, rgba(27, 32, 98, .9) 40%, rgba(103, 0, 163, .38) 62%, rgba(224, 47, 117, .14) 100%), linear-gradient(0deg, rgba(5, 12, 56, .55), transparent 50%); }
@media (max-width: 900px) { .home-hero-photo { object-position: 46% center; } .home-hero-skyline { width: 100%; max-height: 34%; opacity: .16; } }
@media (max-width: 620px) { .home-hero-photo { object-position: 48% center; } .home-hero-skyline { width: 130%; max-height: 28%; opacity: .14; } }

/* ===== Night mode for every page except Home (staff area included) =====
   The page is dark; "paper" surfaces (cards, tables, sheets, dialogs, side menu) stay light and restore the dark-text variables. */
body:not([data-page="home"]) { --ink: #F3EAFF; --muted: #CDB9EC; --link: #FCCBF0; --purple: #FCCBF0; --line: rgba(255, 255, 255, .16); background: #050C38; color: #EDE2FC; }
body:not([data-page="home"])::before { background: radial-gradient(620px 460px at 14% 22%, rgba(224, 47, 117, .36), transparent 70%), radial-gradient(680px 520px at 88% 46%, rgba(103, 0, 163, .52), transparent 70%), radial-gradient(520px 340px at 50% 0%, rgba(252, 203, 240, .15), transparent 70%), linear-gradient(160deg, #050C38 0%, #1B2062 62%, #2A0F66 100%); }
:is(.card, .tbl-wrap, .sheet, .bmatch, .side, .mini-match, .kpis, .savebar, .lm, .lm-tot, .pending-note, .switch, .tie-pick label, .secret, dialog) { --ink: #160C3D; --muted: #715C86; --link: #6700A3; --purple: #6700A3; --line: #EADAEA; color: #160C3D; }
body:not([data-page="home"]) .page-head h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
body:not([data-page="home"]) .page-head p, body:not([data-page="home"]) .muted { color: var(--muted); }
:is(.card, .tbl-wrap, .sheet, .side, dialog, .savebar, .pending-note) .muted { color: #715C86; }
body:not([data-page="home"]) .section-title h2 { color: #fff; }
body:not([data-page="home"]) .accordion summary { color: var(--link); }
body:not([data-page="home"]) .tabs button, body:not([data-page="home"]) .tabs a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
body:not([data-page="home"]) .tabs .on { background: var(--grad); border-color: transparent; color: #fff; }
body:not([data-page="home"]) .empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: #E4D6FA; }
input, select, textarea { color: #160C3D; }
input::placeholder, textarea::placeholder { color: #8E7BA3; }
/* labels that sit directly on the dark page */
body:not([data-page="home"]) .toolbar label, body:not([data-page="home"]) label.small { color: #E4D6FA; }
/* staff: season selector inside the (light) side menu keeps dark text */
.side select, .side label { color: #160C3D; }
/* sticky staff strip on phones stays a light surface */
@media (max-width: 860px) { .side { background: #fff; } }
/* contrast fixes inside light surfaces */
.switch, .switch span { color: #160C3D !important; }
.side label, .side .muted, .side .small { color: #715C86 !important; }
.side .who strong { color: #160C3D; }
@media (min-width: 721px) { .entry .c-time input.sm-in { width: 128px; } .entry input.nm-in { min-width: 118px; } }
@media (max-width: 860px) {
  .side { background: rgba(5, 12, 56, .94); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .12); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
  .side a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #EDE2FC; }
  .side a.on { background: var(--grad); border-color: transparent; color: #fff; }
}

/* ===== Readability pass: darker gradient behind white text, softer placeholders ===== */
:root { --grad-ui: linear-gradient(135deg, #E5324F 0%, #C2185B 46%, #6700A3 100%); }
.tabs .on, .home-tabs button.on, .btn.gold, .home-primary, .winner-badge, .nav a.on, .home-road a, body:not([data-page="home"]) .tabs .on, .podium-section .home-tabs button.on { background: var(--grad-ui); color: #fff; }
.winner-badge { text-shadow: 0 1px 1px rgba(5, 12, 56, .35); font-weight: 800; }
.badge.empty-b { background: #DCC9E0 !important; color: #5B3D8C; }
.mcard .vs, .home-fixture-teams > small { color: #7C6A92; }
.chip { color: #46306E; }
.chip.live, .chip.final, .home-final { color: #fff; }
.chip.sched { color: #4A0C7A; }
.side a.on { background: var(--grad-ui) !important; color: #fff !important; }
main { padding-bottom: 8px; }

/* ===== Footer skyline: small, lower right ===== */
.site-footer .home-footer-skyline { left: auto !important; right: 18px !important; bottom: 0 !important; width: 280px !important; max-width: 46%; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: right bottom !important; opacity: .2 !important; }
@media (max-width: 620px) { .site-footer .home-footer-skyline { width: 170px !important; max-width: 52%; right: 10px !important; opacity: .16 !important; } }

/* ===== Player marks: G · * · ** · NP ===== */
.pt { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font: 800 .66rem var(--mono); letter-spacing: .02em; }
.pt-g { background: #E4D6FA; color: #4A0C7A; border: 1px solid #CDB5EE; }
.pt-np { background: linear-gradient(135deg, #E5324F, #6700A3); color: #fff; }
.pt-mark { margin-left: 3px; font: 900 1.05rem var(--display); color: #C2185B; vertical-align: top; line-height: 1; }
.pt-legend { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; font-size: .8rem; color: var(--muted); }
.pt-legend b { margin-left: 10px; font-family: var(--mono); color: #C2185B; } .pt-legend b:first-child { margin-left: 0; }
.player-profile-card h1 .pt { height: 24px; font-size: .74rem; margin-left: 8px; } .player-profile-card h1 .pt-mark { font-size: 1.4rem; }
.pp-chip.g { background: #E4D6FA; color: #4A0C7A; border-color: #CDB5EE; } .pp-chip.np { background: linear-gradient(135deg, #E5324F, #6700A3); color: #fff; border-color: transparent; } .pp-chip.mk { background: #FFE9EF; color: #A0154F; border-color: #F6C3D3; }
label.f input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; margin: 0 0 0 8px; vertical-align: middle; accent-color: #C2185B; }

/* ===== FTL rating ===== */
.rt { display: inline-block; min-width: 54px; padding: 3px 10px; border-radius: 999px; font: 800 .88rem var(--mono); background: linear-gradient(135deg, #FBE6F3, #EFE0FB); color: #4A0C7A; border: 1px solid #E8CFF0; }
.rt.nr { background: #F3ECF6; color: #8E7BA3; border-color: #E6DAEC; font-weight: 600; }
.rt-cell { white-space: nowrap; }
.rc-rel-chip { font: 700 .7rem var(--mono); padding: 3px 10px; border-radius: 999px; background: #F3ECF6; color: #5B3D8C; } .rc-rel-chip.high { background: #E2F6EA; color: #0B6E36; } .rc-rel-chip.medium { background: #FFF0D6; color: #8A5200; } .rc-rel-chip.low { background: #FFE9EF; color: #A0154F; }
.rating-card { max-width: 560px; margin-top: 16px; padding: 22px 26px; position: relative; overflow: hidden; border-radius: 26px; }
.rating-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--grad); }
.rc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rc-label { display: block; font: 700 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mag); }
.rc-num { display: block; font: 800 3.6rem/1 var(--display); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .rc-num.nr { background: none; color: #B5A3C9; -webkit-text-fill-color: #B5A3C9; font-size: 2.6rem; }
.rc-stats { display: flex; gap: 18px; } .rc-stats > div { text-align: center; } .rc-stats b { display: block; font: 800 1.25rem var(--display); color: var(--night); } .rc-stats span { font: 600 .66rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rc-scale { position: relative; height: 10px; border-radius: 999px; background: #EFE3F3; margin: 18px 0 4px; } .rc-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--grad); }
.rc-scale i { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 3px solid #C2185B; box-shadow: 0 4px 10px -2px rgba(103, 0, 163, .6); }
.rc-axis { display: flex; justify-content: space-between; font: 600 .66rem var(--mono); color: var(--muted); }
.rc-rel { margin: 12px 0 0; font-size: .86rem; color: var(--muted); } .rc-rel.high { color: #0B6E36; font-weight: 700; } .rc-rel.low { color: #A0154F; font-weight: 600; }
.rc-hist { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .rc-hist h3 { font-size: 1rem; margin-bottom: 8px; }
.rh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3E8F5; } .rh:last-child { border-bottom: 0; }
.rh-l { display: flex; flex-direction: column; min-width: 0; font-size: .86rem; color: var(--muted); } .rh-l b { color: var(--night); font-size: .9rem; } .rh-l span { overflow: hidden; text-overflow: ellipsis; }
.rh-r { display: flex; align-items: center; gap: 10px; flex: none; } .rh-r b { font: 800 1.1rem var(--display); color: var(--night); } .rh-r small { font: 700 .72rem var(--mono); color: #6700A3; background: #F3E3F8; padding: 3px 8px; border-radius: 999px; }
.rh-res { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 .72rem var(--mono); color: #fff; } .rh-res.W { background: linear-gradient(135deg, #E5324F, #C2185B); } .rh-res.L { background: #9B8CB5; } .rh-res.D { background: #6700A3; }
.rating-how { margin-top: 24px; max-width: 860px; } .rating-how h2 { color: var(--night); } .rating-how ol { padding-left: 20px; } .rating-how li { margin: 8px 0; }
.rating-how p, .rating-how li { color: #3A2A5C; }
@media (max-width: 520px) { .rc-num { font-size: 3rem; } .rating-card { padding: 20px 18px 20px 24px; } .rc-stats { gap: 12px; } }
/* ten menu items: tighten the pill menu on mid-size screens */
@media (max-width: 1240px) { .nav a { padding: 8px 11px; font-size: .84rem; } }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 560px)); gap: 18px; align-items: start; }
.pp-grid .rating-card { margin-top: 0; max-width: none; } .pp-grid .player-profile-card { max-width: none; }
@media (max-width: 1160px) { .pp-grid { grid-template-columns: minmax(0, 560px); } .pp-grid .rating-card { margin-top: 0; } }
.pt-legend { color: #CDB9EC; } .pt-legend b { color: #FCCBF0; }
:is(.card, .tbl-wrap, .sheet) .pt-legend { color: #715C86; } :is(.card, .tbl-wrap, .sheet) .pt-legend b { color: #C2185B; }

/* ===== Footer v3: skyline sits on the right of the top row; social buttons under the brand ===== */
.site-footer .home-footer-skyline { position: static !important; display: block !important; flex: 0 0 auto; width: 320px !important; max-width: 32%; height: auto !important; align-self: flex-end; margin: 0 0 -1px auto !important; object-fit: contain !important; object-position: right bottom !important; opacity: .38 !important; z-index: 0; pointer-events: none; }
.site-footer .home-footer-main { align-items: center; }
.home-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 999px; border: 1.5px solid transparent; color: #fff !important; font: 700 .8rem var(--font); background: linear-gradient(#0A1050, #0A1050) padding-box, var(--grad) border-box; transition: transform .15s, filter .15s; }
.social-btn:hover { transform: translateY(-2px); filter: brightness(1.15); text-decoration: none; }
.social-btn img { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--grad-ui); flex: none; }
@media (max-width: 900px) { .site-footer .home-footer-skyline { width: 220px !important; max-width: 60%; margin-top: 4px !important; } }

/* ===== Admin: sponsors list ===== */
.sp-list { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.sp-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; } .sp-row:last-child { border-bottom: 0; } .sp-row.off { opacity: .6; background: #FAF3FA; }
.sp-logo { width: 92px; height: 52px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; padding: 4px; } .sp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sp-body strong { overflow-wrap: anywhere; } .sp-body .small { overflow-wrap: anywhere; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sp-prev { min-height: 90px; display: grid; place-items: center; margin: 6px 0 14px; padding: 12px; border: 1px dashed #D5BFD9; border-radius: 14px; background: #fff; } .sp-prev img { max-width: 100%; max-height: 90px; object-fit: contain; }
@media (max-width: 720px) { .sp-row { flex-wrap: wrap; } .sp-actions { width: 100%; justify-content: flex-start; } .sp-logo { width: 78px; } }
.home-footer-brand .home-footer-social { display: flex; margin-top: 12px; }
.home-footer-brand .social-btn { display: inline-flex; }
.home-footer-brand .social-btn span { display: inline; font: 700 .8rem var(--font); color: #fff; }
.home-footer-brand .social-btn img { width: 24px !important; height: 24px !important; min-width: 24px; padding: 4px; }
.sp-body .chip { align-self: flex-start; }


/* ===== Wider site + roomier header ===== */
.wrap { max-width: 1400px; }
.home-redesign .wrap, .home-footer.wrap { max-width: 1400px; }
.site-header .wrap { max-width: 1600px; padding: 0 32px; gap: 32px; min-height: 76px; }
.nav { gap: 4px; padding: 6px; } .nav a { padding: 9px 16px; font-size: .9rem; }
.nav a.staff { margin-left: 8px; }
@media (max-width: 1500px) { .site-header .wrap { gap: 24px; } .nav a { padding: 9px 13px; font-size: .86rem; } }
@media (max-width: 1360px) { .brand small { display: none; } .nav a { padding: 9px 12px; } }
/* the ten-item menu collapses into the hamburger earlier, so it never feels cramped */
@media (max-width: 1180px) {
  .site-header .wrap { padding: 0 20px; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); background: #0A1050; flex-direction: column; align-items: stretch; padding: 10px; border-radius: 24px; box-shadow: 0 20px 50px rgba(5, 12, 56, .45); border: 1px solid rgba(255, 255, 255, .12); }
  .nav.open { display: flex; } .nav a { padding: 13px 16px; font-size: .95rem; color: #EDE2FC; } .nav a.staff { margin: 6px 0 0; text-align: center; color: #050C38; }
}

/* ===== Hero slideshow ===== */
.home-hero { --ph-op: 1; }
.home-hero-photo.slide { animation: none !important; opacity: 0; transition: opacity 1.1s ease; }
.home-hero-photo.slide.on { opacity: var(--ph-op); }
.hero-dots { position: absolute; right: 28px; bottom: 74px; z-index: 4; display: flex; gap: 9px; padding: 8px 12px; border-radius: 999px; background: rgba(5, 12, 56, .45); backdrop-filter: blur(6px); }
.hero-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .25s, background .25s; }
.hero-dots button.on { width: 28px; border-radius: 999px; background: linear-gradient(90deg, #FF5A57, #E02F75); }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) { .home-hero { --ph-op: .62; } .hero-dots { right: 16px; bottom: 56px; } }
@media (max-width: 620px) { .home-hero { --ph-op: .4; } .hero-dots { bottom: 44px; } }

/* ===== Admin: hero photos ===== */
.hp-thumb { width: 150px; height: 84px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #F3ECF6; display: grid; place-items: center; } .hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-prev { min-height: 140px; display: grid; place-items: center; margin: 6px 0 14px; border: 1px dashed #D5BFD9; border-radius: 14px; background: #fff; overflow: hidden; } .hp-prev img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
@media (max-width: 720px) { .hp-thumb { width: 110px; height: 62px; } }
.card .toolbar label, .card .toolbar label.f { color: #4A3A6E !important; }

/* sponsor logos in the admin list: fixed pixel limits (percent max-height does not resolve inside the grid cell) */
.sp-logo { overflow: hidden; }
.sp-logo img { width: auto !important; height: auto !important; max-width: 80px !important; max-height: 42px !important; object-fit: contain; display: block; }
@media (max-width: 720px) { .sp-logo img { max-width: 66px !important; } }


/* ===== Performance: no live blur on large/fixed surfaces (it re-renders on every scroll frame) ===== */
.site-header, .format-panel, .hero-dots, .savebar, .side { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.site-header { background: rgba(5, 12, 56, .97) !important; }
.hero-dots { background: rgba(5, 12, 56, .62) !important; }
.format-panel { background: rgba(255, 255, 255, .97) !important; }
@media (max-width: 900px) { .home-hero::after { display: none; } }


/* standings (printed format): the team cell must stay a real table cell so row lines run straight */
table.full td.st-name { display: table-cell; vertical-align: middle; font-weight: 700; white-space: nowrap; }
table.full td, table.full th { vertical-align: middle; }
table.full tbody td { height: 58px; }

/* ===== Hero announcement pill ===== */
.home-announce { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 18px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-size: .9rem; font-weight: 600; text-decoration: none !important; }
a.home-announce:hover { background: rgba(255, 255, 255, .18); }
.home-announce b { flex: none; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, #E5324F, #6700A3); font: 800 .68rem var(--mono); letter-spacing: .08em; }
.home-announce span { min-width: 0; overflow-wrap: anywhere; } .home-announce i { font-style: normal; color: #FCCBF0; }
.home-announce:not(:has(b)) { padding-left: 16px; }

/* ===== Admin: hero text form ===== */
.hero-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .hero-form .span2 { grid-column: 1 / -1; }
.hero-btn-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 0 12px; align-items: end; } .hero-btn-row strong { padding-bottom: 14px; font-size: .86rem; }
label.f.chk { display: flex; align-items: center; gap: 4px; font-weight: 600; } label.f.chk input { margin: 0 6px 0 0; }
@media (max-width: 720px) { .hero-form { grid-template-columns: 1fr; } .hero-btn-row { grid-template-columns: 1fr; } .hero-btn-row strong { padding: 6px 0 0; } }

/* skyline: anchored to the hero's own left/bottom edge so the buildings sit flush on the base line */
.home-hero-skyline { left: 0 !important; bottom: 0 !important; width: min(62%, 980px) !important; max-height: none !important; height: auto !important; object-fit: contain; object-position: left bottom; opacity: .22; z-index: 1; pointer-events: none; }
@media (max-width: 900px) { .home-hero-skyline { width: 100% !important; opacity: .16; } }
@media (max-width: 620px) { .home-hero-skyline { width: 140% !important; max-width: none; } }