.hint { text-align: center; color: #64748B; font-size: 0.9rem; margin-bottom: 0.75rem; max-width: 320px; }
.pipe-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 300px; padding: 8px; background: #0C4A6E; border-radius: 14px; }
.pipe-cell { aspect-ratio: 1; border: none; border-radius: 8px; background: #38BDF8; cursor: pointer; min-height: 44px; position: relative; overflow: hidden; }
.pipe-cell.start { background: #2563EB; }
.pipe-cell.end { background: #16A34A; }
.pipe-cell.flow { background: #7DD3FC; box-shadow: inset 0 0 12px #0EA5E9; }
.pipe-cell svg { width: 100%; height: 100%; pointer-events: none; }