.pdrm-root{

    width:100%;

    max-width:980px;

    margin:0 auto;

    box-sizing:border-box;

    color:#f6f6f6;

    font-family:Arial,Helvetica,sans-serif;

}



.pdrm-root *{

    box-sizing:border-box;

}



.pdrm-loading,

.pdrm-error,

.pdrm-empty{

    padding:24px;

    text-align:center;

    border:1px solid rgba(255,95,25,.35);

    border-radius:14px;

    background:rgba(15,15,15,.88);

}



.pdrm-home,

.pdrm-game{

    display:flex;

    flex-direction:column;

    gap:16px;

}



.pdrm-hero,

.pdrm-section,

.pdrm-game-header,

.pdrm-status,

.pdrm-wait-box{

    background:

        linear-gradient(

            135deg,

            rgba(48,18,8,.96),

            rgba(10,20,27,.96)

        );

    border:1px solid #9b3416;

    border-radius:16px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.26),

        inset 0 1px 0 rgba(255,255,255,.04);

}



.pdrm-hero{

    text-align:center;

    padding:22px 18px;

}



.pdrm-title{

    font-size:30px;

    font-weight:900;

    margin-bottom:8px;

}



.pdrm-title-small{

    font-size:23px;

    font-weight:900;

}



.pdrm-hero p{

    margin:5px auto 14px;

    opacity:.88;

    max-width:650px;

}



.pdrm-home-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

}



.pdrm-btn{

    appearance:none;

    border:1px solid #ff6a22;

    border-radius:9px;

    padding:9px 15px;

    min-height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            180deg,

            #ff6b22,

            #d64213

        );

    color:#fff!important;

    text-decoration:none!important;

    font-weight:800;

    font-size:13px;

    cursor:pointer;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.18),

        0 5px 13px rgba(0,0,0,.25);

}



.pdrm-btn:hover{

    transform:translateY(-1px);

    filter:brightness(1.08);

}



.pdrm-btn-blue{

    border-color:#2d9ad0;

    background:

        linear-gradient(

            180deg,

            #1986ba,

            #075b84

        );

}



.pdrm-btn-dark{

    border-color:#7c3c2c;

    background:

        linear-gradient(

            180deg,

            #492117,

            #27120d

        );

}



.pdrm-btn-danger{

    border-color:#a74632;

    background:

        linear-gradient(

            180deg,

            #9e2d1d,

            #5d160d

        );

}



.pdrm-note{

    margin:15px auto 0;

    padding:9px 12px;

    border-radius:9px;

    background:rgba(0,0,0,.25);

    font-size:13px;

    opacity:.9;

}



.pdrm-section{

    padding:15px;

}



.pdrm-section h2{

    margin:0 0 12px;

    font-size:18px;

}



.pdrm-game-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:10px 11px;

    margin:7px 0;

    border:1px solid rgba(255,255,255,.10);

    border-radius:11px;

    background:rgba(0,0,0,.22);

}



.pdrm-game-row-main{

    display:flex;

    flex-direction:column;

    gap:3px;

}



.pdrm-game-row-main small{

    opacity:.7;

}



.pdrm-game-header{

    padding:13px 16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}



.pdrm-game-header small{

    opacity:.72;

}



.pdrm-player-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

}



.pdrm-player-card{

    position:relative;

    min-height:82px;

    padding:10px 46px 10px 10px;

    display:flex;

    align-items:center;

    gap:10px;

    border:1px solid rgba(255,255,255,.16);

    border-radius:13px;

    background:

        linear-gradient(

            135deg,

            #252525,

            #111

        );

    box-shadow:0 8px 18px rgba(0,0,0,.22);

    overflow:hidden;

}



.pdrm-player-card.is-turn{

    border-color:#ff6b22;

    box-shadow:

        0 0 0 1px rgba(255,107,34,.25),

        0 8px 20px rgba(0,0,0,.3);

}



.pdrm-player-card.is-me::after{

    content:"TE";

    position:absolute;

    top:7px;

    right:7px;

    padding:2px 6px;

    border-radius:999px;

    font-size:9px;

    font-weight:900;

    background:#ff5e1a;

    color:#fff;

}



