/* Fix the leak: a pipe puzzle on a tiled wall, on Ben's home page and his games page (with
   pipes.js). Tap a pipe to turn it a quarter. Water runs from the stopcock through every pipe
   that joins up; where a wet pipe ends without joining another, it drips. Get the water to the
   outlet with no drips and the job's done. Everything here starts with .pp, so it can't clash
   with the page around it, and it uses the page's own colours (--ink, --muted, --stone, --water).
   Without JavaScript the puzzle stays hidden. */
.pp{--copper:#B4652C;--copper-dark:#8E4F22;--copper-in:#7A3F17;--wet:#6FC3E3;--pp-ease:cubic-bezier(.23,1,.32,1);
  display:none;justify-items:center;gap:18px;background:var(--stone);border-radius:24px;padding:22px 14px 26px;container-type:inline-size}
.js .pp{display:grid}
@media(min-width:700px){.pp{padding:28px}}
.pp [hidden]{display:none}
.pp-top{width:100%;max-width:520px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.pp-job{font-family:var(--head);font-weight:800;font-size:18px;color:var(--ink)}
.pp-turns{font-weight:700;font-size:15px;color:var(--muted)}
/* Each tile is as big as fits in the panel (from 44px on the smallest phones), up to 72px. */
.pp-board{--tile:min(72px,calc((100vw - 76px - (var(--cols) - 1) * 2px) / var(--cols)))}
@supports (width:1cqi){.pp-board{--tile:min(72px,calc((100cqi - 4px - (var(--cols) - 1) * 2px) / var(--cols)))}}
.pp-row,.pp-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--tile));gap:2px;padding:0 2px}
.pp-row{height:var(--tile)}
.pp-grid{grid-auto-rows:var(--tile);padding:2px;background:#C3CBD3;border-radius:10px}
.pp-mark{position:relative;width:var(--tile);height:var(--tile)}
.pp-mark svg{display:block;width:100%;height:100%;overflow:visible}
.pp-tile{position:relative;width:var(--tile);height:var(--tile);margin:0;padding:0;border:0;border-radius:6px;background:#fff;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .1s ease}
.pp-tile:active{background:#E8EDF1}
@media(hover:hover) and (pointer:fine){.pp-tile:hover{background:#F6F8FA}}
.pp-tile:focus-visible{z-index:3;outline:3px solid var(--water-deep);outline-offset:-3px}
.pp-tile:disabled{cursor:default}
.pp-tile svg{display:block;width:100%;height:100%;transition:transform .2s var(--pp-ease)}
.pp .p-out,.pp .p-in,.pp .m-pipe,.pp .m-in{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.pp .p-out,.pp .m-pipe{stroke:var(--copper);stroke-width:24}
.pp .p-in,.pp .m-in{stroke:var(--copper-in);stroke-width:9;transition:stroke .15s ease}
.pp .p-fit{fill:var(--copper-dark)}
.pp .wet .p-in,.pp .m-in.on,.pp .reached .m-in{stroke:var(--wet)}
/* A drip where water gets out. */
.pp-drop{position:absolute;z-index:2;width:12px;height:16px;margin:-8px 0 0 -6px;background:var(--water);clip-path:path('M6 0C6 0 12 8.2 12 10A6 6 0 0 1 0 10C0 8.2 6 0 6 0Z');opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .15s ease,transform .2s var(--pp-ease)}
.pp-drop.dn{left:50%;top:0}.pp-drop.de{left:100%;top:50%}.pp-drop.ds{left:50%;top:100%}.pp-drop.dw{left:0;top:50%}
.pp .lk-n .dn,.pp .lk-e .de,.pp .lk-s .ds,.pp .lk-w .dw,.pp .spill .pp-drop{opacity:1;transform:none}
.pp-mark .pp-drop{left:50%;top:100%}
/* The outlet: the tap runs, the radiator warms up, the shower comes on. */
.pp .o-water{fill:var(--water);transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .5s var(--pp-ease)}
.pp .o-warm{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s var(--pp-ease)}
.pp .o-spray{stroke:var(--water);stroke-width:4;stroke-linecap:round;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .5s var(--pp-ease)}
.pp .on .o-water,.pp .on .o-warm{transform:none}
.pp .on .o-spray{opacity:1;transform:none}
.pp-msg{max-width:520px;min-height:1.65em;text-align:center;font-weight:700;color:var(--ink)}
.pp-help{max-width:520px;text-align:center}
.pp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pp-real{text-align:center;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .pp-tile svg,.pp-drop,.pp .o-water,.pp .o-warm,.pp .o-spray{transition:none}
}