/* ==========================================================================
   DINK DISTRICT — "The Court is the Layout"
   Layered on top of theme.css. The page is read like a rally: baseline → mid-court
   → kitchen → net. Everything here is built from real pickleball court geometry
   (20 × 44 ft, 7 ft non-volley zone, 34 in net), not from a generic store template.

   1. Net-tape header           4. Court-line dimension dividers
   2. Booking-first nav (Play)  5. Top-down court section backgrounds
   3. Live court map            6. Rally rail (scroll position)  +  mobile book dock
   ========================================================================== */

:root {
  --court-line: rgba(255, 255, 255, .92);
  --court-zone: rgba(43, 89, 224, .07);   /* kitchen / non-volley zone tint */
}

/* ==========================================================================
   1. NET-TAPE HEADER — the header's lower edge is a net: white tape on top,
      diamond mesh hanging below it.
   ========================================================================== */
.header::after {
  inset: auto 0 -11px 0;
  height: 11px;
  opacity: 1;
  background:
    linear-gradient(var(--tape, #fff), var(--tape, #fff)) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(45deg, transparent 0 4px, var(--mesh, rgba(255, 255, 255, .5)) 4px 5px),
    repeating-linear-gradient(-45deg, transparent 0 4px, var(--mesh, rgba(255, 255, 255, .5)) 4px 5px);
  -webkit-mask: linear-gradient(#000 0 3px, rgba(0, 0, 0, .85) 3px, transparent 100%);
          mask: linear-gradient(#000 0 3px, rgba(0, 0, 0, .85) 3px, transparent 100%);
  pointer-events: none;
}
.header.is-stuck::after { opacity: 1; --tape: var(--ink); --mesh: rgba(10, 31, 28, .42); }
/* the hanging mesh must clear the viewport when the header slides away */
.header.is-hidden { transform: translateY(calc(-100% - 16px)); }
.header.is-hidden .mega { visibility: hidden; opacity: 0; }

/* ==========================================================================
   2. BOOKING-FIRST NAV
   ========================================================================== */
.nav__link--play { color: var(--lime); }
.header.is-stuck .nav__link--play { color: var(--ink); }
.nav__link--play::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(215, 242, 58, .7); animation: ping 1.8s infinite;
}
.header.is-stuck .nav__link--play::before { background: var(--blue); box-shadow: 0 0 0 0 rgba(43, 89, 224, .5); }

.header__book { gap: 9px; }
.header__book::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 0 rgba(10, 31, 28, .5); animation: pingInk 1.8s infinite;
}
@keyframes pingInk { 70% { box-shadow: 0 0 0 8px rgba(10, 31, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 31, 28, 0); } }

.mega--play { width: min(660px, 92vw); grid-template-columns: 1fr 1fr 248px; }
.mega--play li a small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: -1px; }
.mega--play li a { padding: 6px 0; }

/* live availability card (mega menu + mobile menu + book bar share it) */
.live-card {
  position: relative; overflow: hidden; isolation: isolate; flex: none;
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: var(--ink); color: #fff; border-radius: var(--r-m);
}
.live-card small {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10.5px var(--f-display); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
.live-card small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: ping 1.8s infinite; }
.live-card strong { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: 19px; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.live-card strong b { color: var(--lime); font-size: 34px; letter-spacing: -.04em; margin-right: 4px; }
.live-card .link-arrow { align-self: flex-start; color: #fff; font-size: 11.5px; }
.live-card:hover .link-arrow .i { transform: translateX(4px); }

/* ==========================================================================
   3. LIVE COURT MAP — twelve little courts drawn top-down, net and kitchen lines
      included. Lime = open, ghosted = taken.
   ========================================================================== */
.courtmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.courtmap .cm {
  --c: var(--lime); --ln: rgba(10, 31, 28, .5);
  position: relative; aspect-ratio: 1 / 1.9; border-radius: 3px; background-color: var(--c);
  background-image:
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)),
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln));
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 1px, 100% 1px, 1px 34%, 1px 34%;   /* net, kitchen ×2, centre line ×2 */
  background-position: 0 50%, 0 34%, 0 66%, 50% 0, 50% 100%;
  transition: background-color .35s, transform .35s var(--ease);
}
.courtmap .cm.is-open:hover { transform: translateY(-3px); }
.courtmap .cm.is-taken { --c: rgba(255, 255, 255, .13); --ln: rgba(255, 255, 255, .22); }
.courtmap--light .cm.is-taken { --c: rgba(10, 31, 28, .12); --ln: rgba(10, 31, 28, .2); }
.courtmap--row { grid-template-columns: repeat(12, 1fr); gap: 5px; width: min(300px, 100%); }
.courtmap--row .cm { aspect-ratio: 1 / 1.7; }

