/*

 * ==========================================================

 * PDR SZERENCSEKERÉK – COMPACT MULTIPLAYER v0.8.1

 * ==========================================================

 */





/*

 * Betöltéskor a korábbi spin állapot

 * NE animálódjon újra.

 */



body:not(.pdrsk-mm-wheel-ready)

#pdrsk-app #pdrsk-wheel,



body:not(.pdrsk-mm-wheel-ready)

#pdrsk-app .pdrsk-wheel-rim,



body:not(.pdrsk-mm-wheel-ready)

#pdrsk-app .pdrsk-wheel-center,



body:not(.pdrsk-mm-wheel-ready)

#pdrsk-app .pdrsk-wheel-labels {

    transition: none !important;

    animation: none !important;

}





/*

 * Játék közben nincs szükség a teljes

 * várólistára és módválasztóra.

 */



body.pdrsk-mm-active

#pdrsk-mp-lobby {

    display: none !important;

}





#pdrsk-mm-toolbar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;



    min-height: 42px;



    margin: 4px 0 8px;

    padding: 5px 9px;



    border:

        1px solid

        rgba(255,103,15,.38);



    border-radius: 11px;



    background:

        linear-gradient(

            180deg,

            rgba(40,22,14,.96),

            rgba(8,8,9,.98)

        );



    box-shadow:

        inset 0 1px 0

        rgba(255,255,255,.05),

        0 5px 15px

        rgba(0,0,0,.24);



    color: #fff;



    font-size: 11px;

    font-weight: 900;

}





#pdrsk-mm-toolbar[hidden] {

    display: none !important;

}





#pdrsk-mm-leave {

    border: 0;



    min-height: 31px;



    padding: 0 12px;



    border-radius: 8px;



    cursor: pointer;



    color: #fff;



    font-size: 10px;

    font-weight: 1000;



    background:

        linear-gradient(

            180deg,

            #a63129,

            #55110d

        );



    box-shadow:

        inset 0 1px 0

        rgba(255,255,255,.15),

        0 4px 10px

        rgba(0,0,0,.3);

}





/*

 * Lobby kompakt.

 */



#pdrsk-mp-lobby {

    margin-bottom: 8px !important;

    padding: 8px 10px !important;

}





#pdrsk-mp-lobby

.pdrsk-disc-heading {

    margin: 3px 0 6px !important;

}





#pdrsk-mp-lobby

.pdrsk-disc-list {

    gap: 4px !important;



    max-height: 115px;



    overflow-y: auto;

}





#pdrsk-mp-lobby

.pdrsk-disc-game {

    min-height: 42px !important;



    padding: 5px 7px !important;



    border-radius: 9px !important;

}





#pdrsk-mp-lobby

.pdrsk-disc-player img,



#pdrsk-mp-lobby

.pdrsk-disc-avatar-fallback {

    width: 27px !important;

    height: 27px !important;

    flex-basis: 27px !important;

}





#pdrsk-mp-lobby

.pdrsk-disc-action {

    min-height: 29px !important;



    padding: 0 9px !important;



    font-size: 9px !important;

}





/*

 * Fő játéktér kompaktabb.

 */



#pdrsk-app .pdrsk-stage {

    gap: 12px !important;



    align-items: start !important;

}





#pdrsk-app .pdrsk-board {

    min-height: 145px !important;



    padding: 10px 8px !important;



    margin-top: 5px !important;

    margin-bottom: 5px !important;



    row-gap: 6px !important;

}





#pdrsk-app .pdrsk-word {

    gap: 5px !important;

}





#pdrsk-app .pdrsk-letter {

    width: 38px !important;

    height: 49px !important;



    font-size: 24px !important;



    border-radius: 6px !important;

}





#pdrsk-app #pdrsk-status,

#pdrsk-app .pdrsk-status {

    min-height: 37px !important;



    margin: 5px 0 !important;



    padding: 5px 8px !important;



    line-height: 1.25 !important;

}





#pdrsk-app .pdrsk-controls {

    gap: 5px !important;



    margin-top: 5px !important;

}





#pdrsk-app .pdrsk-controls button {

    min-height: 37px !important;



    padding-left: 11px !important;

    padding-right: 11px !important;

}





/*

 * Kerék kisebb, ne vigye el a fél oldalt.

 */



#pdrsk-app #pdrsk-wheel {

    width: min(31vw,355px) !important;

    height: min(31vw,355px) !important;

}





#pdrsk-app .pdrsk-wheel-wrap,

#pdrsk-app .pdrsk-wheel-section {

    margin-top: 0 !important;

    padding-top: 0 !important;

}





@media(max-width:850px) {



    #pdrsk-app .pdrsk-stage {

        grid-template-columns:

            1fr !important;

    }





    #pdrsk-app #pdrsk-wheel {

        width: min(76vw,330px) !important;

        height: min(76vw,330px) !important;



        margin-left: auto !important;

        margin-right: auto !important;

    }



}





@media(max-width:520px) {



    #pdrsk-app .pdrsk-letter {

        width: 31px !important;

        height: 41px !important;



        font-size: 20px !important;

    }





    #pdrsk-mm-toolbar {

        justify-content:

            space-between;

    }



}





/* PDRSK JOIN CENTER START */



/*

 * Várakozó játék:

 * a CSATLAKOZOM gomb ne a jobb szélen legyen,

 * mert a PDR Messenger eltakarhatja.

 */



#pdrsk-mp-lobby .pdrsk-disc-game {

    position: relative !important;



    /*

     * Középen hagyunk helyet a gombnak.

     */

    min-height: 58px !important;



    padding-left: 10px !important;

    padding-right: 10px !important;

}





/*

 * Konkrét CSATLAKOZOM gomb

 */



#pdrsk-mp-lobby

[data-pdrsk-game-action="join"] {

    position: absolute !important;



    left: 50% !important;

    right: auto !important;



    top: 50% !important;



    transform:

        translate(

            -50%,

            -50%

        ) !important;



    margin: 0 !important;



    z-index: 20 !important;



    min-width: 116px !important;



    text-align: center !important;

}





/*

 * Ha a jelenlegi markup csak a

 * pdrsk-disc-action osztályt használja,

 * erre is alkalmazzuk.

 */



#pdrsk-mp-lobby

.pdrsk-disc-game

.pdrsk-disc-action {

    margin-left: 0 !important;

}





/*

 * A játékos blokk maradjon bal oldalon,

 * ne tolja el a középre helyezett gombot.

 */



#pdrsk-mp-lobby

.pdrsk-disc-player {

    position: relative !important;



    z-index: 10 !important;

}





/*

 * Keskeny kijelzőn ne legyen átfedés:

 * ott a gomb kerüljön külön sorba középre.

 */



@media(max-width:650px) {



    #pdrsk-mp-lobby

    .pdrsk-disc-game {

        display: flex !important;



        flex-direction: column !important;



        align-items: center !important;



        justify-content: center !important;



        gap: 7px !important;



        padding: 8px !important;

    }





    #pdrsk-mp-lobby

    [data-pdrsk-game-action="join"] {

        position: static !important;



        transform: none !important;



        margin: 2px auto 0 !important;

    }





    #pdrsk-mp-lobby

    .pdrsk-disc-player {

        align-self: flex-start !important;

    }



}



/* PDRSK JOIN CENTER END */