/* MOG — deep navy night + soft cool white; MOG blue → purple for actions, green as the third brand note */
:root{
  --bg:#0d1428; --ink:#f3f5f9; --accent:#3c83f6; --pop:#a274f2;
  --mog-grad:linear-gradient(135deg,#3c83f6,#9952e0);
  --mog-line:linear-gradient(90deg,#3c83f6,#9952e0 55%,#21c45d);
  --field:#21c45d;
  --f-display:'Markazi Text',serif; --f-body:'Readex Pro',sans-serif;
  --fg:var(--ink); --bgc:var(--bg);
  --r:22px; --gut:24px;
}
/* sections flip the palette: sand background, petrol text */
.sand{--fg:var(--bg); --bgc:var(--ink)}
:root,.sand{--line:color-mix(in srgb,var(--fg) 16%,transparent);--soft:color-mix(in srgb,var(--fg) 6%,transparent);--dim:color-mix(in srgb,var(--fg) 68%,transparent)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display,.brand-name,.foot-brand{font-family:var(--f-display);font-weight:700;font-synthesis:none;line-height:1.02;letter-spacing:-.015em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .display{line-height:1.15;letter-spacing:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.muted{color:var(--dim)}.small{font-size:.85rem}
:focus-visible{outline:2px solid var(--pop);outline-offset:3px;border-radius:6px}
.sand :focus-visible{outline-color:var(--accent)}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.band{padding:120px 0;background:var(--bgc);color:var(--fg)}
.two{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.display{font-size:clamp(2.6rem,6vw,5rem)}
.eyebrow,.eyebrow-s{font-size:.9rem;margin-bottom:22px}
.eyebrow{color:var(--ink);opacity:.85}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.head .muted{max-width:34ch}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;padding:14px var(--gut)}
.bar{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;padding-inline-start:18px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-size:1.7rem;line-height:1}
.top nav{display:flex;gap:28px;font-size:.95rem}
.top nav a{opacity:.85;transition:opacity .2s}
.top nav a:hover{opacity:1}
.tools{display:flex;align-items:center;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;height:40px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:transparent;border-radius:999px;padding:0 14px;font-size:.88rem;transition:border-color .2s,background .2s}
.pill:hover{border-color:var(--ink)}
.cta-nav{padding:0 20px;border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.menu{display:none;width:40px;padding:0;justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 110px;overflow:hidden}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-copy{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto;padding:0 var(--gut);pointer-events:none}
.hero-copy>*{max-width:540px}
.hero-copy .cta{pointer-events:auto}
.hero h1{font-size:clamp(3.4rem,8.4vw,7.4rem);margin-bottom:24px;transition:opacity .45s}
.hero h1.pending{opacity:0}
.lead{font-size:1.2rem;color:color-mix(in srgb,var(--ink) 78%,transparent);margin-bottom:36px;max-width:30ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:0 30px;height:58px;font-weight:600;transition:transform .2s,filter .2s}
.arr{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;transition:transform .25s}
[dir=rtl] .arr{transform:scaleX(-1)}
a:hover>.arr,button:hover>.arr{transform:translate(2px,-2px)}
[dir=rtl] a:hover>.arr,[dir=rtl] button:hover>.arr{transform:scaleX(-1) translate(2px,-2px)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn.ghost{background:transparent;border:1px solid color-mix(in srgb,currentColor 30%,transparent);color:inherit}
.hero .btn.ghost{color:var(--ink)}
.btn.full{width:100%;margin-top:16px}
.hero-bar{position:absolute;z-index:2;bottom:28px;inset-inline:0;width:min(1180px,100%);margin:0 auto;padding:0 var(--gut);display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.switch{display:flex;align-items:center;gap:10px}
.switch button{width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);background:none;font-size:1.2rem;line-height:1;transition:border-color .2s}
.switch button:hover{border-color:var(--ink)}
[dir=rtl] .switch button{transform:scaleX(-1)}
#hero-count{font-variant-numeric:tabular-nums;min-width:56px;text-align:center}

/* ---------- about ---------- */
#about{position:relative;overflow:hidden;padding-bottom:170px}
#about>.wrap{position:relative;z-index:1}
.ball-pit{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sub{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;margin-bottom:22px}
.body{font-size:1.1rem;max-width:44ch;margin-bottom:44px}
.rows{display:grid;grid-template-columns:210px 1fr;border-top:1px solid var(--line)}
.rows dt,.rows dd{padding:20px 0;border-bottom:1px solid var(--line)}
/* dt and dd share a grid row; both stretch to its height so the divider lines stay level */
.rows dd{display:flex;align-items:center}
.rows dt{font-weight:700}
.rows dd{color:var(--dim)}

/* ---------- court cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.court{border-radius:var(--r);background:var(--soft);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.court:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.art{position:relative;aspect-ratio:5/3;display:grid;place-items:center;overflow:hidden}
.art svg{width:84%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.court:hover .art svg{transform:scale(1.05) rotate(-2deg)}
.art-padel{background:var(--accent);color:var(--ink)}
.art-football{background:color-mix(in srgb,var(--field) 88%,var(--bg));color:var(--bg)}
.art.has-shot{background:radial-gradient(75% 85% at 50% 62%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 72%),color-mix(in srgb,var(--bg) 82%,#000);color:var(--ink)}
.art-padel{--glow:var(--accent)}.art-football{--glow:var(--field)}
.art.has-shot svg{display:none}
.art .shot{position:absolute;inset:9% 12%;width:76%;height:82%;object-fit:contain;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1);
  animation:drift 7s ease-in-out infinite}
.court:nth-child(2) .shot{animation-delay:-2.3s}.court:nth-child(3) .shot{animation-delay:-4.6s}
@keyframes drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:-1.4deg}}
.court:hover .art .shot{scale:1.07}
.rows dt{display:flex;align-items:center;gap:12px}
.mini{width:76px;height:76px;flex:none;display:block;margin-block:-8px}
.art .num{z-index:1;position:absolute;top:12px;inset-inline-start:16px;font-family:var(--f-display);font-size:1.1rem;opacity:.8}
.art .ball{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.court:hover .art .ball{transform:translate(-40px,6px)}
.cbody{padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tag{font-size:.78rem;letter-spacing:.08em;color:var(--pop)}
.court h3{font-size:2.1rem}
.desc{color:var(--dim);font-size:.95rem}
.meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.meta li{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.cfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.price b{font-size:1.4rem;font-family:var(--f-display)}
.price span{color:var(--dim);font-size:.85rem}
.go{height:42px;padding:0 18px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font-weight:600;transition:background .2s,color .2s}
.go:hover{background:var(--accent);color:#fff}

/* ---------- booking ---------- */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line);margin-bottom:22px}
.tab{border:0;background:transparent;border-radius:999px;height:44px;padding:0 26px;transition:background .2s,color .2s}
.tab.on{background:var(--fg);color:var(--bgc)}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:26px;scrollbar-width:thin}
.day{flex:0 0 auto;min-width:76px;text-align:center;border:1px solid var(--line);border-radius:16px;padding:10px 12px;background:transparent;transition:border-color .2s}
.day:hover{border-color:var(--fg)}
.day small{display:block;color:var(--dim);font-size:.78rem}
.day b{font-family:var(--f-display);font-size:1.7rem;line-height:1.1}
.day.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.day.on small{color:#fff;opacity:.85}
.grid{display:grid;gap:14px}
.pickers{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:22px}
.pickers .tabs{margin:0}
.crow{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:start}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.cname{display:flex;align-items:center;font-family:var(--f-display);font-weight:700;font-size:1.5rem}
.slot{border:1px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;background:var(--soft);transition:background .2s,color .2s,transform .2s,border-color .2s}
.slot:hover:not(:disabled){background:var(--fg);color:var(--bgc);transform:translateY(-2px)}
.slot b{display:block;font-size:1rem;white-space:nowrap}
.slot span{font-size:.8rem;color:var(--dim)}
.slot:hover:not(:disabled) span{color:inherit;opacity:.8}
.slot:disabled{cursor:not-allowed;opacity:.45;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px)}
.legend{display:flex;gap:22px;margin-top:20px;font-size:.85rem;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:8px}.legend b{font-weight:400}
.dot{width:14px;height:14px;border-radius:5px;display:inline-block;border:1px solid var(--line)}
.dot.free{background:var(--soft)}
.dot.taken{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px)}
.mine{margin-top:34px;display:grid;gap:8px}
.mine h3{font-size:1.6rem;margin-bottom:6px}
.mine .tk{border:1px dashed var(--accent);border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- steps ---------- */
.steps{list-style:none;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:70px 1fr;column-gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.steps b{grid-row:span 2;font-family:var(--f-display);font-size:1.6rem;color:var(--pop);line-height:1}
.steps h3{font-size:1.7rem;margin-bottom:4px}
.steps p{color:var(--dim)}

/* ---------- visit ---------- */
.hours{margin-top:26px;font-size:1.25rem}
.links{border-top:1px solid var(--line)}
.links a{display:grid;grid-template-columns:130px 1fr auto;gap:16px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:padding .25s}
.links a:hover{padding-inline-start:10px}
.links span{color:var(--dim);font-size:.9rem}
.links b{font-size:1.15rem;font-weight:500}
.links .arr{font-size:1.25rem}

.foot{padding:40px 0;background:var(--bg);color:var(--ink)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand{font-size:2.2rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:1.15rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:11px;height:11px;margin-inline-end:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(3px) rotate(225deg)}
.faq details p{padding:0 0 22px;color:var(--dim);max-width:60ch}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{opacity:.75}.foot-links a:hover{opacity:1}
.pay-box{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px dashed var(--line);font-size:.9rem}
.pay-box[hidden]{display:none}
#m-accounts>div+div{margin-top:6px;font-weight:600}
.pay-box .up{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);white-space:normal}
.pay-box .up span{font-weight:600}
.pay-box .up input{width:100%;background:color-mix(in srgb,#fff 50%,transparent);border:1px solid var(--line);border-radius:10px;padding:8px}
.pay-box .up small{opacity:.7}
.track-link{display:inline-block;margin-top:6px;color:var(--pop);text-decoration:underline}
.copy{margin-inline-start:6px;border:1px solid var(--line);background:transparent;border-radius:999px;font-size:.75rem;padding:2px 10px}

/* ---------- secondary pages (track, policies, 404) ---------- */
.card-box{background:color-mix(in srgb,#fff 45%,transparent);border:1px solid var(--line);border-radius:22px;padding:24px}
body.page{background:var(--ink);color:var(--bg);min-height:100svh;display:flex;flex-direction:column}
body.page main{flex:1}
.ptop{padding:14px var(--gut)}
.ptop .brand-name{font-size:1.7rem}
.doc{max-width:820px;padding-block:56px 90px}
.doc .display{margin-bottom:22px}
.doc h2{font-size:2rem;margin:44px 0 12px;scroll-margin-top:20px}
.doc ul{padding-inline-start:22px;display:grid;gap:10px}
.doc li{line-height:1.75}
.doc a{text-decoration:underline}
.doc>article>.small{margin-top:40px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.toc a{text-decoration:none!important;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.88rem}
.track{max-width:640px;padding-block:56px 90px}
.track .display{margin-bottom:10px}
.tform{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:26px}
.tform .field{margin:0}
.tform .btn{height:46px}
.tcard{margin-top:22px;display:grid;gap:12px}
.tcard .thead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tcard .thead b{font-size:1.4rem}
.tcard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.tcard dt{opacity:.65}.tcard dd{font-weight:600}
.tcard a{text-decoration:underline}
body.nf{background:var(--bg);color:var(--ink);min-height:100svh;display:grid;place-items:center;padding:24px;text-align:center;overflow:hidden}
.nf-main{max-width:560px;display:grid;justify-items:center;gap:10px}
.nf-ball{width:96px;height:96px;animation:nfbounce 1.4s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes nfbounce{from{transform:translateY(-40px) rotate(0)}to{transform:translateY(0) rotate(160deg)}}
.nf-code{font-family:var(--f-display);font-size:5rem;line-height:1;color:var(--pop)}
.nf .display{font-size:clamp(2.2rem,7vw,3.6rem)}
.nf .lead{margin:6px 0 22px}
@media(max-width:600px){.tform{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}
.modal[hidden],.panel[hidden],.gear[hidden]{display:none}
.sheet{background:var(--ink);color:var(--bg);--fg:var(--bg);--line:color-mix(in srgb,var(--bg) 16%,transparent);--soft:color-mix(in srgb,var(--bg) 6%,transparent);border-radius:26px;padding:28px;width:min(460px,100%);max-height:92vh;overflow:auto;position:relative}
.sheet h3{font-size:2.2rem;margin-bottom:14px}
.x{position:absolute;top:14px;inset-inline-end:18px;background:none;border:0;font-size:1.8rem;line-height:1}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-bottom:12px;padding:14px;border-radius:14px;background:var(--soft)}
.sheet dt{opacity:.65}.sheet dd{font-weight:600}
.field{display:block;margin-top:12px}.field>span{display:block;font-size:.85rem;opacity:.75;margin-bottom:4px}
.field input{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.radios{display:grid;gap:8px}
.radios label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.radios input{accent-color:var(--accent);width:18px;height:18px;flex:none;padding:0}
.noref{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.9rem}
.noref p{font-weight:600;margin-bottom:8px}
.noref label{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;cursor:pointer}
.noref input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.noref a{display:inline-block;margin-top:6px;margin-inline-start:30px;text-decoration:underline}
.err{margin-top:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:#9a2a0c;font-size:.9rem}
.err[hidden]{display:none}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.st{font-size:.8rem;border-radius:999px;padding:2px 10px;border:1px solid var(--line)}
.st-confirmed{background:var(--fg);color:var(--bgc)}
.st-cancelled{text-decoration:line-through;opacity:.6}
.done{margin-top:14px;padding:12px;border-radius:12px;background:var(--bg);color:var(--ink);font-weight:600;text-align:center}

/* ---------- theme editor ---------- */
.gear{position:fixed;bottom:20px;inset-inline-start:20px;z-index:40;width:50px;height:50px;border-radius:50%;border:0;background:var(--pop);color:var(--bg);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.panel{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(340px,100%);z-index:60;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.45)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(0,0,0,.12)}
.panel-head button{background:none;border:0;font-size:1.6rem}
.panel-body{padding:8px 18px 24px;overflow:auto}
.panel h4{margin:18px 0 6px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0;font-size:.9rem}
.row.col{flex-direction:column;align-items:stretch;gap:4px}
.row input[type=color]{width:44px;height:30px;border:0;padding:0;background:none;cursor:pointer}
.row input[type=text],.row input[type=number],.row select{border:1px solid rgba(0,0,0,.2);background:rgba(255,255,255,.5);border-radius:8px;padding:6px 8px;max-width:170px}
.row.col input{max-width:none}

/* ---------- tablet ---------- */
@media(max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr;gap:36px}
}
/* ---------- phone ---------- */
@media(max-width:760px){
  :root{--gut:16px}
  .top{padding:10px 12px}
  .bar{padding-inline-start:12px}
  .brand-name{font-size:1.45rem}
  .cta-nav{display:none}
  .menu{display:inline-flex}
  .top nav{position:absolute;top:calc(100% + 4px);inset-inline:12px;flex-direction:column;gap:0;padding:8px;border-radius:22px;background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s}
  .top nav a{padding:14px 12px;font-size:1.05rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
  .top nav a:last-child{border-bottom:0}
  .top.open nav{opacity:1;pointer-events:auto;transform:none}

  .hero{flex-direction:column;align-items:stretch;padding:0 0 40px;min-height:auto}
  .hero-bar{order:1}.hero-copy{order:2}
  #stage{position:relative;height:56svh;max-height:520px;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .hero-bar{position:static;margin:-36px 0 26px;padding:0 var(--gut)}
  .hero h1{font-size:clamp(3rem,15vw,4.4rem);margin-bottom:16px}
  .lead{font-size:1.05rem;margin-bottom:26px}
  .cta .btn{flex:1;padding:0 18px;height:54px}

  .band{padding:76px 0}
  #about{padding-bottom:120px}
  .head{margin-bottom:28px}
  .rows{grid-template-columns:150px 1fr}
  .mini{width:52px;height:52px}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .court{flex:0 0 84%;scroll-snap-align:center}
  .tabs{display:flex}.tab{flex:1;padding:0 12px}
  .crow{grid-template-columns:1fr;gap:8px}
  .chips{grid-template-columns:repeat(3,1fr);gap:6px}
  .pickers{flex-direction:column}
  .cname{grid-column:1/-1;font-size:1.3rem;margin-top:6px}
  .slot{padding:14px 6px}
  .links a{grid-template-columns:1fr auto;row-gap:2px}
  .links span{grid-column:1/-1}
  .links .arr{grid-row:2;grid-column:2}
  .steps li{grid-template-columns:50px 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- MOG identity ---------- */
/* depth instead of flat black: two faint brand glows behind the hero model */
.hero{background:radial-gradient(55% 60% at 14% 34%,rgba(60,131,246,.17),transparent 70%),radial-gradient(48% 52% at 90% 88%,rgba(153,82,224,.15),transparent 72%),var(--bg)}
.band:not(.sand){background:linear-gradient(180deg,var(--bg),#101a33)}
.btn:not(.ghost){background:var(--mog-grad);box-shadow:0 12px 30px -14px rgba(118,92,240,.7)}
.brand-logo{height:36px;width:auto;display:block}
.foot-logo{height:44px;width:auto;display:block}
.foot{position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--mog-line)}
.eyebrow-s::before{content:"";display:inline-block;width:26px;height:3px;border-radius:3px;background:var(--mog-line);vertical-align:middle;margin-inline-end:10px}
#faq{--bgc:#fbfbfd}

/* ---------- bowling (info) — the purple room of the page ---------- */
.bowl{background:radial-gradient(70% 80% at 85% 20%,rgba(153,82,224,.32),transparent 65%),radial-gradient(60% 70% at 10% 90%,rgba(60,131,246,.16),transparent 70%),#120f2a!important}
.bowl-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.bowl-photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px -30px rgba(153,82,224,.55)}
.bowl-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bowl-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bowl-lead{font-size:1.1rem;color:color-mix(in srgb,var(--ink) 80%,transparent);margin:18px 0 26px;max-width:46ch}
.bowl-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.bowl-feats li{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(162,116,242,.28);font-size:.92rem}
.bowl-feats li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#a274f2;margin-inline-end:10px;box-shadow:0 0 10px #a274f2}
.bowl-soon{opacity:.7;margin-bottom:22px}
@media (max-width:860px){.bowl-grid{grid-template-columns:1fr;gap:36px}.bowl-photo{aspect-ratio:4/3}.bowl-feats{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:12px}
.gi{position:relative;grid-row:span 2;border:0;padding:0;border-radius:18px;overflow:hidden;background:#d9dde6;cursor:zoom-in;box-shadow:0 14px 30px -22px rgba(13,20,40,.55)}
.gi.wide{grid-column:span 2}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.gi:hover img{transform:scale(1.06);filter:saturate(1.08)}
.gi span{position:absolute;inset-inline-start:12px;bottom:12px;padding:6px 12px;border-radius:999px;font-size:.78rem;color:#fff;background:rgba(13,20,40,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;translate:0 6px;transition:opacity .3s,translate .3s}
.gi:hover span,.gi:focus-visible span{opacity:1;translate:0 0}
#gallery .head{margin-bottom:32px}
#gallery .tabs{margin:0}
.lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(7,10,22,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:56px 16px}
.lb[hidden]{display:none}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb img{max-width:min(92vw,1100px);max-height:80vh;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb figcaption{color:#c9cfdd;font-size:.85rem}
.lb-x{position:absolute;top:14px;inset-inline-end:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:1.6rem;line-height:1}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:1.6rem;line-height:1}
.lb-prev{inset-inline-start:16px}.lb-next{inset-inline-end:16px}
[dir=rtl] .lb-nav{transform:scaleX(-1)}
.lb-nav:hover,.lb-x:hover{background:rgba(255,255,255,.14)}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:8px}.gi{border-radius:14px}.lb-nav{top:auto;bottom:14px;translate:none}}
#gallery .tab{white-space:nowrap}@media (max-width:760px){#gallery .tabs{width:100%}#gallery .tab{padding:0 10px}}

/* ---------- request-then-pay flow ---------- */
.hours{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-8px 0 24px}
.hours-l{font-weight:600}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px}
.stepper button{width:42px;height:42px;border-radius:50%;border:0;background:var(--fg);color:var(--bgc);font-size:1.3rem;line-height:1;transition:opacity .2s,transform .15s}
.stepper button:active{transform:scale(.92)}
.stepper button:disabled{opacity:.25;cursor:not-allowed}
.stepper b{min-width:92px;text-align:center;font-size:1.05rem}
.hours-total{color:var(--dim);font-size:.95rem}
.noroom{padding:14px 16px;border-radius:14px;background:var(--soft);border:1px dashed var(--line);margin-bottom:14px}
.flow{list-style:none;counter-reset:f;display:grid;gap:8px;margin-top:16px;padding:14px;border-radius:14px;background:var(--soft);font-size:.9rem}
.flow li{counter-increment:f;display:flex;gap:10px;align-items:baseline}
.flow li::before{content:counter(f);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#fff;background:var(--mog-grad)}
.done small{display:block;font-weight:400;opacity:.85;margin-top:6px;line-height:1.6}
.mine a.tk{color:inherit;text-decoration:none}
.st-requested{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.st-awaiting_payment{background:var(--mog-grad);color:#fff;border-color:transparent}
.st-paid{background:color-mix(in srgb,#21c45d 18%,transparent)}
.st-rejected,.st-expired{opacity:.6}
.tsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:.78rem;text-align:center}
.tsteps li{padding-top:10px;border-top:4px solid var(--line);opacity:.55}
.tsteps li.past{border-color:var(--accent);opacity:.9}
.tsteps li.now{border-color:#9952e0;opacity:1;font-weight:700}
.paybox{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pay-dead{font-size:.95rem}.pay-dead b{font-size:1.15rem;color:#7a3fc4}
.accts{display:grid;gap:6px;font-size:.92rem;padding:10px 12px;border-radius:12px;background:var(--soft)}
.paybox .field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}