.pdrm-avatar{

    width:54px;

    height:54px;

    border-radius:50%;

    object-fit:cover;

    flex:0 0 54px;

    border:2px solid #fff;

    background:#222;

}



.pdrm-avatar-fallback{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}



.pdrm-player-data{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}



.pdrm-player-data strong{

    font-size:17px;

}



.pdrm-player-data small{

    opacity:.72;

}



.pdrm-player-data span{

    margin-top:3px;

    font-size:12px;

    opacity:.85;

}



.pdrm-color-chip{

    position:absolute;

    right:0;

    bottom:0;

    top:0;

    width:8px;

}



.pdrm-color-1{

    background:#ff681d;

}



.pdrm-color-2{

    background:#2c9ed4;

}



.pdrm-status{

    padding:10px 14px;

    text-align:center;

    display:flex;

    flex-direction:column;

    gap:4px;

}



.pdrm-status strong{

    color:#ffb27b;

}



.pdrm-status small{

    opacity:.72;

}



.pdrm-board-shell{

    width:100%;

    display:flex;

    justify-content:center;

    padding:8px;

    border-radius:28px;

    background:#101010;

    border:8px solid #202020;

    box-shadow:

        0 16px 28px rgba(0,0,0,.42),

        inset 0 0 0 1px rgba(255,255,255,.05);

}



.pdrm-board{

    position:relative;

    width:min(720px,100%);

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:18px;

    background:

        radial-gradient(

            circle at 50% 45%,

            rgba(24,128,74,.82),

            rgba(1,52,29,.98) 67%,

            #012518 100%

        );

    box-shadow:

        inset 0 0 45px rgba(0,0,0,.54);

}



.pdrm-board-logo{

    position:absolute;

    left:50%;

    top:50%;

    width:19%;

    height:19%;

    transform:translate(-50%,-50%);

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    opacity:.14;

    filter:grayscale(.15);

    pointer-events:none;

    z-index:0;

}



.pdrm-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

    pointer-events:none;

}



.pdrm-lines line{

    stroke:#e8b77b;

    stroke-width:.8;

    vector-effect:non-scaling-stroke;

    opacity:.90;

    filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));

}



.pdrm-point{

    position:absolute;

    z-index:4;

    width:28px;

    height:28px;

    padding:0;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid #dfb47a;

    background:#173e2c;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:

        transform .12s ease,

        box-shadow .12s ease,

        border-color .12s ease;

}



.pdrm-point:hover{

    transform:

        translate(-50%,-50%)

        scale(1.10);

}



.pdrm-empty-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#f0c891;

    opacity:.9;

}



.pdrm-point.occupied{

    width:44px;

    height:44px;

    border-width:3px;

    box-shadow:

        0 5px 12px rgba(0,0,0,.46),

        inset 0 1px 0 rgba(255,255,255,.28);

}



.pdrm-point.player-1{

    border-color:#ffc39c;

    background:

        radial-gradient(

            circle at 35% 30%,

            #ff9b5d,

            #ed4e13 56%,

            #88200a

        );

}



.pdrm-point.player-2{

    border-color:#bfeaff;

    background:

        radial-gradient(

            circle at 35% 30%,

            #6fd2ff,

            #1689bf 56%,

            #064966

        );

}



.pdrm-piece-inner{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.38);

    color:#fff;

    font-size:9px;

    font-weight:900;

    text-shadow:0 1px 2px #000;

    background:rgba(0,0,0,.18);

}



.pdrm-point.own{

    cursor:grab;

}



.pdrm-point.own:active{

    cursor:grabbing;

}



.pdrm-point.selected{

    border-color:#fff;

    box-shadow:

        0 0 0 4px rgba(255,255,255,.24),

        0 0 22px rgba(255,142,65,.85);

}



.pdrm-point.legal-target{

    border-color:#ffe26b;

    box-shadow:

        0 0 0 5px rgba(255,226,107,.15),

        0 0 18px rgba(255,226,107,.7);

    animation:pdrmTarget 1s infinite alternate;

}



