/* Kids soccer birthday (Premium) — striped pitch, chalk lines, stadium scoreboard countdown */
.t-soc { --bg: #F4F7F1; --surface: #FFFFFF; --surface-2: #E6EFE3; --ink: #0F2A1C; --ink-2: #44594B; --accent: #0F2A1C; --accent-hover: #1C4430; --accent-ink: #FFFFFF; --accent-text: #146B3A; --tint: #E1F0DE; --line: #D5E2D1; --line-strong: #AFC6AA; --display: "Plus Jakarta Sans", system-ui, sans-serif; --body: "Figtree", system-ui, sans-serif; --radius: 14px; }
.t-soc h1, .t-soc h2, .t-soc h3 { font-family: var(--display); color: var(--ink); letter-spacing: -.02em; }
.sc-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(56px, 9vw, 110px) 0 clamp(64px, 10vw, 120px); }
.sc-pitch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.sc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(10, 40, 24, .15), rgba(10, 40, 24, .55)); }
.sc-hero-in { text-align: center; }
.sc-league { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(15, 42, 28, .55); font: 700 13px/1.3 var(--body); letter-spacing: .06em; }
.sc-hero h1 { margin-top: 14px; color: #fff; font: 800 clamp(54px, 11vw, 120px)/.95 var(--display); text-shadow: 0 6px 0 rgba(15, 42, 28, .35); }
.sc-hero h1 span { color: #F5D02F; }
.sc-hero h1 b { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; color: #0F2A1C; font-size: .8em; vertical-align: .05em; }
.sc-board { margin: 30px auto 0; max-width: 640px; padding: 18px 18px 16px; border-radius: 18px; background: #0B1A12; border: 3px solid #2B3B31; box-shadow: inset 0 0 0 4px #13261B, 0 30px 60px -30px rgba(0, 0, 0, .6); }
.sc-teams { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; font: 800 12px/1.2 var(--body); letter-spacing: .12em; color: #8FB59A; }
.sc-teams em { font: 700 clamp(15px, 2.6vw, 19px)/1.2 var(--display); font-style: normal; letter-spacing: 0; color: #fff; }
.sc-teams .vs { color: #F5D02F; }
.sc-count { margin-top: 14px; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-count div { background: #050D09 !important; border: 1px solid #23392B !important; border-radius: 8px !important; backdrop-filter: none !important; }
.sc-count b { color: #F5D02F; font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-weight: 500 !important; text-shadow: 0 0 12px rgba(245, 208, 47, .45); }
.sc-count span { color: #8FB59A !important; }
.sc-kick { margin-top: 12px; color: #D9E8DC; font-weight: 600; font-size: 15px; }
.sc-cta { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.t-soc .sc-hero .btn.solid { background: #F5D02F; color: #0F2A1C; box-shadow: none; }
.t-soc .sc-hero .btn.line { color: #fff; border-color: rgba(255, 255, 255, .7); }
.sc-ball { position: absolute; width: clamp(54px, 8vw, 90px); right: 8%; bottom: 10%; animation: roll 7s var(--ease-inout, ease-in-out) infinite alternate; }
@keyframes roll { from { transform: translateX(0) rotate(0); } to { transform: translateX(-60px) rotate(-200deg); } }
.sc-sec { padding-block: clamp(56px, 8vw, 96px); }
.sc-sec h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; }
.sc-prog { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sc-prog li { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; padding: 18px; border-radius: var(--radius); background: var(--surface); border-left: 6px solid #1F8A4C; box-shadow: 0 0 0 1px var(--line); }
.sc-prog .min { font: 600 22px/1 "IBM Plex Mono", monospace; color: var(--accent-text); padding-top: 4px; }
.sc-prog h3 { font-size: 20px; font-weight: 800; }
.sc-prog p { color: var(--ink-2); margin-top: 2px; }
.sc-kit { background: var(--surface-2); }
.sc-kit-in { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.sc-shirt svg { width: 100%; height: auto; transform: rotate(-6deg); }
.sc-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sc-list li { position: relative; padding-left: 30px; font-size: 17px; }
.sc-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #0F2A1C; }
.sc-map { display: grid; gap: 2px; margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); background: #0F2A1C; color: #fff; text-decoration: none; }
.sc-map b { color: #F5D02F; }
.sc-rsvp { text-align: center; }
.sc-sub { margin-top: 6px; color: var(--ink-2); }
.sc-rsvp .rsvp { margin-top: 24px; text-align: left; }
.sc-foot { padding: 46px 20px 40px; text-align: center; background: #0F2A1C; color: #DDEBE0; }
.sc-foot .made { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: inherit; text-decoration: none; font-size: 14px; opacity: .9; }
@media (max-width: 720px) { .sc-kit-in { grid-template-columns: 1fr; } .sc-shirt { max-width: 180px; margin: 0 auto; } .sc-teams { grid-template-columns: 1fr auto 1fr; } .sc-teams > span:first-child, .sc-teams > span:last-child { display: none; } .sc-prog li { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .sc-ball { animation: none; } }
@media (max-width: 720px) { .sc-ball { top: 14px; bottom: auto; right: 14px; width: 48px; } }