/* Pipe Connect: a calm light table (Nordic: soft grey-blue, one water-blue accent), big friendly pipes. */
:root{--bg:#EAF0F4;--bg2:#DAE4EB;--paper:#FFFFFF;--ink:#1A2733;--ink-soft:#4A5B68;--ink-dim:#7A8A96;--line:rgba(26,39,51,.14);
  --blue:#1F6FB2;--blue-lo:#14527F;--water:#2E9BEA;--water-hi:#7CC4F5;--case:#56636E;--chan:#D5DDE3;--tray:#C6D3DC;--warn:#C2412D;color-scheme:light}
body{background:radial-gradient(120% 90% at 50% 0%,#F7FAFC,var(--bg) 55%,var(--bg2));color:var(--ink);font-size:19px}
.screen{background:none}

/* type and buttons */
.title{font:800 clamp(2.1em,7.5vmin,3.6em)/1.02 var(--sans);color:var(--ink);text-shadow:none;letter-spacing:-.015em;text-wrap:balance}
.pill{font:700 1.15em/1 var(--sans);color:#fff;background:var(--blue);box-shadow:0 2px 0 var(--blue-lo),0 8px 18px rgba(31,111,178,.28);
  min-height:52px;padding:.8em 2.6em;transition:transform .08s,filter .15s}
.pill:hover{filter:brightness(1.07)}
.pill:active{transform:translateY(2px);box-shadow:0 0 0 var(--blue-lo),0 4px 10px rgba(31,111,178,.25)}
.link{color:var(--blue);min-height:44px;font-weight:600;font-size:1em}
.jewel{width:48px;height:48px;border:1px solid var(--line);background:var(--paper);box-shadow:0 1px 3px rgba(20,30,40,.12);transition:transform .08s}
.jewel:active{transform:scale(.94)}
.jewel svg{stroke:var(--ink)}
.jewel:disabled{opacity:.38}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.toggle:focus-visible,.row:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.board.play:focus{outline:none}

/* cards */
.veil{background:rgba(26,39,51,.38)}
.card{background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 50px rgba(20,30,40,.25);color:var(--ink)}
.card h2{font:800 1.5em/1.15 var(--sans);color:var(--ink)}
.card .x{border-color:var(--line);color:var(--ink);width:44px;height:44px}
.card .x svg{stroke:var(--ink)}
.card > .row{margin-top:.45em;min-height:48px;color:var(--ink)}
.card > .row small{color:var(--ink-soft)}
.row{background:var(--bg);border-color:var(--line)}
.choice{border-color:var(--line);background:var(--bg);color:var(--ink);min-width:3em;min-height:44px;font-weight:700;font-size:1.05em}
.choice[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
.choice:disabled{opacity:.45;cursor:default}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em}
.levels .choice{padding:.35em 0;min-width:0}
.toggle{background:#C3CDD4;border-color:var(--line);width:3.2em;height:1.8em}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:var(--blue)}
.toggle[aria-pressed=true]::after{background:#fff;left:1.55em}
.stats{color:var(--ink-soft);gap:1.2em}
.stats b{font:800 1.7em/1.1 var(--sans);color:var(--ink)}
.stats div{text-align:center}
.note{color:var(--ink-soft);margin:.3em 0}
.note.big{font-size:1.15em;color:var(--ink);font-weight:700}
.stars{font-size:2.6em;line-height:1;text-align:center;margin:0 0 .15em;color:#F2B134;letter-spacing:.08em;animation:starpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes starpop{from{transform:scale(.3);opacity:0}}
.card .rows .note{text-align:left;margin:0}
.toast{background:var(--ink);color:#fff;border:0}

/* the tray and its tiles (board and home preview share them) */
.tray{position:relative;padding:var(--pad,10px);border-radius:18px;background:linear-gradient(180deg,#D0DBE3,var(--tray));
  box-shadow:inset 0 2px 6px rgba(20,30,40,.22),0 1px 0 #fff,0 14px 30px rgba(20,30,40,.12)}
.board{position:relative;left:auto;top:auto;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-auto-rows:1fr}
.tile{position:relative;width:auto;height:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:none;filter:none;opacity:1;transition:none;
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
.tile::before{content:"";position:absolute;inset:2.5%;border-radius:14%;background:linear-gradient(180deg,#FBFDFE,#EEF3F6);box-shadow:inset 0 0 0 1px rgba(26,39,51,.06)}
.tile .pipe,.tile .cap{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}
.tile .pipe{transition:transform .17s cubic-bezier(.3,1.45,.55,1)}
.board.still .tile .pipe{transition:none}
.case{fill:none;stroke:var(--case);stroke-width:34}
.case-j{fill:var(--case)}
.chan{fill:none;stroke:var(--chan);stroke-width:20}
.chan-j{fill:var(--chan)}
.water{fill:none;stroke:var(--water);stroke-width:20;opacity:0;transition:opacity .16s ease-out var(--d,0ms)}
.water.water-j{fill:var(--water);stroke:none}
.tile.wet .water{opacity:1}
.tank{fill:var(--blue);stroke:#fff;stroke-width:3}
.drop{fill:#fff}
.basin{fill:var(--case)}
.basin-in{fill:#EDE4D3}
.basin-water{fill:var(--water);opacity:0;transform-origin:50px 50px;transform:scale(.4);transition:opacity .2s var(--d,0ms),transform .3s cubic-bezier(.3,1.6,.5,1) var(--d,0ms)}
.tick{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s calc(var(--d,0ms) + .15s)}
.tile.wet .basin-water{opacity:1;transform:none}
.tile.wet .tick{opacity:1}
.tile.src .tank{animation:tank 2.4s ease-in-out infinite}
@keyframes tank{50%{stroke-width:6}}
.tile.cur::after{content:"";position:absolute;inset:4%;border-radius:14%;pointer-events:none}
.board.kbd .tile.cur::after{box-shadow:0 0 0 3px var(--blue),0 0 0 6px rgba(31,111,178,.25)}
.tile.pulse::before{animation:tpulse .22s ease-out}
@keyframes tpulse{40%{transform:scale(.93)}}
.tile.splash .cap{animation:splash .45s cubic-bezier(.3,1.6,.5,1) var(--d,0ms)}
@keyframes splash{40%{transform:scale(1.25)}}
.board.solved .tile::before{animation:glow .7s ease-out var(--w,0ms) both}
.board.solved .tile .water{stroke:var(--water-hi)}
.board.solved .tile .water.water-j{fill:var(--water-hi);stroke:none}
@keyframes glow{40%{background:#D6ECFB;transform:scale(1.06)}to{background:#E8F4FC}}
.board.lost{animation:sad .4s ease-out}
.board.lost .tile:not(.wet){filter:grayscale(.6) brightness(.93)}
@keyframes sad{20%{transform:translateX(-6px)}50%{transform:translateX(5px)}80%{transform:translateX(-2px)}}
.board.mini .tile{cursor:default}
.board.mini .tile::before{inset:3%}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* home: preview and words side by side when wide, stacked when tall */
.home{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(1em,5vw,3.2em);padding:1.2em;text-align:center}
.home-art{position:relative;flex:none}
.home-art .tray{--pad:8px}
.thumb-tag{position:absolute;left:50%;bottom:-.8em;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3em .9em;font-size:.82em;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(20,30,40,.1)}
.home-side{display:flex;flex-direction:column;align-items:center;gap:.7em;max-width:22em}
.tagline{color:var(--ink-soft);text-shadow:none;margin:0}
.links{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
@media (orientation:portrait){.home{flex-direction:column;gap:1.7em}}
@media (max-height:440px){.home{padding:.5em 1em}.home .title{font-size:2em}.home-side{gap:.25em}.pill{min-height:48px;padding:.6em 2.2em}.tagline{font-size:.9em}}

/* the game: bar over the board, or beside it on a short wide screen */
#game{display:flex;flex-direction:column}
.bar{width:min(100%,max(var(--S,320px) + 24px,340px));margin:0 auto;padding:max(.5em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .2em max(.6em,env(safe-area-inset-left))}
.status{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:0;text-align:center}
.lvl-name{font-weight:700;font-size:.92em;color:var(--ink-soft);white-space:nowrap}
.left{font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .2s}
.left.low{color:var(--warn);animation:low 1s ease-in-out infinite}
@keyframes low{50%{transform:scale(1.08)}}
.tools{display:flex;gap:.45em}
.felt{flex:1;position:relative;min-height:0;display:grid;place-items:center;overflow:hidden}
.felt .tray{--pad:clamp(6px,1.4vmin,12px)}
.board.play{touch-action:none}
@media (orientation:landscape) and (max-height:540px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;gap:.6em;padding:.5em .3em .5em max(.6em,env(safe-area-inset-left))}
  .bar .tools{flex-direction:column}
  .status{font-size:.85em;max-width:7.5em}
  .lvl-name,.left{white-space:normal}
  .felt{padding-right:max(0px,env(safe-area-inset-right))}
}
@media (max-height:480px){.card .stats{margin:0;gap:1em}.card .stats b{font-size:1.3em}.card .note{margin:.1em 0}.card .note.big{font-size:1em}.card > .row{margin-top:0}
  .stars{font-size:1.8em}.card .rows{gap:.15em}.card .rows .note{font-size:.88em;line-height:1.3}.card .pill{min-height:44px;padding:.5em 2em}}