/* Flushle: daily plumbing puzzle by The Kitchen Sink */
  :root{
    --bg:#0b2340; --bg2:#0f2d52; --grid:rgba(120,180,255,.07);
    --tile:#133a63; --tile2:#17446f; --line:#1e5288;
    --copper:#c9773d; --copper-d:#8e4b1f; --copper-dd:#2a1608;
    --water:#38c6ff; --water-d:#1a86c4; --leak:#7fe0ff;
    --ink:#eaf4ff; --muted:#8fb2d6; --gold:#ffcf4a; --good:#4ade80; --bad:#ff6b6b;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    font-family:Rubik,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
    background:
      linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,
      linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px,
      radial-gradient(ellipse at 50% -10%,#16457a 0%,var(--bg) 60%);
    background-color:var(--bg);
    min-height:100%;display:flex;flex-direction:column;align-items:center;
    -webkit-tap-highlight-color:transparent;
  }
  button{font:inherit;color:inherit;cursor:pointer}
  .app{width:min(560px,100%);padding:14px 14px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1}

  header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(143,178,214,.18);padding-bottom:10px}
  .brand{display:flex;flex-direction:column;line-height:1}
  .logo{font-family:Bungee,Rubik,system-ui,sans-serif;font-size:clamp(26px,7vw,34px);letter-spacing:.5px;
    background:linear-gradient(180deg,#ffd29e 0%,var(--copper) 55%,#8e4b1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
  .logo span{background:linear-gradient(180deg,#bff0ff,var(--water) 60%,#1a86c4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tag{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .icons{display:flex;gap:6px}
  .ibtn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(143,178,214,.25);background:rgba(19,58,99,.6);display:grid;place-items:center;font-size:18px;transition:.15s}
  .ibtn:hover{background:var(--tile2);transform:translateY(-1px)}
  .ibtn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  .sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
  .sub b{color:var(--ink)}
  .pill{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(56,198,255,.14);color:var(--water);border:1px solid rgba(56,198,255,.35)}
  .pill.practice{background:rgba(255,207,74,.14);color:var(--gold);border-color:rgba(255,207,74,.4)}

  .hud{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .stat{background:rgba(15,45,82,.85);border:1px solid rgba(143,178,214,.18);border-radius:12px;padding:8px 6px;text-align:center}
  .stat .k{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
  .stat .v{font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
  .stat .v.bad{color:var(--bad)} .stat .v.good{color:var(--good)}

  .status{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
  .chip{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 7px;border-radius:999px;background:rgba(15,45,82,.85);border:1px solid rgba(143,178,214,.2);font-size:13px;color:var(--muted);transition:.25s}
  .chip .e{font-size:16px;filter:grayscale(1) opacity(.55);transition:.25s}
  .chip.on{border-color:rgba(56,198,255,.6);color:var(--ink);box-shadow:0 0 14px rgba(56,198,255,.25)}
  .chip.on .e{filter:none}
  .chip .dot{width:7px;height:7px;border-radius:50%;background:#456}
  .chip.on .dot{background:var(--water);box-shadow:0 0 8px var(--water)}

  .wrap{width:100%;display:grid;grid-template-columns:9% 1fr 9%;align-items:stretch;margin-top:4px}
  .side{position:relative}
  .stub{position:absolute;left:0;right:0;transform:translateY(-50%);background:var(--copper-dd)}
  .stub i{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:var(--water);display:block}
  .stub.dry i{background:var(--copper)}
  .inlet .stub{right:0;left:18%} .outlet .stub{left:0;right:18%}
  .cap{position:absolute;transform:translate(-50%,-50%);font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--muted);white-space:nowrap}
  .valve{position:absolute;left:0;width:30%;transform:translateY(-50%);aspect-ratio:1/2.2;background:linear-gradient(90deg,#5d2f12,var(--copper),#5d2f12);border-radius:3px}
  .grate{position:absolute;right:0;width:30%;transform:translateY(-50%);aspect-ratio:1/2.2;border-radius:3px;
    background:repeating-linear-gradient(0deg,#1d2a36 0 3px,#6b7d8e 3px 5px);border:1px solid #6b7d8e}

  .board-outer{position:relative;border-radius:10px;padding:0;box-shadow:0 0 0 3px #0a1b31,0 0 0 5px #24588f,0 18px 40px rgba(0,0,0,.45)}
  .board{display:grid;aspect-ratio:1/1;width:100%;border-radius:8px;overflow:hidden;background:var(--tile);user-select:none;touch-action:manipulation}
  .tile{position:relative;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(30,82,136,.55);cursor:pointer;overflow:hidden}
  .tile:nth-child(odd){background:#143c66}
  .tile:hover{background:var(--tile2)}
  .tile:active .pipe{filter:brightness(1.15)}
  .pipe{position:absolute;inset:0;width:100%;height:100%;transition:transform .18s cubic-bezier(.3,1.4,.6,1)}
  .po line{stroke:var(--copper-dd);stroke-width:34}
  .po circle{fill:var(--copper-dd)}
  .pi line{stroke:var(--copper);stroke-width:22;transition:stroke .25s}
  .pi circle{fill:var(--copper);transition:fill .25s}
  .pf rect{fill:var(--copper-d)}
  .pw line{stroke:transparent;stroke-width:6;stroke-dasharray:5 11}
  .plate{fill:#dfe9f2;stroke:#7f97ad;stroke-width:4}
  .tile.wet .pi line{stroke:var(--water)}
  .tile.wet .pi circle{fill:var(--water)}
  .tile.wet .pf rect{fill:var(--water-d)}
  .tile.wet .pw line{stroke:rgba(255,255,255,.75);animation:flow .7s linear infinite}
  .tile.wet .plate{fill:#eaf9ff;stroke:var(--water)}
  @keyframes flow{to{stroke-dashoffset:-16}}
  .fx{position:absolute;inset:0;display:grid;place-items:center;font-size:min(6.2vw,30px);pointer-events:none;filter:grayscale(.85) opacity(.75);transition:.3s}
  .tile.wet .fx{filter:none;animation:pop .35s}
  @keyframes pop{50%{transform:scale(1.25)}}

  .leaks{position:absolute;inset:0;pointer-events:none}
  .leak{position:absolute;width:0;height:0}
  .leak i{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--leak);box-shadow:0 0 6px var(--water);animation:spray .7s ease-out infinite;opacity:0}
  .leak i:nth-child(2){animation-delay:.23s;--y:-9px}
  .leak i:nth-child(3){animation-delay:.46s;--y:9px}
  @keyframes spray{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(22px,var(--y,0)) scale(1.1);opacity:0}}

  .board-outer.won{animation:glow 1.2s ease-out}
  @keyframes glow{0%{box-shadow:0 0 0 3px #0a1b31,0 0 0 5px var(--water),0 0 60px var(--water)}100%{box-shadow:0 0 0 3px #0a1b31,0 0 0 5px #24588f,0 18px 40px rgba(0,0,0,.45)}}

  .hint{font-size:13.5px;color:var(--muted);text-align:center;max-width:420px;margin:2px 0 0;line-height:1.45}
  .hint b{color:var(--ink)}
  .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .btn{border:0;border-radius:12px;padding:12px 18px;font-weight:800;letter-spacing:.3px;font-size:15px;transition:.15s}
  .btn.primary{background:linear-gradient(180deg,#5fd6ff,#1f9ad8);color:#06233d;box-shadow:0 4px 0 #0f5f8a}
  .btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #0f5f8a}
  .btn.copper{background:linear-gradient(180deg,#e8a06a,var(--copper));color:#2a1608;box-shadow:0 4px 0 #6b3614}
  .btn.copper:active{transform:translateY(3px);box-shadow:0 1px 0 #6b3614}
  .btn.ghost{background:rgba(19,58,99,.7);border:1px solid rgba(143,178,214,.3)}

  footer{font-size:12px;color:var(--muted);text-align:center;margin-top:auto;padding-top:14px;opacity:.85}
  footer a{color:var(--copper);text-decoration:none;font-weight:700}

  /* modal */
  .scrim{position:fixed;inset:0;background:rgba(3,12,24,.72);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:28px 14px;overflow:auto;z-index:20}
  .scrim.open{display:flex;animation:fade .2s}
  @keyframes fade{from{opacity:0}}
  .modal{width:min(440px,100%);background:linear-gradient(180deg,#123a64,#0d2a4b);border:1px solid rgba(143,178,214,.3);border-radius:18px;padding:20px 20px 22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:rise .25s cubic-bezier(.3,1.3,.6,1)}
  @keyframes rise{from{transform:translateY(20px);opacity:0}}
  .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.06);font-size:18px}
  .modal h2{font-family:Bungee,Rubik,system-ui,sans-serif;font-weight:400;margin:0 0 4px;font-size:24px}
  .modal h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
  .modal p,.modal li{color:#cfe2f5;line-height:1.5;font-size:14.5px}
  .modal ul{padding-left:18px;margin:8px 0}
  .rank{text-align:center;margin:6px 0 4px}
  .rank .bar{font-size:26px;letter-spacing:2px}
  .rank .title{font-family:Bungee,Rubik,system-ui,sans-serif;font-size:22px;color:var(--gold);margin-top:4px}
  .rank .sm{color:var(--muted);font-size:13px}
  .grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
  .grid3 .n{font-size:24px;font-weight:800}
  .grid3 .l{font-size:10.5px;color:var(--muted);letter-spacing:.5px;line-height:1.2}
  .dist{display:flex;flex-direction:column;gap:5px}
  .dist .r{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:8px;font-size:12.5px;color:#cfe2f5}
  .dist .b{height:20px;border-radius:5px;background:#24507e;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding:0 7px;min-width:24px}
  .dist .b.me{background:linear-gradient(90deg,#1f9ad8,var(--water))}
  pre.share{background:#081a2f;border:1px dashed rgba(143,178,214,.35);border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;white-space:pre-wrap;line-height:1.5;margin:0 0 10px;user-select:all}
  .next{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(143,178,214,.2)}
  .next .t{font-size:12px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase}
  .next .c{font-family:Bungee,Rubik,system-ui,sans-serif;font-size:24px;font-variant-numeric:tabular-nums}
  .demo{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px 0}
  .demo .t{width:56px;height:56px;border-radius:8px;position:relative;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(30,82,136,.8)}
  .demo .arrow{font-size:22px;color:var(--muted)}

  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:#eaf4ff;color:#06233d;padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;opacity:0;transition:.25s;z-index:40;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  .drop{position:fixed;top:-30px;font-size:22px;pointer-events:none;z-index:30;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(110vh) rotate(var(--r))}}

  @media (max-width:380px){.stat .v{font-size:17px}.hud{gap:6px}}

  /* site integration */
  .topbar{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;margin-bottom:-4px}
  .topbar a{color:var(--muted);text-decoration:none}
  .topbar a:hover{color:var(--ink)}
  body.embedded .topbar, body.embedded footer{display:none}
  body.embedded .app{padding-bottom:16px}
  html:has(body.embedded), body.embedded{height:auto;min-height:0}
  body.embedded .app{flex:none}
  body.embedded .toast{top:16px;bottom:auto;transform:translate(-50%,-30px)}
  body.embedded .toast.show{transform:translate(-50%,0)}

  /* daily board */
  .lb{display:flex;flex-direction:column;gap:10px}
  .lb-note{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
  .lb-me{background:rgba(56,198,255,.12);border:1px solid rgba(56,198,255,.4);border-radius:12px;padding:10px 12px;font-size:14.5px}
  .lb-me b{color:var(--water);font-size:17px}
  .lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
  .lb-list li{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:7px 10px;border-radius:10px;background:rgba(8,26,47,.6);border:1px solid rgba(143,178,214,.14);font-size:14px}
  .lb-list li.me{border-color:var(--water);background:rgba(56,198,255,.14)}
  .lb-rank{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:#24507e}
  .lb-list li:nth-child(1) .lb-rank{background:var(--gold);color:#2a1608}
  .lb-list li:nth-child(2) .lb-rank{background:#dfe7ee;color:#0b2340}
  .lb-list li:nth-child(3) .lb-rank{background:#cd7f32;color:#2a1608}
  .lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lb-moves{font-weight:800;color:var(--water);font-variant-numeric:tabular-nums}
  .lb-time{color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
  .lb-claim{display:flex;flex-direction:column;gap:6px;margin:0}
  .lb-claim label{font-weight:700;font-size:14.5px}
  .lb-row{display:flex;gap:8px}
  .lb-row input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:#081a2f;border:1px solid rgba(143,178,214,.35);border-radius:10px;padding:10px 12px}
  .lb-row input:focus{outline:none;border-color:var(--water)}
  .lb-row .btn{padding:10px 16px}
  .lb-err{margin:0;color:var(--bad);font-size:13px;min-height:0}
  .lb-err:empty{display:none}
  .lb-code{display:flex;flex-direction:column;gap:6px;background:rgba(255,207,74,.1);border:1px dashed rgba(255,207,74,.5);border-radius:12px;padding:12px}
  .lb-code code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.5px;color:var(--gold);user-select:all;word-break:break-all}
  .lb-code small{color:#cfe2f5;font-size:12.5px;line-height:1.4}
  .lb-code .btn{align-self:flex-start;padding:7px 12px;font-size:13px}
  .lb-streaks,.lb-player{margin:0;font-size:13px;color:var(--muted)}
  .lb-streaks b,.lb-player b{color:var(--ink)}
  .lb-link{background:none;border:0;padding:0;color:var(--water);font:inherit;text-decoration:underline;cursor:pointer}
  .lb-claim[hidden]{display:none}
  .lb-name a{color:inherit;text-decoration:none}
  .lb-name a:hover{text-decoration:underline}