:root{
    --light:#eeeed2;
    --dark:#769656;
    --frame:#11151b;
    --bg:#0f1217;
    --panel:#1b212b;
    --panel-2:#141922;
    --text:#eaf0ff;
    --muted:#a8b3c7;
    --accent:#4d7cff;
    --danger:#ef4b2e;
    --last:#fff266;
    --check:#ff4d4d;

    --sq:min(12vmin,80px);
    --border:clamp(4px,1vmin,8px);
    --radius:12px;

}

*{
    box-sizing:border-box;
}

.hidden{
    display:none !important;
}

#orientationGuard{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(8,12,19,0.94);
    padding:16px;
}

.orientation-guard-card{
    width:min(420px,92vw);
    border:1px solid #33425a;
    border-radius:14px;
    background:linear-gradient(180deg,#131a27,#0d131d);
    padding:18px;
    text-align:center;
    box-shadow:0 20px 45px rgba(0,0,0,0.45);
}

.orientation-guard-card h3{
    margin:0 0 8px;
    color:#f3f7ff;
    letter-spacing:.2px;
}

.orientation-guard-card p{
    margin:0;
    color:#b9c6dc;
}

body{
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at 20% 0%, #171d27 0%, var(--bg) 45%);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
}

.app{
    width:fit-content; 
    max-width:100%;
    margin:16px auto;
    padding:10px;
    display:grid;
    grid-template-columns:auto 320px;
    gap:14px;
    align-items:flex-start;
    justify-content:center;
}

.board{
    display:grid;
    grid-template-columns:repeat(8,var(--sq));
    grid-template-rows:repeat(8,var(--sq));
    
    border:var(--border) solid var(--frame);
    border-radius: 10px;
    
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

.square{
    width:var(--sq);
    height:var(--sq);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.light{
    background:var(--light);
}
.dark{
    background:var(--dark);
}

.square.selected{
    outline:3px solid #ece85a;
    outline-offset:-3px;
}

.square.legal-capture{
    background:var(--danger) !important;
    box-shadow:none !important;
}

.legal-dot{
    width:26%;
    height:26%;
    border-radius:50%;
    background:rgba(40,40,40,0.28);
}

.square.drag-over{
    outline:3px solid rgba(77,124,255,0.85);
    outline-offset:-3px;
}

.piece.dragging{
    opacity:0.55;
}

.square.last-move{
    box-shadow: inset 0 0 0 9999px rgba(255,242,77,0.45);
}

.square.king-in-check{
    box-shadow:inset 0 0 0 9999px rgba(255,40,40,0.45);;
}

.piece{
    width:calc(var(--sq) - 10px);
    height:calc(var(--sq) - 10px);
    object-fit:contain;
    pointer-events:auto;
    user-select:none;
}

.panel{
    margin-top: 6px;
    background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
    border:1px solid #2a3342;
    border-radius:var(--radius);
    padding:12px;
    width:320px;
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
}

.square,
.piece{
    touch-action: none;
}

.touch-drag-ghost{
    position:fixed;
    width:calc(var(--sq) - 10px);
    height:calc(var(--sq) - 10px);
    object-fit:contain;
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:4700;
    opacity:0.95;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

#status{
    margin:0 10px;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.2px;
    text-align:center;
}

.status-row{
    position:relative;
    margin-bottom: 10px;
}

.mobile-back-btn{
    margin-top:2px;
    display:none;
    position:absolute;
    left:10%;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:24px;
    border-radius:8px;
    padding:0 0 6px 0;
    font-size:1.1rem;
    background:#ef4b2e;
    color:#fff;
    border:none;
}

.lobby-overlay{
    position:fixed;
    inset:0;
    background:#0f1217;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4000;
}
.lobby-overlay.hidden{display:none !important;}

.lobby-board{
    position:relative;
    width:calc(var(--sq) * 8 + var(--border) * 2);
    height:calc(var(--sq) * 8 + var(--border) * 2);
    max-width:94vw;
    max-height:94vh;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #33425a;
    box-shadow:0 20px 60px rgba(0,0,0,0.55), inset 0 0 80px rgba(0,0,0,0.35);
    background:linear-gradient(135deg,#111a28,#0e141f 55%,#111a28);
}

.lobby-bg-grid{
    position:absolute; inset:0;
    background:
      linear-gradient(45deg, rgba(238,238,210,0.08) 25%, transparent 25%, transparent 75%, rgba(238,238,210,0.08) 75%),
      linear-gradient(45deg, rgba(118,150,86,0.12) 25%, transparent 25%, transparent 75%, rgba(118,150,86,0.12) 75%);
    background-size:calc(var(--sq)*2) calc(var(--sq)*2);
    background-position:0 0, var(--sq) var(--sq);
    opacity:.9;
}

.lobby-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
    text-align:center;
    padding:20px;
    backdrop-filter:blur(1px);
}
.lobby-content h1{
    margin:0;
    letter-spacing:3px;
    font-size:clamp(26px,4.6vmin,48px);
    color:#f1f6ff;
    text-shadow:0 6px 24px rgba(0,0,0,0.5);
}
.lobby-content p{
    margin:8px 0 18px;
    color:#b9c6dc;
    font-size:clamp(13px,2vmin,18px);
}

.lobby-inputs{
    display:grid;
    gap:10px;
    width:min(430px,82%);
    margin-bottom:16px;
}

.app.hidden,
#promotionModal.hidden-force{
    display:none !important;
}


.start-btn{
    min-width:220px;
    padding:12px 18px;
    border-radius:12px;
    border:none;
    font-weight:800;
    letter-spacing:.5px;
    background:linear-gradient(180deg,#5c8dff,#3f6fe6);
    color:#fff;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(77,124,255,0.45);
}
.start-btn:hover{transform:translateY(-1px);}

.lobby-piece{
    position:absolute;
    z-index:2;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,0.45));
    opacity:.95;
    pointer-events:none;
}

.lp-wk{ width:130px; left:24px;  top:20px; transform:rotate(8deg); }
.lp-bq{ width:110px; left:140px; bottom:18px; transform:rotate(-8deg); }
.lp-bk{ width:130px; right:24px; bottom:20px; transform:rotate(-8deg); }
.lp-wq{ width:110px; right:140px; top:18px; transform:rotate(10deg); }
.lp-bp{ width:92px; right:40px; top:120px; transform:rotate(+10deg); }
.lp-wb{ width:88px; right:210px; bottom:120px; transform:rotate(8deg); }
.lp-wn{ width:92px; left:40px; bottom:130px; transform:rotate(10deg); }
.lp-br{ width:88px; left:220px; top:110px; transform:rotate(+8deg); }

@media (max-width:700px){
    .lobby-overlay{
        padding:14px;
    }

    .lobby-board{
        width:min(94vw,94dvh);
        height:min(94vw,94dvh);
        border-radius:14px;
    }

    .lobby-content{
        padding:16px;
    }

    .lobby-content h1{
        letter-spacing:1.8px;
        font-size:clamp(24px,6.4vw,34px);
    }

    .lobby-content p{
        margin:6px 0 14px;
        font-size:clamp(12px,3.2vw,15px);
    }

    .start-btn{
        min-width:0;
        width:min(240px,74vw);
        padding:11px 14px;
        font-size:.92rem;
    }

    .lobby-settings-btn{
        top:10px;
        right:10px;
        width:40px;
        height:40px;
    }

    .lobby-settings-btn img{
        width:20px;
        height:20px;
    }

    .lp-wk{ width:84px; left:10px; top:14px; }
    .lp-bk{ width:84px; right:10px; bottom:14px; }
    .lp-wq{ width:66px; right:86px; top:14px; }
    .lp-bq{ width:66px; left:86px; bottom:14px; }
    .lp-bp{ width:62px; right:14px; top:82px; }
    .lp-wb{ width:58px; right:130px; bottom:84px; }
    .lp-wn{ width:60px; left:14px; bottom:90px; }
    .lp-br{ width:58px; left:132px; top:80px; }

    .settings-box{
        width:min(430px,95vw);
        max-height:90vh;
    }

    .side-toggle[aria-label="Timer options"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.capture-box{
    background:#0f141c;
    border:1px solid #273141;
    border-radius:10px;
    padding:8px;
    margin-bottom:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.cap-title{
    font-size:12px;
    color:var(--muted);
    margin-bottom:0;
}

.cap-title span{
    margin-left:6px;
    font-weight:800;
    color:#9fe870;
}

.content-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.captured-row{
    min-height:50px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    align-items:center;
    flex:1;
    max-width:calc(100% - 70px);
}

.captured-piece{
    width:22px;
    height:22px;
    object-fit:contain;
}

.buttons{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
}

.buttons.timer-mode-on{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

button{
    border:none;
    padding:9px 8px;
    border-radius:9px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:.86rem;
    cursor:pointer;
    transition:.15s transform,0.2s opacity,0.2s background;
}

button:hover{
    opacity:.92;
}

button:active{
    transform:translateY(1px);
}

.icon-mobile{
    /* height: 20px; */
    display:none;
}

.icon-desktop,
.icon-mobile{
    line-height:1;
}

.moves{
    background:#0f141c;
    border:1px solid #273141;
    border-radius:10px;
    padding:8px;
    height:330px;
    overflow-y:auto;
    overflow-x:hidden;
    margin-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:#5f6876 transparent;
}

.mobile-moves-btn{
    display:none;
}

.moves::-webkit-scrollbar{
    width:6px;
}

.moves::-webkit-scrollbar-thumb{
    background:#5f6876;
    border-radius:999px;
}

.moves::-webkit-scrollbar-track{
    background:transparent;
}

.moves::-webkit-scrollbar-thumb:hover{
    background:#7b8596;
}

.move-row{
    display:grid;
    grid-template-columns:30px 1fr 1fr;
    gap:6px;
    padding:3px 0;
    border-bottom:1px dashed rgba(255,255,255,0.06);
    font-size:.92rem;
}

.move-row:last-child{
    border-bottom:none;
}

.move-piece-icon{
    width:16px;
    height:16px;
    object-fit:contain;
    vertical-align:middle;
}

.promotion-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
}

.promotion-modal.hidden{
    display:none;
}

.promotion-box{
    background:#fff;
    color:#111;
    border-radius:12px;
    padding:14px;
    min-width:260px;
}

.promotion-choices{
    margin-top:10px;
    display:flex;
    gap:10px;
}   

.promotion-btn{
    border:1px solid #d3d3d3;
    border-radius:10px;
    background:#f7f7f7;
    padding:6px;
    cursor:pointer;
}

.promotion-btn img{
    width:44px;
    height:44px;
    object-fit:contain;
}

.lobby-settings-btn{
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid #3a4d6b;
    background:rgba(18,26,40,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,0.35);
    padding:0;
}
.lobby-settings-btn img{
    width:22px;
    height:22px;
    object-fit:contain;
    pointer-events:none;
}
.lobby-settings-btn:hover{ opacity:.92; }


.settings-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4300;
    padding:12px;
}
.settings-box{
    width:min(420px,92vw);
    max-height:min(86vh,680px);
    background:#fff;
    color:#111;
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
    padding:10px;
    display:flex;
    flex-direction:column;
}
.settings-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.settings-head h3{
    margin:0;
}
.settings-close-btn{
    border:none;
    border-radius:8px;
    width:36px;
    height:36px;
    background:#ff0000;
    cursor:pointer;
    font-weight:700;
}
.settings-body{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    color:#6b7280;
    font-weight:600;
    overflow-y:auto;
    padding-right:4px;
}

.setting-group{
    width:100%;
    padding:8px;
    border:1px solid #e6ebf5;
    border-radius:10px;
    background:#f8faff;

}

.setting-label,
.settings-label{
    font-size:13px;
    font-weight:700;
    color:#334155;
    margin-bottom:6px;
}

.side-toggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.side-btn{
    padding:8px 10px;
    background:#edf2ff;
    color:#24324a;
    border:1px solid #c9d6f3;
    box-shadow:none;
}

.side-btn.active{
    background:linear-gradient(180deg,#5c8dff,#3f6fe6);
    color:#fff;
    border-color:#3f6fe6;
}

.setting-hint{
    margin:6px 0 0;
    font-size:11px;
    line-height:1.3;
    color:#6b7280;
    font-weight:500;
}

.settings-actions{
    margin-top:8px;
    display:flex;
    justify-content:flex-end;
    position:sticky;
    bottom:0;
    background:#fff;
    padding-top:6px;
}

.settings-save-btn{
    min-width:110px;
    background:linear-gradient(180deg,#74e93d,#00ff08);
}

.side-toggle[aria-label="Timer options"]{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-timer-wrap{
    margin-top:10px;
    display:grid;
    gap:6px;
}

.custom-timer-wrap input{
    padding:8px;
    border-radius:8px;
    border:1px solid #c9d6f3;
}

.clock-box{
    background:#0f141c;
    border:1px solid #273141;
    border-radius:10px;
    padding:8px 10px;
    font-weight:700;
    font-size:13px;
    white-space:nowrap;
    flex-shrink:0;
    display:none;
}

.clock-box.visible{
    display:block;
}

.clock-box.active{
    border-color:#74e93d;
    box-shadow:0 0 0 1px #74e93d inset;
}


.result-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.62);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4200;
}
.result-box{
    width:min(390px,92vw);
    background:#fff;
    color:#111;
    border-radius:14px;
    padding:16px;
    text-align:center;
}
.winner-king{
    width:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    gap:12px;
    margin:8px 0;
}
.winner-kings .winner-king{
    width:84px;
    height:84px;
    object-fit: contain;
    display: inline-block;
    margin:0 !important;
    flex:0 0 auto;
}
.result-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:10px;
}

@media (max-width:1200px) and (min-width:981px){
    html,
    body{
        height:auto;
        min-height:100vh;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:auto;
    }

    .app{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        margin:0 auto;
        gap:12px;
        height:auto;
        min-height:100vh;
        overflow:visible;
        padding-bottom:16px;
    }

    .panel{
        display:block;
        width:calc(var(--sq) * 8 + var(--border) * 2);
        max-width:100%;
    }

    .board{
        order:1;
    }

    .panel{
        order:2;
    }

    .status-row,
    .capture-box,
    .buttons,
    .mobile-moves-btn,
    .moves{
        width:100%;
        max-width:100%;
    }

    .status-row{
        display:block;
    }

    .status-row::after{
        display:none;
    }

    #status{
        grid-column:auto;
    }

    .mobile-back-btn,
    .mobile-moves-btn{
        display:none;
    }

    .moves{
        display:block;
        height:260px;
    }

    .icon-desktop{
        display:inline;
    }

    .icon-mobile{
        display:none;
    }

}

@media (max-width:980px){
    
    body.moves-popup-open::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:4550;
        background:rgba(6,10,18,0.35);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);   
    }

    html,
    body{
        height:100dvh;
        overflow:hidden;
        overscroll-behavior:none;
    }

    .status-row,
    .capture-box{
        margin-bottom: 0;
    }

    :root{
        --sq:min(12vmin,80px);
    }

    .app{
        grid-template-columns:1fr;
        justify-items:center;
        width:100%;
        margin:0 auto;
        padding:8px;
        height:100dvh;
        overflow:hidden;
    }

    .panel{
        width:min(560px,100%);
        display:contents;
    }

    #status{
        text-align:center;
        font-size:1rem;
        grid-column:2;
    }

    .status-row,
    .capture-box,
    .buttons,
    .mobile-moves-btn{
        width:calc(var(--sq) * 8 + var(--border) * 2);
        max-width:100%;
        justify-self:center;
    }

    .status-row{
        display:grid;
        grid-template-columns:34px 1fr 34px;
        align-items:center;
        /* gap:6px; */
    }

    .status-row::after{
        content:"";
        width:34px;
        height:20px;
        grid-column:3;
    }

    .mobile-back-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        position:static;
        transform:none;
        grid-column:1;
        background:#ef4b2e;
        color:#fff;
        border:none;
    }

    .mobile-moves-btn{
        display:block;
    }

    .moves{
        display:none;
        height:230px;
    }

    .moves.mobile-open{
        display:block;
        position:fixed;
        left:50%;
        transform:translateX(-50%);
        top:14vh;
        width:min(92vw,420px);
        height:min(60vh,420px);
        z-index:4600;
        margin:0;
        overflow-y:auto;
        overscroll-behavior:contain;
        box-shadow:0 18px 40px rgba(0,0,0,0.45);
        border:1px solid #3d4b63;
    }


    .mobile-moves-btn.active{
        position:fixed;
        left:50%;
        transform: translateX(-50%);
        top:calc(14vh + min(60vh,420px) + 10px);
        width:min(92vw,420px);
        z-index:4700;
        background: #ef4b2e;
        box-shadow:0 12px 24px rgba(0,0,0,0.38);
    }
    .captured-row{
        min-height:50px;
    }

    .icon-desktop{
        display:none;
    }

    .icon-mobile{
        display:inline;
    }
}

