:root {
    --pipe-grid-bg: #4a3728;
    --pipe-cell-bg: #6b4423;
    --pipe-cell-alt-bg: #5d3a1f;
    --pipe-cell-size: 80px;
    --pipe-grid-gap: 3px;
    --water-color: #00d4aa;
    --water-glow: 0 0 15px rgba(0, 212, 170, 0.8);
}

@media (min-width: 768px) {
    .pipe-puzzle-grid {
        max-width: 600px;
    }
}

.pipe-puzzle-grid,
.plumber-grid {
    display: grid;
    gap: var(--pipe-grid-gap);
    background: var(--pipe-grid-bg);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    width: fit-content;
    margin: 0 auto;
    border: 3px solid #3d2817;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.pipe-cell {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--pipe-cell-bg);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow:  0 2px 4px rgba(0, 0, 0, 0.3);
}

.pipe-cell.empty-cell {
    cursor: default;
}

/* Pipe sprite alap */
.pipe-sprite {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
    image-rendering: pixelated;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
}

.pipe-sprite[data-sprite="empty"] {
    background-image: none;
}

.pipe-sprite[data-sprite="straight"] {
    background-image: url("/games/plumber/assets/straight.svg");
}

.pipe-sprite[data-sprite="corner"] {
    background-image: url("/games/plumber/assets/corner.svg");
}

.pipe-sprite[data-sprite="t_pipe"] {
    background-image: url("/games/plumber/assets/t_pipe.svg");
}

.pipe-sprite[data-sprite="cross"] {
    background-image: url("/games/plumber/assets/cross.svg");
}

/* Start / End pontok */
.pipe-cell.start-cell::before,
.pipe-cell.end-cell::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    z-index: 5;
    transform: translateY(-50%);
}

.pipe-cell.start-cell::before {
    left: -4px;
    background: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.8);
}

.pipe-cell.end-cell::before {
    right: -4px;
    background: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.8);
}

/* Edge pozíciók */
.pipe-cell.edge-top::before {
    top: -100%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.pipe-cell.edge-bottom::before {
    top: auto;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
}

.pipe-cell.edge-left::before {
    left: -100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.pipe-cell.edge-right::before {
    right: -100%;
    left: auto;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}

/* Vízzel telt */
.pipe-cell.filled::before {
    color: var(--water-color);
    text-shadow: 0 0 5px var(--water-color);
}

/* Hover */
.pipe-cell:hover:not(.wall):not(.start-cell):not(.end-cell):not(.empty-cell) {
    transform: scale(1.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(46, 204, 113, 0.3);
    z-index: 10;
}

/* Víz anim */
.pipe-puzzle-grid:not(.victory) .pipe-sprite.water-filled {
    animation: waterPulse 1.2s ease-in-out infinite;
}

@keyframes waterPulse {

    0%,
    100% {
        filter: brightness(1.12) saturate(1.30) drop-shadow(0 0 6px rgba(0, 212, 170, 0.55));
    }

    50% {
        filter: brightness(1.22) saturate(1.45) drop-shadow(0 0 12px rgba(0, 212, 170, 0.75));
    }
}



.pipe-sprite[data-sprite="straight"] {
    --sprite-url: url("/games/plumber/assets/straight.svg");
}

.pipe-sprite[data-sprite="corner"] {
    --sprite-url: url("/games/plumber/assets/corner.svg");
}

.pipe-sprite[data-sprite="t_pipe"] {
    --sprite-url: url("/games/plumber/assets/t_pipe.svg");
}

.pipe-sprite[data-sprite="cross"] {
    --sprite-url: url("/games/plumber/assets/cross.svg");
}

.pipe-sprite[data-sprite="empty"] {
    --sprite-url: none;
}


.pipe-sprite.water-filled {
    position: relative;
}

.pipe-sprite.water-filled::after {
    content: "";
    position: absolute;
    inset: 0;

    /* ezt látod majd kéken */
    background: #00bfff;
    opacity: 0.9;

    /* A TRÜKK: ugyanazzal az SVG-vel maszkoljuk */
    -webkit-mask-image: var(--sprite-url);
    mask-image: var(--sprite-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    pointer-events: none;

    /* extra kis fény */
    filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.65));
}