.pdrm-point.removable{

    border-color:#ff3d3d;

    box-shadow:

        0 0 0 5px rgba(255,40,40,.16),

        0 0 20px rgba(255,0,0,.74);

    animation:pdrmRemove .8s infinite alternate;

}



@keyframes pdrmTarget{

    from{

        transform:

            translate(-50%,-50%)

            scale(1);

    }



    to{

        transform:

            translate(-50%,-50%)

            scale(1.14);

    }

}



@keyframes pdrmRemove{

    from{

        filter:brightness(1);

    }



    to{

        filter:brightness(1.35);

    }

}



.pdrm-watching,

.pdrm-wait-box{

    text-align:center;

    padding:10px;

}



.pdrm-wait-box{

    display:flex;

    flex-direction:column;

    gap:4px;

    word-break:break-all;

}



.pdrm-win{

    position:absolute;

    inset:0;

    z-index:40;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(6px);

}



.pdrm-game{

    position:relative;

}



.pdrm-win-box{

    width:min(315px,92%);

    padding:22px 18px;

    text-align:center;

    border:1px solid #ff5d17;

    border-radius:18px;

    background:

        linear-gradient(

            180deg,

            #242424,

            #0e0e0e

        );

    box-shadow:0 22px 55px rgba(0,0,0,.55);

}



.pdrm-win-box .pdrm-avatar{

    margin:4px auto 6px;

}



.pdrm-trophy{

    font-size:38px;

}



.pdrm-win-box h2{

    margin:5px 0;

    font-size:27px;

}



.pdrm-win-box p{

    margin:8px 0 10px;

    opacity:.78;

}



.pdrm-win-box .pdrm-btn{

    margin:5px 3px;

}



.pdrm-infobar{

    width:min(980px,100%);

    margin:0 auto 12px;

    padding:8px 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:1px solid #9b3416;

    border-radius:12px;

    background:

        linear-gradient(

            90deg,

            #351307,

            #0c1e27

        );

    color:#fff;

    cursor:pointer;

    font-size:13px;

}



.pdrm-infobar-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#3cff71;

    box-shadow:0 0 10px #3cff71;

}



.pdrm-toast{

    position:fixed;

    left:50%;

    bottom:24px;

    z-index:999999;

    max-width:min(440px,90vw);

    padding:10px 15px;

    transform:

        translate(-50%,20px);

    opacity:0;

    pointer-events:none;

    border:1px solid #ff6428;

    border-radius:10px;

    background:#161616;

    color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.42);

    transition:.18s ease;

}



.pdrm-toast.show{

    opacity:1;

    transform:

        translate(-50%,0);

}



.pdrm-rules-mini p{

    margin:0;

    line-height:1.55;

    opacity:.86;

}



@media(max-width:700px){



    .pdrm-player-grid{

        grid-template-columns:1fr;

    }



    .pdrm-game-header{

        flex-direction:column;

        text-align:center;

    }



    .pdrm-board-shell{

        padding:4px;

        border-width:5px;

        border-radius:19px;

    }



    .pdrm-board{

        border-radius:13px;

    }



    .pdrm-point{

        width:23px;

        height:23px;

        border-width:2px;

    }



    .pdrm-point.occupied{

        width:35px;

        height:35px;

    }



    .pdrm-piece-inner{

        width:23px;

        height:23px;

        font-size:7px;

    }



    .pdrm-board-logo{

        width:24%;

        height:24%;

        opacity:.12;

    }



    .pdrm-game-row{

        align-items:flex-start;

        flex-direction:column;

    }



    .pdrm-game-row-action{

        width:100%;

    }



    .pdrm-game-row-action .pdrm-btn{

        width:100%;

    }

}






/* ============================================================

 * PDR MALOM CORE 0.2.2-dev1

 * KÉPERNYŐ + COPY LINK + LIVE INFOSÁV

 * ============================================================ */





/* ----- KÉPERNYŐBARÁT TÁBLA ----- */



