#gameRoot.game-screen.hidepito {
    background-color: #c1faff;
    background-image:
        radial-gradient(ellipse at 30% 30%, #c8e8ff 0%, transparent 50%),
        radial-gradient(ellipse at 70% 20%, #b0ddf5 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%, #88c5e8 0%, transparent 55%),
        radial-gradient(ellipse at 20% 70%, #98d0f0 0%, transparent 40%),
        radial-gradient(ellipse at 80% 85%, #a0d8f5 0%, transparent 50%);
    background-repeat: no-repeat;
    background-size: cover;
}

:root {
    --cell-width: 30px;
    --cell-height: 30px;
}

@media (max-width: 480px) {
    :root {
        --cell-width: 30px;
        --cell-height: 30px;
    }
}

/* --- Híd terület --- */
.bridge-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    max-width: 1000px;
    min-height: 160px;
    margin: 5rem -3rem 0 -3rem;
    background: radial-gradient(ellipse at 50% 60%, #c8e8ffba 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, #b0f0f59c 0%, transparent 45%), linear-gradient(0deg, rgba(0, 102, 204, 0.7) 20%, transparent 70%);
    background-repeat: no-repeat;
    background-size: cover; padding-bottom: 5rem;
}

/* --- Szirtek --- */
.cliff {
    width: 100%;
    height: 160px;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.left-cliff {
    background-image: url('/games/assets/bridge/left-cliff.png');
    background-position: top right;
}

.right-cliff {
    background-image: url('/games/assets/bridge/right-cliff.png');
    background-position: top left;
}

/* --- Rács (híd cellák) --- */
.bridge-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--cell-width);
    /* minden cella fix szélesség */
    gap: 0;
    align-items: end;
}

.grid-cell {
    width: var(--cell-width);
    height: var(--cell-height);
    background: rgba(255, 255, 255, 0.5);
    position: relative;
    transition: background 0.2s;
    outline: 1px dashed #bbb;
    outline-offset: -1px;
}

.grid-cell.occupied {
    background: rgba(52, 152, 219, 0.2);
}

.grid-cell.highlight {
    background: rgba(255, 215, 0, 0.4);
}

/* --- Dínó --- */
.bridge-dino {
    position: absolute;
    top: 15px;
    left: 7%;
    width: 40px;
    height: 40px;
    z-index: 2;
    background: url('/games/assets/bridge/dino.png') no-repeat center/contain;
}

.bridge-dino.walk {
    animation: dino-walk 3s linear forwards;
}

@keyframes dino-walk {
    from {
        left: 80px;
    }

    to {
        left: calc(100% - 130px);
    }

    /* jobb szirt előtt áll meg */
}

/* --- Státusz üzenet --- */
.bridge-status {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.bridge-status.success {
    color: #27ae60;
    font-weight: bold;
}

.bridge-status.error {
    color: #e74c3c;
    font-weight: bold;
}

.bridge-status.progress {
    color: #f39c12;
}

/* --- Reset gomb --- */
.bridge-reset-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.bridge-reset-btn:hover {
    background: #2980b9;
}

/* --- Tálca (elemek) --- */
.bridge-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    min-height: 60px;
}

.bridge-piece {
    height: var(--cell-height);
    line-height: var(--cell-height);
    border-radius: 4px;
    text-align: center;
    cursor: grab;
    color: white;
    user-select: none;
    position: relative;
    z-index: 1;
    transition: transform 0.2s, width 0.2s;
}

.bridge-piece {
    display: flex;
}

.bridge-piece span {
    flex: 1;
    border-radius: 4px;
    height: var(--cell-height);
    line-height: var(--cell-height);
    background-repeat: no-repeat;
    background-image: url('/games/assets/bridge/bridge.png');
    background-position: top left;
    background-size: 100% 100%;
}

.bridge-piece[data-length="1"] {
    width: calc(1 * var(--cell-width));
}

.bridge-piece[data-length="2"] {
    width: calc(2 * var(--cell-width));
}

.bridge-piece[data-length="3"] {
    width: calc(3 * var(--cell-width));
}

.bridge-piece[data-length="4"] {
    width: calc(4 * var(--cell-width));
}

.bridge-piece[data-length="5"] {
    width: calc(5 * var(--cell-width));
}

.bridge-piece[data-length="6"] {
    width: calc(6 * var(--cell-width));
}

.bridge-piece[data-length="7"] {
    width: calc(7 * var(--cell-width));
}

.bridge-piece[data-length="8"] {
    width: calc(8 * var(--cell-width));
}

.bridge-piece.dragging {
    opacity: 0.8;
    cursor: grabbing;
}

/* tötörlni */
.drop-area {
    width: 100%;
    display: flex;
    height: 200px;
    border: 2px solid #ccc;
    margin: 20px auto;
}

.tray {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.tray-item {
    width: 60px;
    height: 60px;
    background: #4CAF50;
    cursor: grab;
}

.tray-item.dragging {
    position: absolute;
    z-index: 9999;
    cursor: grabbing;
}