body{margin:0;background:#eef3f8;font-family:Arial,sans-serif;color:#17324d}.mooring-board{max-width:1200px;margin:20px auto;text-align:center;padding:0 12px 24px}.title-wrap h2{margin:0 0 8px;font-size:36px}.status-line{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}#bayUpdated{margin:0;font-size:14px;color:#4f5e69}.summary-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#fff;border:1px solid #d7e1ea;padding:7px 14px;font-size:13px;font-weight:700;color:#2f6f57}.summary-pill #availableCount{font-size:16px;color:#1d8c5b}.debug-toggle{border:1px solid #b9c7d4;background:#fff;color:#31566f;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}.river-label{font-weight:700;color:#31566f;letter-spacing:.03em;text-transform:uppercase;font-size:13px;margin:12px 0}.mooring-map{max-height:82vh;overflow:auto;border-radius:36px;box-shadow:0 18px 38px rgba(41,86,122,.16);background:#9bd6f7;-webkit-overflow-scrolling:touch}.map-inner{--total-bays:29;--bay-height:74px;--pad:24px;--river-edge-x:760px;--slot-width:180px;--land-width:260px;--boat-width:42px;--boat-lane-step:50px;--boat-base-right:12px;position:relative;width:1200px;min-height:calc((var(--bay-height)*var(--total-bays)) + (var(--pad)*2))}.scenic-layer{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden;border-radius:36px;background:#9bd6f7}

/* WATER */
.river-water{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),linear-gradient(90deg,#8fcff1 0%,#98d8f8 34%,#8fccea 66%,#87c5e7 100%);overflow:hidden}.river-water:before{content:"";position:absolute;inset:0 420px 0 0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 2px,transparent 2px 23px);animation:waterLines 14s linear infinite}.river-water:after{content:"";position:absolute;inset:0 420px 0 0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.20) 0 1px,transparent 2px),radial-gradient(ellipse at 70% 60%,rgba(255,255,255,.14) 0 1px,transparent 2px);background-size:120px 80px,180px 120px;animation:waterSparkle 24s linear infinite;opacity:.6}.water-shimmer{position:absolute;left:-15%;width:90%;height:16px;border-radius:50%;border-top:2px solid rgba(255,255,255,.18);transform:skewX(-20deg)}.shimmer-1{top:18%;animation:shimmer1 18s ease-in-out infinite}.shimmer-2{top:47%;animation:shimmer2 23s ease-in-out infinite}.shimmer-3{top:72%;animation:shimmer3 29s ease-in-out infinite}@keyframes waterLines{from{background-position:0 0}to{background-position:0 46px}}@keyframes waterSparkle{from{background-position:0 0,0 0}to{background-position:160px 90px,-220px 120px}}@keyframes shimmer1{0%,100%{transform:translateX(-8%) skewX(-20deg)}50%{transform:translateX(24%) skewX(-20deg)}}@keyframes shimmer2{0%,100%{transform:translateX(12%) skewX(-20deg)}50%{transform:translateX(-16%) skewX(-20deg)}}@keyframes shimmer3{0%,100%{transform:translateX(-20%) skewX(-20deg)}50%{transform:translateX(16%) skewX(-20deg)}}

/* AMBIENT BOATS - all deliberately different */
.ambient-boat{position:absolute;z-index:3;pointer-events:none}.ambient-wake{position:absolute;left:50%;top:30px;width:80px;height:140px;transform:translateX(-50%);border-left:2px solid rgba(255,255,255,.28);border-right:2px solid rgba(255,255,255,.28);border-radius:50%;opacity:.7}.ambient-hull{position:absolute;inset:0;box-shadow:0 8px 14px rgba(0,0,0,.12)}
.narrowboat{width:34px;height:150px}.narrowboat .ambient-hull{border-radius:14px;background:#3a6e43;border:2px solid #274f30}.narrowboat .ambient-roof{position:absolute;left:5px;right:5px;top:16px;bottom:16px;border-radius:9px;background:#d9d0b9}.narrowboat .ambient-window{position:absolute;left:9px;width:16px;height:18px;border-radius:4px;background:#8fb6cb}.narrowboat .aw1{top:38px}.narrowboat .aw2{top:72px}
.cruiser{width:42px;height:108px}.cruiser .ambient-hull{border-radius:55% 55% 42% 42%;background:#f7f7f7;border:1px solid #d3dbe2}.cruiser .ambient-cabin{position:absolute;left:7px;right:7px;top:24px;height:38px;border-radius:12px;background:#d4e3ee}.cruiser .ambient-screen{position:absolute;left:10px;right:10px;top:17px;height:11px;border-radius:8px;background:#7fa8bf}
.canoe{width:18px;height:96px}.canoe .ambient-hull{border-radius:50%;background:#d98032;border:2px solid #a85d20}.canoe .paddler{position:absolute;left:5px;top:38px;width:8px;height:12px;border-radius:50%;background:#334b68}.canoe .paddle{position:absolute;left:-9px;top:43px;width:36px;height:3px;background:#8b643f;transform:rotate(25deg);transform-origin:center}
.dayboat{width:38px;height:124px}.dayboat .ambient-hull{border-radius:50% 50% 38% 38%;background:#f5efe3;border:2px solid #d3c1a3}.dayboat .ambient-cabin{position:absolute;left:6px;right:6px;top:34px;height:32px;border-radius:9px;background:#b8d3dc}.dayboat .passenger{position:absolute;width:8px;height:8px;border-radius:50%;background:#e7b98c}.dayboat .p1{left:7px;top:74px}.dayboat .p2{right:7px;top:80px}
.rowing{width:20px;height:132px}.rowing .ambient-hull{border-radius:50%;background:#f0efe7;border:2px solid #a6a69f}.rowing .rower{position:absolute;left:6px;width:8px;height:11px;border-radius:50%;background:#44566d}.rowing .r1{top:46px}.rowing .r2{top:72px}.rowing .oar{position:absolute;left:-18px;width:56px;height:2px;background:#8c6f4b}.rowing .o1{top:52px;transform:rotate(20deg)}.rowing .o2{top:79px;transform:rotate(-20deg)}
.ab1{left:125px;top:-210px;animation:sailDown1 78s linear infinite}.ab2{left:330px;top:calc(100% + 160px);animation:sailUp1 91s linear infinite 12s}.ab3{left:480px;top:-120px;animation:sailDown2 66s linear infinite 28s}.ab4{left:220px;top:calc(100% + 150px);animation:sailUp2 104s linear infinite 38s}.ab5{left:575px;top:-160px;animation:sailDown3 86s linear infinite 54s}@keyframes sailDown1{0%{transform:translateY(0)}100%{transform:translateY(2600px)}}@keyframes sailDown2{0%{transform:translateY(0)}100%{transform:translateY(2550px)}}@keyframes sailDown3{0%{transform:translateY(0)}100%{transform:translateY(2650px)}}@keyframes sailUp1{0%{transform:translateY(0) rotate(180deg)}100%{transform:translateY(-2700px) rotate(180deg)}}@keyframes sailUp2{0%{transform:translateY(0) rotate(180deg)}100%{transform:translateY(-2750px) rotate(180deg)}}

/* LIVE BAY LAYER */
.bay-grid{position:absolute;top:var(--pad);left:var(--river-edge-x);width:var(--slot-width);display:flex;flex-direction:column;z-index:10}.bay{position:relative;height:var(--bay-height);width:var(--slot-width);background:rgba(218,236,214,.95);border-left:5px solid #7dbb80;border-right:5px solid #7dbb80;box-sizing:border-box}.bay.occupied{background:#3b7fdb;border-left-color:#245ca9;border-right-color:#245ca9}.bay:before{content:"";position:absolute;top:0;left:-5px;width:calc(var(--slot-width) + 5px + var(--land-width));height:2px;background:rgba(68,105,71,.35);z-index:1}.bay-number{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:700;font-size:16px;color:#16314b;z-index:5}.bay.occupied .bay-number{color:#fff}.post{position:absolute;left:-9px;width:12px;height:36px;background:#050505;border-radius:4px;z-index:6;box-shadow:0 3px 8px rgba(0,0,0,.35);transform:translateY(-50%)}.post-boundary{top:0}.post-final{top:100%}.boats-layer{position:absolute;top:var(--pad);left:0;width:var(--river-edge-x);height:calc(var(--bay-height)*var(--total-bays));pointer-events:none;z-index:20}.boat{position:absolute;width:var(--boat-width);right:calc(var(--boat-base-right) + (var(--boat-lane,0)*var(--boat-lane-step)));top:var(--boat-top,0);height:var(--boat-height,60px);z-index:30}.boat-hull{position:absolute;inset:0;background:linear-gradient(90deg,#ececec 0%,#fff 24%,#fff 76%,#ececec 100%);border:1px solid #d8dde2;border-radius:999px;box-shadow:0 8px 18px rgba(0,0,0,.16)}.boat-outline{position:absolute;inset:5px;border-radius:999px;border:1px solid rgba(216,220,225,.85)}.boat-centerline{position:absolute;top:12px;bottom:12px;left:50%;width:2px;margin-left:-1px;background:rgba(187,194,200,.6);border-radius:2px}.boat-bow{position:absolute;top:10px;left:11px;width:18px;height:18px;background:#ebebeb;clip-path:polygon(50% 0,100% 100%,0 100%)}.boat-stern{position:absolute;bottom:10px;left:11px;width:18px;height:10px;border-top:2px solid #d7dbe0;border-radius:0 0 12px 12px;opacity:.9}.boat-cabin{position:absolute;left:7px;right:7px;top:18%;min-height:32px;height:22%;background:#cfd6de;border-radius:12px}

/* LAND / PARK */
.park-side{position:absolute;top:0;right:0;bottom:0;width:calc(var(--slot-width) + var(--land-width));z-index:2;pointer-events:none}.grass{position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 30%),repeating-linear-gradient(45deg,#c0dcae 0,#c0dcae 14px,#b6d5a2 14px,#b6d5a2 28px)}.towpath{position:absolute;right:24px;top:-50px;bottom:-50px;width:68px;border-radius:18px;background:linear-gradient(90deg,#b69a79,#ceb494 42%,#c8ad8d 58%,#ac8e6e);box-shadow:inset 0 0 0 2px rgba(121,89,61,.12),0 0 0 3px rgba(218,201,176,.25)}.path-edge{position:absolute;right:19px;top:-50px;bottom:-50px;width:2px;background:rgba(107,83,61,.15)}.path-edge-left{right:97px}.path-edge-right{right:19px}
.tree{position:absolute;width:70px;height:70px}.tree-shadow{position:absolute;left:16px;top:38px;width:52px;height:28px;border-radius:50%;background:rgba(42,71,39,.14);transform:rotate(-20deg)}.tree .canopy{position:absolute;border-radius:50%;box-shadow:inset -4px -5px 0 rgba(35,91,39,.12)}.tree .c1{left:8px;top:8px;width:46px;height:46px;background:#5daf55}.tree .c2{left:27px;top:2px;width:38px;height:38px;background:#75c567}.tree .c3{left:25px;top:27px;width:34px;height:34px;background:#4c9c48}.tree .trunk{position:absolute;left:31px;top:49px;width:7px;height:22px;background:#8a5f3b;border-radius:4px}.t1{right:120px;top:110px}.t2{right:146px;top:380px}.t3{right:116px;top:720px}.t4{right:156px;top:1060px}.t5{right:118px;top:1480px}.t6{right:152px;top:1840px}
.bench{position:absolute;width:42px;height:24px;transform:rotate(90deg)}.bench .seat{position:absolute;left:2px;right:2px;top:8px;height:10px;border-radius:3px;background:#8b5e3c}.bench .back{position:absolute;left:4px;right:4px;top:2px;height:6px;border-radius:3px;background:#795036}.bench .leg{position:absolute;top:17px;width:4px;height:7px;background:#544133}.bench .l1{left:9px}.bench .l2{right:9px}.b1{right:126px;top:260px}.b2{right:126px;top:920px}.b3{right:126px;top:1640px}

/* DETAILED PEOPLE */
.person{position:absolute;width:20px;height:40px}.person .shadow{position:absolute;left:2px;top:28px;width:18px;height:10px;border-radius:50%;background:rgba(31,46,58,.12)}.person .head{position:absolute;left:5px;top:0;width:10px;height:10px;border-radius:50%;background:#efc79f;z-index:5}.person .hair{position:absolute;left:4px;top:-1px;width:12px;height:6px;border-radius:9px 9px 3px 3px;background:#5b4435;z-index:6}.person .body{position:absolute;left:4px;top:10px;width:12px;height:18px;border-radius:6px 6px 4px 4px;background:#4f79ba;z-index:4}.person .arm{position:absolute;top:12px;width:4px;height:14px;border-radius:3px;background:#efc79f;transform-origin:top}.person .a1{left:1px;transform:rotate(12deg)}.person .a2{right:1px;transform:rotate(-12deg)}.person .leg{position:absolute;top:27px;width:4px;height:11px;border-radius:2px;background:#334a61}.person .g1{left:5px}.person .g2{right:5px}.style-a .body{background:#4e77ba}.style-b .body{background:#b65b67}.style-b .hair{background:#c49b55}.style-c .body{background:#4c9a72}.style-c .hair{background:#2c2a27}.style-d .body{background:#8a67b4}.style-d .hair{background:#7d5338}.style-e .body{background:#d27d45}.style-e .hair{background:#3d312b}.style-f .body,.style-f .rider-body{background:#e0a238}
.walker{right:48px;z-index:8}.w1{top:-60px;animation:pathDown1 74s linear infinite}.w2{top:calc(100% + 70px);animation:pathUp1 83s linear infinite 18s}.w3{top:-70px;animation:pathDown2 91s linear infinite 33s}.w4{top:calc(100% + 70px);animation:pathUp2 102s linear infinite 52s}@keyframes pathDown1{from{transform:translateY(0)}to{transform:translateY(2320px)}}@keyframes pathDown2{from{transform:translateY(0)}to{transform:translateY(2360px)}}@keyframes pathUp1{from{transform:translateY(0)}to{transform:translateY(-2350px)}}@keyframes pathUp2{from{transform:translateY(0)}to{transform:translateY(-2390px)}}

/* DOG WALKERS */
.dog-walker{position:absolute;right:50px;width:46px;height:42px;z-index:9}.dog-walker>.person{left:22px;top:0}.dog-walker .lead{position:absolute;left:13px;top:19px;width:18px;height:1px;background:#5f5650;transform:rotate(-20deg);transform-origin:right}.dog{position:absolute;left:0;top:23px;width:18px;height:13px}.dog-body{position:absolute;left:4px;top:3px;width:11px;height:7px;border-radius:6px;background:#6f503d}.dog-head{position:absolute;left:0;top:1px;width:7px;height:7px;border-radius:50%;background:#654737}.dog-tail{position:absolute;right:-4px;top:3px;width:7px;height:2px;border-radius:2px;background:#654737;transform:rotate(-35deg);transform-origin:left}.dog-leg{position:absolute;top:9px;width:2px;height:5px;background:#654737}.dog-leg.dl1{left:6px}.dog-leg.dl2{right:3px}.dog-light .dog-body,.dog-light .dog-head,.dog-light .dog-tail,.dog-light .dog-leg{background:#b58d64}.dw1{top:-80px;animation:dogDown 96s linear infinite 9s}.dw2{top:calc(100% + 80px);animation:dogUp 109s linear infinite 61s}@keyframes dogDown{from{transform:translateY(0)}to{transform:translateY(2380px)}}@keyframes dogUp{from{transform:translateY(0)}to{transform:translateY(-2400px)}}

/* KIDS ON BIKES */
.cyclist{position:absolute;right:43px;width:30px;height:42px;z-index:10}.wheel{position:absolute;left:8px;width:14px;height:14px;border:2px solid #354c59;border-radius:50%;background:transparent;animation:wheelSpin .7s linear infinite}.wh1{top:0}.wh2{bottom:0}.frame{position:absolute;left:12px;top:10px;width:8px;height:20px;border-left:2px solid #d24d3b;border-right:2px solid #d24d3b;transform:skewY(-25deg)}.handlebar{position:absolute;left:8px;top:7px;width:12px;height:2px;background:#354c59}.rider-head{position:absolute;left:10px;top:9px;width:10px;height:10px;border-radius:50%;background:#efc79f}.rider-body{position:absolute;left:10px;top:19px;width:10px;height:12px;border-radius:5px;background:#e0a238}.cy1{top:-60px;animation:bikeDown 54s linear infinite 22s}.cy2{top:calc(100% + 70px);animation:bikeUp 63s linear infinite 47s}@keyframes bikeDown{from{transform:translateY(0)}to{transform:translateY(2380px)}}@keyframes bikeUp{from{transform:translateY(0)}to{transform:translateY(-2400px)}}@keyframes wheelSpin{to{transform:rotate(360deg)}}

/* GROUPS MEETING / CHATTING */
.social-group{position:absolute;width:70px;height:58px;z-index:7}.social-group .person{animation:chatBob 3.2s ease-in-out infinite}.social-group .p-a{left:4px;top:8px}.social-group .p-b{left:31px;top:0;animation-delay:.7s}.social-group .p-c{left:48px;top:20px;animation-delay:1.4s}.social-group .chat .arm{animation:gesture 2.4s ease-in-out infinite}.sg1{right:110px;top:560px}.sg2{right:118px;top:1280px}.sg2 .p-b{left:34px;top:15px}@keyframes chatBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes gesture{0%,100%{transform:rotate(10deg)}50%{transform:rotate(45deg)}}

.debug-panel{margin-top:14px;text-align:left}.debug-panel.hidden{display:none}.debug-panel-inner{border:1px solid #ced7e0;background:#fff;border-radius:16px;padding:14px;box-shadow:0 8px 18px rgba(0,0,0,.06)}.debug-panel h3{margin:0 0 10px;font-size:16px}.debug-meta{font-size:13px;margin-bottom:10px;line-height:1.5}.debug-table-wrap{overflow:auto}.debug-table{width:100%;border-collapse:collapse;font-size:13px}.debug-table th,.debug-table td{border-bottom:1px solid #e3e8ed;padding:6px 8px;text-align:left;white-space:nowrap}.debug-table th{background:#f7f9fb}.error{color:#b00020;font-weight:700}

@media(max-width:900px){.title-wrap h2{font-size:30px}.mooring-map{max-height:76vh}.map-inner{--bay-height:64px;--river-edge-x:560px;--slot-width:150px;--land-width:200px;--boat-width:36px;--boat-lane-step:42px;width:920px}.bay-number{font-size:14px}.post{width:10px;height:30px;left:-8px}.towpath{width:54px;right:20px}.path-edge-left{right:79px}.person,.dog-walker,.cyclist{transform:scale(.9);transform-origin:center}.tree{transform:scale(.9);transform-origin:center}.sg1,.sg2{transform:scale(.9)}}

/* ===== V22 refinement overrides ===== */
/* Remove decorative halos/wakes around passing craft */
.ambient-wake{display:none!important}

/* Paddling motion */
.canoe .paddle{animation:canoeStroke 1.8s ease-in-out infinite;transform-origin:center}
@keyframes canoeStroke{
  0%,100%{transform:rotate(48deg) translateX(-2px)}
  50%{transform:rotate(-48deg) translateX(2px)}
}
.rowing .o1{animation:rowStrokeA 1.7s ease-in-out infinite;transform-origin:center}
.rowing .o2{animation:rowStrokeB 1.7s ease-in-out infinite;transform-origin:center}
@keyframes rowStrokeA{0%,100%{transform:rotate(42deg)}50%{transform:rotate(8deg)}}
@keyframes rowStrokeB{0%,100%{transform:rotate(-42deg)}50%{transform:rotate(-8deg)}}

/* Keep moving craft in separated river lanes */
.ab1{left:110px!important}
.ab4{left:235px!important}
.ab2{left:355px!important}
.ab3{left:500px!important}
.ab5{left:620px!important}

/* Bay separator line stops at the end of the mooring bay */
.bay::before{width:calc(var(--slot-width) + 5px)!important}

/* Layout order: River -> Moorings -> Path -> Park */
.park-side{
  left:calc(var(--river-edge-x) + var(--slot-width))!important;
  right:auto!important;
  width:var(--land-width)!important;
  overflow:hidden;
}
.grass{
  left:82px!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
}
.towpath{
  left:0!important;
  right:auto!important;
  top:-50px!important;
  bottom:-50px!important;
  width:82px!important;
  border-radius:0!important;
}
.path-edge-left{left:0!important;right:auto!important}
.path-edge-right{left:80px!important;right:auto!important}

/* Put all moving path users on the actual path strip */
.walker{left:31px!important;right:auto!important}
.dog-walker{left:25px!important;right:auto!important}
.cyclist{left:27px!important;right:auto!important}

/* Better top-down cycling detail and motion */
.cyclist{width:30px;height:46px}
.cyclist .wheel{left:8px;width:14px;height:14px;border-width:2px}
.cyclist .frame{left:12px;top:12px;height:22px;border-left:2px solid #cf4d3c;border-right:2px solid #cf4d3c;animation:bikeLean .9s ease-in-out infinite}
.cyclist .handlebar{top:8px;animation:steer .9s ease-in-out infinite}
.cyclist .rider-head{top:11px}
.cyclist .rider-body{top:20px;height:13px}
@keyframes bikeLean{0%,100%{transform:skewY(-18deg) rotate(-2deg)}50%{transform:skewY(-18deg) rotate(2deg)}}
@keyframes steer{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* Park furniture and trees are kept to the right of the path */
.tree{right:auto!important}
.t1{left:112px!important}.t2{left:150px!important}.t3{left:118px!important}.t4{left:154px!important}.t5{left:108px!important}.t6{left:148px!important}
.bench{right:auto!important}
.b1{left:112px!important}.b2{left:126px!important}.b3{left:110px!important}
.social-group{right:auto!important}
.sg1{left:112px!important}.sg2{left:126px!important}

@media(max-width:900px){
  .grass{left:64px!important}
  .towpath{width:64px!important;left:0!important;right:auto!important}
  .path-edge-left{left:0!important;right:auto!important}
  .path-edge-right{left:62px!important;right:auto!important}
  .walker{left:23px!important}
  .dog-walker{left:18px!important}
  .cyclist{left:21px!important}
  .t1{left:88px!important}.t2{left:118px!important}.t3{left:90px!important}.t4{left:120px!important}.t5{left:86px!important}.t6{left:116px!important}
  .b1{left:88px!important}.b2{left:98px!important}.b3{left:88px!important}
  .sg1{left:88px!important}.sg2{left:100px!important}
}

/* ===== V23 PRODUCTION FIXES ===== */
/* River is physically clipped at the river/mooring boundary. This prevents
   blue water showing behind the bank at either rounded corner. */
.scenic-layer{
  background:#b6d5a2!important;
}
.river-water{
  top:0!important;
  bottom:0!important;
  left:0!important;
  right:auto!important;
  width:var(--river-edge-x)!important;
  overflow:hidden!important;
}
.river-water::before,
.river-water::after{
  right:0!important;
}

/* Give the complete right side a continuous land backing, including the
   padded areas above Bay 29 and below Bay 1. */
.scenic-layer::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:var(--river-edge-x);
  right:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #d8ebd6 0,
      #d8ebd6 var(--slot-width),
      #b79e81 var(--slot-width),
      #c8b091 calc(var(--slot-width) + 40px),
      #b59877 calc(var(--slot-width) + 82px),
      #c0dcae calc(var(--slot-width) + 82px),
      #b6d5a2 100%);
}

/* Keep all functional/scenic right-side layers above the backing. */
.bay-grid{z-index:10!important}
.boats-layer{z-index:20!important}
.park-side{z-index:3!important}

/* Through-traffic exclusion corridor.
   Ambient craft never enter the 300px-wide water strip beside the moorings,
   so even several stacked live boats cannot be hit. */
.ab1{left:70px!important}
.ab4{left:160px!important}
.ab2{left:255px!important}
.ab3{left:345px!important}
.ab5{left:430px!important}

/* Remove production-only controls if an old cached index is briefly shown. */
.summary-pill,.debug-toggle,.debug-panel{display:none!important}

/* ===== V25 RELIABLE MOBILE FIT =====
   The desktop drawing remains a fixed 1200px coordinate system.
   JavaScript scales the complete map and sets the visible wrapper height.
   This avoids CSS calc multiplication, which caused v24 to collapse. */
@media (max-width:900px){
  .mooring-board{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding-left:6px!important;
    padding-right:6px!important;
    overflow:hidden!important;
  }
  .mooring-map{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }
  .map-inner{
    /* restore the proven desktop geometry before scaling it as one unit */
    --bay-height:74px!important;
    --pad:24px!important;
    --river-edge-x:760px!important;
    --slot-width:180px!important;
    --land-width:260px!important;
    --boat-width:42px!important;
    --boat-lane-step:50px!important;
    --boat-base-right:12px!important;
    width:1200px!important;
    min-height:calc((var(--bay-height) * var(--total-bays)) + (var(--pad) * 2))!important;
    height:auto!important;
    transform-origin:top left!important;
  }
  .title-wrap h2{font-size:26px!important;line-height:1.15!important}
  #bayUpdated{font-size:13px!important}
  .river-label{font-size:12px!important;margin:8px 0!important}
}
@media (max-width:520px){
  .mooring-board{padding-left:4px!important;padding-right:4px!important}
  .mooring-map{border-radius:14px!important}
  .title-wrap h2{font-size:22px!important}
  #bayUpdated{font-size:12px!important}
  .river-label{font-size:11px!important}
}