@media(min-width:701px){



    .pdrm-board-shell{

        width:

            min(

                100%,

                clamp(

                    400px,

                    calc(100vh - 340px),

                    520px

                )

            ) !important;



        margin:

            0 auto !important;

    }





    .pdrm-board{

        width:

            100% !important;



        max-width:

            none !important;

    }





    .pdrm-game{

        gap:

            9px !important;

    }





    .pdrm-player-card{

        min-height:

            62px !important;

    }





    .pdrm-avatar{

        width:

            43px !important;



        height:

            43px !important;



        flex-basis:

            43px !important;

    }





    .pdrm-status{

        padding:

            7px 10px !important;

    }



}





/* ----- JÁTÉKLINK MÁSOLÁS ----- */



.pdrm-copy-link{

    width:

        auto !important;



    min-width:

        180px !important;



    margin:

        5px auto 0 !important;

}





.pdrm-copy-link.is-copied{

    border-color:

        #35e37c !important;



    background:

        linear-gradient(

            180deg,

            #168947,

            #07592b

        ) !important;

}





/* ----- KÜLÖN MALOM KIJELZŐ ----- */



.pdrm-infobar-standalone{

    width:

        min(

            980px,

            100%

        ) !important;



    margin:

        7px auto !important;



    display:

        flex !important;



    flex-direction:

        column !important;



    gap:

        5px !important;

}





.pdrm-infobar-standalone[hidden]{

    display:

        none !important;

}





.pdrm-live-game{

    width:

        100% !important;



    min-height:

        34px !important;



    padding:

        5px 11px !important;



    display:

        flex !important;



    align-items:

        center !important;



    justify-content:

        center !important;



    flex-wrap:

        wrap !important;



    gap:

        6px !important;



    border:

        1px solid

        #9b3416 !important;



    border-radius:

        9px !important;



    background:

        linear-gradient(

            90deg,

            rgba(

                53,

                18,

                7,

                .96

            ),

            rgba(

                8,

                25,

                33,

                .96

            )

        ) !important;



    color:

        #fff !important;



    font-size:

        12px !important;



    text-decoration:

        none !important;



    box-shadow:

        0 4px 13px

        rgba(

            0,

            0,

            0,

            .22

        ) !important;

}





.pdrm-live-game:hover{

    color:

        #fff !important;



    text-decoration:

        none !important;



    filter:

        brightness(1.12) !important;

}





.pdrm-live-game.waiting{

    border-color:

        #d87623 !important;

}





.pdrm-live-game.playing{

    border-color:

        #20b85e !important;

}





.pdrm-live-game b{

    color:

        #ff8b4b !important;



    font-size:

        11px !important;

}





.pdrm-live-state{

    font-size:

        10px !important;

}





@media(max-width:700px){



    .pdrm-live-game{

        text-align:

            center !important;



        padding:

            7px 9px !important;

    }



}

/* === PDR MALOM SPECTATOR CSS START 0.2.3 === */



.pdrm-spectator-actions-023 {

    width: min(680px, 100%) !important;

    box-sizing: border-box !important;

    margin: 8px auto 4px !important;

    padding: 9px 11px !important;

    text-align: center !important;

    border: 1px solid rgba(255, 91, 25, .55) !important;

    border-radius: 11px !important;

    background: linear-gradient(90deg, rgba(57, 19, 7, .96), rgba(7, 29, 39, .96)) !important;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .25) !important;

}



.pdrm-spectator-title-023 {

    margin-bottom: 6px !important;

    color: #fff !important;

    font-weight: 800 !important;

    font-size: 13px !important;

}



.pdrm-spectator-buttons-023 {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 7px !important;

}



.pdrm-spectator-buttons-023 .pdrm-btn {

    min-height: 33px !important;

    padding: 6px 12px !important;

    text-decoration: none !important;

}



.pdrm-spectator-actions-023 small {

    display: block !important;

    margin-top: 6px !important;

    opacity: .72 !important;

}



@media(max-width:600px) {

    .pdrm-spectator-buttons-023 {

        flex-direction: column !important;

    }



    .pdrm-spectator-buttons-023 .pdrm-btn {

        width: min(260px, 100%) !important;

    }

}



/* === PDR MALOM SPECTATOR CSS END 0.2.3 === */