.connect-surface{overflow-x:auto;padding:20px 14px;background:#e8eee2}.pipe-board{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:5px;min-width:284px;max-width:520px;margin:auto}.calm-panel .pipe-cell{position:relative;padding:0;aspect-ratio:1;min-height:44px;border-radius:10px;background:#fffaf0;border:1px solid #acbba2;color:#657967}.pipe-cell svg{display:block;width:100%;height:100%;max-height:94px}.pipe-cell .pipe-line{fill:none;stroke:currentColor;stroke-width:14;stroke-linecap:round}.pipe-cell.wet{color:#217c94;background:#edf9f8}.pipe-cell .endpoint{position:absolute;top:2px;left:3px;font-size:12px;padding:1px 4px;background:#fff8e8;border-radius:5px;color:#245b42;line-height:1.4}.pipe-cell .wet-mark{position:absolute;bottom:2px;right:3px;font-size:10px;color:#145d76}.calm-panel .pipe-cell.hinted,.calm-panel .connect-tile.hinted{outline:3px dashed #a85029;outline-offset:-4px}.pipe-garden{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;margin:18px auto 0;color:#355740}.pipe-garden .flower{font-size:32px;display:inline-block;transform-origin:bottom}.pipe-garden.bloom .flower{animation:plant-bloom .9s ease-out}@keyframes plant-bloom{from{transform:scale(.5) rotate(-12deg)}to{transform:scale(1) rotate(0)}}.tile-surface{position:relative;max-width:600px;min-width:314px;margin:auto;padding:18px}.tile-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}.calm-panel .connect-tile{padding:0;min-height:44px;aspect-ratio:1;border-radius:10px;background:var(--tile-color,#f6e3be);border:1px solid #9da78d;box-shadow:0 3px 0 #bac7af;color:#254936;font-size:clamp(21px,4vw,34px);font-family:Arial,sans-serif}.calm-panel .connect-tile.selected{outline:3px solid #ae542c;outline-offset:-3px;background:#fff0be}.connect-tile.empty{visibility:hidden;pointer-events:none}.tile-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.tile-trace polyline{fill:none;stroke:#286f88;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #fff)}.connect-progress{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#355740;padding:0 0 14px}.connect-note{font-size:11px;line-height:1.6;margin-top:12px;color:#496044}.connect-art{font-size:62px;background:#deeadb;gap:14px;color:#38634d}.connect-art.pipe-art{font-size:80px;color:#287e91}@media(max-width:450px){.connect-surface{padding:15px 8px}.tile-surface{padding:12px;min-width:314px}.tile-board{gap:5px}.calm-panel .connect-tile{font-size:24px}.pipe-board{gap:4px}.pipe-cell .endpoint{font-size:9px;left:1px;top:1px;padding:0 2px}.pipe-cell .wet-mark{font-size:8px}.pipe-garden{font-size:12px}}@media(prefers-reduced-motion:reduce){.pipe-garden.bloom .flower{animation:none}.tile-trace polyline{filter:none}}