@media (max-width:980px) and (min-width:701px){
    html,
    body{
        height:auto;
        min-height:100vh;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:auto;
    }

    .app{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;
        height:auto;
        min-height:100vh;
        overflow:visible;
        padding-bottom:16px;
    }

    .board{
        order:1;
    }

    .panel{
        order:2;
        display:block;
        width:calc(var(--sq) * 8 + var(--border) * 2);
        max-width:100%;
    }

    .status-row,
    .capture-box,
    .buttons,
    .mobile-moves-btn,
    .moves{
        width:100%;
        max-width:100%;
    }

    .status-row{
        display:block;
    }

    .status-row::after{
        display:none;
    }

    #status{
        grid-column:auto;
    }

    .mobile-back-btn,
    .mobile-moves-btn{
        display:none;
    }

    .moves{
        display:block;
        height:260px;
    }

    .icon-desktop{
        display:inline;
    }

    .icon-mobile{
        display:none;
    }
}

@media(max-width:480px){
    :root{
        --sq:min(11.8vmin,52px);
    }

    .lobby-overlay{
        padding:10px;
    }

    .lobby-board{
        width:min(96vw,92dvh);
        height:min(96vw,92dvh);
    }

    .lobby-content{
        padding:14px;
    }

    .lobby-content h1{
        font-size:clamp(20px,7.8vw,28px);
        letter-spacing:1.1px;
    }

    .lobby-content p{
        margin:6px 0 12px;
        font-size:clamp(11px,3.5vw,14px);
    }

    .start-btn{
        width:min(220px,78vw);
        font-size:.85rem;
        padding:10px 12px;
    }

    .lobby-settings-btn{
        top:8px;
        right:8px;
        width:36px;
        height:36px;
    }

    .lobby-settings-btn img{
        width:18px;
        height:18px;
    }

    .lp-wk{ width:70px; left:6px; top:12px; }
    .lp-bk{ width:70px; right:6px; bottom:12px; }
    .lp-wq{ width:56px; right:68px; top:10px; }
    .lp-bq{ width:56px; left:68px; bottom:10px; }
    .lp-bp{ width:52px; right:8px; top:72px; }
    .lp-wb{ width:48px; right:102px; bottom:74px; }
    .lp-wn{ width:50px; left:10px; bottom:76px; }
    .lp-br{ width:48px; left:104px; top:72px; }

    button{
        font-size:1rem;
        padding:8px 6px;
    }

    .moves{
        height:200px;
    }
}