@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --pb-sky:#009FE3; --pb-blue:#0068B7; --pb-yellow:#F5C400; --pb-orange:#F28C18; --pb-red:#E83B25; --pb-green:#55A832; --pb-lime:#8BCB35; --pb-purple:#684A9B; --pb-navy:#183B5B; --pb-cloud:#F4F8F7; --pb-green-dark:#347a20; --pb-ink:#183B5B; --pb-bg:#eaf5fb; --pb-card:#F4F8F7; --pb-text:#183B5B; --pb-text-muted:#61778b; --pb-border:#c8dfed; --pb-radius:18px; }
* { box-sizing:border-box; }
body { background-color:var(--pb-bg); background-image:linear-gradient(rgba(0,104,183,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,104,183,.055) 1px,transparent 1px); background-size:24px 24px; color:var(--pb-text); font-family:'DM Sans',sans-serif; min-height:100vh; }
/* Keep the pixel typeface limited to the public Home and Book a Court experiences. */
body.page-home,
body.page-home *,
body.page-booking,
body.page-booking * { font-family:'Press Start 2P', monospace !important; }
body:before { content:""; position:fixed; inset:auto -14vw -18vw auto; width:44vw; height:44vw; border:1px solid rgba(0,159,227,.2); border-radius:50%; box-shadow:0 0 0 54px rgba(0,159,227,.06),0 0 0 108px rgba(0,159,227,.03); pointer-events:none; }
.navbar-pb { background:rgba(255,255,255,.92); border-bottom:1px solid var(--pb-border); backdrop-filter:blur(16px); margin-bottom:26px; padding:13px 0; }
.navbar-pb .navbar-brand { color:var(--pb-navy)!important; font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:9px; }
.brand-mark { display:none; }
.pixelball-wordmark { color:var(--pb-yellow); font-family:'Barlow Condensed',Impact,sans-serif; font-size:1.85rem; font-weight:800; font-style:italic; letter-spacing:-.045em; line-height:1; transform:skew(-5deg) rotate(-2deg); -webkit-text-stroke:2px var(--pb-blue); text-shadow:2px 2px 0 var(--pb-blue),-2px 2px 0 var(--pb-blue),2px -2px 0 var(--pb-blue),-2px -2px 0 var(--pb-blue),4px 4px 0 #fff,5px 5px 0 var(--pb-blue); }
.pixelball-logo { display:block; width:auto; height:42px; max-width:190px; object-fit:contain; }
.navbar-brand small { color:var(--pb-green-dark); font:700 .59rem 'DM Sans',sans-serif; letter-spacing:.08em; border-left:1px solid var(--pb-border); padding-left:9px; }.navbar-pb .nav-link { color:#496068!important; font-weight:600; font-size:.9rem; padding:.55rem .85rem!important; }.navbar-pb .nav-link:hover { color:var(--pb-green-dark)!important; }
.pb-hero { position:relative; overflow:hidden; background:linear-gradient(120deg,var(--pb-navy),var(--pb-blue) 58%,var(--pb-sky)); color:#fff; border-radius:24px; padding:3.4rem 3.7rem; margin-bottom:24px; box-shadow:0 18px 35px rgba(0,104,183,.24); isolation:isolate; }.pb-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(90deg,#000 0%,transparent 85%); z-index:-1; }.hero-content { position:relative; z-index:1; max-width:620px; }.eyebrow,.section-kicker { color:var(--pb-green); font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }.pb-hero .eyebrow { color:var(--pb-yellow); margin-bottom:9px; }.pb-hero h1,.section-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:.01em; }.pb-hero h1 { font-size:clamp(2.6rem,5vw,4.35rem); line-height:.84; margin:0 0 18px; }.pb-hero h1 span { color:var(--pb-yellow); }.pb-hero p { font-size:1.03rem; color:#e6f5ff; margin-bottom:23px; }.hero-status { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; letter-spacing:.08em; }.hero-status span,.court-card-meta span i { width:8px; height:8px; background:var(--pb-lime); border-radius:50%; box-shadow:0 0 0 4px rgba(139,203,53,.18); }.hero-status b { color:#d9eeff; margin-left:7px; font-size:.68rem; }.hero-logo { position:absolute; z-index:2; right:7%; top:50%; display:block; width:270px; max-width:28%; height:auto; transform:translateY(-50%); filter:drop-shadow(0 13px 16px rgba(4,35,83,.32)); }
.hero-book-btn { margin-top:21px; text-decoration:none; }.booking-page-heading { margin:16px 0 20px; padding:25px 29px; border-radius:18px; color:#fff; background:linear-gradient(120deg,var(--pb-navy),var(--pb-blue)); }.booking-page-heading h1 { margin:4px 0 6px; font:800 clamp(2rem,4vw,3rem) 'Barlow Condensed',sans-serif; letter-spacing:.02em; }.booking-page-heading h1 span { color:var(--pb-yellow); }.booking-page-heading p { margin:0; color:#dff2ff; }
.pb-step-indicator { display:flex; align-items:center; justify-content:center; gap:.45rem; margin:0 0 24px; flex-wrap:wrap; }.pb-step-indicator .step { font-size:.73rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:#66777d; padding:.48rem .75rem; border-radius:9px; background:#e9efec; }.pb-step-indicator .step b { color:#9ba9a7; margin-right:5px; }.pb-step-indicator .step.active { background:#dff8e9; color:#087b47; }.pb-step-indicator .step.active b { color:#0fa35a; }.pb-step-indicator .arrow { color:#99a9a5; font-size:.9rem; }
.arena-updates { position:relative; }.updates-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:0 0 11px; }.updates-heading .section-title { margin-bottom:0; }.updates-live { display:flex; align-items:center; gap:6px; color:var(--pb-blue); font-size:.65rem; font-weight:800; letter-spacing:.08em; }.updates-live i { width:7px; height:7px; border-radius:50%; background:var(--pb-red); box-shadow:0 0 0 4px rgba(232,59,37,.12); }.update-slide { min-height:165px; display:flex; overflow:hidden; position:relative; border-radius:17px; background:linear-gradient(120deg,var(--pb-navy),var(--pb-blue)); color:#fff; box-shadow:0 11px 22px rgba(0,104,183,.18); }.update-slide.announcement { background:linear-gradient(120deg,var(--pb-purple),var(--pb-blue)); }.update-copy { position:relative; z-index:1; width:67%; padding:23px 28px; }.update-type { display:inline-block; padding:4px 8px; margin-bottom:7px; border-radius:5px; background:var(--pb-yellow); color:var(--pb-navy); font-size:.59rem; font-weight:800; letter-spacing:.12em; }.update-copy h3 { margin:0 0 5px; font:800 1.7rem 'Barlow Condensed',sans-serif; letter-spacing:.025em; }.update-copy p { max-width:640px; margin:0 0 10px; color:#e6f5ff; font-size:.84rem; }.update-copy time { color:#b5dbf3; font-size:.67rem; font-weight:700; letter-spacing:.05em; }.update-image { position:absolute; inset:0 0 0 auto; width:44%; background-position:center; background-size:cover; }.update-image:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--pb-blue),transparent 70%); }.announcement .update-image:before { background:linear-gradient(90deg,var(--pb-purple),transparent 70%); }.update-controls { position:absolute; right:15px; bottom:13px; display:flex; gap:6px; z-index:2; }.update-controls button { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.38); border-radius:7px; background:rgba(255,255,255,.14); color:#fff; }.updates-empty { border:1px dashed #afcfe3; border-radius:15px; padding:22px; color:#698093; font-size:.88rem; text-align:center; background:rgba(255,255,255,.65); }.admin-update-card textarea { resize:vertical; }
.facility-info { padding:23px; border:1px solid #bfdcf1; border-radius:20px; background:linear-gradient(135deg,#fff,#edf8ff); }.facility-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.facility-stat { display:flex; align-items:center; gap:10px; min-height:78px; padding:13px; border:1px solid #d6e9f5; border-radius:13px; background:#fff; color:var(--pb-navy); text-decoration:none; }.facility-stat>span { display:grid; place-items:center; flex:0 0 35px; width:35px; height:35px; border-radius:10px; background:var(--pb-yellow); color:var(--pb-navy); font-size:1.15rem; font-weight:800; }.facility-stat:nth-child(2)>span { background:var(--pb-orange); color:#fff; }.facility-stat:nth-child(3)>span { background:var(--pb-lime); color:#fff; }.facility-stat b,.facility-stat small { display:block; font-size:.59rem; letter-spacing:.07em; }.facility-stat b { color:#688095; }.facility-stat strong { display:block; color:var(--pb-blue); font:800 1.15rem 'Barlow Condensed',sans-serif; letter-spacing:.035em; }.facility-stat strong small { display:inline; color:inherit; font-size:.65rem; }.facility-stat small { color:#73899b; font-weight:700; }.contact-stat { background:var(--pb-navy); border-color:var(--pb-navy); }.contact-stat b,.contact-stat small { color:#bad9ec; }.contact-stat strong { color:#fff; }.contact-stat>span { background:var(--pb-red); color:#fff; }.facility-social-row { display:flex; align-items:center; gap:16px; padding:12px 3px 0; color:var(--pb-blue); font-size:.68rem; font-weight:800; letter-spacing:.07em; }.facility-social-row b { color:#6d8393; font-size:.6rem; }.facility-social-row a { color:var(--pb-blue); text-decoration:none; }.facility-social-row a:hover { color:var(--pb-red); }.facility-details { display:grid; grid-template-columns:1.25fr .75fr; gap:12px; margin-top:12px; }.rules-panel,.amenities-panel { padding:20px; border-radius:15px; color:#fff; }.rules-panel { background:linear-gradient(135deg,var(--pb-navy),var(--pb-blue)); }.amenities-panel { background:linear-gradient(135deg,var(--pb-purple),#8c65bb); }.panel-heading { display:flex; align-items:center; gap:10px; }.panel-heading>span { display:grid; place-items:center; width:31px; height:31px; color:var(--pb-navy); background:var(--pb-yellow); border-radius:9px; }.panel-heading .section-kicker { color:#c4e5f7; font-size:.56rem; }.panel-heading h3 { margin:0; font:800 1.4rem 'Barlow Condensed',sans-serif; letter-spacing:.05em; }.rules-panel ol { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 17px; padding:0; margin:17px 0 0; }.rules-panel li { display:flex; align-items:flex-start; gap:7px; font-size:.72rem; color:#edf8ff; }.rules-panel li b { color:var(--pb-yellow); font:800 1rem 'Barlow Condensed',sans-serif; }.amenities-panel ul { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; padding:0; margin:17px 0; font-size:.76rem; font-weight:700; }.amenities-panel li i { color:var(--pb-yellow); font-style:normal; margin-right:5px; }.amenities-panel li small { display:block; padding-left:15px; color:#e6d7f4; font-size:.59rem; }.picklecam-note { display:flex; flex-direction:column; padding-top:11px; border-top:1px solid rgba(255,255,255,.22); }.picklecam-note b { color:var(--pb-yellow); font-size:.65rem; letter-spacing:.08em; }.picklecam-note span { font-size:.73rem; }
.pb-card { background:rgba(255,255,255,.96); border:1px solid var(--pb-border); border-radius:var(--pb-radius); padding:1.65rem; box-shadow:0 8px 22px rgba(29,62,53,.05); }.section-kicker { margin-bottom:5px; }.section-title { font-size:1.65rem; margin:0 0 18px; }.section-title span { color:var(--pb-green-dark); font-size:1rem; vertical-align:middle; }.form-label { font-size:.78rem; letter-spacing:.06em; color:#425d62; }.form-control { border:1px solid #d5e1dc; border-radius:11px; padding:.72rem .9rem; color:var(--pb-navy); box-shadow:none!important; }.form-control:focus { border-color:var(--pb-green); box-shadow:0 0 0 4px rgba(32,197,107,.12)!important; }.form-check-input:checked { background-color:var(--pb-green); border-color:var(--pb-green); }
#pb-courts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.court-card { --court:var(--pb-orange); --court-soft:#fff3e4; position:relative; overflow:hidden; border:1px solid #e3e9e7; border-radius:16px; padding:18px; cursor:pointer; background:linear-gradient(135deg,#fff,var(--court-soft)); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }.court-background { position:absolute; inset:0; background-position:center; background-size:cover; opacity:.35; mix-blend-mode:normal; }.court-card:before { content:""; position:absolute; width:130px; height:130px; border:1px solid var(--court); opacity:.18; border-radius:50%; right:-48px; top:-50px; box-shadow:0 0 0 17px rgba(255,255,255,.3),0 0 0 35px rgba(255,255,255,.2); }.court-card:hover { transform:translateY(-5px); border-color:var(--court); box-shadow:0 15px 25px color-mix(in srgb,var(--court) 20%,transparent); }.court-card.selected { border:2px solid var(--court); box-shadow:0 0 0 4px color-mix(in srgb,var(--court) 15%,transparent),0 15px 26px color-mix(in srgb,var(--court) 22%,transparent); }.court-abyss { --court:var(--pb-sky); --court-soft:#e8f8ff; }.court-volt { --court:var(--pb-yellow); --court-soft:#fffbe8; }.court-verdant { --court:var(--pb-green); --court-soft:#f0f9e9; }.court-card-top,.court-card h3,.court-card p,.court-card-meta,.court-card-action { position:relative; z-index:1; }.court-card-top { display:flex; align-items:center; justify-content:space-between; }.arena-icon { width:43px; height:43px; display:grid; place-items:center; color:#fff; background:var(--court); border-radius:13px 13px 13px 3px; font-size:1.3rem; box-shadow:4px 4px 0 color-mix(in srgb,var(--court) 25%,white); animation:float 3.5s ease-in-out infinite; }.court-type { margin-left:auto; color:var(--court); font-size:.63rem; font-weight:800; letter-spacing:.1em; }.selected-badge { position:absolute; right:0; top:40px; color:var(--court); font-size:.62rem; font-weight:800; }.court-card h3 { margin:24px 0 2px; color:var(--pb-navy); font:800 2rem 'Barlow Condensed'; letter-spacing:.035em; }.court-card p { font-size:.82rem; color:#6d7b80; margin:0 0 17px; }.court-card-meta { display:flex; align-items:center; justify-content:space-between; gap:5px; border-top:1px solid rgba(0,104,183,.1); padding-top:12px; }.court-card-meta strong { color:var(--court); font-size:1.02rem; }.court-card-meta strong small { font-size:.6rem; letter-spacing:.07em; }.court-card-meta span { display:flex; align-items:center; gap:5px; font-size:.61rem; font-weight:800; color:#607177; }.court-card-meta span i { display:inline-block; width:6px; height:6px; background:var(--court); box-shadow:none; }.court-card-action { margin:14px -18px -18px; padding:10px 18px; background:color-mix(in srgb,var(--court) 11%,white); color:var(--court); font-size:.68rem; letter-spacing:.08em; font-weight:800; }.court-card.selected .court-card-action { background:var(--court); color:#fff; }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(106px,1fr)); gap:9px; }.slot-btn { border-radius:10px; padding:.48rem .4rem; text-align:center; font-weight:700; border:1px solid transparent; cursor:pointer; user-select:none; min-height:61px; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:transform .15s ease,box-shadow .15s ease; }.slot-btn span { font-size:.98rem; }.slot-btn small { font-size:.56rem; letter-spacing:.08em; margin-top:2px; }.slot-btn.available { background:#effbf4;color:#087b47;border-color:#c4efd6; }.slot-btn.available:hover { transform:translateY(-2px); border-color:var(--pb-green); box-shadow:0 6px 13px rgba(32,197,107,.15); }.slot-btn.selected { background:var(--pb-navy);color:#fff;border-color:var(--pb-navy);box-shadow:0 5px 12px rgba(16,43,53,.2); }.slot-btn.held { background:#fff9e8;color:#ad7800;border-color:#f7df9b;cursor:not-allowed; }.slot-btn.booked,.slot-btn.blocked { background:#f2f4f4;color:#91a09e;border-color:#e2e7e5;cursor:not-allowed; }.slot-btn.past,.slot-btn.unavailable { background:#f3f4f6;color:#c3cccc;cursor:not-allowed; }.legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.72rem; font-weight:600; color:var(--pb-text-muted); margin:.65rem 0 1.15rem; }.legend .dot { display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle; }.legend .dot.available {background:var(--pb-green)}.legend .dot.held{background:var(--pb-gold)}.legend .dot.booked{background:#a8b4b3}.legend .dot.selected{background:var(--pb-navy)}
#pb-reserve-bar { bottom:16px!important; border:1px solid #b9ddef; box-shadow:0 15px 30px rgba(0,104,183,.14); }.pb-card.position-sticky { padding:1rem 1.2rem; }.pb-card.position-sticky .d-flex { align-items:center!important; }.pb-card.position-sticky #pb-reserve-summary span { display:block; color:var(--pb-blue); font-size:.62rem; letter-spacing:.1em; }.pb-card.position-sticky #pb-reserve-summary strong { display:block; font-size:.85rem; }.pb-card.position-sticky #pb-reserve-summary em { display:block; color:#71837f; font-size:.66rem; font-style:normal; font-weight:700; margin-top:2px; }.btn-pb-primary { background:var(--pb-red);border-color:var(--pb-red);color:#fff;font-weight:800;letter-spacing:.04em;padding:.76rem 1.2rem;border-radius:10px;box-shadow:0 7px 15px rgba(232,59,37,.25); }.btn-pb-primary:hover {background:#c82d1b;border-color:#c82d1b;color:#fff;box-shadow:0 9px 18px rgba(232,59,37,.32); }.btn-pb-primary:disabled {opacity:.6}.btn-pb-primary span { margin-left:7px; font-size:1.05em; }
.countdown-display {font-size:3.2rem;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;text-align:center;padding:.5rem 0}.countdown-display.warning{color:var(--pb-orange)}.countdown-display.danger{color:var(--pb-red);animation:pulse 1s infinite}.countdown-display.normal{color:var(--pb-green-dark)}.hold-banner{background:#f0fbf4;border:1px solid #c4efd6;border-radius:var(--pb-radius);padding:1.5rem;text-align:center}.status-badge{display:inline-block;padding:.3rem .85rem;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.03em}.status-badge.HELD{background:#fffbeb;color:#b45309}.status-badge.CONFIRMED,.status-badge.PAID{background:#ecfdf3;color:#15803d}.status-badge.CANCELLED{background:#f3f4f6;color:#6b7280}.status-badge.EXPIRED{background:#fef2f2;color:#b91c1c}.status-badge.BLOCKED{background:#eef2ff;color:#4338ca}
footer { position:relative; } .admin-court-image { display:block; width:100%; height:100px; object-fit:cover; border-radius:8px; margin:0 0 8px; } .admin-gallery-image { display:block; width:100%; height:190px; object-fit:contain; border-radius:10px; background:#edf4f5; } .social-links { display:flex; justify-content:center; gap:9px; margin-bottom:10px; }.social-link { display:grid; place-items:center; width:32px; height:32px; color:var(--pb-blue); background:#fff; border:1px solid #c8dfed; border-radius:9px; transition:transform .15s ease,background .15s ease,color .15s ease; }.social-link:hover { color:#fff; background:var(--pb-blue); transform:translateY(-2px); }.social-link svg { width:16px; height:16px; fill:currentColor; }.social-link svg rect,.social-link svg circle { fill:none; stroke:currentColor; stroke-width:2; }.social-link svg .dot-fill { fill:currentColor; stroke:none; } a { color:var(--pb-green-dark); } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:768px){.pb-hero{padding:2.2rem 1.65rem}.hero-logo{right:-19px;width:170px;max-width:42%;opacity:.45}.pb-step-indicator{justify-content:flex-start}.pb-step-indicator .arrow{transform:rotate(-90deg)} }
@media(max-width:576px){.navbar-brand small{display:none}.pixelball-logo{height:34px;max-width:90px}.pixelball-wordmark{font-size:1.55rem}.pb-hero h1{font-size:3rem}.pb-card{padding:1.2rem}.section-title{font-size:1.4rem}.updates-heading{align-items:start;flex-direction:column;gap:3px}.update-slide{min-height:220px}.update-copy{width:100%;padding:20px}.update-copy h3{font-size:1.5rem}.update-copy p{font-size:.78rem;max-width:77%}.update-image{width:53%;opacity:.42}.update-image:before{background:linear-gradient(90deg,var(--pb-blue),rgba(0,104,183,.1))}.announcement .update-image:before{background:linear-gradient(90deg,var(--pb-purple),rgba(104,74,155,.1))}.facility-info{padding:18px}.facility-overview,.facility-details{grid-template-columns:1fr}.facility-stat{min-height:67px}.rules-panel,.amenities-panel{padding:17px}.rules-panel ol,.amenities-panel ul{grid-template-columns:1fr}.rules-panel li{font-size:.74rem}#pb-courts{grid-template-columns:1fr}.court-card{min-height:0}.slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.slot-btn{min-height:56px}.pb-card.position-sticky{border-radius:15px;padding:.8rem}.pb-card.position-sticky .d-flex{align-items:stretch!important}.pb-card.position-sticky .btn{width:100%}.pb-card.position-sticky #pb-reserve-summary{width:100%}}
.footer-photo { width:100%; overflow:hidden; background:#173c5b; }
.footer-photo img { display:block; width:100%; height:auto; }
/* Keep the footer photo on smaller screens, but remove it from the desktop layout. */
@media (min-width:769px) { .footer-photo { display:none; } }