/* STG Academy U9 Boys — parent links
   Palette sampled from the actual kit photos:
   home jersey whites  #D0D0D0/#E0E0E0 + navy trim #001070
   away jersey         #001080 → #001090, away shorts #202080
   indoor turf         #90A070
*/
:root {
  --bg: #05070f;
  --surface: #0d1220;
  --surface-2: #151c2e;
  --ink: #f3f6ff;
  --muted: #9aa6bf;
  --line: #232c44;

  --away: #001080;          /* away jersey navy      */
  --away-lift: #0b1fa8;
  --royal: #2f6df6;         /* interactive blue      */
  --royal-bright: #6d9dff;
  --home: #eef1f6;          /* home jersey white     */
  --home-ink: #0b1020;
  --turf: #8fae6b;          /* indoor turf green     */

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 660px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 70px }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block }
a { color: inherit }
h2, h3 { font-family: "Barlow Condensed", "Archivo", sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 0 }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 44px }

/* ---------- header ---------- */
header.top { padding: 24px 0 0 }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--royal-bright);
  background: rgba(47, 109, 246, .12);
  border: 1px solid rgba(109, 157, 255, .3);
  border-radius: 100px; padding: 5px 11px;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--turf); flex: none }
h1 {
  font-family: "Barlow Condensed", "Archivo", sans-serif;
  font-size: clamp(30px, 9vw, 42px); line-height: 1.02; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; margin: 13px 0 0;
}
h1 em { font-style: normal; color: var(--royal-bright) }
.team-line { color: var(--muted); font-size: 14.5px; margin: 9px 0 0 }
.coach {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; color: var(--muted);
}
.coach img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--home); border: 2px solid var(--royal) }
.coach b { color: var(--ink); font-weight: 700 }
.banner { margin-top: 18px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line) }
.banner img { width: 100%; height: 200px; object-fit: cover }

/* ---------- jump nav ---------- */
nav.jump {
  position: sticky; top: 0; z-index: 5;
  margin: 18px -16px 0; padding: 10px 16px;
  background: rgba(5, 7, 15, .88);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
  display: flex; gap: 7px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
nav.jump::-webkit-scrollbar { display: none }
nav.jump a {
  flex: none; text-decoration: none; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px;
}
nav.jump a:hover, nav.jump a:focus-visible { color: var(--ink); border-color: var(--royal) }

/* ---------- sections ---------- */
section { margin-top: 34px }
.sec-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--royal); padding-bottom: 7px; margin-bottom: 4px }
.sec-head h2 { font-size: 27px; line-height: 1 }
.sec-head .count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .08em }
.sec-intro { color: var(--muted); font-size: 14.5px; margin: 9px 0 0 }

/* ---------- next game ---------- */
.next {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--away-lift), var(--away) 62%);
  border-radius: var(--radius); padding: 19px 18px; margin-top: 14px;
  border: 1px solid rgba(109, 157, 255, .35);
}
.next::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 70%; background: radial-gradient(closest-side, rgba(255,255,255,.14), transparent) }
.next .lbl { display: flex; align-items: center; gap: 8px; font-family: "Barlow Condensed", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c9dcff; margin: 0 }
.next .lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--turf); box-shadow: 0 0 0 4px rgba(143, 174, 107, .25) }
.next .when { font-size: 25px; font-weight: 800; line-height: 1.15; margin: 9px 0 4px }
.next .vs { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 5px }
.next .where { font-size: 14.5px; color: #c9dcff; margin: 0 }
.cd { display: flex; gap: 8px; margin: 13px 0 2px; position: relative }
.cd div { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); padding: 7px 0; text-align: center; min-width: 58px }
.cd b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1 }
.cd span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #c9dcff }

/* ---------- game rows ---------- */
.game { display: flex; gap: 14px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--line) }
.game-date { flex: none; width: 112px; font-weight: 800; font-size: 15px; line-height: 1.3 }
.game-date span { display: block; font-weight: 600; color: var(--muted); font-size: 13.5px }
.game-vs { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35 }
.game-vs span { display: block; color: var(--muted); font-size: 13.5px }

/* ---------- buttons & rows ---------- */
a.btn {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--royal); color: #fff; border-radius: var(--radius);
  padding: 15px 16px; min-height: 58px; margin-top: 13px;
  font-weight: 800; font-size: 16.5px; line-height: 1.3;
  border: 1px solid rgba(255, 255, 255, .14);
}
a.btn:hover { background: var(--royal-bright); color: var(--home-ink) }
a.btn .b-note { display: block; font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 3px }
a.btn:hover .b-note { color: rgba(11,16,32,.75) }
.b-body { flex: 1; min-width: 0 }
.arw { flex: none; opacity: .8 }

a.row {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 12px 2px; border-bottom: 1px solid var(--line); min-height: 50px;
}
a.row:hover .r-title { color: var(--royal-bright) }
.r-body { flex: 1; min-width: 0 }
.r-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; display: block }
.r-note { color: var(--muted); font-size: 13.5px; line-height: 1.45; display: block; margin-top: 2px }
.r-arrow { flex: none; color: var(--muted) }
.price { color: var(--royal-bright); font-weight: 800; white-space: nowrap }

a.row img.thumb { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: contain; background: var(--home); padding: 3px }
a.row img.doc { flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover }

.pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 100px; padding: 3px 8px; vertical-align: 2px; margin-left: 7px }
.pill.open { background: rgba(143,174,107,.18); color: var(--turf); border: 1px solid rgba(143,174,107,.4) }
.pill.soon { background: rgba(154,166,191,.14); color: var(--muted); border: 1px solid rgba(154,166,191,.3) }
.pill.req { background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid var(--line) }

.note { padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); line-height: 1.55 }
.note strong { color: var(--ink) }

/* ---------- check list ---------- */
ul.check { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px }
ul.check li { position: relative; padding: 11px 12px 11px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px }
ul.check li::before { content: ""; position: absolute; left: 13px; top: 15px; width: 15px; height: 9px; border-left: 2.5px solid var(--turf); border-bottom: 2.5px solid var(--turf); transform: rotate(-45deg) }

/* ---------- cards (staff, venues, volunteers) ---------- */
.cards { display: grid; gap: 10px; margin-top: 13px }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px }
.card h3 { font-size: 17px; letter-spacing: .04em }
.card .role { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--royal-bright) }
.card p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5 }
.card a.mini { display: inline-block; margin-top: 9px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--royal) }

/* ---------- club ---------- */
.club { display: grid; gap: 7px; margin-top: 12px; font-size: 14.5px }
.club div { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--line) }
.club div:last-child { border-bottom: 0 }
.club .k { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; flex: none; width: 66px }
.club a { text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--line) }
.club a:hover { border-color: var(--royal) }
.club .v { flex: 1; min-width: 0 }
.club .sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px }

footer { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px }
footer p { margin: 0 0 5px }
footer a { color: var(--muted) }

@media (max-width: 430px) {
  .game { flex-direction: column; gap: 3px }
  .game-date { width: auto }
  .cd div { min-width: 0; flex: 1 }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #444; --line: #bbb; --royal: #001080; --royal-bright: #001080 }
  body { background: #fff }
  nav.jump, .cd { display: none }
  a.btn { background: #fff; color: #000; border: 1.5px solid #000 }
  section { break-inside: avoid }
}