/* Hybrid: tactile surfaces, translucent navigation and electric sport accents. */
:root {
  color-scheme: dark;
  --bg: #101613; --surface: #1b2520; --ink: #f2f5ef;
  --ink-soft: #a7b6ab; --ink-faint: #819187; --line: #344039;
  --yellow: #d5f979; --yellow-ink: #17210d; --green: #bbec76;
  --contrast: #d5f979; --on-contrast: #17210d; --on-contrast-soft: #425327;
  --pill-bg: #29392d; --pill-ink: #d4e6d0; --amber: #d5f979;
  --blue: #9fc7ff; --violet: #c3b2fa; --red: #ff9f9a;
  --wash-yellow: #253022; --wash-green: #233127; --wash-blue: #232e37;
  --wash-violet: #2a2836; --wash-neutral: #232d27;
  --shadow: 0 12px 32px #00000024, inset 0 1px 0 #ffffff06;
  --radius-md: 20px;
}
body { background: radial-gradient(ellipse at 85% 0%, #2a3e294f, transparent 48%), var(--bg); }
.page { max-width: 500px; padding: max(22px, env(safe-area-inset-top)) 22px 120px; }
.topbar { padding-bottom: 26px; }
.logo-text { font-size: .65rem; letter-spacing: .04em; }
.ball-icon { width: 30px; height: 30px; filter: drop-shadow(0 0 12px #d5f97926); }
.ball-icon > circle:first-child { fill: #d5f979; }
.pill-btn { min-height: 44px; padding: 9px 11px; font-size: .72rem; }
.pill-btn-dark { background: #26352b; color: #e1eedc; border-color: #42513f; }
.pill-btn-outline { background: transparent; }
.home-hero { position: relative; overflow: hidden; min-height: 295px; padding: 25px 23px 0; border: 1px solid #52613d; border-radius: 26px; background: radial-gradient(ellipse at 100% 30%, #596e3266, transparent 65%), linear-gradient(130deg, #263426, #1b271f); margin: 0 0 29px; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 6px; color: #d5f979; font-size: .52rem; font-weight: 700; letter-spacing: .12em; }
.hero-eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #d5f979; box-shadow: 0 0 10px #d5f97980; }
.hero-copy h1 { font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.05; letter-spacing: -.065em; font-weight: 800; margin: 20px 0 12px; }
.hero-copy em { color: #d5f979; font-style: normal; }
.hero-copy p { color: #becab8; font-size: .75rem; line-height: 1.7; margin: 0 0 18px; }
.hero-link { display: inline-flex; gap: 18px; align-items: center; color: #d5f979; font-weight: 700; font-size: .76rem; min-height: 36px; }
.hero-link > span { font-size: 1.2rem; }
.hero-art { position: absolute; width: 175px; height: 200px; right: -37px; top: 53px; transform: rotate(-19deg); z-index: 1; opacity: .7; }
.mini-court { position: absolute; inset: 10px 0 20px; border: 2px solid #a2bc7e; border-radius: 4px; background: linear-gradient(90deg, transparent 49.5%, #a2bc7e 49.5%, #a2bc7e 50.5%, transparent 50.5%), #55774a40; box-shadow: 0 0 0 12px #a2bc7e0a, 0 0 0 24px #a2bc7e07; }
.mini-court::before, .mini-court::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: #a2bc7e; top: 32%; }
.mini-court::after { top: 68%; }
.mini-court i { position: absolute; top: 50%; left: -10px; right: -10px; border-top: 3px solid #d5f979; box-shadow: 0 4px 12px #0008; }
.hero-ball { position: absolute; width: 57px; height: 57px; border-radius: 50%; left: 12px; top: 115px; background: radial-gradient(circle at 32% 28%, #f0ffb7, #bcdf5e 65%, #638d2d); box-shadow: 6px 10px 18px #0007; animation: ball-float 5s ease-in-out infinite; }
.hero-ball::after { content: ''; position: absolute; inset: 10px; background: radial-gradient(ellipse, #39551e 0 2px, transparent 3px) 0 0 / 12px 13px; border-radius: 50%; transform: rotate(-22deg); }
.art-caption { position: absolute; bottom: 0; left: 18px; font-size: .4rem; letter-spacing: .2em; color: #c6d7b4; }
.hero-foot { display: flex; justify-content: space-between; gap: 10px; position: relative; z-index: 2; border-top: 1px solid #a7bb8730; margin-top: 15px; padding: 12px 0; font-size: .44rem; letter-spacing: .09em; color: #aabb9e; }
.home-hero, .schedule-heading { display: none; }
body[data-section='open-play'] .home-hero, body[data-section='courts'] .home-hero { display: block; }
body[data-section='open-play'] .schedule-heading, body[data-section='courts'] .schedule-heading { display: flex; }
.schedule-heading { justify-content: space-between; align-items: center; margin-bottom: 13px; font-weight: 700; font-size: .92rem; }
.schedule-heading > span:last-child { font-size: .64rem; color: var(--ink-soft); font-weight: 500; }
.date-strip { gap: 8px; margin-bottom: 27px; padding: 3px 0 8px; }
.date-chip { flex: 1 0 48px; min-width: 48px; padding: 11px 4px; border-radius: 15px; background: #1b2520; color: var(--ink); }
.date-chip .dow { font-size: .6rem; }
.date-chip .dom { font-size: 1.15rem; }
.date-chip.is-active { box-shadow: 0 5px 18px #c7f37720; }
.sessions-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 13px; }
.sessions-heading .view-label { margin: 0; font-size: .65rem; letter-spacing: .08em; }
.session-tag { font-size: .48rem; color: #b8cdad; letter-spacing: .08em; border: 1px solid #45593e; border-radius: 6px; padding: 4px 6px; }
.session-card { padding: 21px; position: relative; overflow: hidden; background: linear-gradient(140deg, #253129, #1a241f); border-color: #3d4f40; }
.session-card::before { content: ''; position: absolute; top: 0; left: 21px; width: 42px; height: 3px; background: #d5f979; border-radius: 0 0 4px 4px; }
.session-time { font-size: .75rem; padding-top: 4px; }
.session-price .amt { color: #d5f979; font-size: 1.4rem; letter-spacing: -.05em; }
.session-price .per { font-size: .62rem; }
.session-name { margin-top: 8px; font-size: 1.06rem; letter-spacing: -.025em; }
.session-status { display: inline-block; border-radius: 6px; padding: 3px 7px; background: #bbec7610; margin: 7px 0 17px; font-size: .68rem; }
.confirmed-label { border-top: 1px solid var(--line); padding-top: 16px; font-size: .58rem; margin-top: 0; letter-spacing: .12em; }
.player-chip { font-size: .66rem; padding: 5px 10px; background: #314032; border-color: #475942; }
.chip-row { margin-bottom: 21px; }
.btn-cta { position: relative; overflow: hidden; background: linear-gradient(110deg, #dcfc91, #bfe968); border: 1px solid #e7ffac55; box-shadow: 0 5px 20px #b6e96b14; border-radius: 13px; min-height: 49px; }
.btn-cta::after { content: ''; position: absolute; inset: 0; transform: translateX(-150%) skewX(-22deg); background: linear-gradient(90deg, transparent, #fff5, transparent); pointer-events: none; }
.btn-cta:hover::after { animation: shine .65s ease; }
.btn-cta:disabled { background: #34412a; color: #adb899; border-color: #4b583d; }
.tab-bar { max-width: 456px; bottom: max(16px, env(safe-area-inset-bottom)); background: #25352bdd; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid #62735466; padding: 7px; box-shadow: 0 12px 35px #0006, inset 0 1px 0 #ffffff0d; }
.tab-btn { min-height: 46px; font-size: .8rem; }
.tab-btn.is-active { background: linear-gradient(120deg, #d9f991, #bfe672); box-shadow: 0 3px 14px #bde77920; }
.summary-card, .lookup-card, .info-card { border: 1px solid var(--line); background: linear-gradient(130deg, #27352c, #1c2821); }
#adminSettings { margin-bottom: 18px; }
.field-input, .mobile-input input { font-size: 16px; }
.mobile-input input { min-width: 0; }
.page-title { letter-spacing: -.045em; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, .pill-btn, .contact-card, .hero-link, .tab-btn { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
button:active:not(:disabled), .pill-btn:active, .tab-btn:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #d5f979; outline-offset: 4px; }
.view:not([hidden]) { animation: enter-view .35s ease both; }
#pageFooter { opacity: .8; }
@media (hover: hover) { .date-chip:hover, .contact-card:hover { border-color: #9cb873; transform: translateY(-2px); } }
@media (max-width: 360px) { .page { padding-left: 16px; padding-right: 16px; } .pill-btn { padding: 8px; gap: 4px; font-size: .66rem; } .top-nav-pills { gap: 5px; } .hero-art { right: -65px; opacity: .45; } .hero-copy h1 { font-size: 2.1rem; } .hero-foot { font-size: .4rem; } }
@keyframes enter-view { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ball-float { 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes shine { to { transform: translateX(150%) skewX(-22deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }