:root{--ref-w:1024;--ref-h:1536;--navy:#001a43;--red:#e40012;--white:#fff;--ink:#0a1d43}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#08172c}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#08172c;color:#0a1d43}
.page-shell{width:100%;display:flex;justify-content:center;background:#08172c}
.mockup-canvas{position:relative;width:min(100vw,1024px);aspect-ratio:2/3;background:#fff;overflow:hidden}
.mockup-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Navigation links are transparent over the exact mockup artwork; hover text recreates the requested behavior. */
.nav-hotspots a,.book-hotspot{position:absolute;z-index:12;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;white-space:nowrap}
.nav-home{left:25.1%;top:1.0%;width:7.1%;height:3.5%}
.nav-leagues{left:32.8%;top:1.0%;width:10.2%;height:3.5%}
.nav-birthday{left:43.6%;top:1.0%;width:17.0%;height:3.5%}
.nav-menu{left:61.1%;top:1.0%;width:7.0%;height:3.5%}
.nav-contact{left:69.0%;top:1.0%;width:9.8%;height:3.5%}
.book-hotspot{left:79.7%;top:.9%;width:19.0%;height:3.6%;border-radius:5px}

.nav-hotspots a.active{color:#fff}
.nav-hotspots a:hover,.nav-hotspots a:focus-visible{
  color:#e40012;
  background:transparent;
  outline:none;
}


/* Planner overlay precisely replaces the white controls and navy total strip in the screenshot. */
.planner-overlay{position:absolute;z-index:8;left:64.65%;top:67.92%;width:30.90%;height:15.90%;pointer-events:auto}
.planner-fields{position:absolute;left:1.2%;right:1.1%;top:17.6%;height:45.2%;display:grid;grid-template-rows:repeat(3,1fr);gap:3.8%}
.planner-fields label{display:grid;grid-template-columns:43% 57%;align-items:center;font-size:clamp(6px,1.0vw,13px);font-weight:700;color:#0b1b3e;min-width:0}
.planner-fields label span{padding-left:1px}
.planner-fields select{width:100%;height:100%;min-width:0;border:1px solid #abb6c7;border-radius:3px;background:#fff;color:#0a1d43;padding:0 7% 0 7%;font:600 clamp(6px,1.05vw,13px)/1 Arial,sans-serif;outline:none;appearance:auto}
.planner-fields select:focus{outline:2px solid #e40012;outline-offset:1px}
.estimate-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:12.4%;
  height:22.7%;
  background:#001a43;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6.5%;
  color:#fff;
}
.estimate-overlay span{font-family:Impact,'Arial Narrow Bold',sans-serif;font-size:clamp(8px,1.45vw,18px);letter-spacing:.01em}
.estimate-overlay strong{font-family:Impact,'Arial Narrow Bold',sans-serif;color:#f10b19;font-size:clamp(11px,2.0vw,27px);font-weight:900}

/* Bottom booking overlay */
.booking-overlay{position:absolute;z-index:9;left:22.8%;top:85.47%;width:72.0%;height:9.38%;margin:0}
.booking-grid{position:absolute;left:0;top:0;width:75.4%;height:100%;display:grid;grid-template-columns:1fr .63fr .63fr;grid-template-rows:19% 19% 19% 22%;column-gap:1.6%;row-gap:5%}
.booking-grid input,.booking-grid select,.booking-grid textarea{width:100%;height:100%;min-width:0;border:1px solid #b6bfcc;border-radius:2px;background:#fff;color:#172544;padding:0 4%;font:500 clamp(5px,.82vw,10px)/1 Arial,sans-serif;outline:none}
.booking-grid input:focus,.booking-grid select:focus,.booking-grid textarea:focus{outline:2px solid #e40012;outline-offset:0}
#parentName{grid-column:1/2;grid-row:1}
#phone{grid-column:2/4;grid-row:1}
#email{grid-column:1/2;grid-row:2}
#preferredDate{grid-column:2/3;grid-row:2}
#preferredTime{grid-column:3/4;grid-row:2}
#children{grid-column:1/2;grid-row:3}
#pizza{grid-column:2/3;grid-row:3}
#soda{grid-column:3/4;grid-row:3}
#bumpers{grid-column:1/2;grid-row:4}
#notes{grid-column:2/4;grid-row:4;resize:none;padding-top:2.8%}
.send-button{
  position:absolute;
  right:0;
  top:4.1%;
  width:22.4%;
  height:29.8%;
  border:0;
  border-radius:0;
  background:transparent url("assets/send-party-request-exact.png") center/100% 100% no-repeat;
  color:transparent;
  cursor:pointer;
  box-shadow:none;
  padding:0;
  overflow:hidden;
}
.send-button:focus-visible{outline:3px solid #ffd65a;outline-offset:2px}
.form-status{position:absolute;right:0;top:36%;width:22.4%;margin:0;text-align:center;color:#001a43;font-size:clamp(5px,.68vw,9px);line-height:1.25;font-weight:700}

@media(max-width:700px){
  .planner-fields select,.booking-grid input,.booking-grid select,.booking-grid textarea{padding-left:3%;padding-right:3%}
  .send-button{font-family:Arial,sans-serif;font-weight:900}
}

@media(max-width:420px){
  /* Preserve the pixel composition on narrow phones while keeping controls tappable enough for practical use. */
  .mockup-canvas{width:100vw}
  .planner-overlay,.booking-overlay{font-size:5px}
}

/* Artwork cleanup layers */
.book-hotspot{color:transparent;z-index:12}
.booking-background-mask{
  position:absolute;
  z-index:7;
  left:22.15%;
  top:84.75%;
  width:74.25%;
  height:10.5%;
  background:#fff;
  border:1px solid #d7dde7;
  border-radius:0 6px 6px 0;
}
.plan-panel,.estimate-panel,.planner,.party-planner,
#planParty,#partyPlanner,#estimateForm,
.live-controls,.booking-controls{
  position:relative;
  z-index:8;
}


/* v4: remove the baked-in bottom phone-number box from the reference artwork. */
/* v6: hide ONLY the baked-in controls below the PLAN YOUR PARTY heading.
   Live JavaScript controls remain layered above this clean white surface. */
/* Ensure every live planner control renders above the mask. */
.plan-panel,
.estimate-panel,
.planner,
.party-planner,
#planParty,
#partyPlanner,
#estimateForm,
.live-controls,
.booking-controls,
.plan-controls,
.plan-your-party-controls{
  position:relative;
  z-index:10;
}


/* v8: remove the phone number printed at the bottom of the mockup. */


/* v10 cleanup: all artifact-removal layers are now confined to the mockup canvas. */
.planner-overlay::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:16.2%;
  bottom:4.5%;
  background:#fff;
  border-radius:0 0 8px 8px;
  z-index:-1;
  pointer-events:none;
}

.footer-phone-clean-v10{
  position:absolute;
  left:37.1%;
  top:96.42%;
  width:11.9%;
  height:1.72%;
  background:#001a43;
  z-index:14;
  pointer-events:none;
}


/* v11: exact booking confirmation artwork from the approved visual mockup. */
.booking-confirmation-art{
  position:absolute;
  right:-0.15%;
  top:35.6%;
  width:23.7%;
  height:65.8%;
  background:transparent url("assets/booking-confirmation-exact.png") center top/100% 100% no-repeat;
  pointer-events:none;
  z-index:2;
}

/* Status messages can still appear without permanently covering the restored artwork. */
.form-status{
  z-index:3;
  background:rgba(255,255,255,.94);
}
.form-status:empty{
  display:none;
}


/* v13: keep the tax/balance note clear of the total bar. */
.planner-tax-note{
  position:absolute;
  left:2.1%;
  right:1.5%;
  bottom:1.25%;
  height:7.8%;
  display:flex;
  align-items:center;
  color:#0a1d43;
  background:#fff;
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  font-size:clamp(5px,.76vw,10px);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  z-index:12;
  pointer-events:none;
}



/* v22 — single clean navigation behavior for every link */
.nav-hotspots a{
  background:transparent;
  color:#ffffff;
  font-family:Impact,"Arial Narrow Bold",Arial,sans-serif;
  font-size:clamp(8px,1.35vw,17px);
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
  text-shadow:none;
}
.nav-hotspots a:visited{
  color:#ffffff;
}
.nav-hotspots a:hover,
.nav-hotspots a:focus-visible,
.nav-hotspots a:visited:hover{
  color:#e40012;
  background:transparent;
  outline:none;
}

/* v33 — exact approved Send Party Request card artwork */
.booking-confirmation-art{display:none !important;}

/* v34 — render the approved Send Party Request card exactly as baked into the mockup.
   Keep the form/card cleanup layer only under the editable fields, not under the right card. */
.booking-background-mask{
  width:56.0% !important;
  border-radius:0 !important;
}
.send-button{
  background:none !important;
  color:transparent !important;
  opacity:1 !important;
  z-index:20;
}
.booking-confirmation-art{
  display:none !important;
}
.form-status:empty{
  display:none !important;
}

/* v41 — mobile-only usability layer. Desktop/tablet above 700px is unchanged. */
@media (max-width:700px){
  body,.page-shell{background:#eef3f9}
  .page-shell{display:block}
  .mockup-canvas{
    width:100%;
    max-width:none;
    aspect-ratio:auto;
    height:calc(150vw + 1120px);
    min-height:1600px;
    overflow:hidden;
    background:#eef3f9;
  }
  .mockup-image{
    position:absolute;
    left:0;top:0;
    width:100%;height:auto;
  }

  /* Larger, horizontally scrollable navigation on phones. */
  .nav-hotspots{
    position:absolute;
    left:0;right:0;top:0;
    height:48px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:2px;
    padding:0 8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    background:rgba(0,26,67,.96);
    scrollbar-width:none;
  }
  .nav-hotspots::-webkit-scrollbar{display:none}
  .nav-hotspots a{
    position:static !important;
    flex:0 0 auto;
    width:auto !important;
    height:44px !important;
    padding:0 11px;
    font-size:13px !important;
    line-height:1;
  }
  .book-hotspot{
    left:auto !important;
    right:10px !important;
    top:54px !important;
    width:auto !important;
    height:42px !important;
    padding:0 14px;
    background:#e40012;
    color:#fff;
    border-radius:7px;
    font:800 12px/1 Arial,sans-serif;
    z-index:40;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }

  /* The desktop cleanup masks are not needed once the controls become mobile cards. */
  .booking-background-mask,.footer-phone-clean-v10{display:none !important}

  /* Mobile planner card placed below the original visual. */
  .planner-overlay{
    left:16px !important;
    right:16px !important;
    top:calc(150vw + 24px) !important;
    width:auto !important;
    height:292px !important;
    padding:16px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,26,67,.15);
    font-size:16px !important;
  }
  .planner-overlay::before{display:none !important}
  .planner-fields{
    position:static !important;
    height:auto !important;
    display:grid;
    grid-template-rows:none !important;
    gap:10px;
  }
  .planner-fields label{
    display:grid;
    grid-template-columns:1fr 1.18fr;
    gap:10px;
    align-items:center;
    min-height:46px;
    font-size:15px !important;
  }
  .planner-fields label span{padding:0}
  .planner-fields select{
    min-height:46px;
    padding:0 10px !important;
    border-radius:7px;
    font:600 16px/1 Arial,sans-serif !important;
  }
  .estimate-overlay{
    position:relative !important;
    left:auto !important;right:auto !important;bottom:auto !important;
    height:58px !important;
    margin-top:12px;
    padding:0 16px;
    border-radius:8px;
  }
  .estimate-overlay span{font-size:17px !important}
  .estimate-overlay strong{font-size:28px !important}
  .planner-tax-note{
    position:static !important;
    height:auto !important;
    margin-top:8px;
    padding:0 2px;
    white-space:normal;
    background:transparent;
    font-size:11px !important;
    line-height:1.25;
  }

  /* Mobile booking form: one comfortable field per row. */
  .booking-overlay{
    left:16px !important;
    right:16px !important;
    top:calc(150vw + 336px) !important;
    width:auto !important;
    height:760px !important;
    padding:18px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,26,67,.15);
    font-size:16px !important;
  }
  .booking-grid{
    position:static !important;
    width:100% !important;
    height:auto !important;
    display:grid;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:48px;
    gap:10px;
  }
  #parentName,#phone,#email,#preferredDate,#preferredTime,#children,#pizza,#soda,#bumpers,#notes{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  .booking-grid input,.booking-grid select,.booking-grid textarea{
    min-height:48px;
    padding:0 12px !important;
    border-radius:7px;
    font:500 16px/1.2 Arial,sans-serif !important;
  }
  #notes{
    height:78px !important;
    min-height:78px;
    padding-top:12px !important;
  }
  .send-button{
    position:relative !important;
    right:auto !important;top:auto !important;
    width:100% !important;
    height:54px !important;
    margin-top:50px;
    border-radius:9px !important;
    background:#e40012 !important;
    color:#fff !important;
    box-shadow:0 3px 8px rgba(0,0,0,.18) !important;
    overflow:visible;
  }
  .send-button::after{
    content:"SEND PARTY REQUEST";
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    inset:0;
    color:#fff;
    font:900 16px/1 Arial,sans-serif;
    letter-spacing:.02em;
  }
  .form-status{
    position:static !important;
    width:100% !important;
    margin-top:10px;
    padding:8px;
    font-size:13px !important;
    line-height:1.35;
  }
}

@media (max-width:420px){
  .mockup-canvas{height:calc(150vw + 1140px);min-height:1580px}
  .nav-hotspots a{font-size:12px !important;padding:0 9px}
  .planner-overlay{left:12px !important;right:12px !important}
  .booking-overlay{left:12px !important;right:12px !important}
}