/* Wrapper: puzzle + vezérlők egymás mellett */
#tiliToliWrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

/* Oldalsó vezérlőpanel */
#tiliToliControls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 150px;
    font-size: 16px;
}

/* A puzzle konténer – fluid, a Divi column méretét veszi át */
#tiliToli {

    display: grid;
    gap: 2px;
    position: relative;

}

/* Tile-ok */
.tilitoli-tile {
    position: relative;
    background-size: 100% 100%; /* fluid méret */
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 3px black;
}

/* Üres tile */
.tilitoli-empty {
    background: none !important;
    cursor: default;
}

/* Számozás a jobb felső sarokban */
.tilitoli-number {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 3px #000;
}

/* Ha kész a puzzle */
#tiliToli.solved {
    border: none !important;
    gap: 0px;
}

#tiliToli.solved .tilitoli-tile {
    gap: 0 !important;
    border: none !important;
    padding: 0 !important;
}


#tiliToli.solved .tilitoli-number {
    display: none !important;
}