/* live strip under the home-page booking bar */
.book__live { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.book__live b { color: var(--ink); font-family: var(--f-display); font-stretch: 112%; font-weight: 800; letter-spacing: -.01em; }
.book__live a { margin-left: 4px; }

/* ==========================================================================
   4. COURT-LINE DIMENSION DIVIDERS — an engineer's dimension line with the actual
      measurement of the zone you are about to enter.
   ========================================================================== */
.cline {
  width: min(1360px, 100% - (var(--gutter) * 2)); margin: clamp(10px, 2vw, 28px) auto 0;
  display: flex; align-items: center; gap: 18px; color: var(--ink-3);
}
.cline__tag {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px var(--f-display); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase;
}
.cline__tag i { font-style: normal; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--lime); font-size: 10px; letter-spacing: .06em; }
.cline__rule { position: relative; flex: 1; height: 14px; border-inline: 1.5px solid currentColor; }
.cline__rule::before {                       /* the painted line, drawn left → right on reveal */
  content: ""; position: absolute; inset: 50% 0 auto; height: 3px; margin-top: -1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) .15s;
}
.cline.in .cline__rule::before { transform: none; }
.cline__rule::after {                        /* kitchen-line hatch: a row of short ticks under the line */
  content: ""; position: absolute; inset: auto 0 -1px; height: 5px; opacity: .45;
  background: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 14px);
}
.cline__dim {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  padding: 0 14px; background: var(--cream); white-space: nowrap;
  font: 700 12px var(--f-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.cline__dim em { font-style: normal; color: var(--blue); }
.cline__go { flex: none; font: 600 12.5px var(--f-body); color: var(--muted); letter-spacing: 0; text-transform: none; }
.cline--tight { margin-top: 0; }

/* ==========================================================================
   5. TOP-DOWN COURT BACKGROUNDS — a full court drawn behind a section: sidelines,
      centre lines, 7 ft kitchen lines and the net, with the kitchen zones tinted.
   ========================================================================== */
.court-bg { position: relative; isolation: isolate; overflow: hidden; }
.court-bg > .container { position: relative; z-index: 1; }
.court-bg::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 904 424' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23fff' stroke-width='5' stroke-opacity='.6' stroke-linecap='square'%3E%3Crect x='0' y='0' width='880' height='400'/%3E%3Cpath d='M300 0V400M580 0V400M0 200H300M580 200H880'/%3E%3Cpath d='M440 -12V412' stroke-width='6' stroke-dasharray='2 14'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.court-bg--right::before { background-position: 8% 50%; background-size: auto 150%; transform: scaleX(-1); }
/* a soft cream wash keeps the type readable and lets the lines read as paint, not decoration */
.court-bg::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(235, 232, 220, 0) 30%, rgba(235, 232, 220, .85) 100%);
}

/* ==========================================================================
   6. RALLY RAIL — a slim vertical court on the left edge. The ball travels from the
      baseline to the net as you scroll; stops are tappable section links.
   ========================================================================== */
.rail {
  position: fixed; z-index: 45; left: 5px; top: 50%; transform: translateY(-50%);
  width: 18px; height: calc(min(44vh, 360px) + 24px); border-radius: 999px;
  background: rgba(10, 31, 28, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
  display: none; opacity: 0; transition: opacity .5s;
}
.rail.is-on { opacity: 1; }
.rail__in { position: absolute; inset: 12px 0; }
.rail__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .22); border-radius: 2px; }
.rail__fill { position: absolute; left: 0; top: 0; width: 100%; background: var(--lime); border-radius: 2px; height: var(--p, 0%); }
.rail__stop {
  position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  display: grid; place-items: center;
}
.rail__stop::before { content: ""; width: 10px; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .8); transition: background .25s, width .25s; }
.rail__stop.is-passed::before { background: var(--lime); }
.rail__stop span {
  position: absolute; left: 26px; top: 50%; transform: translate(-6px, -50%); padding: 7px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .3s var(--ease);
  font: 700 11px var(--f-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 24px -8px rgba(10, 31, 28, .5);
}
.rail__stop span b { color: var(--lime); margin-right: 6px; }
.rail__stop:hover span, .rail__stop:focus-visible span, .rail__stop.is-here span { opacity: 1; transform: translate(0, -50%); }
.rail__ball {
  position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 2px var(--ink), 0 0 14px rgba(215, 242, 58, .75);
  transform: translateY(var(--y, 0px)); pointer-events: none;
}
@media (min-width: 1100px) { .rail { display: block; } }

/* ---------- mobile / tablet book dock (the header Book button hides below 1180px) ---------- */
.dock {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 16px;
  background: var(--ink); color: #fff; border-radius: 999px; box-shadow: var(--shadow-l), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateY(160%); transition: transform .5s var(--ease);
}
.dock.is-on { transform: none; }
.dock__txt { flex: 1; min-width: 0; line-height: 1.15; }
.dock__txt b { display: block; font: 800 14px var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__txt b em { font-style: normal; color: var(--lime); }
.dock__txt span { font-size: 11.5px; color: rgba(255, 255, 255, .62); font-weight: 600; }
.dock .courtmap--row { width: 92px; flex: none; gap: 3px; }
.dock .btn { height: 44px; padding: 0 20px; flex: none; }
.mm-live { margin: 4px 0 14px; }

@media (max-width: 1180px) {
  .dock { display: flex; }
  .to-top { bottom: 82px; }
  .toast { bottom: 84px; transform: translate(-50%, calc(100% + 140px)); }
  .toast.is-on { transform: translate(-50%, 0); }
  .mega--play { display: none; }
}
@media (max-width: 480px) {
  .dock .courtmap--row { display: none; }
  .cline__go { display: none; }
  .cline { gap: 12px; }
  .cline__tag span { display: none; }
}
@media (max-width: 640px) {
  .cline__dim { font-size: 11px; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .cline__rule::before { transform: none; }
  .nav__link--play::before, .header__book::before { animation: none; }
}