.pipe-board{width:min(100%,430px);margin:auto;aspect-ratio:1;display:grid;gap:5px;background:#edf3fa;border:1px solid #dce5f1;border-radius:13px;padding:9px}
.pipe-tile{position:relative;min-width:0;min-height:0;aspect-ratio:1;display:grid;place-items:center;border:1px solid #d4e1ec;background:#fff;border-radius:11px;cursor:pointer;padding:3px;touch-action:manipulation}
.pipe-tile:hover{background:#f7fcff;border-color:#72a7d4}.pipe-tile:active{transform:scale(.97)}
.pipe-tile.empty{border-color:transparent;background:#edf3fa;cursor:default}.pipe-tile svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.pipe-tile .end-tag{position:absolute;font-size:8px;font-weight:950;letter-spacing:.4px;color:#284f7e;background:#dceeff;border-radius:4px;padding:2px 3px;bottom:3px;left:3px;pointer-events:none}
.pipe-tile.source{border-color:#6da0e2;background:#eaf4ff}.pipe-tile.goal{border-color:#92c7ac;background:#f0fff4}
.pipe-tile.goal .end-tag{background:#d2f2da;color:#317248}
.pipe-tile.flowing{background:#e2f9f8;border-color:#5dbab2}.pipe-tile.flowing svg .pipe-core{stroke:#2caeaa}
@media(max-width:390px){.pipe-board{gap:3px;padding:6px}.pipe-tile{border-radius:7px;padding:1px}.pipe-tile .end-tag{font-size:6px;padding:1px 2px}}